38:I[939773,["/vc-ap-vercel-templates/_next/static/immutable/chunks/2vhfrite5-ffx.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/05p05zti_rn-6.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0ue9o08vzcj81.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2-c9-j3hbb6_5.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/210s95qhzs-kd.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/425x3l6qw83ka.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1xbz0505g72br.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1d1c70gp_t7ak.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3702j97f9tiud.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/15kid0fc4rbwi.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0cxf4qpb5soyw.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1icgfdp-j4khl.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1w1qp7xynodi1.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3avfw6gu8sdho.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"] 39:I[57106,["/vc-ap-vercel-templates/_next/static/immutable/chunks/2vhfrite5-ffx.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/05p05zti_rn-6.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0ue9o08vzcj81.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2-c9-j3hbb6_5.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/210s95qhzs-kd.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/425x3l6qw83ka.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1xbz0505g72br.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1d1c70gp_t7ak.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3702j97f9tiud.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/15kid0fc4rbwi.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0cxf4qpb5soyw.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1icgfdp-j4khl.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1w1qp7xynodi1.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3avfw6gu8sdho.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"] 3a:I[939773,["/vc-ap-vercel-templates/_next/static/immutable/chunks/2vhfrite5-ffx.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/05p05zti_rn-6.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0ue9o08vzcj81.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2-c9-j3hbb6_5.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/210s95qhzs-kd.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/425x3l6qw83ka.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1xbz0505g72br.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1d1c70gp_t7ak.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3702j97f9tiud.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/15kid0fc4rbwi.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0cxf4qpb5soyw.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1icgfdp-j4khl.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1w1qp7xynodi1.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3avfw6gu8sdho.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"] 3b:I[382422,["/vc-ap-vercel-templates/_next/static/immutable/chunks/2vhfrite5-ffx.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/05p05zti_rn-6.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0ue9o08vzcj81.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2-c9-j3hbb6_5.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/210s95qhzs-kd.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/425x3l6qw83ka.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1xbz0505g72br.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1d1c70gp_t7ak.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3702j97f9tiud.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/15kid0fc4rbwi.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0cxf4qpb5soyw.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1icgfdp-j4khl.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1w1qp7xynodi1.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3avfw6gu8sdho.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"] 3c: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). 31:["$","$11",null,{"fallback":["$","$L38",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":["$","$L39",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":["$","$L39",null,{"href":"#","children":"View Demo"}]}]]}],"children":["$","$L3a",null,{"boundaryId":"suspense-template-details-hero-buttons","name":"template-details-hero-buttons","hasExplicitName":true,"children":["$","$L3b",null,{"fields":{"name":"Advanced AI Bot Protection","slug":"advanced-ai-bot-protection","publisher":"▲ Vercel","thumbnail":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"6oaAFb9xMHquWDBtavxLCO","type":"Asset","createdAt":"2024-03-22T16:20:57.994Z","updatedAt":"2024-03-22T16:20:57.994Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":8,"revision":1,"locale":"en-US"},"fields":{"title":"84 Percent Bad Bots When We First Went Live","description":"This not only protected our resources but also ensured that genuine users could access and benefit from our AI models without interference.","file":{"url":"//images.ctfassets.net/e5382hct74si/6oaAFb9xMHquWDBtavxLCO/8283439b8de6486412a893e6b5218fb1/Inline_Graphic_1_-_Light_1920_x_714.png","details":{"size":53634,"image":{"width":1920,"height":713}},"fileName":"Inline Graphic 1 - Light 1920 x 714.png","contentType":"image/png"}}},"description":"An AI chat app built on Vercel that integrates Kasada's advanced bot protection. Prevent abusive API calls to the LLM before they occur.","framework":["Next.js"],"type":["AI","Security"],"css":["None"],"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":"$3c","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"}]}},{"sys":{"type":"Link","linkType":"Entry","id":"2CSFz8zBT4DMhu9mOxeasz"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"2VCP8sFKATQ3S4Q4xOhc4w","type":"Entry","createdAt":"2022-04-14T03:15:35.363Z","updatedAt":"2025-10-10T21:43:52.215Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":44,"revision":16,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"templates"}},"locale":"en-US"},"fields":{"name":"Bot Protection with DataDome","slug":"bot-protection-datadome","publisher":"▲ Vercel","thumbnail":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"akurjrZdUB9bjsmOI1ShQ","type":"Asset","createdAt":"2022-04-14T03:13:51.114Z","updatedAt":"2022-04-14T03:13:51.114Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"locale":"en-US"},"fields":{"title":"Bot Protection with DataDome","description":"","file":{"url":"//images.ctfassets.net/e5382hct74si/akurjrZdUB9bjsmOI1ShQ/9e6ffd8ffbd9fdf72fbbd08bf4e7e8a4/edge-functions-bot-protection-datadome.vercel.app_.png","details":{"size":200449,"image":{"width":2000,"height":1500}},"fileName":"edge-functions-bot-protection-datadome.vercel.app_.png","contentType":"image/png"}}},"description":"DataDome can provide real-time bot protection and other security protections to any website. In this template we'll be using it at the edge.","framework":["Next.js"],"type":["Edge Middleware"],"css":["Tailwind"],"relatedTemplates":[{"sys":{"type":"Link","linkType":"Entry","id":"64XZs41CQIBm7LjJ4pYdR"}}],"deployUrl":"https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel-customer-feedback%2Fedge-middleware%2Ftree%2Fmain%2Fexamples%2Fbot-protection-datadome&env=NEXT_PUBLIC_DATADOME_CLIENT_SIDE_KEY,DATADOME_SERVER_SIDE_KEY&project-name=bot-protection-datadome&repository-name=bot-protection-datadome","githubUrl":"https://github.com/vercel/examples/tree/main/edge-middleware/bot-protection-datadome","demoUrl":"https://edge-functions-bot-protection-datadome.vercel.app","integrationsOptional":true}}],"githubUrl":"https://github.com/vercel/ai/tree/main/examples/next-openai-kasada-bot-protection","demoUrl":"https://vercel.com/contact/sales","integrationsOptional":true,"cdnRoutingRuleHref":"","firewallRuleHref":"","thumbnailUrl":"//images.ctfassets.net/e5382hct74si/6oaAFb9xMHquWDBtavxLCO/8283439b8de6486412a893e6b5218fb1/Inline_Graphic_1_-_Light_1920_x_714.png"}}]}]}] 34:["$","div",null,{"className":"flex w-full flex-row items-start gap-4 lg:flex-col lg:items-start","children":[["$","span",null,{"className":"text-gray-1000 text-md font-medium","children":"GitHub"}],["$","div",null,{"className":"flex flex-row gap-x-4 lg:flex-col lg:gap-y-4","children":[["$","div",null,{"className":"flex flex-col gap-y-2","children":[["$","span",null,{"className":"text-gray-1000 text-md shrink-0 font-medium","children":"Owner"}],["$","$L25",null,{"className":"text-sm font-medium text-nowrap text-(--geist-link-color)! no-underline underline-offset-4 hover:underline","href":"https://github.com/vercel","children":"vercel"}]]}],["$","div",null,{"className":"flex flex-col gap-y-2","children":[["$","span",null,{"className":"text-gray-1000 text-md shrink-0 font-medium","children":"Repository"}],["$","$L25",null,{"className":"text-sm font-medium text-nowrap text-(--geist-link-color)! no-underline underline-offset-4 hover:underline","href":"https://github.com/vercel/ai","children":"ai"}]]}]]}]]}]