39:I[939773,["/vc-ap-vercel-templates/_next/static/immutable/chunks/2v4s4eubso6ie.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/05p05zti_rn-6.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/03ei7k4u833lh.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2-c9-j3hbb6_5.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0ny310d9fke7v.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0zfr81hirqwyt.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2qnrr29u25u5t.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1icgfdp-j4khl.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3702j97f9tiud.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1d1c70gp_t7ak.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0cxf4qpb5soyw.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/15kid0fc4rbwi.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1w1qp7xynodi1.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0wjhue0-vo4p0.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1g66byldwxk9w.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3xtdbyzvu_spv.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1tpfwo4utcu8-.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2al5u4gvohhh-.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2pl22y-arv8ha.js"],"TrackedSuspenseFallbackMarker"] 3a:I[57106,["/vc-ap-vercel-templates/_next/static/immutable/chunks/2v4s4eubso6ie.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/05p05zti_rn-6.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/03ei7k4u833lh.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2-c9-j3hbb6_5.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0ny310d9fke7v.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0zfr81hirqwyt.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2qnrr29u25u5t.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1icgfdp-j4khl.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3702j97f9tiud.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1d1c70gp_t7ak.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0cxf4qpb5soyw.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/15kid0fc4rbwi.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1w1qp7xynodi1.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0wjhue0-vo4p0.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1g66byldwxk9w.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3xtdbyzvu_spv.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1tpfwo4utcu8-.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2al5u4gvohhh-.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2pl22y-arv8ha.js"],"ButtonLink"] 3b:I[939773,["/vc-ap-vercel-templates/_next/static/immutable/chunks/2v4s4eubso6ie.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/05p05zti_rn-6.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/03ei7k4u833lh.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2-c9-j3hbb6_5.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0ny310d9fke7v.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0zfr81hirqwyt.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2qnrr29u25u5t.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1icgfdp-j4khl.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3702j97f9tiud.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1d1c70gp_t7ak.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0cxf4qpb5soyw.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/15kid0fc4rbwi.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1w1qp7xynodi1.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0wjhue0-vo4p0.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1g66byldwxk9w.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3xtdbyzvu_spv.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1tpfwo4utcu8-.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2al5u4gvohhh-.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2pl22y-arv8ha.js"],"TrackedSuspenseContentMarker"] 3c:I[382422,["/vc-ap-vercel-templates/_next/static/immutable/chunks/2v4s4eubso6ie.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/05p05zti_rn-6.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/03ei7k4u833lh.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2-c9-j3hbb6_5.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0ny310d9fke7v.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0zfr81hirqwyt.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2qnrr29u25u5t.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1icgfdp-j4khl.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3702j97f9tiud.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1d1c70gp_t7ak.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0cxf4qpb5soyw.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/15kid0fc4rbwi.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1w1qp7xynodi1.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0wjhue0-vo4p0.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1g66byldwxk9w.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3xtdbyzvu_spv.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1tpfwo4utcu8-.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2al5u4gvohhh-.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2pl22y-arv8ha.js"],"TemplateDetailsHeroButtonsClient"] 3d:Td58,# 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.

Read Docs · Features · Model Providers · Deploy Your Own · Running locally

