こんにちは。FLINTERS河内です。
AIソムリエは新しくでてきたAI関連ツールを味見する社内勉強会です。
今回は私が担当で MCP Apps を調べました。
1週間くらい前、タイムラインに VSCode が MCP Apps に対応というニュースが流れて来て、なんだろうなあ、と思ったのがキッカケです。
以下は MCP の blog と公式ドキュメントです。
以下は勉強会のやり取りを書き起こしてまとめたものです。
MCP Apps は、LLM（大規模言語モデル）アプリケーションにおけるUI表示プロトコルの拡張であり、従来のチャット形式が抱えていた課題を解決するために開発されました。2026年1月26日にステーブルになり、現在注目を集めている技術です。
MCP Appsが解決する課題
従来のチャット形式のLLMアプリケーションでは、データ探索においてグラフの種類変更（例：線グラフから棒グラフへ）や並べ替えなどのUI操作を行う際、何度も自然言語での指示を繰り返す必要がありました。この煩雑さを解消するため、MCPはUIを表示し、そのUIとAIの間で相互にやり取りを行うためのプロトコルの拡張として定義されました。
MCPによって実現される主な機能は以下の2点です:
- UI表示: チャット形式のAI内で、MCPとして設定されたUIをインライン型で表示できます。
- 相互通信: ホスト（ChatGPT、Copilotなど）とUI（MCP App）の間で双方向の通信が可能です。
MCP Appsの技術詳細とアーキテクチャ
MCP Appsは、アプリケーションのUIをサービス提供者側が定義し、LLMクライアント（ホスト）に表示させる仕組みです。
通信とレンダリングの仕組み
UIの埋め込みにはiFrameが使用されます。ホスト側とUI側はpostMessage APIを用いて相互に通信し、やり取りにはJSON RPCが利用されます。
- ツールの宣言: MCPサーバー側で、UIリソースのURIを含むツールを宣言します。
- リソースのリクエスト: LLMがツールの実行を判断すると、MCPサーバーに対してUIリソースをリクエストします。
- コンテンツの返却: MCPサーバーは、HTML、JS、CSSが一体化されたコンテンツをホスト側に返します。
- レンダリング: ホスト側がそのコンテンツをインラインでレンダリングし、UIが表示されます。
なお、UIはオプショナルな要素であり、MCPを知らないホストに対してもサービスを提供できるようにしておく必要があります。
セキュリティモデル
セキュリティ確保のために以下の機構が用意されています:
- iFrameによる制限: iFrame内に表示されたコンテンツは、親DOMやCookieなどの外部へのアクセスが制限されます。
- JSON RPC監査: UIから他のツールの呼び出しが必要な場合、ホスト側でユーザーに確認するなどの中間的な監査を行うことができます。
- コンテントセキュリティポリシー: HTMLの標準機能であるこのポリシーを使用し、画像やJavaScriptの読み込み元ドメインなどを宣言的に制限することが可能です。
開発者サポート
MCP App開発者向けには、npmパッケージの @modelcontextprotocol/ext-apps が提供されており、UI側（JavaScript、CSS、HTML）のバンドルを容易にします。
UIサイドではReactやVueなどのライブラリも利用可能で、ライブラリで提供される callServerTool() を使用することで、ホストを介したMCPサーバーのツール呼び出しを簡単に行えます。また、アプリ内からの操作で、LLMのコンテキスト（チャット内容とほぼ同等）を更新（注入）することも可能です。
豊富なユースケースと応用例
MCP Appsは、テキストベースのチャットでは難しかった多様なインタラクティブな操作を可能にします。
| ユースケースの分類 | 具体的な機能の例 |
|---|---|
| データ探索 | グラフ表示、グラフの積み上げや拡大表示、グラフ切り替え、ドリルダウンなど、データが変更不要な表示操作をUI内だけで完結。 |
| 複雑な設定入力 | テキストベースでは複雑になりがちな設定を、UI上で入力可能にする。 |
| リッチメディアの埋め込み | 動画や3Dコンテンツなどのリッチメディアを、インタラクティブに操作可能な状態で埋め込む。 |
| リアルタイム監視 | リアルタイムで変化する情報をUIに表示する。 |
また、具体的な応用例として、楽器の練習用に楽譜のベースパートを抜き出し、MIDIのような形式に整形して再生する機能や、Figmaのようなビジュアルな編集画面をチャット内に開く編集エディターなどが話題にあがりました。
統合アプローチの合理性
自然言語とLLMを用いた動的なUI生成というアプローチも存在しますが、コスト効率とUI品質の観点から、サービス提供者側がUIを提供するMCPのアプローチが合理的であるという見解が示されています。
- コストと品質: 用途がある程度決まっている場合、都度ユニークなUIを生成するよりも、提供側のMCPでUIを用意した方が、コストが抑えられ、UIの精度も高くなる。
- 実用化: 応答速度やUIの精度を考慮すると、オンデマンドでのUI生成よりもMCP App側が先行して実用化される可能性が高いと考えられています。
- ユーザー体験: Amazonの商品データ比較のように、データフィードを提供する形式で応用すれば、リンク先を開かずにアプリ内で複数商品の比較や並べ替えが可能になり、ユーザー体験が向上します。
クライアントサポート状況
- 対応ホスト: Claude DesktopとVS CodeのInsidersバージョンはMCP Appに対応していることが確認されています。
- Geminiでの対応: 会議時点ではリストに上がっておらず、未対応の可能性が高いとされています。セキュリティの観点から、MCPはコントロールしない要素が多く、ワークスペースと紐づく運用においては懸念がある可能性が指摘されました。
Discussion