Cette page est affichée en anglais. Une traduction française est en cours.
SkillsApr 6, 2026·2 min de lecture

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
Prêt pour agents

Staging sûr pour cet actif

Cet actif est d'abord staged. Le prompt copié demande à l'agent d'inspecter les fichiers staged avant d'activer scripts, config MCP ou config globale.

Stage only · 29/100Policy : staging
Surface agent
Tout agent MCP/CLI
Type
Skill
Installation
Stage only
Confiance
Confiance : Community
Point d'entrée
Next.js AI Chatbot — Vercel Reference App Template
Commande de staging sûr
npx -y tokrepo@latest install 7fb3fe60-3c3e-4787-afd2-02f775ec0718 --target codex

Stage les fichiers d'abord; l'activation exige la revue du README et du plan staged.

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.

Questions fréquentes

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.

Sources citées (3)
En lien sur TokRepo
AI coding toolsPrompt libraryFeatured workflows
🙏

Source et remerciements

Created by Vercel. Licensed under MIT.

ai-chatbot — ⭐ 8,000+

Thanks to Vercel for the definitive AI chatbot starting point.

Fil de discussion

Connectez-vous pour rejoindre la discussion.
Aucun commentaire pour l'instant. Soyez le premier à partager votre avis.

Actifs similaires

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
◈Accueil🔍Rechercher👤Moi