Mcp Client

// ===== セットアップ手順 ===== /* セットアップ手順：

1. 新しい Angular プロジェクトを作成します： ng new mcp-angular-client --routing=false --style=css

2. 生成されたファイルを上記のコードに置き換えます

3. 設定ファイルを assets ディレクトリにコピーします：

   • src/assets/mcp_server_discovery.json
   • src/assets/mcp_tool_context.json

4. 依存関係をインストールします： npm install

5. 開発サーバーを起動します： ng serve

6. MCP サーバーが localhost:5656 で実行されていることを確認します

7. http://localhost:4200 でアプリケーションにアクセスします

機能：

✅ サーバー検出と接続管理 ✅ パラメーター置換によるツール実行
✅ すべてのスキーマエンティティに対する完全な CRUD 操作 ✅ JSON-API 形式による高度なフィルタリング ✅ リアルタイムの操作ログ記録 ✅ レスポンシブ UI デザイン ✅ エラー処理とステータス追跡 ✅ CORS プロキシ設定

使用例：

1. MCP サーバーに接続する：

   • Server Status セクションで、サーバーの横にある「Connect」をクリックします

2. ツールを実行する：

   • Available Tools セクションの「Execute」ボタンを使用します

3. フィルターを使ってデータを読み込む：

   • 「High Credit Customers」は credit_limit > 5000 の顧客を読み込みます
   • 「Expensive Products」は unit_price > 100 の商品を読み込みます
   • 「Recent Orders」は 2024 年の注文を読み込みます

4. メールを送信する：

   • 顧客の横にある「Send Email」をクリックして、メールツールを実行します

5. 操作を監視する：

   • Operations Log ですべての操作とそのステータスを確認します

アーキテクチャ：

• MCPDiscoveryService：サーバーの検出と接続を処理します
• MCPToolsService：パラメーター置換を行ってツールを実行します
• DataService：すべてのエンティティのフィルタリング済みデータへのアクセスを提供します
• リアクティブ UI：オブザーバブルを使用してリアルタイムに更新します
• 型安全性：すべてのデータモデルに完全な TypeScript インターフェースを使用します

フレームワークは完全に拡張可能で、本番環境ですぐに使用できます！ */