Vercel Ai Chat Mcp

Chat SDK

Chat SDK は、Next.js と AI SDK で構築された無料のオープンソーステンプレートです。高機能なチャットボットアプリケーションをすばやく構築できます。

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

機能

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

モデルプロバイダー

このテンプレートには、デフォルトのチャットモデルとして xAI の grok-2-1212 が含まれています。ただし、AI SDK を使えば、わずか数行のコードで LLM プロバイダーを OpenAI、Anthropic、Cohere、その他多数に切り替えられます。

独自の環境にデプロイ

Next.js AI Chatbot の独自のバージョンを、ワンクリックで Vercel にデプロイできます。

ローカルでの実行

Next.js AI 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 dev

これで、アプリのテンプレートが localhost:3000 で実行されます。