ai chatbot supabase

next.js AIチャットボットx Supabase

vercelによってnext.jsとAI SDKで構築されたオープンソースAIチャットボットテンプレート。

機能・モデルプロバイダー・独自の展開・ローカルで実行している

特徴

• next.jsアプリルーター
  • シームレスなナビゲーションとパフォーマンスのための高度なルーティング
  • サーバー側のレンダリングとパフォーマンスの向上のためのReact Serverコンポーネント（RSC）とサーバーアクション
  • 画像、フォント、および静的資産の組み込み最適化
• ai sdk
  • LLMSを使用してテキスト、構造化されたオブジェクト、およびツールコールを生成するためのUnifiedAPI
  • 動的チャットと生成ユーザーインターフェイスを構築するためのフック
  • Openai（デフォルト）、人類、炭、その他のモデルプロバイダーをサポートします
  • リアルタイムAI応答の組み込みストリーミングサポート
• shadcn/ui
  • Tailwind CSSを使用したスタイリング
  • アクセシビリティと柔軟性のために、RADIX UIのコンポーネントプリミティブ
  • カスタマイズ可能なテーマとダークモードのサポート
• サパベース統合
  • 堅牢なチャット履歴とユーザーデータストレージのためのSupabase PostgresDB
  • 効率的なファイル管理とアップロードのためのSupabaseファイルストレージ
  • 複数の認証プロバイダーと行レベルのセキュリティを備えたSupabase Auth
  • ライブアップデートのリアルタイムサブスクリプション

モデルプロバイダー

このテンプレートは、デフォルトとしてOpenAI gpt-4oを搭載しています。ただし、AI SDKを使用すると、LLMプロバイダーをOpenAI、人類、協力などに切り替えることができます。

YouTubeオンボーディングビデオ

このビデオでは、SupabaseをゼロからAIチャットボットをゼロからセットアップする方法について説明します。私達はします：

• CLIを使用して新しいSupabaseプロジェクトをセットアップします
• アプリにリンクします
• セットアップ環境変数
• DB移行を実行して、スキーマを構成します

はじめる

クイックスタートビデオガイド

開発環境をすばやく設定し、プロジェクト構造を理解するための包括的なオンボーディングビデオをご覧ください：チュートリアルを見る

前提条件

開始する前に、次のインストールを確認してください。

• node.js 18+
• pnpm（ npm install -g pnpm ）
• git
• コードエディター（VSコードをお勧めします）

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/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

   組織IDは、組織を選択した後、Supabaseダッシュボード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 >

   Supabase Project Dashboardでこれらの値を見つけるプロジェクト設定> 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フォルダー： 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は自動的にアプリケーションを構築および展開します