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

**URL:** <https://onehack.st/t/ai-chatbot-a-full-featured-hackable-next-js-ai-chatbot-built-by-vercel/295581>\
**Category:** Tools & Scripts\
**Tags:** tools, programming, ai\
**Created:** [November 13, 2024, 9:31am UTC](https://onehack.st/t/ai-chatbot-a-full-featured-hackable-next-js-ai-chatbot-built-by-vercel/295581 "2024-11-13T09:31:00Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheStrength](https://onehack.st/user_avatar/onehack.st/thestrength/32/46753_2.png) [@TheStrength](https://onehack.st/u/TheStrength)\
**Post date:** [November 13, 2024, 9:31am UTC](https://onehack.st/t/ai-chatbot-a-full-featured-hackable-next-js-ai-chatbot-built-by-vercel/295581/1 "2024-11-13T09:31:00Z")

</div>

[![Next.js 14 and App Router-ready AI chatbot.](https://github.com/vercel/ai-chatbot/raw/main/app/(chat)/opengraph-image.png)](https://chat.vercel.ai/)

# Next.js AI Chatbot

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

[**Features**](https://github.com/vercel/ai-chatbot#features) · [**Model Providers**](https://github.com/vercel/ai-chatbot#model-providers) · [**Deploy Your Own**](https://github.com/vercel/ai-chatbot#deploy-your-own) · [**Running locally**](https://github.com/vercel/ai-chatbot#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 OpenAI (default), 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 file storage

- [NextAuth.js](https://github.com/nextauthjs/next-auth)
  - Simple and secure authentication

## Model Providers

This template ships with OpenAI `gpt-4o` 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://camo.githubusercontent.com/20bea215d35a4e28f2c92ea5b657d006b087687486858a40de2922a4636301ab/68747470733a2f2f76657263656c2e636f6d2f627574746f6e)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot&env=AUTH_SECRET,OPENAI_API_KEY&envDescription=Learn%20more%20about%20how%20to%20get%20the%20API%20Keys%20for%20the%20application&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&demo-title=AI%20Chatbot&demo-description=An%20Open-Source%20AI%20Chatbot%20Template%20Built%20With%20Next.js%20and%20the%20AI%20SDK%20by%20Vercel.&demo-url=https%3A%2F%2Fchat.vercel.ai&stores=%5B%7B%22type%22:%22postgres%22%7D,%7B%22type%22:%22blob%22%7D%5D)

## Running locally

You will need to use the environment variables [defined in `.env.example`](https://github.com/vercel/ai-chatbot/blob/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 OpenAI 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`

```auto
pnpm install
pnpm dev

```

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

## GitHub: