Next.js AI Chatbot x Supabase

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 App Router
  • Advanced routing for seamless navigation and performance
  • React Server Components (RSCs) and Server Actions for server-side rendering and increased performance
  • Built-in optimizations for images, fonts, and static assets
• AI SDK
  • 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
  • Built-in streaming support for real-time AI responses
• shadcn/ui
  • Styling with Tailwind CSS
  • Component primitives from Radix UI for accessibility and flexibility
  • Customizable themes and dark mode support
• Supabase Integration
  • Supabase Postgres DB for robust chat history and user data storage
  • Supabase File Storage for efficient file management and uploads
  • Supabase Auth with multiple authentication providers and row-level security
  • Real-time subscriptions for live updates

Model Providers

This template ships with OpenAI gpt-4o as the default. However, with the AI SDK, you can switch LLM providers to OpenAI, Anthropic, Cohere, and many more with just a few lines of code.

YouTube Onboarding Video

This video walks you through how to set up the ai chatbot with supabase from scratch. We will:

• Setup a new Supabase project using the CLI
• Link it to our app
• Setup environment variables
• Run the DB migrations to configure the schema

Getting Started

Quick Start Video Guide

Watch our comprehensive onboarding video to quickly set up your development environment and understand the project structure: Watch Tutorial

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18+
• pnpm (npm install -g pnpm)
• Git
• A code editor (we recommend VS Code)

Supabase Setup

1. Install the Supabase CLI Choose the installation method for your operating system:

   • Mac:

     brew install supabase/tap/supabase

   • Windows (PowerShell):

     scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
     scoop install supabase

   • Linux:

     brew install supabase/tap/supabase

   • NPM/Bun:

     npx supabase <command>

2. Create a Supabase Project

   # Create a new project
   npx supabase projects create -i "ai-chatbot-supabase"
   
   # Note: Save the project ID and database password shown after creation

   Your Organization ID can be found in the Supabase Dashboard URL after selecting an organization

3. Link Your Project

   # Initialize Supabase configuration
   npx supabase init
   
   # Link to your remote project
   npx supabase link --project-ref your-project-id

   You'll need your project ID and database password from step 2.

4. Configure Environment Variables Create a .env.local file with the following variables:

   NEXT_PUBLIC_SUPABASE_URL=<api-url>
   NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon-key>

   Find these values in your Supabase project dashboard under Project Settings > API

5. Initialize Database Schema

   # Apply all migrations
   supabase db push
   
   # Verify the schema
   supabase db reset --dry-run

Local Development

1. Clone and Install

   git clone https://github.com/your-username/ai-chatbot.git
   cd ai-chatbot
   pnpm install

2. Start Development Server

   pnpm dev

   The application will be available at http://localhost:3000

3. Development Commands

   pnpm build          # Build for production
   pnpm start          # Start production server
   pnpm lint          # Run ESLint
   pnpm type-check    # Run TypeScript checks

Troubleshooting

Common issues and solutions:

• Supabase Connection Issues

  • Verify your environment variables are correctly set
  • Check if the database is active in Supabase dashboard

• Build Errors

  • Clear .next folder: rm -rf .next
  • Clean install dependencies: pnpm clean-install

For more help, open an issue.

Deploy with Vercel

Prerequisites

• A Vercel account
• A Supabase account
• An OpenAI API key

Deployment Steps

1. Fork the Repository

   https://github.com/your-username/ai-chatbot

2. Configure Vercel Project

   • Go to Vercel Dashboard
   • Click "New Project"
   • Import your forked repository
   • Select "Next.js" as the framework

3. Set Environment Variables In your Vercel project settings, add the following environment variables:

# Required
NEXT_PUBLIC_SUPABASE_URL=           # From Supabase project settings
NEXT_PUBLIC_SUPABASE_ANON_KEY=      # From Supabase project settings
OPENAI_API_KEY=                     # Your OpenAI API key

4. Configure Build Settings In your Vercel project settings:

   • Build Command: pnpm build
   • Output Directory: .next
   • Install Command: pnpm install

5. Deploy

   • Click "Deploy"
   • Vercel will automatically build and deploy your application