langchain supabase website chatbot

Langchain & Supabase - Buat chatbot chatgpt untuk situs web Anda

Buat Chatgpt Chatbot untuk situs web Anda menggunakan Langchain, Supabase, TypeScript, OpenAi, dan Next.js. Langchain adalah kerangka kerja yang membuatnya lebih mudah untuk membangun aplikasi AI/LLM yang dapat diskalakan. Supabase adalah database postgres open source yang dapat menyimpan embeddings menggunakan ekstensi vektor PG.

Video tutorial

Hubungi melalui twitter jika Anda membutuhkan bantuan

Panduan visual repo dan tutorial ini ada di folder visual guide .

Perkembangan

1. Kloning repo

 git clone [github https url]

2. Instal Paket

 pnpm install

3. Siapkan file .env Anda

• Salin .env.local.example ke .env file .env Anda akan terlihat seperti ini:

 OPENAI_API_KEY=

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

• Kunjungi OpenAI untuk mengambil kunci API dan masukkan ke dalam file .env Anda.
• Kunjungi Supabase untuk membuat database dan mengambil kunci Anda di dasbor pengguna sesuai instruksi Docs

4. Di folder config , ganti URL di array dengan URL situs web Anda (skrip membutuhkan lebih dari satu URL).

5. Di utils/custom_web_loader.ts di dalam fungsi load ganti nilai title , date dan content dengan elemen CSS teks yang ingin Anda ekstrak dari halaman web yang diberikan. Anda dapat mempelajari lebih lanjut tentang cara menggunakan cheerio di sini

Anda dapat menambahkan elemen khusus Anda ke metadata untuk memenuhi kebutuhan Anda, perhatikan bahwa format loader default sesuai di bawah ini mengharapkan setidaknya string untuk pageContent dan metadata yang berisi properti source sebagai nilai yang dikembalikan:

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

pageContent dan metadata nantinya akan disimpan dalam tabel database Supabase Anda.

6. Salin dan Jalankan schema.sql di Supabase SQL Editor Anda

• Periksa silang tabel documents ada dalam database serta fungsi match_documents .

? Instruksi untuk mengikis dan menanamkan

Untuk menjalankan skrip pengikis dan menanamkan dalam scripts/scrape-embed.ts Cukup jalankan:

npm run scrape-embed

Script ini akan mengunjungi semua URL yang dicatat di folder config dan mengekstrak data yang Anda tentukan dalam file custom_web_loader.ts .

Maka itu akan menggunakan embeddings openai ( text-embedding-ada-002 ) untuk mengubah data yang dikikis menjadi vektor.

Jalankan aplikasi

Setelah Anda memverifikasi bahwa embeddings dan konten telah berhasil ditambahkan ke tabel SupAbase Anda, Anda dapat menjalankan aplikasi npm run dev dan mengetik pertanyaan untuk ditanyakan kepada situs web Anda.

Kredit

Frontend repo ini terinspirasi oleh langchain-chat-nextjs

Repo ini menggunakan panduan gagasan mendalam dari situs web ahli produktivitas, Thomas Frank.