modelcontextprotocol/ext-apps

解決する課題

標準的なMCPツールは通常、テキストや構造化データを返すため、複雑な可視化には限界があります。MCP Appsを用いることで、開発者はチャート、フォーム、ダッシュボード、デザインキャンバスなどのインタラクティブなユーザーインターフェースを構築でき、ClaudeやChatGPTなどの準拠したAIチャットクライアント内に直接レンダリングできます。

動作方法

Model Context Protocol (MCP) を拡張し、ツールが ui:// URI を使ってUIリソースを宣言できるようにします。LLMがツールを呼び出すと、ホストクライアントは関連するHTMLインターフェースを取得し、サンドボックス化されたiframe内で表示します。これにより、ホストが通知を通じてUIにデータを渡し、UIがホスト経由で他のツールをトリガーする双方向通信が可能になります。

対象ユーザー

• アプリ開発者: 提供されたSDKとReactフックを使ってインタラクティブなViewを構築する人。
• ホスト開発者: これらのViewをチャットクライアントに埋め込む人。
• MCPサーバー作者: UIメタデータをツールに登録してユーザー体験を向上させる人。

特徴

• 広範なクライアント対応: Claude、ChatGPT、VS Code、Goose、Postmanに対応。
• エージェントワークフロー: AIコーディングエージェントがMCPサーバーに自動的にUIをスケルトン化、移行、追加できる「エージェントスキル」を備える。
• フレームワーク非依存: React、Vue、Svelte、Preact、Solid、Vanilla JS用のスターター・テンプレートを提供。
• 豊富な例: 3Dグローブビューア、リアルタイムOSメトリクス、PDFビューアなど、多数のデモアプリを同梱。