ai chatbot supabase

Next.js ai chatbot x supabase

Template Open-Source AI Chatbot yang dibangun dengan Next.js dan AI SDK oleh Vercel.

Fitur · Penyedia Model · Menyebarkan Anda sendiri · berjalan secara lokal

Fitur

• Router Aplikasi Next.js
  • Routing lanjutan untuk navigasi dan kinerja yang mulus
  • Reaksi komponen server (RSC) dan tindakan server untuk rendering sisi server dan peningkatan kinerja
  • Optimalisasi bawaan untuk gambar, font, dan aset statis
• AI SDK
  • API Terpadu untuk Menghasilkan Teks, Objek Terstruktur, dan Panggilan Alat dengan LLMS
  • Kait untuk Membangun Obrolan Dinamis dan Antarmuka Pengguna Generatif
  • Mendukung OpenAi (Default), Antropik, COHERE, dan Penyedia Model Lainnya
  • Dukungan streaming bawaan untuk tanggapan AI real-time
• shadcn/ui
  • Styling dengan CSS Tailwind
  • Komponen Primitif dari Radix UI untuk aksesibilitas dan fleksibilitas
  • Tema yang dapat disesuaikan dan dukungan mode gelap
• Integrasi Supabase
  • Supabase Postgres DB untuk riwayat obrolan yang kuat dan penyimpanan data pengguna
  • Penyimpanan File Supabase untuk Manajemen File yang Efisien dan Unggah
  • Supabase Auth dengan beberapa penyedia otentikasi dan keamanan tingkat baris
  • Langganan real-time untuk pembaruan langsung

Penyedia Model

Template ini dikirimkan dengan OpenAI gpt-4o sebagai default. Namun, dengan AI SDK, Anda dapat beralih penyedia LLM ke Openai, Anthropic, Cohere, dan banyak lagi dengan hanya beberapa baris kode.

Video Onboarding YouTube

Video ini memandu Anda melalui cara mengatur chatbot AI dengan Supabase dari awal. Kami akan:

• Siapkan Proyek Supabase Baru Menggunakan CLI
• Tautkan ke aplikasi kami
• Pengaturan Variabel Lingkungan
• Jalankan migrasi DB untuk mengonfigurasi skema

Memulai

Panduan Video Mulai Cepat

Tonton video onboarding komprehensif kami untuk dengan cepat mengatur lingkungan pengembangan Anda dan memahami struktur proyek: Tonton tutorial

Prasyarat

Sebelum Anda mulai, pastikan Anda menginstal berikut:

• Node.js 18+
• PNPM ( npm install -g pnpm )
• Git
• Editor Kode (kami merekomendasikan VS Code)

Pengaturan Supabase

1. Instal Supabase CLI Pilih metode instalasi untuk sistem operasi Anda:

   • Mac:

     brew install supabase/tap/supabase

   • Windows (PowerShell):

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

   • Linux:

     brew install supabase/tap/supabase

   • NPM/BUN:

     npx supabase < command >

2. Buat Proyek Supabase

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

   ID Organisasi Anda dapat ditemukan di URL Dasbor Supabase setelah memilih organisasi

3. Tautkan proyek Anda

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

   Anda akan memerlukan ID proyek dan kata sandi basis data dari langkah 2.

4. Konfigurasi Variabel Lingkungan Buat file .env.local dengan variabel berikut:

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

   Temukan nilai -nilai ini di Dasbor Proyek Supabase Anda di bawah Pengaturan Proyek> API

5. Inisialisasi skema basis data

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

Pengembangan Lokal

1. Klon dan instal

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

2. Mulai Server Pengembangan

   pnpm dev

   Aplikasi ini akan tersedia di http: // localhost: 3000

3. Perintah Pengembangan

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

Pemecahan masalah

Masalah dan Solusi Umum:

• Masalah koneksi Supabase

  • Verifikasi variabel lingkungan Anda diatur dengan benar
  • Periksa apakah database aktif di dasbor Supabase

• Membangun kesalahan

  • Hapus .next folder: rm -rf .next
  • Bersihkan Ketergantungan Instal: pnpm clean-install

Untuk bantuan lebih lanjut, buka masalah.

Digunakan dengan Vercel

Prasyarat

• Akun Vercel
• Akun Supabase
• Kunci API Openai

Langkah -langkah penempatan

1. Garpu repositori

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

2. Konfigurasikan Proyek Vercel

   • Pergi ke Dashboard Vercel
   • Klik "Proyek Baru"
   • Impor repositori bercabang Anda
   • Pilih "Next.js" sebagai kerangka kerja

3. Atur variabel lingkungan dalam pengaturan proyek Vercel Anda, tambahkan variabel lingkungan berikut:

 # 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. Konfigurasikan Pengaturan Bangun di Pengaturan Proyek Vercel Anda:

   • Bangun Perintah: pnpm build
   • Direktori Output: .next
   • Instal Command: pnpm install

5. Menyebarkan

   • Klik "Deploy"
   • Vercel akan secara otomatis membangun dan menggunakan aplikasi Anda