## 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`](.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). 30:["$","$11",null,{"fallback":["$","$L39",null,{"boundaryId":"suspense-template-details-hero-buttons","name":"template-details-hero-buttons","hasExplicitName":true,"children":[["$","span",null,{"className":"rounded-[5px] after:animate-loading-skeleton block relative overflow-hidden invisible after:content-[\"\"] after:absolute after:inset-0 after:right-[-200%] after:bg-gradient-to-r after:from-[var(--ds-gray-100)] after:via-[var(--ds-gray-200)] after:to-[var(--ds-gray-100)] after:bg-[length:50%_100%] after:bg-[position:0_0] after:visible","data-geist-skeleton":"","data-testid":"legacy/skeleton","data-version":"v1","children":["$","$L3a",null,{"href":"#","children":"Deploy"}]}],["$","span",null,{"className":"rounded-[5px] after:animate-loading-skeleton block relative overflow-hidden invisible after:content-[\"\"] after:absolute after:inset-0 after:right-[-200%] after:bg-gradient-to-r after:from-[var(--ds-gray-100)] after:via-[var(--ds-gray-200)] after:to-[var(--ds-gray-100)] after:bg-[length:50%_100%] after:bg-[position:0_0] after:visible","data-geist-skeleton":"","data-testid":"legacy/skeleton","data-version":"v1","children":["$","$L3a",null,{"href":"#","children":"View Demo"}]}]]}],"children":["$","$L3b",null,{"boundaryId":"suspense-template-details-hero-buttons","name":"template-details-hero-buttons","hasExplicitName":true,"children":["$","$L3c",null,{"fields":{"name":"Morphic: AI-powered answer engine","slug":"morphic-ai-answer-engine-generative-ui","order":10,"publisher":"Yoshiki Miura","thumbnail":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"4bu9bW4KbJbngc4H0rPV4Q","type":"Asset","createdAt":"2024-04-09T01:20:05.832Z","updatedAt":"2024-04-09T01:22:38.174Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":7,"revision":2,"locale":"en-US"},"fields":{"title":"Morphic","description":"","file":{"url":"//images.ctfassets.net/e5382hct74si/4bu9bW4KbJbngc4H0rPV4Q/3c062ebb49d1e1bbc3115f6071f5d901/CleanShot_2024-04-08_at_20.22.17_2x.png","details":{"size":351350,"image":{"width":1910,"height":1166}},"fileName":"CleanShot 2024-04-08 at 20.22.17@2x.png","contentType":"image/png"}}},"description":"AI answer engine with Generative UI.","framework":["Next.js"],"type":["AI"],"css":["Tailwind"],"relatedTemplates":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"67DEZZdaMTokcWv3a7ZfAp","type":"Entry","createdAt":"2024-03-27T19:48:24.958Z","updatedAt":"2024-03-27T19:48:24.958Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":93,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"templates"}},"locale":"en-US"},"fields":{"name":"Upstash Vector + Vercel AI SDK Starter","slug":"upstash-vector-vercel-ai-sdk-starter","publisher":"Upstash","thumbnail":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"1V2VN1pDmuOnCFcpKLlrFX","type":"Asset","createdAt":"2024-03-27T19:48:09.229Z","updatedAt":"2024-03-27T19:48:09.229Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"locale":"en-US"},"fields":{"title":"DegreeGuru: A RAG Chatbot Built with Vercel AI SDK + Upstash Vector","description":"DegreeGuru is a RAG chatbot for expert answers on university degrees. Built with Vercel AI SDK and Upstash Vector.","file":{"url":"//images.ctfassets.net/e5382hct74si/1V2VN1pDmuOnCFcpKLlrFX/b00dcec86a22598023c8177dc54e652f/degreeguru-rag-chatbot-vercel-upstash.png","details":{"size":186013,"image":{"width":2400,"height":1256}},"fileName":"degreeguru-rag-chatbot-vercel-upstash.png","contentType":"image/png"}}},"description":"A RAG chatbot starter for expert answers on university degrees. Built using Vercel AI SDK, LangChain, Upstash Vector, and OpenAI.","metaTitle":"Upstash Vector + Vercel AI SDK Starter","framework":["Next.js"],"type":["AI"],"css":["Tailwind"],"database":["Upstash"],"relatedTemplates":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"472Bf8ZS7aHlq4V8F1kDZg","type":"Entry","createdAt":"2023-06-16T22:16:25.441Z","updatedAt":"2026-06-28T19:53:27.138Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":106,"revision":32,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"templates"}},"locale":"en-US"},"fields":{"hasBeenReviewed":true,"name":"Chatbot","description":"A full-featured, hackable Next.js AI chatbot built by Vercel","slug":"chatbot","order":3,"githubUrl":"https://github.com/vercel/chatbot","overview":"$3d","demoUrl":"https://chatbot.ai-sdk.dev/demo","publisher":"▲ Vercel","thumbnail":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"4cmiDM859wtut7XeG0iFYq","type":"Asset","createdAt":"2024-11-04T21:07:45.147Z","updatedAt":"2024-11-04T21:15:38.477Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":9,"revision":2,"locale":"en-US"},"fields":{"title":"ai-chatbot-3-0","description":"","file":{"url":"//images.ctfassets.net/e5382hct74si/4cmiDM859wtut7XeG0iFYq/953f071e4556b8a07bcab042f3a08db3/Untitled_design__17_.png","details":{"size":102671,"image":{"width":1200,"height":630}},"fileName":"Untitled design (17).png","contentType":"image/png"}}},"metaTitle":"Next.js AI Chatbot Templates & Starters","framework":["Next.js"],"type":["AI","Authentication"],"css":["Tailwind"],"database":["Vercel Blob","Postgres"],"auth":["NextAuth.js"],"relatedTemplates":[{"sys":{"type":"Link","linkType":"Entry","id":"5uVM4gkE0VYmNdUOYHiLEe"}},{"sys":{"type":"Link","linkType":"Entry","id":"6EdUIxQhnDggm8XSKcDzy6"}},{"sys":{"type":"Link","linkType":"Entry","id":"25lExhOPDFoDXUJtlpTUHi"}}],"integrationsOptional":true,"requiredEnvs":["AUTH_SECRET"],"requiredEnvsDescription":"Set a random secret to use for authentication.","products":[{"type":"integration","protocol":"storage","productSlug":"neon","integrationSlug":"neon"},{"type":"integration","protocol":"storage","productSlug":"upstash-kv","integrationSlug":"upstash"},{"type":"blob"}]}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"iwFT8yMri2ZlxxGAvnsmp","type":"Entry","createdAt":"2023-11-14T02:46:47.886Z","updatedAt":"2024-06-07T21:03:15.135Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":37,"revision":5,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"templates"}},"locale":"en-US"},"fields":{"name":"RAGBot Starter — An Astra DB and OpenAI chatbot","slug":"ragbot-starter","publisher":"DataStax","thumbnail":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"41CTDhgzlYylfnTwehOHSA","type":"Asset","createdAt":"2023-11-14T01:36:42.059Z","updatedAt":"2024-06-07T21:03:12.451Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":16,"revision":4,"locale":"en-US"},"fields":{"title":"RAGBot Starter screenshot","description":"","file":{"url":"//images.ctfassets.net/e5382hct74si/41CTDhgzlYylfnTwehOHSA/a331212e4f6878e7eabc89c9f293b5cc/image__4_.png","details":{"size":74368,"image":{"width":1200,"height":630}},"fileName":"image (4).png","contentType":"image/png"}}},"description":"Starter project for creating a chatbot using Astra DB and OpenAI.","framework":["Next.js"],"type":["Starter","AI"],"css":["Tailwind"],"database":["Astra DB"],"relatedTemplates":[{"sys":{"type":"Link","linkType":"Entry","id":"07KycvNERsZY7J9pYrT4s"}},{"sys":{"type":"Link","linkType":"Entry","id":"19aNBlDSppADupxExwjk0p"}},{"sys":{"type":"Link","linkType":"Entry","id":"5uVM4gkE0VYmNdUOYHiLEe"}},{"sys":{"type":"Link","linkType":"Entry","id":"7F4CNLg82lBADMY3xw982f"}}],"githubUrl":"https://github.com/datastax/ragbot-starter","demoUrl":"https://ragbot-starter.vercel.app/","integrations":["oac_HrgeXUSyqANAtm3MAOaTJ43a"],"integrationsOptional":false,"requiredEnvs":["OPENAI_API_KEY"],"requiredEnvsDescription":"These values allow you to connect to DataStax and OpenAI.","requiredEnvsLink":"https://github.com/datastax/ragbot-starter#setup"}},{"sys":{"type":"Link","linkType":"Entry","id":"5uVM4gkE0VYmNdUOYHiLEe"}}],"githubUrl":"https://github.com/upstash/degree-guru","demoUrl":"https://degreeguru.vercel.app/","integrationsOptional":true,"requiredEnvs":["UPSTASH_REDIS_REST_URL","UPSTASH_REDIS_REST_TOKEN","UPSTASH_VECTOR_REST_URL","UPSTASH_VECTOR_REST_TOKEN","OPENAI_API_KEY"],"requiredEnvsDescription":"See the .env.example.local file to learn how to get these env vars:","requiredEnvsLink":"https://github.com/upstash/degree-guru/blob/master/.env.local.example"}},"$30:props:children:props:children:props:fields:relatedTemplates:0:fields:relatedTemplates:0",{"sys":{"type":"Link","linkType":"Entry","id":"2CSFz8zBT4DMhu9mOxeasz"}},"$30:props:children:props:children:props:fields:relatedTemplates:0:fields:relatedTemplates:1"],"githubUrl":"https://github.com/miurla/morphic","demoUrl":"https://www.morphic.sh/","integrationsOptional":true,"requiredEnvs":["TAVILY_API_KEY","OPENAI_API_KEY"],"requiredEnvsDescription":"Tavily API Key","requiredEnvsLink":"https://app.tavily.com/home","cdnRoutingRuleHref":"","firewallRuleHref":"","thumbnailUrl":"//images.ctfassets.net/e5382hct74si/4bu9bW4KbJbngc4H0rPV4Q/3c062ebb49d1e1bbc3115f6071f5d901/CleanShot_2024-04-08_at_20.22.17_2x.png"}}]}]}]

Related Templates

Chatbot

Upstash Vector + Vercel AI SDK Starter