mcpField
E
Example Next.js MCP Server

Example Next.js MCP Server

ローカル
github.com/rajatsandeepsen開発ツール174 週間前に更新
リポジトリ

Example Next.js MCP Server について

Example Next.js MCP Server は、`@vercel/mcp-adapter` を使って Next.js プロジェクトに MCP ルートを追加する方法を示すサンプルアプリです。呼び出しを試すためのサンプルクライアントも含まれます。

主な機能

  1. 01Next.js での MCP ルート設定
  2. 02ツール、プロンプト、リソースの設定
  3. 03SSE トランスポートの設定案内
  4. 04呼び出しテスト用サンプルクライアント

活用シーン

  1. 01Next.js プロジェクトへの MCP サーバー追加
  2. 02MCP ツール、プロンプト、リソースの定義
  3. 03サンプルクライアントでのサーバー呼び出しテスト

MCP 対応

`@vercel/mcp-adapter` を使い、Next.js のルートで MCP サーバーを提供します。Vercel へのデプロイにおける SSE トランスポートの設定要件も説明しています。

#mcp#nextjs#bun#zod#aisdk#beckn-protocol

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの 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

コメント

Markdown 対応

MCP は初めてですか？

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

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