VS CodeとClaude DesktopのMCP Apps対応差
MCP AppsはVS Code(GitHub Copilot)とClaude Desktopの両方が対応済みですが、サーバーの繋ぎ方とローカル開発の手順が大きく異なります。違いをまとめます。
MCP Apps(io.modelcontextprotocol/ui)は、MCPサーバーが対話の中にインタラクティブなHTML UIを表示できる公式拡張機能です。公式クライアントサポート一覧では、VS CodeのGitHub Copilot ChatとClaude・Claude Desktopの両方が対応済みとして挙がっています。ただし「対応している」の中身は同じではありません。サーバーの繋ぎ方、ローカル開発の手順、そしてどのClaude製品が対象なのかが、2つのクライアントで大きく違います。
両方ともMCP Apps対応クライアントである
MCP Appsのクライアントサポートマトリクスに載っているのは、Claude(web)・Claude Desktop・VS Code(GitHub Copilot)・Microsoft 365 Copilot・Goose・Postman・MCPJam・ChatGPT・Cursor・Archestra.AI・PostHog Codeの11クライアントです。このうち本記事が扱うのはVS CodeとClaude Desktopの2つに絞ります。拡張全体の対応状況を俯瞰したい場合はMCP拡張機能サポートマトリクスの読み方を参照してください。ChatGPTとCursorも対応済みですが、両者ともWeb版の位置づけやローカル開発の作法がVS Code・Claude Desktopとは別系統のため、比較は次の機会に譲ります。VS CodeはCopilot経由でこの拡張に対応しており、GitHub Copilotが自社のエージェント機能にMCP Appsを組み込んでいることを意味します。Claude側はweb版とDesktop版の両方にマトリクス上の✓が付いていますが、これは「対応」という項目が一致しているだけで、後述するとおり接続方式や描画先まで同じとは限りません。この2つを並べて見る意味は「対応/未対応」の判定ではなく、同じ拡張機能を使うときの実装上の勘所を掴むことにあります。
なお、この一覧にClaude CodeのCLI自体は含まれていません。MCP AppsはHTMLのUIを対話にインライン表示する拡張なので、ブラウザやElectronベースのGUIを持つホストが前提です。ターミナル上で動くCLIエージェントはUIを描画する土台を持たないため、対象から外れます。同様にJetBrains版のClaude Code拡張機能も一覧に載っていません。
動く仕組み自体はどちらも同じプロトコルに従う
MCP Appsが対話にUIを表示するまでの流れは、ホストの種類を問わず4段階です。
- ツールの説明文に
_meta.ui.resourceUriとしてui://形式のリソースが宣言され、ホストはツール呼び出し前からこのUIリソースを先読みできます。 - ホストがサーバーからUIリソース(HTML本体、多くはJSとCSSを同梱)を取得します。
- 取得したHTMLをサンドボックス化された
iframe内に描画します。 - アプリとホストがJSON-RPCベースの独自方言(
tools/callのような共通メソッドとui/initializeのようなUI専用メソッドが混在)で双方向にやり取りし、ツール呼び出しや結果プッシュを行います。
VS CodeでもClaude Desktopでも、この4段階のプロトコル自体は変わりません。
両者の違いは、この共通プロトコルの上に載る「サーバーの見つけ方・繋ぎ方」と「iframeを描画する入れ物」の実装に集約されます。
比較の軸 — サーバーの繋ぎ方とローカル開発
| 観点 | VS Code(GitHub Copilot Chat) | Claude / Claude Desktop |
|---|---|---|
| 通常のMCPサーバー接続 | VS Code(GitHub Copilot Chat)mcp.jsonにローカルstdio・リモートHTTPを直接記述 | Claude / Claude Desktopカスタムコネクタ(リモートStreamable HTTP)、または.mcpb拡張機能・claude_desktop_config.jsonでのローカル接続 |
| MCP Apps公式クイックスタートの推奨接続 | VS Code(GitHub Copilot Chat)ローカルサーバーをそのまま登録して即テスト可能 | Claude / Claude Desktopカスタムコネクタとして追加(Streamable HTTP前提) |
| ローカル開発時の追加作業 | VS Code(GitHub Copilot Chat)不要。http://localhost:3001/mcpをそのままmcp.jsonに書ける | Claude / Claude Desktopcloudflared等でトンネルを張り、公開URLをカスタムコネクタとして追加する必要がある |
| 利用条件 | VS Code(GitHub Copilot Chat)Copilot Chatが有効なVS Code | Claude / Claude DesktopカスタムコネクタはPro・Max・Teamの有料プランが対象 |
Claude側はローカル開発でもトンネルが要る
MCP Appsの公式ビルドガイドがClaude・Claude Desktopでのテスト方法として案内しているのは、ローカルで動かしたMCPサーバーをcloudflaredのようなツールでインターネットに公開し、そのURLを「カスタムコネクタ」としてClaudeの設定画面から追加する手順です。ローカルのhttp://localhost:3001/mcpをそのまま指定する経路は案内されておらず、開発中のサーバーであっても一度公開URLを経由します。カスタムコネクタの追加自体もPro・Max・Teamのいずれかの有料プランが前提です。
これは、MCP Apps拡張の対応表明がStreamable HTTPを前提にしたカスタムコネクタ経由の接続で確認されているためです。Claude Desktopには.mcpb形式のローカル拡張機能やclaude_desktop_config.jsonによるローカルstdio接続の仕組みも別途あります(Claude Desktop MCP設定ガイド参照)。ただしMCP Appsのビルドガイドが動作確認の手順として案内しているのは、カスタムコネクタ経由の一本道だけです。
VS Code側はmcp.jsonにそのまま書けば動く
対するVS Codeでは、ローカルで起動したMCP AppsサーバーをそのままVS Code本体のmcp.jsonに追加すれば動作確認できます。トンネルを張る必要も、リモート公開する必要もありません。プロトタイプの段階でHTTPサーバーをローカル起動し、.vscode/mcp.jsonにエンドポイントを書いてCopilot Chatから呼び出す、という開発ループがそのまま成立します。VS Code本体のMCP設定全般はVS Code MCP設定ガイドにまとめています。mcp.jsonの書式・インストール方法・Claude Code拡張との違いもそちらで扱っています。
この差は、2つのクライアントがMCPサーバーとの接続をどう位置づけているかの違いを映しています。VS Codeはエディタに組み込まれた開発ツールの一部としてMCPサーバーを扱うため、ローカルのプロトタイプをそのまま繋ぐ経路が主役です。Claudeはコネクタという恒久的な接続先の管理画面を持ち、MCP Appsもその管理画面の枠組みに乗せて配布・利用する設計になっています。
セキュリティモデルは共通、ホストの実装は別
MCP Appsのサンドボックス設計自体はクライアントを問わず共通です。サーバーが返すHTMLはサンドボックス化されたiframe内で描画され、親ページのDOM・Cookie・ローカルストレージへのアクセスはできません。アプリとホストの通信はすべてpostMessage経由で、ホスト側がどのツール呼び出しを許可するか、sendOpenLinkのような機能を無効化するかを制御します。この安全設計はVS CodeでもClaudeでも変わりません。
変わるのは、そのiframeをどんな入れ物の中でレンダリングするかです。VS Codeはエディタのwebviewパネルに、Claude DesktopはElectronベースのデスクトップアプリのウィンドウ内に、Claude(web)はブラウザのタブ内にそれぞれ描画します。アプリ側のコード(HTML・JS・CSS)はどのホストでも同じものが動く設計ですが、周囲のウィンドウサイズやOSのショートカットキーとの競合など、見た目や操作感の細部はホストのUIに依存します。
サーバーを作る側の違い — スキルのインストール先
MCP Appsを開発する側にも、ホストの違いは影響します。公式のビルドガイドは、AIコーディングエージェントにcreate-mcp-appというSkill(雛形生成・ベストプラクティス・サンプルをまとめた指示セット)を読み込ませて足場を作る方法を勧めています。対応エージェントごとにSkillの配置先が決まっており、Claude Codeなら~/.claude/skills/、VS CodeとGitHub Copilotなら~/.copilot/skills/です。Claude Code(CLI)とVS Code(GitHub Copilot)は別々のSkills機構を持つため、片方にインストールしたSkillはもう片方には引き継がれません。両方の環境でAIにMCP Appsの雛形を作らせたい場合は、それぞれの配置先へ個別にコピーする必要があります。
VS Codeで動かすCopilot Chatの拡張・スキル体系は、Claude CodeのVS Code拡張機能とも別物です(Claude Code VS Code拡張機能の使い方参照)。同じエディタ上で動いていても、「VS Code本体のCopilot機能」と「VS Code上で動くClaude Code」は独立したエコシステムです。この整理は、MCP Apps以外の場面でも繰り返し出てくる注意点です。
UIのアクセス許可はホストが握る
MCP Appsのサンドボックスは、既定では外部リソースの読み込みやマイク・カメラへのアクセスを許可しません。サーバー側がUIリソースの_meta.uiにpermissions(マイク・カメラ等の追加権限要求)やcsp(読み込みを許可する外部オリジン)を指定することで、必要な範囲だけ許可を広げられます。ただし、その要求を最終的に許可するかどうかはホスト側の裁量です。ホストは特定のツール呼び出しを制限したり、リンクを開くsendOpenLinkのような機能そのものを無効化したりできます。
つまり、同じサーバーコードを配布しても、VS CodeとClaude Desktopで実際に使える権限の範囲が完全に一致する保証はありません。両ホストとも「サンドボックスを尊重し、必要な許可だけをユーザーの同意のもとで与える」という設計思想は共有していますが、どの権限をデフォルトで許可し、どこでユーザーに確認を求めるかの具体的な挙動は各ホストの実装に委ねられています。開発時にVS Codeで動いた挙動が、Claude Desktopでも同じように動くとは限らない点は覚えておく必要があります。
使い分け早見表
| 用途 | 向いているクライアント | 理由 |
|---|---|---|
| 開発中のMCP Appsを素早く確認したい | 向いているクライアントVS Code | 理由ローカルサーバーをmcp.jsonに直接書けて、トンネル不要で即確認できる |
| エンドユーザーに配布して日常的に使わせたい | 向いているクライアントClaude(web)/ Claude Desktop | 理由カスタムコネクタとして恒久的に登録でき、チームでの共有もしやすい |
| 無料プランで試したい | 向いているクライアントVS Code | 理由Copilot Chatが有効ならプラン制限なく使える(Claude側はPro以上が必要) |
| デスクトップアプリのウィンドウに統合したUIが欲しい | 向いているクライアントClaude Desktop | 理由Electronベースのネイティブウィンドウ内に描画される |
まとめ
VS CodeのGitHub Copilot ChatとClaude・Claude DesktopはどちらもMCP Apps拡張に対応済みですが、対応の中身は接続方式で大きく分かれます。VS Codeはローカルサーバーをmcp.jsonにそのまま書いて即座に確認できます。一方Claude側はカスタムコネクタというStreamable HTTP前提の仕組みに乗せる必要があり、ローカル開発でもトンネルを張る手間とPro以上の有料プランが要ります。サンドボックスによるセキュリティモデル自体は両者で共通なので、選ぶ基準は「開発中に素早く試したいか」「配布して使わせたいか」で分けるのが実用的です。MCP拡張機能全体の対応状況はMCP拡張機能サポートマトリクスの読み方にまとめています。