langchain supabase website chatbot

Langchain & Supabase - Créez un chatbot Chatgpt pour votre site Web

Créez un chatbot Chatgpt pour votre site Web à l'aide de Langchain, Supabase, TypeScript, Openai et Next.js. Langchain est un cadre qui facilite la création d'applications AI / LLM évolutives. Supabase est une base de données postgres open source qui peut stocker des intégres à l'aide d'une extension vectorielle PG.

Vidéo de tutoriel

Contactez via Twitter si vous avez besoin d'aide

Le guide visuel de ce dépôt et de ce tutoriel se trouve dans le dossier visual guide .

Développement

1. Cloner le repo

 git clone [github https url]

2. Installer des packages

 pnpm install

3. Configurez votre fichier .env

• Copy .env.local.example dans .env Votre fichier .env devrait ressembler à ceci:

 OPENAI_API_KEY=

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

• Visitez Openai pour récupérer les clés API et insérer dans votre fichier .env .
• Visitez Supabase pour créer une base de données et récupérer vos clés dans le tableau de bord de l'utilisateur selon les instructions DOCS

4. Dans le dossier config , remplacez les URL du tableau par les URL de votre site Web (le script nécessite plus d'une URL).

5. Dans les utils/custom_web_loader.ts à l'intérieur de la fonction load , remplacez les valeurs du title , date et content par les éléments CSS du texte que vous souhaitez extraire d'une page Web donnée. Vous pouvez en savoir plus sur la façon d'utiliser Cheerio ici

Vous pouvez ajouter vos éléments personnalisés aux métadonnées pour répondre à vos besoins, notons cependant que le format de chargeur par défaut selon ci-dessous attend au moins une chaîne pour pageContent et metadata qui contient une propriété source en tant que valeur retournée:

 async load(): Promise<Document[]>{
  const $ = await this.scrape();
      const text = $("body").text();
    const metadata = { source: this.webPath };
    return [new Document({ pageContent: text, metadata })];
  }

Le pageContent et metadata seront plus tard stockés dans votre table de base de données Supabase.

6. Copier et exécuter schema.sql dans votre éditeur de Supabase SQL

• Vérifiez croisé le tableau documents existe dans la base de données ainsi que dans la fonction match_documents .

? Instructions pour le grattage et l'intégration

Pour exécuter le script de grattage et d'incorporation dans scripts/scrape-embed.ts simplement exécuter:

npm run scrape-embed

Ce script visitera toutes les URL notées dans le dossier config et extraire les données que vous avez spécifiées dans le fichier custom_web_loader.ts .

Ensuite, il utilisera les intégres d'OpenAI ( text-embedding-ada-002 ) pour convertir vos données grattées en vecteurs.

Exécutez l'application

Une fois que vous avez vérifié que les intégres et le contenu ont été ajoutés avec succès à votre table Supabase, vous pouvez exécuter l'application npm run dev et taper une question pour poser votre site Web.

Crédit

Frontend de ce dépôt est inspiré par Langchain-chat-nextjs

Ce repo utilise des guides de notion approfondis du site Web de l'expert de la productivité, Thomas Frank.