Chatbot（旧 AI Chatbot）は、Next.js と AI SDK で構築された無料のオープンソーステンプレートで、強力なチャットボットアプリケーションを素早く構築するのに役立ちます。

ドキュメントを読む · 機能 · モデルプロバイダー · 独自にデプロイする · ローカルで実行する

• Next.js App Router
  • シームレスなナビゲーションとパフォーマンスのための高度なルーティング
  • サーバーサイドレンダリングとパフォーマンス向上のための React Server Components（RSCs）と Server Actions
• AI SDK
  • LLM でテキスト、構造化オブジェクト、ツール呼び出しを生成するための統一 API
  • 動的なチャットと生成的ユーザーインターフェースを構築するための Hook
  • AI Gateway 経由で OpenAI、Anthropic、Google、xAI、その他のモデルプロバイダーをサポート
• shadcn/ui
  • Tailwind CSS でのスタイリング
  • アクセシビリティと柔軟性のための Radix UI のコンポーネント基本要素
• データ永続化
  • チャット履歴とユーザーデータを保存するための Neon Serverless Postgres
  • 効率的なファイルストレージのための Vercel Blob
• Auth.js
  • シンプルで安全な認証

このテンプレートは Vercel AI Gateway を使用して、統一インターフェースを通じて複数の AI モデルにアクセスします。モデルは lib/ai/models.ts で設定され、モデルごとのプロバイダーのルーティングが行われます。含まれるモデル：Mistral、Moonshot、DeepSeek、OpenAI、xAI。

Vercel デプロイメントの場合：認証は OIDC トークン経由で自動的に処理されます。

非 Vercel デプロイメントの場合：`.env.local` ファイルで AI_GATEWAY_API_KEY 環境変数を設定して、AI Gateway API キーを提供する必要があります。

AI SDK では、ほんの数行のコードで OpenAI、Anthropic、Cohere など、直接 LLM プロバイダーに切り替えることもできます。

Chatbot の独自バージョンを Vercel にワンクリックでデプロイできます：

Chatbot を実行するには、.env.example で定義されている環境変数を使用する必要があります。このために Vercel Environment Variables を使用することをお勧めしますが、.env ファイルがあれば十分です。

注意：.env ファイルをコミットしないでください。そうするとシークレットが公開され、他のユーザーが各 AI および認証プロバイダーアカウントへのアクセス制御ができるようになります。

1. Vercel CLI をインストール：npm i -g vercel
2. ローカルインスタンスを Vercel と GitHub アカウントにリンク（.vercel ディレクトリを作成）：vercel link
3. 環境変数をダウンロード：vercel env pull

pnpm install
pnpm db:migrate # Setup database or apply latest database changes
pnpm dev

アプリテンプレートは localhost:3000 で実行されているはずです。