VS Code で MCP アプリによるインタラクティブ UI 構築へ

VS Code で「チャット内」に動くグラフを描く！MCP Apps が変える AI エージェントの未来

Microsoft と GitHub の開発者アドボケイトが、LLM（大規模言語モデル）との対話に革命をもたらす新規格「MCP Apps」を紹介しました。従来のテキストや ASCII アートに依存していたチャット体験から脱却し、ユーザーが直接操作可能なインタラクティブな UI をチャット内でレンダリングする仕組みです。

本記事では、なぜ MCP Apps が必要とされたのか、その技術的な仕組み、そして VS Code 上での実演を通じて明らかになった開発効率の向上について解説します。

テキスト依存からの脱却：MCP Apps とは何か

Model Context Protocol（MCP）は、アプリケーションが LLM にコンテキストを提供する方法を標準化するオープンプロトコルです。しかし、初期の MCP には大きな課題がありました。それは「返せる情報がテキストのみ」だった点です。

ユーザーが図やグラフの作成を依頼しても、当時のツールでは ASCII アートや絵文字で代用するしかなかったため、複雑なデータの可視化は困難でした。そこで登場したのがMCP Appsです。

サーバーが返すツール結果に UI リソース参照を含め、ホスト（VS Code）がサンドボックス化された iframe でレンダリングする仕組みです。

これにより、サーバー側で生成された HTML や JavaScript を含むリッチなコンポーネントを、チャット内で直接表示・操作できるようになります。単なるスクリーンショットではなく、ユーザーが図形を移動させたり、数値を更新したりできる「ライブな要素」として機能します。

仕組みの核心：サンドボックス化された iframe と双方向通信

MCP Apps がどのように動作するか、その技術的な流れを追ってみましょう。このプロセスは以下のステップで構成されます。

1. ユーザーの質問: ユーザーが「分析結果を見せて」とチャットに入力します。
2. エージェントの判断: LLM を持つエージェントが、必要なツールを MCP サーバーに呼び出します。
3. UI リソースの返却: サーバーは処理結果だけでなく、HTML 要素を指す UI リソース参照も同時に返します。
4. ホストによるレンダリング: VS Code（ホスト）がその参照を受け取り、サンドボックス化された iframe 内でアプリをレンダリングします。

ここで重要なのが「iframe」の役割です。プレゼンターはこれを「ハムスターをケージに入れる」ことに例えています。

アプリを部屋に放し飼いにすれば、ただ噛み砕いてしまうだけです。VS Code の設定や API、外部のリソースと意図せず相互作用しないよう、チャットウィンドウという「ケージ」の中に閉じ込める必要があります。

この分離により、セキュリティが保たれたまま、ユーザーは iframe 内のアプリと対話できます。さらに、アプリからサーバーへ呼び戻しを行い、新鮮なデータを取得して UI を更新する双方向通信も可能になります。

実演で見る「開発効率」の劇的変化：Go プロファイリング可視化

デモでは、Liam Hampton 氏が VS Code 上で実際に MCP Apps を動作させました。対象は、Go 言語のプロファイリングデータを可視化するフラムグラフ（Flame Graph）アプリです。

通常、開発者がプロファイルデータを確認するには、ターミナルで出力された複雑なテキストを解析するか、外部ツールに切り替えてグラフを表示する必要があります。しかし、MCP Apps を使えば以下の流れがチャット内で完結します。

1. GitHub Copilot に指示: 「アプリのプロファイルを作成して」と発言するだけ。
2. 自動実行: Copilot が MCP サーバーのツールを認識し、ローカルの Go プロファイリングを実行。
3. インタラクティブな表示: チャットウィンドウ内に、リアルタイムで描画されたフラムグラフが iframe として表示されます。

「時間の大半をどの関数が占めているか」を確認するために、AI と「ここは良いのか？悪いのか？」と往復する時間を省略できます。必要な情報がすべてチャット内で利用可能になるのです。

デモでは、生成されたグラフ上でユーザーが直接要素をクリックしたり、詳細を見たりできる様子が示されました。これにより、複雑なデータ分析やデバッグのプロセスが劇的に簡素化されます。

業界の動向：ブランド体験を維持した「チャット完結型」サービス

MCP Apps の活用は開発ツールに留まりません。E コマースや社内ツールの構築においても大きな可能性を秘めています。

例えば、Shopifyは MCP Apps を活用して、ユーザーがチャット内で完結した購入体験（チェックアウト）を実現しようとしています。重要なのは、外部ブラウザへ誘導するのではなく、ブランドの雰囲気や UI を維持したままチャット内で完結させる点です。

また、ExcalidrawやFigmaのようなツールも MCP Apps の活用事例として挙げられています。アーキテクチャ図の生成や、その場で生成されたコンポーネントの可視化など、視覚的なリッチな体験を AI との対話に組み込む動きが加速しています。

まとめ：AI エージェントは「情報提供者」から「操作者」へ

MCP Apps の普及により、開発者ツールにおける AI エージェントの役割は、単なる「情報の提供」から「直接的な操作・可視化」へと進化します。テキストベースの回答に依存せず、チャット内で完結するインタラクティブな UI を実現することで、複雑なデータ分析やデバッグプロセスが大幅に簡素化されます。

これは開発者体験（DX）における新たな基準となるだけでなく、ブランド体験を損なわずにチャット内で完結する E コマースや社内ツールの実装も可能にする、次世代のプラットフォーム基盤です。