Skip to main content

Build Powerful AI Chatbots with Next.js

A full-featured, hackable template built with Next.js and the AI SDK. Get streaming responses, document artifacts, and multi-provider AI support out of the box.

Get StartedExplore Features

User

Create a document about AI

Assistant

I’ll create a document for you…

Quick Start

Get your AI chatbot running in minutes

1

Clone the repository

Clone the Vercel AI Chatbot repository to your local machine:
git clone https://github.com/vercel/openchat.git
cd openchat
2

Install dependencies

Install the required packages using pnpm:
pnpm install
You can also use npm or yarn, but pnpm is recommended for better performance.
3

Set up environment variables

Copy the example environment file and configure your credentials:
cp .env.example .env.local
Add your API keys and database credentials to .env.local:
AUTH_SECRET=your-secret
AI_GATEWAY_API_KEY=your-ai-gateway-key
POSTGRES_URL=your-database-url
BLOB_READ_WRITE_TOKEN=your-blob-token
4

Set up the database

Run the database migration to create the necessary tables:
pnpm db:migrate
5

Start the development server

Launch the development server:
pnpm dev
Your chatbot will be available at http://localhost:3000.

Key Features

Everything you need to build production-ready AI chatbots

Streaming Responses

Real-time streaming of AI responses with the Vercel AI SDK for a smooth user experience

Document Artifacts

Create and edit code, text, images, and spreadsheets directly within the chat interface

Multi-Provider Support

Support for OpenAI, Anthropic, Google, and xAI models through Vercel AI Gateway

Authentication

Secure user authentication with Auth.js supporting multiple providers

Persistent Storage

Save chat history and user data with PostgreSQL and file uploads with Vercel Blob

Extensible Tools

Add custom AI tools for weather, document creation, and more

Explore by Topic

Deep dive into specific areas

Deployment

Deploy your chatbot to Vercel with one-click deployment or custom hosting

Learn more

Customization

Customize themes, add AI tools, and integrate custom models to match your needs

Learn more

API Reference

Explore the complete API documentation for routes, database schemas, and types

Learn more

Advanced Guides

Learn about AI tools, streaming, rate limiting, and migration strategies

Learn more

Built With Modern Technologies

⚡

Next.js

App Router

🤖

Vercel AI SDK

AI Gateway

🎨

shadcn/ui

Components

🗄️

PostgreSQL

Database

Ready to Build?

Start building your AI chatbot today with our comprehensive template and documentation

Get Started NowView on GitHub

Build docs developers (and LLMs) love

Get started for freeTalk to us