--- title: "Gemini AI Chatbot" description: "Gemini-powered chatbot with the Vercel AI SDK, Next.js, and React." url: "https://vercel.com/templates/next.js/gemini-ai-chatbot" links: repository: "https://github.com/vercel-labs/gemini-chatbot" demo: "https://gemini.vercel.ai" deploy: "https://vercel.com/new/clone?demo-title=Gemini+AI+Chatbot&demo-description=Gemini-powered+chatbot+with+the+Vercel+AI+SDK%2C+Next.js%2C+and+React.&demo-url=https%3A%2F%2Fgemini.vercel.ai&project-name=Gemini+AI+Chatbot&repository-name=gemini-ai-chatbot&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fgemini-chatbot&env=GOOGLE_GENERATIVE_AI_API_KEY%2CAUTH_SECRET&envDescription=API+Keys&envLink=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fgemini-chatbot%2Fblob%2Fmain%2F.env.example&stores=%5B%7B%22type%22%3A%22integration%22%2C%22integrationSlug%22%3A%22upstash%22%2C%22productSlug%22%3A%22upstash-kv%22%7D%2C%7B%22type%22%3A%22postgres%22%7D%5D&from=templates&skippable-integrations=1&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1nvXeRtBeI8sLr1TwJn26j%2F78310e410e7f0c209b306c6bc50b4034%2FGemini.jpg" --- # Gemini AI Chatbot Gemini-powered chatbot with the Vercel AI SDK, Next.js, and React. Next.js 14 and App Router-ready AI chatbot.

Next.js Gemini Chatbot

An Open-Source AI Chatbot Template Built With Next.js and the AI SDK by Vercel.

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://sdk.vercel.ai/docs) - Unified API for generating text, structured objects, and tool calls with LLMs - Hooks for building dynamic chat and generative user interfaces - Supports Google (default), OpenAI, Anthropic, Cohere, and other model providers - [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 - [Vercel Postgres powered by Neon](https://vercel.com/storage/postgres) for saving chat history and user data - [Vercel Blob](https://vercel.com/storage/blob) for efficient object storage - [NextAuth.js](https://github.com/nextauthjs/next-auth) - Simple and secure authentication ## Model Providers This template ships with Google Gemini `gemini-1.5-pro` models as the default. However, with the [AI SDK](https://sdk.vercel.ai/docs), you can switch LLM providers to [OpenAI](https://openai.com), [Anthropic](https://anthropic.com), [Cohere](https://cohere.com/), and [many more](https://sdk.vercel.ai/providers/ai-sdk-providers) with just a few lines of code. ## Deploy Your Own You can deploy your own version of the Next.js AI Chatbot to Vercel with one click: [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fgemini-chatbot&env=AUTH_SECRET,GOOGLE_GENERATIVE_AI_API_KEY&envDescription=Learn%20more%20about%20how%20to%20get%20the%20API%20Keys%20for%20the%20application&envLink=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fgemini-chatbot%2Fblob%2Fmain%2F.env.example&demo-title=Next.js%20Gemini%20Chatbot&demo-description=An%20Open-Source%20AI%20Chatbot%20Template%20Built%20With%20Next.js%20and%20the%20AI%20SDK%20by%20Vercel.&demo-url=https%3A%2F%2Fgemini.vercel.ai&stores=[{%22type%22:%22postgres%22},{%22type%22:%22blob%22}]) ## Running locally You will need to use the environment variables [defined in `.env.example`](https://github.com/vercel-labs/gemini-chatbot/tree/main/.env.example) to run Next.js AI 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 Google Cloud 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 dev ``` Your app template should now be running on [localhost:3000](http://localhost:3000/). ## Related Templates ### [Morphic: AI-powered answer engine](https://vercel.com/templates/next.js/morphic-ai-answer-engine-generative-ui) AI answer engine with Generative UI. ### [Advanced AI Bot Protection](https://vercel.com/templates/next.js/advanced-ai-bot-protection) An AI chat app built on Vercel that integrates Kasada's advanced bot protection. Prevent abusive API calls to the LLM before they occur. ### [Chatbot](https://vercel.com/templates/next.js/chatbot) A full-featured, hackable Next.js AI chatbot built by Vercel --- ## 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.