langchain supabase website chatbot

Langchain＆Supabase-為您的網站創建Chatgpt聊天機器人

使用Langchain，Supabase，TypeScript，OpenAI和Next.js為您的網站創建Chatgpt聊天機器人。 Langchain是一個框架，使構建可擴展的AI/LLM應用程序變得更加容易。 Supabase是一個開源Postgres數據庫，可以使用PG向量擴展名存儲嵌入。

教程視頻

如果您需要幫助，請通過Twitter取得聯繫

此存儲庫和教程的視覺指南在visual guide文件夾中。

發展

1. 克隆倉庫

 git clone [github https url]

2. 安裝軟件包

 pnpm install

3. 設置您的.env文件

• 將.env.local.example複製到.env您的.env文件應該看起來像這樣：

 OPENAI_API_KEY=

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

• 訪問OpenAI以檢索API鍵，然後插入.env文件中。
• 訪問supabase以創建數據庫並根據DOCS指令在用戶儀表板中檢索鍵

4. 在config文件夾中，用您的網站URL替換數組中的URL（腳本需要多個URL）。

5. 在utils/custom_web_loader.ts中， load函數中的title ， date和content值替換為您想從給定的網頁提取的文本的CSS元素。您可以在此處了解有關如何使用Cheerio的更多信息

您可以將自定義元素添加到元數據中以滿足您的需求，但是請注意，根據以下的默認加載程序格式， pageContent和metadata至少將包含source屬性作為返回值的字符串：

 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稍後將存儲在您的Supabase數據庫表中。

6. 在您的supabase SQL編輯器中復制並運行schema.sql

• 交叉檢查數據庫中存在的documents表以及match_documents功能。

？刮擦和嵌入的說明

在scripts/scrape-embed.ts中運行刮擦和嵌入腳本。TS簡單地運行：

npm run scrape-embed

該腳本將訪問config文件夾中指出的所有URL，並提取您在custom_web_loader.ts文件中指定的數據。

然後，它將使用OpenAI的嵌入（ text-embedding-ada-002 ）將刮擦數據轉換為向量。

運行應用程序

一旦您驗證了已成功添加到Supabase表中的嵌入和內容，就可以運行應用程序npm run dev並輸入一個問題以詢問您的網站。

信用

此存儲庫的前端靈感來自Langchain-Chat-Nextjs

該回購使用生產力專家托馬斯·弗蘭克（Thomas Frank）網站的深入概念指南。