AI Chat App

The Supabase Community AI chatbot template includes a chat interface, streaming responses, Supabase Auth, and conversation history in Postgres. Creating the app installs those features together.

Installation

Create the app

Scaffold the template with the Next.js CLI:

npx create-next-app@latest my-chat --example https://github.com/supabase-community/vercel-ai-chatbot --use-pnpm
cd my-chat
cp .env.example .env

This community template uses Next.js 13, AI SDK 2, and Supabase Auth Helpers. Review its dependency versions and plan upgrades before deployment. For a new authentication foundation using @supabase/ssr, start with the Next.js starter.

Start Supabase

Install Docker and the Supabase CLI, then run the local stack from the template directory:

supabase start

The template includes database migrations for chat history. Use the project URL and anon key printed by the CLI in .env:

NEXT_PUBLIC_SUPABASE_URL=your-local-api-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-local-anon-key
OPENAI_API_KEY=your-model-provider-api-key
NEXT_PUBLIC_AUTH_GITHUB=false

The variable names match the template's environment example. Keep OPENAI_API_KEY on the server. To add GitHub sign-in, follow the template's OAuth setup and fill in its provider settings.

Choose a model

The template selects its model in app/api/chat/route.ts. Replace the example model with one available to your provider account that supports the template's Chat Completions streaming API. Keep the model selection and API key in the server route.

Run the app

pnpm dev

Open the app, sign up, and send a message. Use the local email inbox URL printed by the Supabase CLI to confirm your account. Confirm that the response streams and that the conversation appears in your history after refreshing.

Deploy the app

Follow the template's deployment guide to connect a hosted Supabase project, apply its migrations, and set the production Auth Site URL and server environment variables.