エージェントに視覚的な「声」を：VS CodeがMCP Appsをサポート
2026年1月26日 執筆：Harald Kirschner、Connor Peet
AIコーディングエージェントの能力は目覚ましく向上しています。標準の状態でも、コードベースの検索、ファイルの編集、ターミナルコマンドの実行、コンパイルエラーへの対応が可能です。MCPサーバーを追加すれば、データベースへのクエリ、Playwrightによるウェブブラウジング、GitHubのIssueの要約、クラウドプラットフォームへの接続まで行えます。モデルは画像の処理も可能なため、スクリーンショットを貼り付けてレイアウトの問題をデバッグしたり、Playwrightでブラウザの状態をキャプチャして検証したりすることもできます。
エージェントはテーブルの整形、データの構造化、ASCII図のレンダリングを行えますが、これらにインタラクティブ性はありません。リストの並べ替えや、破壊的な操作の具体的な確認、あるいは可視化された情報の探索を行う必要がある場合、結局は文章で細かく指示を出す必要がありました。
本日、MCPコミュニティは初の公式MCP拡張機能であるMCP Appsを発表します。ツール呼び出しの結果として、ダッシュボード、フォーム、可視化ツール、マルチステップのワークフローといったインタラクティブなUIコンポーネントを、会話画面に直接レンダリングできるようになりました。これにより、人間とエージェントのコラボレーションは、より豊かで効果的なものになります。
VS Codeは、MCP Appsをフルサポートする初の主要なAIコードエディタです。 新機能が先行してリリースされるビルド「VS Code Insiders」で今すぐ利用可能です。InsidersをインストールしてMCP Appsを今すぐお試しください。来週のリリースではVS Code Stable版にも展開される予定です。
デモ：テキストを超えるインタラクション
開発者とエージェントのより豊かなコラボレーションを示すために、いくつかのデモを作成しました。MCP Appsは登場したばかりですので、今後エコシステム全体で採用が広がることを期待しています。
インタラクティブなリストの並べ替え
従来：エージェントが分析に基づいた順序を提案します。あなたはテキスト出力を読み、調整を依頼し、希望通りの順序になるまでやり取りを繰り返します。
MCP Apps使用時：エージェントが推奨順序と一緒にドラッグ＆ドロップ可能なインターフェースを表示します。アイテムを視覚的に並べ替えたり、「AIに並べ替えを依頼」を選択してエージェントに判断を任せたりできます。
パフォーマンスプロファイラーの可視化
従来：エージェントがCPUプロファイルデータを分析し、ボトルネックをテキストで要約します。要約は見られますが、その仮説を検証したり、エージェントが見落とした可能性のある領域を探索したりする手段はありませんでした。
MCP Apps使用時：エージェントがインタラクティブなフレームグラフ（炎グラフ）をレンダリングします。コールスタックに深く踏み込んだり、ホバーして詳細なタイミングを確認したりして、あなたのドメイン知識に基づいてエージェントの分析を裏付けたり、否定したりできます。
機能フラグセレクター
従来：エージェントがフラグ設定を取得し、存在するリストを表示します。あなたは頭の中でデプロイ環境と照らし合わせ、別のステップでエージェントに統合コードの生成を依頼していました。
MCP Apps使用時：エージェントが、ライブの環境ステータスを表示する検索可能なフラグピッカーを表示します。フラグを選択し、本番/ステージング/開発環境の表示を切り替え、SDKコードを生成するまでをすべて1回のやり取りで完結できます。
パートナー紹介：Storybook
Storybookは、オープンソースのMCPサーバーにMCP Appsサポートを追加しました。エージェントに対して「デザインシステムを使ってログインフォームを作成して」と頼むだけで、望む結果を詳細に説明しなくても、エージェントがVS Code内で直接コンポーネントのプレビューをレンダリングします。
「私たちはVS CodeチームとMCP Appsの連携に取り組んできました。その成果に胸を躍らせています。ユーザーはエージェントチャット内で直接Storybookのストーリーをプレビューできるようになり、変更を確認するためにチャットとStorybookを行き来する必要がなくなりました。」 – Jeppe Reinhold氏（Storybookコアコントリビューター、Chromatic）
VS Codeにとって自然な進化
VS Codeは単なるテキストエディタ以上の存在であり続けてきました。拡張機能は、WebViewパネル、カスタムエディタ、サイドバービューを通じて、UIやインタラクションをエディタにもたらします。Jupyter Notebookは、コードとリッチな出力を混在させることがワークフローを劇的に変えることを証明しました。また、GitHub Copilotエージェントは、AIがワークスペース内で自律的に作業する能力を与えました。
MCP Appsはその次のステップです。エージェントに、応答するための視覚的な「声」を与えます。何が起きているかを確認し、自信を持って選択を行い、主導権を握り続けることができます。
はじめに
MCPサーバーを開発されている方は、ぜひMCP Appsを追加してインタラクティブ性を高めてください。VS Codeは、MCPのフルサポートを備えた開発およびデバッグ環境です。MCPのコアメンテナーであるDen Delimarsky氏が出演する本日のVS Codeライブ配信に参加して、デモとQ&Aをご覧ください。
ぜひ最初のMCP Appを構築し、作成したものをコミュニティで共有してください。言葉で伝えるよりも見せる方が良い場合もあります。これからは、エージェントがその両方をこなせるようになります。
ハッピーコーディング！ 💙