AI Chatbot Supabase: open source Next.js and Supabase built AI chatbot for rapid deployment to Vercel.

General Introduction

AI Chatbot Supabase is an open source AI chatbot template built on Next.js and Supabase. Developed by Vercel, the project aims to provide a fully functional and customizable chatbot solution. By integrating the Supabase database, users can realize efficient storage and management of chat logs and user data. The template supports a variety of AI model providers and real-time response capabilities for a variety of application scenarios.

Function List

• Model Provider Integration: Support for OpenAI, Anthropic, Cohere, and many other model providers.
• real time response: Built-in streaming support for real-time AI response.
• Database Integration: Use Supabase Postgres database to store chat logs and user data.
• Document management: Manage and upload files efficiently with Supabase file storage.
• user authentication: Supports multiple authentication providers and line-level security.
• Customized Themes: Support for Tailwind CSS and Radix UI components, providing flexible theme and dark mode support.
• local development: Provides detailed local development and deployment guidelines.

Using Help

Installation and Setup

1. Installation of the necessary tools::
   • Node.js 18+
   • pnpm (vianpm install -g pnpm(Installation)
   • Git
   • Code editor (VS Code recommended)
2. Setting up a Supabase project::
   • Install the Supabase CLI:
     • 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>
   • Create a Supabase project:

    npx supabase projects create -i "ai-chatbot-supabase"
   

   • Initialize the Supabase configuration:

    npx supabase init
   npx supabase link --project-ref your-project-id
   

3. Configuring Environment Variables::
   • establish.env.localfile, add the following variables:

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

4. Initializing the Database Architecture::

   supabase db push
supabase db reset --dry-run

local development

1. Clone and install the project::

   git clone https://github.com/nolly-studio/ai-chatbot-supabase.git
cd ai-chatbot-supabase
pnpm install

2. Starting the Development Server::

   pnpm dev

The application will run on thehttp://localhost:3000The

Deployment to Vercel

1. Configuring the Vercel Project::
   • Click on "New Project" in the Vercel dashboard.
   • Import the cloned repository and select "Next.js" as the framework.
   • Setting environment variables:

    NEXT_PUBLIC_SUPABASE_URL=<api-url>
   NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon-key>
   OPENAI_API_KEY=<your-openai-api-key>
   

2. Configuring Build Settings::
   • Build command:pnpm build
   • Output directory:.next
   • Installation commands:pnpm install
3. deployments::
   • Click "Deploy" and Vercel will automatically build and deploy the application.

common problems

• Supabase connection problems::
  • Verify that the environment variables are set correctly.
  • Check the database status in the Supabase dashboard.
• build error::
  • clear up.nextFolder:rm -rf .next
  • Reinstall the dependencies:pnpm clean-install