---
title: "Chatbot"
description: "A full-featured, hackable Next.js AI chatbot built by Vercel"
url: "https://vercel.com/templates/next.js/chatbot"
links:
  repository: "https://github.com/vercel/chatbot"
  demo: "https://chatbot.ai-sdk.dev/demo"
  deploy: "https://vercel.com/new/clone?demo-title=Chatbot&demo-description=A+full-featured%2C+hackable+Next.js+AI+chatbot+built+by+Vercel&demo-url=https%3A%2F%2Fchatbot.ai-sdk.dev%2Fdemo&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F4cmiDM859wtut7XeG0iFYq%2F953f071e4556b8a07bcab042f3a08db3%2FUntitled_design__17_.png&project-name=Chatbot&repository-name=chatbot&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fchatbot&from=templates&skippable-integrations=1&env=AUTH_SECRET&envDescription=Set+a+random+secret+to+use+for+authentication.&products=%5B%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22storage%22%2C%22productSlug%22%3A%22neon%22%2C%22integrationSlug%22%3A%22neon%22%7D%2C%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22storage%22%2C%22productSlug%22%3A%22upstash-kv%22%2C%22integrationSlug%22%3A%22upstash%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D"
---

# Chatbot

A full-featured, hackable Next.js AI chatbot built by Vercel

# Chatbot

Chatbot (formerly AI Chatbot) is a free, open-source template built with Next.js and the AI SDK that helps you quickly build powerful chatbot applications.

<p align="center">
  <a href="https://chatbot.ai-sdk.dev/docs"><strong>Read Docs</strong></a> ·
  <a href="#features"><strong>Features</strong></a> ·
  <a href="#model-providers"><strong>Model Providers</strong></a> ·
  <a href="#deploy-your-own"><strong>Deploy Your Own</strong></a> ·
  <a href="#running-locally"><strong>Running locally</strong></a>
</p>
<br/>

## Features

- [Next.js](https://nextjs.org) App Router
  - Advanced routing for seamless navigation and performance
  - React Server Components (RSCs) and Server Actions for server-side rendering and increased performance
- [AI SDK](https://ai-sdk.dev/docs/introduction)
  - Unified API for generating text, structured objects, and tool calls with LLMs
  - Hooks for building dynamic chat and generative user interfaces
  - Supports OpenAI, Anthropic, Google, xAI, and other model providers via AI Gateway
- [shadcn/ui](https://ui.shadcn.com)
  - Styling with [Tailwind CSS](https://tailwindcss.com)
  - Component primitives from [Radix UI](https://radix-ui.com) for accessibility and flexibility
- Data Persistence
  - [Neon Serverless Postgres](https://vercel.com/marketplace/neon) for saving chat history and user data
  - [Vercel Blob](https://vercel.com/storage/blob) for efficient file storage
- [Auth.js](https://authjs.dev)
  - Simple and secure authentication

## Model Providers

This template uses the [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) to access multiple AI models through a unified interface. Models are configured in `lib/ai/models.ts` with per-model provider routing. Included models: Mistral, Moonshot, DeepSeek, OpenAI, and xAI.

### AI Gateway Authentication

**For Vercel deployments**: Authentication is handled automatically via OIDC tokens.

**For non-Vercel deployments**: You need to provide an AI Gateway API key by setting the `AI_GATEWAY_API_KEY` environment variable in your `.env.local` file.

With the [AI SDK](https://ai-sdk.dev/docs/introduction), you can also switch to direct LLM providers like [OpenAI](https://openai.com), [Anthropic](https://anthropic.com), [Cohere](https://cohere.com/), and [many more](https://ai-sdk.dev/providers/ai-sdk-providers) with just a few lines of code.

## Deploy Your Own

You can deploy your own version of Chatbot to Vercel with one click:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/templates/next.js/chatbot)

## Running locally

You will need to use the environment variables [defined in `.env.example`](https://github.com/vercel/chatbot/tree/main/.env.example) to run Chatbot. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/projects/environment-variables) for this, but a `.env` file is all that is necessary.

> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control access to your various AI and authentication provider accounts.

1. Install Vercel CLI: `npm i -g vercel`
2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
3. Download your environment variables: `vercel env pull`

```bash
pnpm install
pnpm db:migrate # Setup database or apply latest database changes
pnpm dev
```

Your app template should now be running on [localhost:3000](http://localhost:3000).

## Related Templates

### [Nuxt AI Chatbot](https://vercel.com/templates/nuxt/nuxt-ai-chatbot)

An AI chatbot template to build your own chatbot powered by Nuxt MDC and Vercel AI SDK.

### [ChatGPT Plugin Starter: WeatherGPT](https://vercel.com/templates/next.js/weathergpt)

The ultimate ChatGPT Plugin starter template. WeatherGPT is a ChatGPT Plugin to get the weather of any given location.

### [Chatbot UI](https://vercel.com/templates/next.js/chatbot-ui)

A ChatGPT clone for running locally in your browser.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.