Next.js AI Chatbot — Vercel Reference App Template

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

Vercel AI SDK Integration

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

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.