หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด
next.js 14 และแอพเราเตอร์พร้อม AI chatbot

next.js ai chatbot x supabase

เทมเพลต AI chatbot โอเพนซอร์ซที่สร้างขึ้นด้วย next.js และ AI SDK โดย Vercel

คุณสมบัติ · ผู้ให้บริการรุ่น ·ปรับใช้· ทำงานในเครื่อง ของคุณเอง


คุณสมบัติ

  • Next.js App Router
    • การกำหนดเส้นทางขั้นสูงสำหรับการนำทางและประสิทธิภาพที่ราบรื่น
    • React Server Components (RSCs) และการกระทำของเซิร์ฟเวอร์สำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์และประสิทธิภาพที่เพิ่มขึ้น
    • การเพิ่มประสิทธิภาพในตัวสำหรับรูปภาพแบบอักษรและสินทรัพย์คงที่
  • ai sdk
    • Unified API สำหรับการสร้างข้อความวัตถุที่มีโครงสร้างและการเรียกใช้เครื่องมือด้วย LLMS
    • hooks สำหรับการสร้างแชทแบบไดนามิกและส่วนต่อประสานผู้ใช้กำเนิด
    • รองรับ OpenAI (ค่าเริ่มต้น), มานุษยวิทยา, Cohere และผู้ให้บริการรุ่นอื่น ๆ
    • การสนับสนุนการสตรีมในตัวสำหรับการตอบสนอง AI แบบเรียลไทม์
  • Shadcn/ui
    • จัดแต่งทรงผมด้วย tailwind css
    • ส่วนประกอบดั้งเดิมจาก Radix UI เพื่อการเข้าถึงและความยืดหยุ่น
    • ธีมที่ปรับแต่งได้และการสนับสนุนโหมดมืด
  • การรวม Supabase
    • Supabase postgres db สำหรับประวัติการแชทที่แข็งแกร่งและการจัดเก็บข้อมูลผู้ใช้
    • ที่เก็บไฟล์ Supabase สำหรับการจัดการไฟล์ที่มีประสิทธิภาพและอัปโหลด
    • Supabase Auth ด้วยผู้ให้บริการตรวจสอบความถูกต้องหลายรายและความปลอดภัยระดับแถว
    • การสมัครสมาชิกแบบเรียลไทม์สำหรับการอัปเดตสด

ผู้ให้บริการรุ่น

เทมเพลตนี้จัดส่งด้วย OpenAI gpt-4o เป็นค่าเริ่มต้น อย่างไรก็ตามด้วย AI SDK คุณสามารถสลับผู้ให้บริการ LLM เป็น OpenAI, มานุษยวิทยา, Cohere และอีกมากมายด้วยรหัสเพียงไม่กี่บรรทัด

วิดีโอ onboarding youtube

วิดีโอนี้นำคุณผ่านวิธีการตั้งค่า AI chatbot ด้วย supabase ตั้งแต่เริ่มต้น เราจะ:

  • ตั้งค่าโครงการ Supabase ใหม่โดยใช้ CLI
  • เชื่อมโยงไปยังแอปของเรา
  • ตัวแปรสภาพแวดล้อมการตั้งค่า
  • เรียกใช้การย้ายฐานข้อมูลเพื่อกำหนดค่าสคีมา
วิดีโอ onboarding youtube

เริ่มต้น

คู่มือวิดีโอเริ่มต้นด่วน

ดูวิดีโอ onboarding ที่ครอบคลุมของเราเพื่อตั้งค่าสภาพแวดล้อมการพัฒนาของคุณอย่างรวดเร็วและเข้าใจโครงสร้างโครงการ: ดูบทช่วยสอน

ข้อกำหนดเบื้องต้น

ก่อนที่คุณจะเริ่มตรวจสอบให้แน่ใจว่าคุณติดตั้งดังต่อไปนี้:

  • Node.js 18+
  • PNPM ( npm install -g pnpm )
  • กระตวน
  • ตัวแก้ไขรหัส (เราขอแนะนำ VS Code)

การตั้งค่า supabase

  1. ติดตั้ง Supabase CLI เลือกวิธีการติดตั้งสำหรับระบบปฏิบัติการของคุณ:

    • 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. สร้างโครงการ 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 Dashboard Supabase หลังจากเลือกองค์กร

  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 >

    ค้นหาค่าเหล่านี้ในแผงควบคุมโครงการ 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 หรือไม่

  • สร้างข้อผิดพลาด

    • ล้าง .next โฟลเดอร์: rm -rf .next
    • ทำความสะอาดการติดตั้งการพึ่งพา: pnpm clean-install

สำหรับความช่วยเหลือเพิ่มเติมเปิดปัญหา

ปรับใช้กับ vercel

ข้อกำหนดเบื้องต้น

  • บัญชี vercel
  • บัญชี supabase
  • คีย์ OpenAI API

ขั้นตอนการปรับใช้

  1. แยกที่เก็บ 

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

  2. กำหนดค่าโครงการ vercel

    • ไปที่ Vercel Dashboard
    • คลิก "โครงการใหม่"
    • นำเข้าพื้นที่เก็บข้อมูลของคุณ
    • เลือก "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

  1. กำหนดค่าการตั้งค่าบิลด์ ในการตั้งค่าโครงการ vercel ของคุณ:

    • สร้างคำสั่ง: pnpm build
    • ไดเรกทอรีเอาท์พุท: .next
    • คำสั่งติดตั้ง: pnpm install

  2. ปรับใช้

    • คลิก "ปรับใช้"
    • Vercel จะสร้างและปรับใช้แอปพลิเคชันของคุณโดยอัตโนมัติ
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด