MCP Registry & Tester

MCP Lab

MCP Lab は、HTTP ベースの Model Context Protocol（MCP）サーバーを登録したり、ツールを手動でテストしたり、ガイド付きチャットを通じて LLM にツールを呼び出させたりできる Next.js 15 ダッシュボードです。各ユーザーはメールでサインインし、自分専用のレジストリを管理できます。また、AI チャットのワークフローを動かすためのプロバイダー API キーを保存できます。

ライブ版にアクセス：MCP Lab

主な機能

• 機能の確認：利用可能なツールを表示し、詳細な説明を読み、各ツールの JSON 入力スキーマを分析できます。
• OAuth 統合：OAuth 認証が必要な MCP サーバーへの接続を標準でサポートしています（Dynamic Client Registration が必要です。サーバーが RFC 7591 をサポートしている必要があります）。
• カスタムヘッダー：MCP サーバーへのリクエストに使用するカスタムヘッダー（API キーや認証トークンなど）を定義して挿入できます。
• 2 つの操作モード：生成されたフォームから MCP ツールを手動で操作するか、LLM に操作を任せることができます。
• コンテキストの把握：おおよそのコンテキストオーバーヘッドを確認し、接続された各 MCP サーバーのトークン使用量を監視できます。

デプロイアーキテクチャ

このアプリケーションは、SST を使って AWS にデプロイされており、OpenNext を利用して Next.js をサーバーレス環境に適応させています。OpenNext は Next.js のビルド出力を、AWS Lambda やその他のサーバーレスプラットフォームと互換性のある形式に変換します。

OpenNext のデプロイ構成について詳しくは、アーキテクチャのドキュメントを参照してください。

• コンピューティング：AWS Lambda 上で実行されるため、無制限にスケールでき、アイドル時のコストはかかりません。
• CDN：AWS CloudFront が静的アセットを配信し、エッジでコンテンツをキャッシュして低レイテンシを実現します。
• ストレージ：ユーザーデータと設定は、マネージド PostgreSQL データベースに保存されます。
• セキュリティ：環境変数とシークレットは、SST のシークレット管理を通じて安全に管理されます。

トランスポートのサポート

現在、ランタイムで登録できるのは http トランスポート（StreamableHTTPClientTransport）のみです。データベースの列挙型には stdio と sse も含まれていますが、追加のトランスポートが提供されるまでは、UI の「トランスポートタイプ」セレクターを意図的に HTTP のみに制限しています。別のタイプを保存しようとすると、McpConnectionManager に対応する実装がないため、バックエンドで拒否されます。

はじめに

前提条件

• Node.js 18 以降
• ローカルで設定済みの AWS 認証情報（またはプロファイルを使用）
• PostgreSQL データベース URL（ローカルまたはリモート）

セットアップ手順

1. クローンしてインストール

   git clone <repo-url>
   cd mcp-tester
   npm install
   

2. シークレットを設定 SST を使って必要なシークレットを初期化します：

   npx sst secret set DATABASE_URL "postgresql://user:pass@host:5432/mcp_registry"
   npx sst secret set NEXTAUTH_SECRET "your-random-secret"
   npx sst secret set EMAIL_API_KEY "your-email-provider-api-key"
   npx sst secret set EMAIL_FROM "[email protected]"
   npx sst secret set ENCRYPTION_KEY "your-32-char-encryption-key"
   

3. マイグレーションを適用

   npm run db:migrate
   

4. 開発サーバーを起動

   npx sst dev
   

   これによりローカル開発環境が起動し、AWS サンドボックスにリンクされます。
5. ダッシュボードを開く http://localhost:3000 を開き、マジックリンクをリクエストします。メールを確認すると、/dashboard/mcp にリダイレクトされます。

便利なスクリプト

• npm run build – Next.js の本番ビルド
• npm run db:studio – 設定済みのデータベースに対して Drizzle Studio を起動
• npm run lint – Next.js のリント処理

主なワークフロー

1. サインインと API キー

1. /auth/login にアクセスし、マジックリンクをリクエストします（Nodemailer が EMAIL_SERVER 経由で送信します）。
2. サインイン後、/dashboard/credentials を開いてプロバイダーキーを保存します。現在、providers に列挙されているのは OpenAI（openai）と Anthropic（anthropic）のみです。
3. キーは PostgreSQL のアクセス制御によって保存時に暗号化されます。src/services/key-service.ts のサーバーアクションを通じて、キーを読み取り、更新、削除できるのは所有ユーザーだけです。

2. MCP サーバーの登録または編集

• /dashboard/mcp には現在のユーザーのサーバーのみが一覧表示され、登録／編集／削除のアクションボタンが表示されます。
• /dashboard/register では、名前、説明、URL、HTTP ヘッダーを指定できます（現時点では、トランスポートタイプは HTTP に固定されます）。
• /dashboard/edit/[id] では同じフォームを再利用し、/api/mcp-servers/[id] 経由でレコードを読み込みます。
• レコードは API レイヤーでユーザー ID ごとに分離されているため、細工したリクエストであっても、他のユーザーのサーバーにはアクセスできません。

