ai chatbot supabase

next.js ai chatbot x supabase

قالب chatbot AI مفتوح المصدر تم تصميمه باستخدام Next.js و AI SDK بواسطة Vercel.

الميزات · مزودي النماذج · نشر تشغيل خاص بك محليًا

سمات

• Next.js App Router
  • التوجيه المتقدم للتنقل والأداء السلس
  • مكونات React Server (RSCs) وإجراءات الخادم لتقديم جانب الخادم وزيادة الأداء
  • تحسينات مدمجة للصور والخطوط والأصول الثابتة
• منظمة العفو الدولية SDK
  • واجهة برمجة تطبيقات موحدة لإنشاء النص ، والكائنات المهيكلة ، ومكالمات الأدوات مع LLMS
  • السنانير لبناء دردشة ديناميكية وواجهات مستخدم توليدية
  • يدعم Openai (الافتراضي) ، الأنثروبور ، المشيخ ، وغيرهم من مقدمي الخدمات النماذج
  • دعم تدفق مدمج لاستجابات الذكاء الاصطناعى في الوقت الفعلي
• Shadcn/UI
  • التصميم مع CSS Tailwind
  • بدائل المكونات من Radix UI للوصول والمرونة
  • موضوعات قابلة للتخصيص ودعم الوضع المظلم
• تكامل Supabase
  • supabase postgres db لسجل الدردشة القوي وتخزين بيانات المستخدم
  • تخزين الملفات supabase لإدارة الملفات الفعالة وتحميلها
  • Auth Supabase مع مقدمي مصادقة متعددة وأمن على مستوى الصف
  • اشتراكات في الوقت الفعلي للتحديثات المباشرة

مقدمي النموذج

يشحن هذا القالب مع Openai gpt-4o باعتباره الافتراضي. ومع ذلك ، مع AI SDK ، يمكنك تبديل مقدمي خدمات LLM إلى Openai ، والأنثروبور ، والتعاون ، وغيرها الكثير مع بضعة أسطر من التعليمات البرمجية.

يوتيوب على متن الطائرة

هذا الفيديو يمر بك من خلال كيفية إعداد chatbot منظمة العفو الدولية مع Supabase من نقطة الصفر. ونحن سوف:

• قم بإعداد مشروع Supabase جديد باستخدام CLI
• ربطه بتطبيقنا
• متغيرات البيئة الإعداد
• قم بتشغيل ترحيل DB لتكوين المخطط

ابدء

دليل الفيديو السريع السريع

شاهد الفيديو الشامل على متن الطائرة لإعداد بيئة التطوير الخاصة بك بسرعة وفهم بنية المشروع: شاهد البرنامج التعليمي

المتطلبات الأساسية

قبل أن تبدأ ، تأكد من تثبيت ما يلي:

• Node.js 18+
• PNPM ( npm install -g pnpm )
• غيت
• محرر رمز (نوصي مقابل الكود)

إعداد supabase

1. قم بتثبيت Supabase CLI ، اختر طريقة التثبيت لنظام التشغيل الخاص بك:

   • ماك:

     brew install supabase/tap/supabase

   • Windows (PowerShell):

     scoop bucket add supabase https: // github.com / supabase / scoop - bucket.git
     scoop install supabase

   • لينكس:

     brew install supabase/tap/supabase

   • NPM/BUN:

     npx supabase < command >

2. إنشاء مشروع supabase

    # Create a new project
   npx supabase projects create -i " ai-chatbot-supabase "
   
   # Note: Save the project ID and database password shown after creation

   يمكن العثور على معرف مؤسستك في عنوان URL Supabase Dashboard بعد اختيار مؤسسة

3. ربط مشروعك

    # Initialize Supabase configuration
   npx supabase init
   
   # Link to your remote project
   npx supabase link --project-ref your-project-id

   ستحتاج إلى معرف المشروع وكلمة مرور قاعدة البيانات من الخطوة 2.

4. تكوين متغيرات البيئة إنشاء ملف .env.local مع المتغيرات التالية:

   NEXT_PUBLIC_SUPABASE_URL= < api-url >
   NEXT_PUBLIC_SUPABASE_ANON_KEY= < anon-key >

   ابحث عن هذه القيم في لوحة معلومات Project Supabase الخاصة بك ضمن إعدادات المشروع> API

5. تهيئة مخطط قاعدة البيانات

    # Apply all migrations
   supabase db push
   
   # Verify the schema
   supabase db reset --dry-run

التنمية المحلية

1. استنساخ وتثبيت

   git clone https://github.com/your-username/ai-chatbot-supabase.git
   cd ai-chatbot-supabase
   pnpm install

2. بدء تشغيل خادم التطوير

   pnpm dev

   سيكون التطبيق متاحًا على http: // localhost: 3000

3. أوامر التطوير

   pnpm build          # Build for production
   pnpm start          # Start production server
   pnpm lint          # Run ESLint
   pnpm type-check    # Run TypeScript checks

استكشاف الأخطاء وإصلاحها

القضايا والحلول الشائعة:

• قضايا اتصال supabase

  • تحقق من تعيين متغيرات البيئة الخاصة بك بشكل صحيح
  • تحقق مما إذا كانت قاعدة البيانات نشطة في لوحة معلومات Supabase

• بناء الأخطاء

  • Clear .next Folder: rm -rf .next
  • تبعيات تثبيت تنظيف: pnpm clean-install

لمزيد من المساعدة ، افتح مشكلة.

نشر مع Vercel

المتطلبات الأساسية

• حساب Vercel
• حساب supabase
• مفتاح API Openai

خطوات النشر

1. شوكة المستودع

   https://github.com/your-username/ai-chatbot-supabase

2. تكوين مشروع Vercel

   • اذهب إلى لوحة معلومات Vercel
   • انقر فوق "مشروع جديد"
   • استيراد مستودعك المتشعب
   • حدد "next.js" كإطار عمل

3. اضبط متغيرات البيئة في إعدادات مشروع Vercel ، أضف متغيرات البيئة التالية:

 # Required
NEXT_PUBLIC_SUPABASE_URL=           # From Supabase project settings
NEXT_PUBLIC_SUPABASE_ANON_KEY=      # From Supabase project settings
OPENAI_API_KEY=                     # Your OpenAI API key

4. قم بتكوين إعدادات الإنشاء في إعدادات مشروع Vercel:

   • أمر بناء: pnpm build
   • دليل الإخراج: .next
   • الأمر التثبيت: pnpm install

5. نشر

   • انقر فوق "نشر"
   • ستقوم Vercel تلقائيًا بإنشاء تطبيقك ونشره