Next.js AI Chatbot

An open-source AI chatbot built with Next.js and Vercel AI SDK, supporting multiple AI models: OpenAI, Google Gemini, Google Vertex AI, Claude AI, Grok.

Features · Model Providers · Deploy Your Own · Running locally

Features

• Next.js App Router
• React Server Components (RSCs), Suspense, and Server Actions
• Vercel AI SDK for streaming chat UI
• Support for OpenAI, Google Gemini, Claude AI, Grok
• shadcn/ui
  • Styling with Tailwind CSS
  • Radix UI for headless component primitives
  • Icons from Phosphor Icons
• NextAuth.js for authentication
• Vercel Postgres or Neon Postgres for database
• tRPC for End-to-end APIs

Model Providers

• ChatGPT for OpenAI and Azure OpenAI
• Gemini Pro for Google and Google Vertex AI
• Claude AI for Anthropic and Google Vertex AI
• Grok for xAI

Deploy Your Own

You can deploy your own version of the Next.js AI Chatbot to Vercel with one click:

Creating a Vercel Postgres Instance

Follow the steps outlined in the quick start guide provided by Vercel. This guide will assist you in creating and configuring your postgres database instance on Vercel, enabling your application to interact with it.

Running locally

You will need to use the environment variables defined in .env.example to run Next.js AI Chatbot. It's recommended you use Vercel Environment Variables for this, but a .env file is all that is necessary.

For local development, it's recommended to use Supabase database as your database. Add ?workaround=supabase-pooler.vercel in your POSTGRES_URL.

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.

pnpm install
pnpm db:migrate
pnpm dev

Your app should now be running on localhost:3000.