Next.js AI Chatbot — Vercel Reference App Template

What it is

Next.js AI Chatbot is Vercel's official reference application for building production AI chatbots. It ships with Next.js App Router, Vercel AI SDK, shadcn/ui components, and Auth.js authentication. The template supports Claude, GPT-4, and Gemini out of the box with streaming responses, tool use, file uploads, and conversation history stored in PostgreSQL.

This template targets developers who need a battle-tested starting point for AI chat applications rather than building from scratch. Setup takes under five minutes with npx create-next-app.

How it saves time or tokens

The template eliminates weeks of boilerplate work: streaming SSE setup, conversation persistence, authentication flows, and responsive UI are all pre-built. The Vercel AI SDK handles provider abstraction so switching between Claude, GPT-4, and Gemini requires changing one environment variable. Token usage is managed through the SDK's built-in streaming pipeline, which sends tokens to the client as they arrive rather than waiting for full completion.

How to use

1. Run npx create-next-app --example https://github.com/vercel/ai-chatbot my-chatbot to scaffold the project.
2. Copy .env.example to .env.local and add your API key (ANTHROPIC_API_KEY or OPENAI_API_KEY).
3. Run npm run dev and open http://localhost:3000 to start chatting.

Example

# Scaffold the project
npx create-next-app --example https://github.com/vercel/ai-chatbot my-chatbot
cd my-chatbot

# Configure environment
cp .env.example .env.local
# Edit .env.local: add ANTHROPIC_API_KEY=sk-ant-...

# Start development server
npm run dev
# Open http://localhost:3000

Related on TokRepo

• AI tools for coding -- more AI-powered development templates and tools
• Prompt library -- reusable prompts for chatbot system instructions

Common pitfalls

• Forgetting to set up the PostgreSQL database for conversation history causes the app to crash on first message send.
• The default model configuration uses GPT-4o; switch to Claude by updating the model provider in the route handler.
• Auth.js session cookies require HTTPS in production; local development works on HTTP but deployed apps need proper SSL.