langchain supabase website chatbot

langchain＆supabase-あなたのウェブサイトのためにchatgptチャットボットを作成する

Langchain、Supabase、TypeScript、Openai、およびNext.JSを使用して、WebサイトのChatGptチャットボットを作成します。 Langchainは、スケーラブルなAI/LLMアプリの構築を容易にするフレームワークです。 Supabaseは、PGベクトル拡張を使用して埋め込みを保存できるオープンソースPostgresデータベースです。

チュートリアルビデオ

サポートが必要な場合は、Twitterでご連絡ください

このレポとチュートリアルのビジュアルガイドは、 visual guideフォルダーにあります。

発達

1. レポをクローンします

 git clone [github https url]

2. パッケージをインストールします

 pnpm install

3. .envファイルを設定します

• copy .env.local.example into .env your .envファイルは次のようになります。

 OPENAI_API_KEY=

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

• Openaiにアクセスして、APIキーを取得し、 .envファイルに挿入します。
• Supabaseにアクセスしてデータベースを作成し、ドキュメントの指示に従ってユーザーダッシュボードのキーを取得します

4. configフォルダーで、配列内のURLをWebサイトURLに置き換えます（スクリプトには複数のURLが必要です）。

5. load関数内のutils/custom_web_loader.tsでは、 title 、 date 、 contentの値を、特定のWebページから抽出したいテキストのCSS要素に置き換えます。あなたはここでcheerioの使用方法についてもっと知ることができます

メタデータにカスタム要素を追加してニーズを満たすことができますが、以下のデフォルトのローダー形式は、返された値としてsourceプロパティを含むpageContentおよびmetadataの少なくとも文字列を期待していることに注意してください。

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

pageContentとmetadata 、後にサパベースデータベーステーブルに保存されます。

6. Supabase SQLエディターでschema.sqlをコピーして実行します

• クロスdocumentsテーブルは、データベースとmatch_documents関数に存在します。

？スクレイピングと埋め込みの指示

スクリプトとscripts/scrape-embed.tsにスクリプトと埋め込みを実行するには、単純に実行します。

npm run scrape-embed

このスクリプトは、 configフォルダーに記載されているすべてのURLにアクセスし、 custom_web_loader.tsファイルで指定したデータを抽出します。

次に、Openaiの埋め込み（ text-embedding-ada-002 ）を使用して、削り取ったデータをベクトルに変換します。

アプリを実行します

埋め込みとコンテンツがSupabaseテーブルに正常に追加されたことを確認したら、App npm run devを実行して質問を入力してWebサイトを尋ねることができます。

クレジット

このレポのフロントエンドは、Langchain-chat-nextjsに触発されています

このレポは、生産性の専門家であるトーマス・フランクのウェブサイトからの詳細な概念ガイドを使用しています。