MCP-UI-Org/mcp-ui

解決する課題

mcp-ui は、Model Context Protocol (MCP) を使用して AI ツール向けのインタラクティブな Web インターフェースを提供するための標準化された方法を提供します。これは、AI エージェントがテキストのみの応答に制限されるという問題を解決し、サーバーがツールをリッチでサンドボックス化された UI コンポーネントにリンクし、互換性のあるホストによってレンダリングできるようにします。

仕組み

このプロジェクトは MCP Apps 標準を実装しており、_meta.ui.resourceUri を介してツールと UI をリンクします。

• サーバーサイド: 開発者は SDK（TypeScript、Python、Ruby で利用可能）を使用して UI リソース（生の HTML や外部 URL など）を作成し、登録します。ツールが呼び出されると、サーバーはホストが UI コンテンツを取得するために使用できる URI を提供します。
• クライアントサイド: ホストは @mcp-ui/client SDK を使用して、AppRenderer や UIResourceRenderer などのコンポーネントでこれらのリソースをレンダリングします。セキュリティのため、リモートコードはサンドボックス化された <iframe> 内で実行されます。
• インタラクティブ性: UI コンポーネントは postMessage プロトコルを介してエージェントと通信でき、UI 内のボタンや入力がホスト側でのツール呼び出しやその他のアクションをトリガーできるようになります。
• アダプター: プラットフォーム固有のアダプターが、オープンな MCP-UI プロトコルをホスト固有の API（例：ChatGPT の Apps SDK）に変換します。

対象読者

• MCP サーバー開発者: AI エージェント用のツールを構築しており、テキストだけでなく視覚的でインタラクティブな体験を提供したい方。
• MCP ホスト開発者: サードパーティ製ツール UI をレンダリングするための標準化された方法を必要とする、AI チャットインターフェースや IDE を構築している開発者。

ハイライト

• 多言語サポート: TypeScript、Python、Ruby 用のサーバーサイド SDK。
• セキュリティファースト: すべてのリモート UI コンテンツはサンドボックス化された iframe 内で実行されます。
• 標準化: MCP Apps 仕様に完全に準拠。
• クロスプラットフォーム: さまざまな AI ホスト（Claude、ChatGPT、Goose など）でウィジェットが動作することを保証するアダプターが含まれています。
• 柔軟なレンダリング: 生の HTML、外部 URL、Remote-DOM をサポート。