ai chatbot supabase

Next.js ai chatbot x supabase

Eine Open-Source-AI-Chatbot-Vorlage, die mit Next.js und der AI SDK von Vercel erstellt wurde.

Merkmale · Modellanbieter · Bereitstellung Ihres eigenen · lokal ausführen

Merkmale

• Next.js App Router
  • Fortgeschrittenes Routing für nahtlose Navigation und Leistung
  • React Server-Komponenten (RSCs) und Serveraktionen für die serverseitige Renderung und die erhöhte Leistung
  • Eingebaute Optimierungen für Bilder, Schriftarten und statische Vermögenswerte
• Ai sdk
  • Einheitliche API zum Generieren von Text, strukturierten Objekten und Toolaufrufen mit LLMs
  • Haken zum Erstellen von dynamischen Chat und generativen Benutzeroberflächen
  • Unterstützt OpenAI (Standard), Anthropic, Cohere und andere Modellanbieter
  • Eingebaute Streaming-Unterstützung für Echtzeit-KI-Antworten
• Shadcn/Ui
  • Styling mit Rückenwind -CSS
  • Komponentenprimitive von Radix UI für Zugänglichkeit und Flexibilität
  • Anpassbare Themen und Unterstützung für den dunklen Modus
• Supabase -Integration
  • Supabase Postgres DB für einen robusten Chat -Verlauf und Benutzerdatenspeicher
  • Supabase -Dateispeicher für effiziente Dateiverwaltung und Uploads
  • Supabase-Auth mit mehreren Authentifizierungsanbietern und Sicherheit auf Zeilenebene
  • Echtzeitabonnements für Live-Updates

Modellanbieter

Diese Vorlage wird mit OpenAI gpt-4o als Standard versetzt. Mit dem AI SDK können Sie jedoch die LLM -Anbieter auf Openai, Anthropic, Cohere und viele mehr mit nur wenigen Codezeilen umstellen.

YouTube Onboarding -Video

Dieses Video führt Sie durch die Einrichtung des KI -Chatbots mit Supabase von Grund auf neu. Wir werden:

• Richten Sie ein neues Supabase -Projekt mit der CLI ein
• Verknüpfen Sie es mit unserer App
• Setup -Umgebungsvariablen
• Führen Sie die DB -Migrationen aus, um das Schema zu konfigurieren

Erste Schritte

Schnelle Start Video Guide

Sehen Sie sich unser umfassendes Onboard -Video an, um Ihre Entwicklungsumgebung schnell einzurichten und die Projektstruktur zu verstehen: Tutorial ansehen

Voraussetzungen

Stellen Sie vor Beginn sicher, dass Sie die folgenden Installation haben:

• Node.js 18+
• PNPM ( npm install -g pnpm )
• Git
• Ein Code -Editor (wir empfehlen vs Code)

Supabase -Setup

1. Installieren Sie die Supabase -CLI. Wählen Sie die Installationsmethode für Ihr Betriebssystem aus:

   • 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. Erstellen Sie ein Supabase -Projekt

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

   Ihre Organisations -ID finden Sie nach Auswahl einer Organisation in der URL der Supabase -Dashboard -URL

3. Verknüpfen Sie Ihr Projekt

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

   Sie benötigen Ihre Projekt -ID und Ihr Datenbankkennwort aus Schritt 2.

4. Konfigurieren von Umgebungsvariablen Erstellen Sie eine .env.local -Datei mit den folgenden Variablen:

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

   Suchen Sie diese Werte in Ihrem Supabase -Projekt -Dashboard unter Projekteinstellungen> API

5. Datenbankschema initialisieren

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

Lokale Entwicklung

1. Klonen und installieren

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

2. Development Server starten

   pnpm dev

   Die Anwendung ist unter http: // localhost: 3000 verfügbar

3. Entwicklungsbefehle

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

Fehlerbehebung

Häufige Probleme und Lösungen:

• Supabase -Verbindungsprobleme

  • Überprüfen Sie, ob Ihre Umgebungsvariablen korrekt eingestellt sind
  • Überprüfen Sie, ob die Datenbank im Supabase -Dashboard aktiv ist

• Fehler aufbauen

  • Clear .next Ordner: rm -rf .next
  • Abhängigkeiten der Installation von Installieren: pnpm clean-install

Für mehr Hilfe öffnen Sie ein Problem.

Mit Vercel bereitstellen

Voraussetzungen

• Ein Vercel -Konto
• Ein Supabase -Konto
• Eine OpenAI -API -Schlüssel

Bereitstellungsschritte

1. Geben Sie das Repository auf

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

2. Konfigurieren Sie das Vercel -Projekt

   • Gehen Sie zu Vercel Dashboard
   • Klicken Sie auf "neues Projekt"
   • Importieren Sie Ihr Forked Repository
   • Wählen Sie "Next.js" als Framework

3. Setzen Sie Umgebungsvariablen in Ihren Einstellungen für den Vercel -Projekt und fügen Sie die folgenden Umgebungsvariablen hinzu:

 # 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. Konfigurieren Sie die Build -Einstellungen in Ihren Einstellungen für den Vercel -Projekt:

   • Befehl erstellen: pnpm build
   • Ausgabeverzeichnis: .next
   • Befehl installieren: pnpm install

5. Einsetzen

   • Klicken Sie auf "Bereitstellen"
   • Vercel erstellt und bereitet Ihre Anwendung automatisch auf und bereit