langchain supabase website chatbot

Langchain & Supabase - إنشاء chatgpt chatbot لموقع الويب الخاص بك

قم بإنشاء chatgpt chatbot لموقع الويب الخاص بك باستخدام Langchain و Supabase و TypeScript و Openai و Next.js. Langchain هو إطار يجعل من السهل إنشاء تطبيقات AI/LLM القابلة للتطوير. Supabase هي قاعدة بيانات Postgres مفتوحة المصدر يمكنها تخزين التضمينات باستخدام ملحق متجه PG.

فيديو تعليمي

تواصل مع Twitter إذا كنت بحاجة إلى مساعدة

الدليل المرئي لهذا الريبو والبرنامج التعليمي في مجلد visual guide .

تطوير

1. استنساخ الريبو

 git clone [github https url]

2. تثبيت الحزم

 pnpm install

3. قم بإعداد ملف .env الخاص بك

• copy .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 لإنشاء قاعدة بيانات واسترداد مفاتيحك في لوحة معلومات المستخدم وفقًا لتعليمات المستندات

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. نسخ وتشغيل schema.sql في محرر Supabase SQL الخاص بك

• قم بفحص جدول documents موجود في قاعدة البيانات بالإضافة إلى وظيفة match_documents .

؟ تعليمات لتجاهل وتضمين

لتشغيل البرنامج النصي للكشط والتضمين في scripts/scrape-embed.ts .

npm run scrape-embed

سيقوم هذا البرنامج النصي بزيارة جميع عناوين URL المذكورة في مجلد config واستخراج البيانات التي حددتها في ملف custom_web_loader.ts .

بعد ذلك ، سيستخدم تضمينات Openai ( text-embedding-ada-002 ) لتحويل بياناتك المكثفة إلى متجهات.

تشغيل التطبيق

بمجرد التحقق من أن التضمينات والمحتوى قد تمت إضافتها بنجاح إلى جدول Supabase الخاص بك ، يمكنك تشغيل التطبيق npm run dev واكتب سؤالًا لطرح موقع الويب الخاص بك.

ائتمان

واجهة هذا الريبو مستوحى من langchain-chat-nextjs

يستخدم هذا الريبو أدلة فكرة متعمقة من موقع الويب الخاص بخبير الإنتاجية ، توماس فرانك.