ai chatbot supabase

Next.js AI Chatbot x Supabase

Un modèle de chatbot AI open-source construit avec Next.js et le SDK AI par Vercel.

Fonctionnalités · fournisseurs de modèles · Déployer votre propre · exécuter localement

Caractéristiques

• Routeur de l'application suivante Next.js
  • Routage avancé pour la navigation et les performances transparentes
  • React Server Components (RSCS) et les actions du serveur pour le rendu côté serveur et les performances accrues
  • Optimisations intégrées pour les images, les polices et les actifs statiques
• SDK AI
  • API unifiée pour générer du texte, des objets structurés et des appels d'outils avec LLMS
  • Crochets pour construire un chat dynamique et des interfaces utilisateur génératives
  • Prend en charge OpenAI (par défaut), anthropique, cohére et d'autres fournisseurs de modèles
  • Support de streaming intégré pour les réponses en temps réel
• shadcn / ui
  • Styling avec le vent arrière CSS
  • Primitives composantes de Radix UI pour l'accessibilité et la flexibilité
  • Thèmes personnalisables et support en mode sombre
• Intégration Supabase
  • Supabase Postgres DB pour l'historique robuste du chat et le stockage des données des utilisateurs
  • Stockage de fichiers Supabase pour une gestion et des téléchargements de fichiers efficaces
  • Supabase Auth avec plusieurs fournisseurs d'authentification et une sécurité au niveau des lignes
  • Abonnements en temps réel pour les mises à jour en direct

Fournisseurs de modèles

Ce modèle est expédié avec OpenAI gpt-4o comme défaut. Cependant, avec le SDK AI, vous pouvez basculer les fournisseurs de LLM vers OpenAI, Anthropic, Cohere et bien d'autres avec seulement quelques lignes de code.

Vidéo d'intégration YouTube

Cette vidéo vous guide sur la façon de configurer le chatbot AI avec Supabase à partir de zéro. Nous allons:

• Configurer un nouveau projet Supabase en utilisant la CLI
• Le lier à notre application
• Variables d'environnement de configuration
• Exécutez les migrations DB pour configurer le schéma

Commencer

Guide vidéo à démarrage rapide

Regardez notre vidéo d'intégration complète pour configurer rapidement votre environnement de développement et comprendre la structure du projet: Regardez le tutoriel

Condition préalable

Avant de commencer, assurez-vous que vous avez installé les suivants:

• Node.js 18+
• PNPM ( npm install -g pnpm )
• Git
• Un éditeur de code (nous recommandons vs code)

Configuration de Supabase

1. Installez la CLI Supabase Choisissez la méthode d'installation pour votre système d'exploitation:

   • 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. Créer un projet Supabase

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

   Votre identifiant d'organisation se trouve dans l'URL du tableau de bord Supabase après avoir sélectionné une organisation

3. Liez votre projet

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

   Vous aurez besoin de votre ID de projet et de votre mot de passe de base de données à partir de l'étape 2.

4. Configurer les variables d'environnement Créez un fichier .env.local avec les variables suivantes:

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

   Trouvez ces valeurs dans votre tableau de bord du projet Supabase dans les paramètres du projet> API

5. Initialiser le schéma de base de données

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

Développement local

1. Cloner et installer

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

2. Démarrer le serveur de développement

   pnpm dev

   La demande sera disponible sur http: // localhost: 3000

3. Commandes de développement

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

Dépannage

Problèmes et solutions courantes:

• Problèmes de connexion Supabase

  • Vérifiez que vos variables d'environnement sont correctement définies
  • Vérifiez si la base de données est active dans le tableau de bord Supabase

• Élaborer des erreurs

  • Clear .next dossier: rm -rf .next
  • Nettoyer les dépendances d'installation: pnpm clean-install

Pour plus d'aide, ouvrez un problème.

Déployer avec Vercel

Condition préalable

• Un compte Vercel
• Un compte Supabase
• Une clé API Openai

Étapes de déploiement

1. Fourchez le référentiel

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

2. Configurer le projet Vercel

   • Aller au tableau de bord Vercel
   • Cliquez sur "Nouveau projet"
   • Importez votre référentiel fourchu
   • Sélectionnez "next.js" comme cadre

3. Définir les variables d'environnement dans les paramètres de votre projet Vercel, ajoutez les variables d'environnement suivantes:

 # 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. Configurer les paramètres de construction dans vos paramètres de projet Vercel:

   • Commande de construction: pnpm build
   • Répertoire de sortie: .next
   • Installer la commande: pnpm install

5. Déployer

   • Cliquez sur "Déployer"
   • Vercel créera automatiquement et déploiera votre application