SkillsApr 6, 2026·2 min read

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.

Vercel
Vercel · Community
Agent ready

Safe staging for this asset

This asset is staged first. The copied prompt tells the agent to inspect the staged files and ask before activating scripts, MCP config, or global config.

Stage only · 29/100Policy: stage
Agent surface
Any MCP/CLI agent
Kind
Skill
Install
Stage only
Trust
Trust: Community
Entrypoint
Next.js AI Chatbot — Vercel Reference App Template
Safe staging command
npx -y tokrepo@latest install 7fb3fe60-3c3e-4787-afd2-02f775ec0718 --target codex

Stages files first; activation requires review of the staged README and plan.

TL;DR
Vercel's official AI chatbot template with Next.js App Router, AI SDK, streaming, multi-model support, and conversation persistence.
§01

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.

§02

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.

§03

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.
§04

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
§05

Related on TokRepo

§06

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.

Frequently Asked Questions

Which AI models does the Next.js AI Chatbot support?+

The template supports Claude (Anthropic), GPT-4 (OpenAI), and Gemini (Google) through the Vercel AI SDK. You can switch between models by changing the provider configuration. The SDK abstracts provider differences so your UI code stays the same.

Does the template include authentication?+

Yes. The template uses Auth.js (formerly NextAuth.js) with GitHub and Google OAuth providers pre-configured. Each user gets their own conversation history. You can add additional OAuth providers by extending the Auth.js configuration.

How is conversation history stored?+

Conversations are stored in PostgreSQL via Drizzle ORM. Each message includes the role (user or assistant), content, and metadata like token usage. The schema supports multiple conversations per user with full chat history.

Can I deploy this to platforms other than Vercel?+

Yes. The template is a standard Next.js application that runs anywhere Next.js runs: AWS, Docker, Railway, or any Node.js host. Vercel deployment is the simplest path but not required. You need a PostgreSQL database regardless of hosting.

How does streaming work in this template?+

The template uses Server-Sent Events (SSE) via the Vercel AI SDK. The API route streams tokens from the LLM provider to the client as they are generated. The React frontend renders tokens incrementally, giving users immediate feedback.

Citations (3)
Related on TokRepo
AI coding toolsPrompt libraryFeatured workflows
🙏

Source & Thanks

Created by Vercel. Licensed under MIT.

ai-chatbot — ⭐ 8,000+

Thanks to Vercel for the definitive AI chatbot starting point.

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Create T3 App — Full-Stack Typesafe Next.js Starter

Create T3 App is the fastest way to scaffold a full-stack, typesafe Next.js application using the T3 Stack: Next.js, TypeScript, tRPC, Prisma, Tailwind CSS, and NextAuth.js.

Skills
AI Open Source

v0 by Vercel — AI UI Component Generator

AI-powered tool that generates production-ready React and Next.js UI components from text descriptions. Uses shadcn/ui and Tailwind CSS. Copy-paste or install via CLI. 8,000+ stars.

Skills
Vercel

Payload CMS — Open Source Fullstack Next.js Headless CMS

Payload is the open-source headless CMS and app framework built on Next.js. TypeScript-first, code-configured, with instant admin panel, auth, and file uploads.

Skills
Script Depot

Next.js — The Full-Stack React Framework for the Web

Next.js is the most popular React framework for building full-stack web applications. It provides server-side rendering, static generation, API routes, file-based routing, and React Server Components — making React production-ready out of the box.

Skills
AI Open Source
◈Home🔍Search👤Me