Multi-Component System with A2A and MCP Server Integration

A2A および MCP サーバー統合を備えたマルチコンポーネントシステム

このプロジェクトは、最新のウェブテクノロジーを使用して構築された、拡張性の高いマルチコンポーネントシステムです。

アーキテクチャの概要

このシステムは、連携して動作する複数の疎結合コンポーネントで構成されています。

1. フロントエンド：Vite で構築された、Material-UI を使用する React/TypeScript アプリケーション
2. バックエンド API：API エンドポイントを提供する Python/FastAPI サービス
3. プロキシサーバー：適切なサービスにリクエストをルーティングする Node.js プロキシ
4. A2A サーバー：Google A2A プロトコルに準拠したエージェント間サーバーの実装
5. MCP サーバー：ツール、リソース、プロンプトを提供する Anthropic Model Context Protocol サーバー

コンポーネント

フロントエンド

• TypeScript を使用したモダンな React アプリケーション
• コンポーネントのスタイリングに Material-UI を使用
• Zustand による状態管理
• レスポンシブなダッシュボード UI
• A2A プロトコルと MCP プロトコルの両方に対応するクライアント実装

バックエンド API

• FastAPI（Python）バックエンド
• ヘルスチェックエンドポイント
• /api/doc に Redoc による API ドキュメントを提供
• /api/api/v1/methods に API メソッドの一覧を提供

プロキシサーバー

• Node.js ベースのリバースプロキシ
• リクエストを適切なサービスにルーティングします。
  • フロントエンドのリクエスト → Vite 開発サーバー
  • API リクエスト → FastAPI バックエンド
  • A2A リクエスト → A2A サーバー
  • MCP/SSE リクエスト → MCP サーバー
• リアルタイム通信のための WebSocket サポート

A2A サーバー

• Google A2A プロトコルの実装
• エージェント間の通信を可能にします
• タスク管理およびメッセージング機能を提供します
• 直接リクエストとストリーミング更新の両方をサポートします

MCP サーバー（Python）

• Anthropic Model Context Protocol の Python/FastAPI 実装
• エージェント向けにツール、リソース、プロンプトを提供します
• リアルタイム更新のための Server-Sent Events（SSE）をサポートします
• 2 つのパス構造（/endpoint と /sse/endpoint）

サーバー統合

A2A サーバーの統合

A2A サーバーは、プロキシサーバーを介してメインアプリケーションと統合されています。次のエンドポイントへのリクエストは A2A サーバーにルーティングされます。

• /.well-known/agent.json：エージェントの情報と機能
• /tasks：JSON-RPC リクエスト用のタスク管理エンドポイント
• /agent-card/*：このパスへのすべてのリクエスト（すべての HTTP メソッド）を A2A サーバーにルーティングします

実装と使用方法の詳細については、A2A サーバーのドキュメントを参照してください。

MCP サーバーの統合

MCP（Anthropic Model Context Protocol）サーバーは、プロキシサーバーを介してメインアプリケーションと統合されています。次のエンドポイントへのリクエストは MCP サーバーにルーティングされます。

• /sse/*：すべての SSE エンドポイント（ステータス、ツール、リソース、プロンプト）
• /sse：SSE イベントストリームエンドポイント

MCP サーバーは次を提供します。

• ツール API：アクションの実行に呼び出せる関数
• リソース API：ダウンロード可能な静的ファイルとデータ
• プロンプト API：LLM プロンプトを生成するためのテンプレート
• Server-Sent Events（SSE）：リアルタイム更新とストリーミング

詳細については、MCP サーバーのドキュメントとMCP クライアントのドキュメントを参照してください。

開発

前提条件

• Node.js 20+
• Python 3.11+
• npm または yarn

アプリケーションの実行

アプリケーションは複数のサービスに分かれており、それぞれが独自のプロセスで実行されます。

1. API バックエンド：

   cd api
   pip install -r requirements.txt
   python main.py
   

2. フロントエンド開発サーバー：

   cd frontend
   npm install
   npm run dev
   

3. プロキシサーバー：

   node proxy-server.js
   

4. A2A サーバー：

   cd a2a-server
   node simple-server.js  # JavaScript implementation
   # or for TypeScript implementation (if compiled)
   # node dist/main.js
   

5. MCP サーバー：

   cd mcp-server
   pip install -r requirements.txt
   python mcp_server.py
   

テストの実行

A2A サーバーの統合テストを利用できます。

cd tests
node run-tests.js  # Runs all A2A server tests

API エンドポイント

バックエンド API

• GET /health：ヘルスチェックエンドポイント
• GET /api/v1/methods：利用可能な API メソッドの一覧
• GET /api/doc：API ドキュメント（Redoc）

A2A サーバー

• GET /.well-known/agent.json：エージェントカード情報
• POST /tasks：タスク操作用の JSON-RPC エンドポイント：
  • tasks/send：エージェントにメッセージを送信します
  • tasks/sendSubscribe：ストリーミング更新とともにメッセージを送信します
  • tasks/get：ID でタスク情報を取得します
  • tasks/cancel：実行中のタスクをキャンセルします

MCP サーバー

• GET /status または GET /sse/status：サーバーのステータスと利用可能なリソース
• GET /tools または GET /sse/tools：利用可能なツールの一覧
• POST /tools/{name} または POST /sse/tools/{name}：ツールを実行します
• GET /resources または GET /sse/resources：利用可能なリソースの一覧
• GET /resources/{name} または GET /sse/resources/{name}：指定したリソースを取得します
• GET /prompts または GET /sse/prompts：利用可能なプロンプトテンプレートの一覧
• POST /prompts/{name} または POST /sse/prompts/{name}：プロンプトを生成します
• GET /sse：リアルタイム更新用の Server-Sent Events（SSE）接続