free-nextjs-ai-agent-boilerplate — Next.js SaaS模板

SHA-256: 4474b80f8d7f5ab62597a64f797ed36777dcd99cc969c5a4a1646ee3dc0b91e0

2026-10-14T22:25:12.837Z

# Free Next.js AI Agent Boilerplate

A clean, production-grade **AI chat UI** built with **Next.js 16 (App Router)**, **Tailwind CSS v4**, **TypeScript** and the **Vercel AI SDK v5**. Token streaming, stop button, provider switching — no bloat, no vendor lock-in.

> ### 🚀 Need Auth, Database and Payments too?
> Don't waste 2 weeks wiring Supabase, Stripe/Polar and a dashboard from scratch.
> **[Get the full commercial-ready boilerplate at agentshipkit.com →](https://agentshipkit.com)**

![License](https://img.shields.io/badge/license-MIT-green) ![Next.js](https://img.shields.io/badge/Next.js-16-black) ![AI SDK](https://img.shields.io/badge/AI%20SDK-v5-blue)

---

## What's inside

| | |
|---|---|
| 💬 **Streaming chat UI** | Real token-by-token streaming with a working stop button |
| 🔌 **Provider-agnostic** | Anthropic, OpenAI or Google — swap with one env var, not a refactor |
| 🎨 **Tailwind v4** | Dark, modern, responsive. No component library to fight |
| 🧠 **AI SDK v5** | `useChat` + `streamText`, the current API — not a stale v3 tutorial |
| 📦 **Zero backend** | One route handler. Deploy to Vercel in a click |
| 🔒 **Keys stay server-side** | The API key never reaches the browser |

## Quick start

```bash
git clone https://github.com/emrahsinekli/free-nextjs-ai-agent-boilerplate.git
cd free-nextjs-ai-agent-boilerplate
npm install
cp .env.example .env.local
```

Open `.env.local` and set **one** provider:

```bash
AI_PROVIDER=anthropic          # anthropic | openai | google
ANTHROPIC_API_KEY=sk-ant-...
ANTHROPIC_MODEL=claude-sonnet-5
```

Then:

```bash
npm run dev
```

Open <http://localhost:3000>. That's it — you have a streaming AI chat app.

### Get an API key

| Provider | Where | Env var |
|---|---|---|
| Anthropic | [console.anthropic.com](https://console.anthropic.com/settings/keys) | `ANTHROPIC_API_KEY` |
| OpenAI | [platform.openai.com](https://platform.openai.com/api-keys) | `OPENAI_API_KEY` |
| Google | [aistudio.google.com](https://aistudio.google.com/app/apikey) | `GOOGLE_GENERATIVE_AI_API_KEY` |

## Project structure

```
src/
├── app/
│   ├── api/chat/route.ts    # Streaming endpoint (POST)
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css          # Tailwind v4 theme tokens
├── components/
│   └── chat.tsx             # The whole chat UI, one file, readable
└── lib/
    └── model.ts             # Provider switch — the only place models are named
```

## Customising

**Change the system prompt** — `src/lib/model.ts`:

```ts
export const SYSTEM_PROMPT = "You are a sarcastic pirate. Answer in one sentence.";
```

**Change the colours** — `src/app/globals.css`. The whole theme is six OKLCH tokens.

**Add tools (function calling)** — `src/app/api/chat/route.ts`:

```ts
import { tool } from "ai";
import { z } from "zod";

const result = streamText({
  model: getModel(),
  system: SYSTEM_PROMPT,
  messages: convertToModelMessages(messages),
  tools: {
    weather: tool({
      description: "Get the weather for a city",
      inputSchema: z.object({ city: z.string() }),
      execute: async ({ city }) => ({ city, tempC: 21 }),
    }),
  },
});
```

## Deploy

Push to GitHub, import the repo on [Vercel](https://vercel.com/new), and add your `AI_PROVIDER` + API key as environment variables. Done.

## FAQ

**Is this really free?** Yes. MIT licensed. Use it commercially, no attribution required.

**Why is there no auth or database?** Because that's the hard part, and it's the [premium kit](https://agentshipkit.com). This repo is the honest, useful free half.

**Does it work with local models (Ollama, LM Studio)?** Add `@ai-sdk/openai-compatible` and point it at your local endpoint in `src/lib/model.ts`.

---

## 🚀 Ship the whole SaaS, not just the chat box

This repo gives you the UI. **[AgentShipKit](https://agentshipkit.com)** gives you the business:

- ✅ **Supabase Auth** — Google login, sessions, RLS policies, ready
- ✅ **Polar / Stripe payments** — checkout + webhooks + entitlement, wired
- ✅ **Multi-agent dashboard** — agent runs, tool traces, streaming logs
- ✅ **Agent engine** — tool-calling loop, multi-step orchestration
- ✅ **SEO-ready landing page** — metadata, sitemap, JSON-LD
- ✅ **Lifetime updates** — one payment, forever

### [→ Download the Premium Agent Kit at agentshipkit.com](https://agentshipkit.com)

---

MIT © AgentShipKit

<sub>Keywords: nextjs ai agent template · ai agent boilerplate · ai agent starter kit · nextjs chatgpt clone · vercel ai sdk template · react ai chat ui · typescript llm starter</sub>