# Next.js AI Chatbot — Vercel Reference App Template

> Production-ready AI chatbot template by Vercel using Next.js, AI SDK, shadcn/ui, and Auth.js. Supports Claude, GPT-4, and Gemini. Streaming, tool use, file uploads, and conversation history. 8,000+ stars.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npx create-next-app --example https://github.com/vercel/ai-chatbot my-chatbot
cd my-chatbot
cp .env.example .env.local
# Add your ANTHROPIC_API_KEY or OPENAI_API_KEY
npm run dev
```

Open `http://localhost:3000` — a fully functional AI chatbot is running.

---

## Intro

Next.js AI Chatbot is Vercel's official reference application for building production AI chatbots with 8,000+ GitHub stars. Built with Next.js App Router, Vercel AI SDK, shadcn/ui, and Auth.js, it includes streaming responses, tool use, file uploads, conversation history with PostgreSQL, and multi-model support (Claude, GPT-4, Gemini). This is the exact template Vercel uses internally and recommends for production deployments. Best for developers who want a battle-tested starting point for AI chat applications. Works with: Claude, GPT-4, Gemini. Setup time: under 5 minutes.

---

## What You Get

### Full-Stack Features
- Streaming chat with real-time token display
- Multi-model switching (Claude, GPT-4, Gemini)
- Conversation history saved to PostgreSQL
- User authentication (Auth.js with GitHub/Google)
- File upload and processing
- Tool use (web search, code execution)
- Mobile-responsive UI with dark mode

### Tech Stack
| Layer | Technology |
|-------|-----------|
| Framework | Next.js 14 (App Router) |
| AI | Vercel AI SDK |
| UI | shadcn/ui + Tailwind CSS |
| Auth | Auth.js (NextAuth v5) |
| Database | PostgreSQL (Drizzle ORM) |
| Hosting | Vercel (one-click deploy) |

### Vercel AI SDK Integration

```typescript
import { streamText } from "ai";
import { anthropic } from "@ai-sdk/anthropic";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: anthropic("claude-sonnet-4-20250514"),
    messages,
    tools: {
      getWeather: {
        description: "Get weather for a location",
        parameters: z.object({ city: z.string() }),
        execute: async ({ city }) => getWeather(city),
      },
    },
  });

  return result.toDataStreamResponse();
}
```

### One-Click Deploy

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/ai-chatbot)

### Customization Points

```
app/
├── (chat)/           # Chat pages
│   ├── page.tsx      # Main chat interface
│   └── layout.tsx    # Chat layout with sidebar
├── api/chat/         # AI API routes
│   └── route.ts      # Streaming endpoint
├── components/       # UI components
│   ├── chat.tsx      # Chat container
│   ├── message.tsx   # Message bubble
│   └── toolbar.tsx   # Input toolbar
└── lib/
    ├── ai/           # Model configuration
    └── db/           # Database schema
```

### Key Stats
- 8,000+ GitHub stars
- Official Vercel reference app
- Streaming + tool use + file upload
- Auth + conversation history
- One-click Vercel deploy

### FAQ

**Q: What is Next.js AI Chatbot?**
A: Vercel's official production-ready template for AI chatbots, built with Next.js, AI SDK, shadcn/ui, and PostgreSQL — including streaming, auth, and conversation history.

**Q: Is it free?**
A: Yes, open-source under MIT. Hosting on Vercel free tier works for personal use.

**Q: Can I change the AI model?**
A: Yes, swap `anthropic(...)` for `openai(...)` or `google(...)` — one line change.

---

## Source & Thanks

> Created by [Vercel](https://github.com/vercel). Licensed under MIT.
>
> [ai-chatbot](https://github.com/vercel/ai-chatbot) — ⭐ 8,000+

Thanks to Vercel for the definitive AI chatbot starting point.

---

<!-- ZH -->

## 快速使用

```bash
npx create-next-app --example https://github.com/vercel/ai-chatbot my-chatbot
cd my-chatbot && cp .env.example .env.local
# 添加 ANTHROPIC_API_KEY
npm run dev
```

---

## 简介

Next.js AI Chatbot 是 Vercel 官方 AI 聊天机器人参考应用，GitHub 8,000+ stars。包含流式响应、工具使用、文件上传、会话历史和用户认证。基于 Next.js、AI SDK、shadcn/ui 和 PostgreSQL。适合需要生产级 AI 聊天应用起点的开发者。

---

## 来源与感谢

> Created by [Vercel](https://github.com/vercel). Licensed under MIT.
>
> [ai-chatbot](https://github.com/vercel/ai-chatbot) — ⭐ 8,000+

---
Source: https://tokrepo.com/en/workflows/7fb3fe60-3c3e-4787-afd2-02f775ec0718
Author: Skill Factory