3. 手動でのツールテスト

1. サーバーの Interact をクリックして、/dashboard/mcp/[id] を読み込みます。
2. Connect to MCP Server をクリックします。このページは /api/mcp-connect を呼び出し、さらに McpConnectionManager.connect を使ってツールを一覧表示します。
3. ツールを選択すると、説明、入力スキーマ、自動生成されたフォームが表示されます。スキーマがない場合は、生の JSON テキストエリアに切り替えることもできます。
4. 実行するたびに /api/mcp-call-tool が呼び出され、結果またはエラーが Recent Calls リストに記録されます。ワンクリックでコピーできるボタンもあります。
5. More info を展開するとヘッダーの上書きを編集できます。トークンを一時的に差し替えても、永続的に保存されません。

4. AI チャットランナー

1. 接続後、操作モードを Chat に切り替えると、MCP Lab のチャットサイドバーに選択したサーバーのツールが表示されます。
2. API キーを持っている LLM プロバイダーとモデルの組み合わせを選択します（モデルは src/lib/llm.ts で定義されています）。
3. メッセージは /api/chat 経由でストリーミングされます。1 回のリクエストにつき、ツールの連鎖は 5 ステップまでに制限されます（stepCountIs(5)）。ツール定義は、保存済みのサーバーヘッダーを使って McpConnectionManager.callTool を呼び出します。
4. チャット UI にはアシスタントとユーザーのすべてのメッセージが表示されます。また、応答の処理中は送信を無効にして、ツールが重複して実行されるのを防ぎます。

5. OAuth 接続フロー

1. MCP サーバーが認証（401 応答）を必要とし、Dynamic Client Registration（RFC 7591）に対応している場合、システムは PKCE を使用した OAuth 2.0 Authorization Code フローを開始します。
2. アプリケーションを認可するため、プロバイダーのログインページにリダイレクトされます。
3. 認可に成功すると、ダッシュボード（/api/auth/mcp/callback）にリダイレクトされ、アクセストークンが安全に暗号化されて保存されます。
4. ダッシュボードは自動的に再接続し（auto_connect=true）、以降のすべてのリクエストで保存済みのトークンを使用します。

API ルート

• GET/POST /api/mcp-servers – 認証済みユーザーの MCP サーバーを一覧表示または作成します。
• GET/PUT/DELETE /api/mcp-servers/[id] – 単一のサーバーを取得、更新、または削除します（ユーザーごとに認可を適用）。
• POST /api/mcp-connect – MCP SDK 経由でサーバーに接続し、ツールのメタデータを返します。
• POST /api/mcp-call-tool – JSON 引数を指定して特定のツールを実行し、生の MCP 結果を返します。
• GET /api/api-keys – チャット設定 UI に、保存されているプロバイダーキーを公開します。
• POST /api/chat – 選択した LLM からの応答をストリーミングし、モデルが MCP ツールを呼び出せるようにします。
• api/auth/[...nextauth] – NextAuth がセッション管理とメール確認リンクを処理します。

技術スタック

• フロントエンド：Next.js 15 + React 19、App Router、Server Components、Tailwind 4（PostCSS 経由）+ shadcn/ui。
• 認証：マジックリンクを使った NextAuth、Drizzle アダプター、デプロイ用 SST シークレット。
• データベース：PostgreSQL 15、Drizzle ORM、Drizzle Kit マイグレーション。
• MCP：@modelcontextprotocol/sdk の Streamable HTTP クライアント、手動操作とチャットのツール機能。
• LLM SDK：ai（Vercel AI SDK）、@ai-sdk/openai および @ai-sdk/anthropic のプロバイダー。
• 開発ツール：ESLint 9、TypeScript 5、Turbopack を利用した next dev。

トラブルシューティング

• メールログイン – EMAIL_SERVER が有効な Nodemailer 接続文字列であり、localhost が認証ホストとして許可されていること（AUTH_TRUST_HOST / NEXTAUTH_URL）を確認してください。
• データベースエラー – DATABASE_URL で Postgres に接続でき、マイグレーションが実行されていることを確認してください。Drizzle のエラーには通常、不足しているテーブルが記載されています。
• MCP 接続の失敗 – リモートエンドポイントが Streamable HTTP（@modelcontextprotocol/sdk サーバートランスポート）に対応していること、および必要な認証ヘッダーが設定されていることを確認してください。CORS では OPTIONS、POST、GET を許可する必要があります。
• チャットに「API key not found」と表示される – /dashboard/credentials で対応するプロバイダーキーを追加してください。チャットエンドポイントは、キーがない場合にモデルの呼び出しを拒否します。
• ツール呼び出しの検証 – スキーマは @rjsf/validator-ajv8 で検証されます。不正な JSON やスキーマ違反は、詳細なエラーとともに「Recent Calls」リストに表示されます。

ロードマップ

• 操作 UI で、ツールと並べて MCP リソースを表示します。
• 追加の LLM プロバイダーと、ツールごとのキー選択に対応します。
• OAuth フローで、事前登録済みの client_id と secret に対応します。