langchain supabase website chatbot

Langchain & Supabase - Erstellen Sie einen Chatgpt -Chatbot für Ihre Website

Erstellen Sie einen Chatgpt -Chatbot für Ihre Website mit Langchain, Supabase, TypeScript, OpenAI und Next.js. Langchain ist ein Framework, das es einfacher macht, skalierbare AI/LLM -Apps zu erstellen. Supabase ist eine Open -Source -Postgres -Datenbank, in der Einbettung mithilfe einer PG -Vektor -Erweiterung speichern kann.

Tutorial Video

Setzen Sie sich über Twitter mit, wenn Sie Hilfe benötigen

Die visuelle Anleitung dieses Repo und Tutorial befindet sich im Ordner visual guide .

Entwicklung

1. Klonen Sie das Repo

 git clone [github https url]

2. Pakete installieren

 pnpm install

3. Richten Sie Ihre .env -Datei ein

• Kopieren .env.local.example in .env Ihre .env -Datei sollte so aussehen:

 OPENAI_API_KEY=

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

• Besuchen Sie OpenAI, um API -Schlüssel abzurufen und in Ihre .env -Datei einfügen.
• Besuchen Sie Supabase, um eine Datenbank zu erstellen und Ihre Schlüssel im Benutzer Dashboard gemäß den Anweisungen für Dokumente abzurufen

4. Ersetzen Sie im config die URLs im Array durch Ihre Website -URLs (das Skript erfordert mehr als eine URL).

5. Ersetzen Sie in der utils/custom_web_loader.ts in der load die Werte von title , date und content durch die CSS -Elemente von Text, die Sie aus einer bestimmten Webseite extrahieren möchten. Sie können mehr darüber erfahren, wie Sie Cheerio hier verwenden können

Sie können Ihre benutzerdefinierten Elemente in die Metadaten hinzufügen, um Ihre Anforderungen zu erfüllen. Beachten Sie jedoch, dass das Standard -Loader -Format gemäß unten mindestens eine Zeichenfolge für pageContent und metadata erwartet, die eine source als zurückgegebener Wert enthält:

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

Die pageContent und metadata werden später in Ihrer Supabase -Datenbanktabelle gespeichert.

6. Kopieren und führen Sie schema.sql in Ihrem Supabase SQL Editor aus

• Überprüfen Sie die Tabelle documents in der Datenbank sowie in der Funktion match_documents .

? Anweisungen zum Kratzen und Einbetten

Um das Scraping- und Einbetten-Skript in scripts/scrape-embed.ts einzubetten.

npm run scrape-embed

In diesem Skript werden alle im config festgelegten URLs besucht und die Daten extrahiert, die Sie in der Datei custom_web_loader.ts angegeben haben.

Anschließend werden OpenAIs Einbettungen ( text-embedding-ada-002 ) verwendet, um Ihre abgekratzten Daten in Vektoren umzuwandeln.

Führen Sie die App aus

Sobald Sie überprüft haben, ob die Einbettungen und Inhalte Ihrer Supabase -Tabelle erfolgreich hinzugefügt wurden, können Sie die App npm run dev ausführen und eine Frage eingeben, um Ihre Website zu stellen.

Kredit

Frontend dieses Repo ist von Langchain-Chat-Nextjs inspiriert

Dieses Repo verwendet ausführliche Begriffsanleitungen von der Website des Produktivitätsexperten Thomas Frank.