ai chatbot supabase

다음 .js ai chatbot x supabase

Open-Source AI Chatbot 템플릿은 Next.js와 Vercel의 AI SDK로 구축되었습니다.

기능 · 모델 제공 업체 · 자신의 배포 · 로컬로 운영

특징

• 다음 .js 앱 라우터
  • 원활한 내비게이션 및 성능을위한 고급 라우팅
  • 서버 측 렌더링 및 성능 향상을위한 RSC (React Server Component) 및 서버 작업
  • 이미지, 글꼴 및 정적 자산에 대한 내장 최적화
• AI SDK
  • LLM으로 텍스트, 구조화 된 개체 및 도구 통화를 생성하기위한 통합 API
  • 동적 채팅 및 생성 사용자 인터페이스를 구축하기위한 고리
  • OpenAI (기본값), 인류, 코어 및 기타 모델 제공 업체를 지원합니다
  • 실시간 AI 응답을위한 내장 스트리밍 지원
• shadcn/ui
  • 테일 윈드 CSS 스타일링
  • 접근성 및 유연성을위한 Radix UI의 구성 요소 프리미티브
  • 사용자 정의 가능한 테마 및 다크 모드 지원
• Supabase 통합
  • 강력한 채팅 기록 및 사용자 데이터 저장을위한 Supabase Postgres DB
  • 효율적인 파일 관리 및 업로드를위한 Supabase 파일 스토리지
  • 여러 인증 제공 업체 및로드 레벨 보안 기능을 갖춘 Supabase Auth
  • 라이브 업데이트에 대한 실시간 구독

모델 제공 업체

이 템플릿은 OpenAI gpt-4o 와 함께 기본값으로 선적합니다. 그러나 AI SDK를 사용하면 LLM 제공 업체를 OpenAi, Anthropic, Cohere 등으로 전환 할 수 있습니다.

YouTube 온 보딩 비디오

이 비디오는 처음부터 Supabase와 함께 AI 챗봇을 설정하는 방법을 안내합니다. 우리는 :

• CLI를 사용하여 새로운 Supabase 프로젝트를 설정하십시오
• 앱에 연결하십시오
• 설정 환경 변수
• 스키마를 구성하려면 DB 마이그레이션을 실행하십시오

시작하기

빠른 시작 비디오 가이드

포괄적 인 온 보딩 비디오를 시청하여 개발 환경을 신속하게 설정하고 프로젝트 구조를 이해하십시오 : 자습서보기

전제 조건

시작하기 전에 다음을 설치해야합니다.

• node.js 18+
• PNPM ( npm install -g pnpm )
• git
• 코드 편집기 (우리는 코드를 추천합니다)

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

   • Linux :

     brew install supabase/tap/supabase

   • NPM/BON :

     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

   조직 ID는 조직을 선택한 후 Supabase Dashboard URL에서 찾을 수 있습니다.

3. 프로젝트를 연결하십시오

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

   2 단계에서 프로젝트 ID와 데이터베이스 비밀번호가 필요합니다.

4. 환경 변수 구성 다음 변수로 .env.local 파일을 만듭니다.

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

   프로젝트 설정> API에서 Supabase 프로젝트 대시 보드에서 이러한 값을 찾으십시오.

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 대시 보드로 이동하십시오
   • "새 프로젝트"를 클릭하십시오.
   • 포크 리포지토리를 가져 오십시오
   • 프레임 워크로 "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은 응용 프로그램을 자동으로 빌드하고 배포합니다