概要
https://azukiazusa.dev/blog/mcp-standard-ui-extension/
詳細内容
## MCP におけるインタラクティブな UI を標準化する拡張機能 MCP Apps の提案
https://azukiazusa.dev/blog/mcp-standard-ui-extension/
MCP Appsは、AIエージェントがインタラクティブなUIコンポーネントを返すためのModel Context Protocol (MCP) の拡張を標準化し、異なるプラットフォーム間での互換性と再利用性を向上させます。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:4/5 | Anti-Hype:5/5
**Main Journal**: 82/100 | **Annex Potential**: 83/100 | **Overall**: 84/100
**Topics**: [[MCP, AIエージェント, インタラクティブUI, UI標準化, SDK]]
AIエージェントがチャット形式だけでなく、インタラクティブなUIを通じてユーザーと対話する機能（ChatGPTのApps SDKやMCP-UIなど）が注目される一方で、既存のソリューションがModel Context Protocol (MCP) を独自に拡張しているため、プラットフォーム間の互換性がないという課題が指摘されています。本記事は、この課題を解決すべく、MCPにインタラクティブなUIコンポーネントを標準的に扱うための拡張機能「MCP Apps」を提案しています。
MCP Appsの核心的な「なぜ今注目すべきか」は、AIエージェントが任意のHTML、CSS、JavaScriptを含むUIコンポーネントを標準化された方法で提供することで、UIの再利用性を高め、異なるエージェントやプラットフォーム間での互換性を実現するという点にあります。これにより、例えばランニングシューズの検索結果を画像と価格で表示したり、ホテルの予約時に利用可能な部屋をリスト表示してユーザーが選択したりといった、よりリッチなユーザーエクスペリエンスが実現可能になります。
MCP Appsは以下の主要な機能を提供します。
* `ui://` URIスキームを用いたUIリソースの標準的な宣言方法。
* ツールのメタデータに`ui/resourceUri`フィールドを追加することで、UIリソースとツールを関連付け、AIエージェントがツールを呼び出す際に適切なUIを返却できる仕組み。
* JSON-RPCを使用したホスト（UIが実行される環境）とサンドボックス化されたiframe内のUIコンポーネント間での双方向通信。これにより、UIはホストに対してツールの呼び出しや外部リンクのオープンを要求でき、ホストはUIに実行結果やコンテキスト情報（テーマ、表示モード、ロケールなど）を送信できます。セキュリティのためにUIはサンドボックス化されたiframe内で実行されます。
記事では、`@modelcontextprotocol/ext-apps` SDKを用いたMCP Appsの実装方法についても具体的に解説しています。ReactとViteを使用したUIコンポーネントのビルドプロセス、UI初期化処理のための`useApp`フックの利用、そしてMCPサーバーでのUIリソースの登録方法とツールの関連付けが、詳細なコード例と共に示されています。
著者によれば、2025年11月22日時点ではMCP Appsを完全にサポートするホスト実装はまだ存在しないものの、この標準化されたアプローチは、今後のAIエージェントエコシステムにおけるUI開発の互換性と効率性を飛躍的に向上させると期待されています。筆者は、この提案がAIエージェントが提供できる機能とユーザー体験の可能性を大きく広げる重要な一歩であると結論付けています。