Example Next.js MCP Server について
@vercel/mcp-adapter で Next.js プロジェクトに MCP ルートを追加するサンプルです。MCP TypeScript SDK を使ってツール、プロンプト、リソースを設定する開発者向けです。
主な機能
- 01Next.js への MCP ルート追加
- 02ツール、プロンプト、リソースのカスタマイズ
- 03Redis を使う SSE トランスポート設定
- 04サンプルクライアントスクリプト
活用シーン
- 01Next.js アプリへの MCP サーバー追加
- 02サンプルクライアントによる呼び出しのテスト
MCP 対応
@vercel/mcp-adapter を使い、Next.js プロジェクトに MCP ルートを提供します。ツール、プロンプト、リソースを設定でき、SSE トランスポートに対応します。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
このサーバーのパッケージやリモートエンドポイントはまだ取得できていません。プロジェクトの README の手順に従ってください。
ツール
ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。
詳細
Next.js MCP サーバーの例
@vercel/mcp-adapterを使用します
使用方法
このサンプルアプリは、任意の Next.js プロジェクト内の複数のルートに MCP サーバーを簡単に追加できる Vercel MCP Adapter を使用しています。
MCP TypeScript SDK のドキュメントに従って、app/[transport]/route.tsを更新し、ツール、プロンプト、リソースを追加してください。
Vercel で実行する場合の注意点
- SSE トランスポートを使用するには、
process.env.REDIS_URLでプロジェクトに Redis を接続する必要があります。 - 効率的に実行するため、Fluid computeが有効になっていることを確認してください。
- Fluid compute を有効にした後、
app/route.tsを開き、Vercel Pro または Enterprise アカウントを使用している場合はmaxDurationを800に調整してください。 - Next.js MCP テンプレートをデプロイする
サンプルクライアント
script/test-client.mjsには、呼び出しを試すためのサンプルクライアントが含まれています。
node scripts/test-client.mjs https://mcp-for-next-js.vercel.app
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。