Next.js を使用したヘッドレス MCP の使用 (レジストリから)

設定可能なMCPレジストリで@vercel/mcp-adapterを使用する

デプロイされたURL

このアプリケーションは、 https://nextjs-mcp-use.vercel.appにデプロイされています。

Related MCP server: Example Next.js MCP Server

特徴

• MCP レジストリ: 単一の JSON ファイルで複数の MCP サーバーを構成する

• GitHub Actions : スケジュールされたワークフローと手動ワークフローを使用して API エンドポイントをテストおよび監視します

• エラー処理: タイムアウトと接続失敗を適切に処理します

• 環境変数: 各MCPサーバーの環境変数を設定します

MCPレジストリ

MCPレジストリは、利用可能なすべてのMCPサーバーに関する情報を保存するJSON設定ファイルです。各サーバーは有効化または無効化でき、独自の環境変数を持つことができます。

レジストリはconfig/mcp-registry.jsonにあり、次の構造を持ちます。

{
  "server-name": {
    "url": "http://localhost:3002/sse",
    "enabled": true,
    "env": {
      "API_KEY": "your-api-key"
    }
  },
  "another-server": {
    "url": "https://example.com/sse",
    "enabled": false
  }
}

使用法

このサンプル アプリは、任意の Next.js プロジェクト内のルートのグループに MCP サーバーをドロップインできるVercel MCP アダプターを使用します。

MCP TypeScript SDK ドキュメントに従って、ツール、プロンプト、リソースを使用してapp/[transport]/route.ts更新します。

APIエンドポイント

• チャット API : /api/chat - ストリーミング チャット エンドポイント

• 完了 API : /api/completions - 非ストリーミングチャット完了エンドポイント

APIのテスト

提供されているテスト スクリプトを使用して API エンドポイントをテストできます。

# Test the chat endpoint
npm run test:chat -- --message "Your message here"

# Test the completions endpoint
npm run test:completions -- --message "Your message here"

# Test with a custom URL
npm run test:chat -- --url http://localhost:3000/api/chat --message "Your message here"

GitHubアクション

このプロジェクトには、APIエンドポイントのテストと監視のためのGitHub Actionsワークフローが含まれています。詳細については、.github/workflows/README.mdファイルをご覧ください。

Vercelで実行する場合の注意事項

• SSEトランスポートを使用するには、 process.env.REDIS_URLの下のプロジェクトにRedisが接続されている必要があります。

• 効率的な実行のためにFluid Computeが有効になっていることを確認してください

• Fluidコンピューティングを有効にした後、 app/route.tsを開き、Vercel ProまたはEnterpriseアカウントを使用している場合はmaxDuration 800に調整します。

• Next.js MCP テンプレートをデプロイする

サンプルクライアント

• scripts/test-client.mjsには、呼び出しを試すためのサンプル クライアントが含まれています。

node scripts/test-client.mjs https://nextjs-mcp-use.vercel.app