mcpField
E
Example Next.js MCP Server

Example Next.js MCP Server

ローカル
opengov-mcp-server-vercel-nextjs.vercel.appクラウド・インフラ077 週間前に更新

Example Next.js MCP Server について

@vercel/mcp-adapter で Next.js プロジェクトに MCP ルートを追加するサンプルです。MCP TypeScript SDK を使ってツール、プロンプト、リソースを設定する開発者向けです。

主な機能

  1. 01Next.js への MCP ルート追加
  2. 02ツール、プロンプト、リソースのカスタマイズ
  3. 03Redis を使う SSE トランスポート設定
  4. 04サンプルクライアントスクリプト

活用シーン

  1. 01Next.js アプリへの MCP サーバー追加
  2. 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

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。