VS CodeとClaude Desktopの違い — MCP Appsの対応差と繋ぎ方

MCP Apps(io.modelcontextprotocol/ui)は、MCPサーバーが対話の中にインタラクティブなHTML UIを表示できる公式拡張機能です。VS CodeのGitHub Copilotも、Claude・Claude Desktopも対応済みです。違いが出るのは、開発中のサーバーをどう繋ぐかという一点に集中しています。

Claude Codeをデスクトップアプリで使うか、VS Code拡張で使うかの違いは、Claude Code DesktopとはとVS Code拡張機能の使い方にあります。ここではMCP Appsを表示するホストとしての違いを比べます。

MCP Appsのホストとして、3つの観点で並べると次のとおりです。表示は両方とも対応で、差が出るのは下の2行です。

同じ拡張に対応するクライアントは11ある

MCP Appsのクライアントサポートマトリクスには、✓が付いたクライアントが11あります。Claude(web)とClaude Desktop、VS Code GitHub Copilot、Microsoft 365 Copilotが入っています。Goose・Postman・MCPJam・ChatGPT・Cursor・Archestra.AI・PostHog Codeも並びます。拡張全体の対応状況はMCP拡張機能サポートマトリクスの読み方で扱っています。

このマトリクスにClaude Code(CLI)の行はありません。マトリクスに行が無いため、MCP AppsのUIの確認はClaude Code以外のホストで行うことになります。AIコーディングエージェント側の準備については、後半の「雛形を作らせる側」で触れます。

表示までの流れはホストを問わず同じ

UIが対話に現れるまでは、VS CodeでもClaude Desktopでも次の4段階です。

違いが出るのはこの流れの前後です。サーバーをどう見つけて繋ぐか、そしてiframeを載せる入れ物が何かです。

アプリ側のコードはホストごとに書き分けない

アプリのUIは、通常のWebページと同じ道具で作れます。テンプレートはReact・Vue・Svelte・Preact・Solid・素のJavaScriptが揃っています。@modelcontextprotocol/ext-appsのAppクラスは便利なラッパーにすぎません。postMessageのプロトコルを直接実装しても構いません。前提はNode.js 18以上です。

VS Code向けとClaude向けで別のUIを作る理由は、ここにはありません。

独立したWebアプリでなくMCP Appsにする利点は、公式が4点挙げています。会話の中にUIが残り、タブを行き来しなくて済むこと。アプリからサーバーのツールを呼べ、ホストから新しい結果も受け取れること。ユーザーが接続済みの機能へ、同意のもとでホスト経由で依頼できること。サンドボックスで隔離されることです。

公式が向いているとする場面は5つです。複雑なデータの掘り下げ、多数の選択肢を一画面で行う設定、PDFや3Dモデルなどの閲覧が挙がります。ログやメトリクスの監視、経費承認のような複数ステップの作業も対象です。逆に、こうした性質が要らないなら通常のWebアプリのほうが単純だと、同じページが述べています。

繋ぎ方の違いを並べる

VS Code側の設定書式や、Claude Code拡張との切り分けはVS Code MCP設定ガイドにあります。

Claudeでトンネルが要る理由

Claude側でトンネルが必要になるのは、接続の出発点が手元のPCではないからです。カスタムコネクタを追加すると、ClaudeはAnthropicのクラウドからリモートMCPサーバーへ接続します。サポート記事によれば、これはclaude.ai・Claude Desktop・Cowork・モバイルアプリのどれでも同じです。

Claude Desktopはローカルで動くアプリですが、リモートコネクタの接続はアカウント経由で仲介されます。サーバーはAnthropicのIPレンジから届く必要があります。プライベートネットワーク上のサーバーでも、ファイアウォールでAnthropicのIPアドレスを許可リストに入れれば、Claudeからの接続が届きます。許可しない限り、社内ネットワークやVPNの内側のサーバーには繋がりません。同じ記事は、claude_desktop_config.jsonで設定するローカルのMCPサーバーを別の仕組みとして挙げ、こちらは手元のネットワークを使うと説明しています。MCP Appsのビルドガイドが手順として示すのは、カスタムコネクタ経由のテストです。

ext-appsリポジトリのREADMEは、stdio対応のクライアントとしてClaude DesktopとVS Codeを挙げ、設定の形を載せています。commandにnpx、argsに-yと@modelcontextprotocol/server-<name>と--stdioを並べる書き方です。ローカルでビルドした成果物をbash経由で指す手順もあります。claude_desktop_config.jsonの書き方はClaude Desktop MCP設定ガイドで扱っています。

テストの手順はコマンド2つで済みます。

npm run build && npm run serve
npx cloudflared tunnel --url http://localhost:3001

2行目がhttps://random-name.trycloudflare.comのようなURLを出力します。それをプロフィールから「Settings > Connectors > Add custom connector」の順に開いて登録します。これはビルドガイドの道順です。サポート記事は個人プランについて「Customize > Connectors > + Add > Add custom connector」の順を案内しています。

使えるプランは公式ページで食い違う

コネクタを足せるかどうかは、試験を始める前に確かめたい条件です。

カスタムコネクタを使えるプランは、MCP Appsのビルドガイドとサポート記事で書き方が違います。

• ビルドガイド: カスタムコネクタは有料のClaudeプラン(Pro・Max・Team)で使える
• サポート記事: Free・Pro・Max・Team・Enterpriseで使え、Freeは1つまで

サポート記事の更新は2026年10月1日(UTC)です。ビルドガイドの元ファイルの最終更新は2026年7月7日で、サポート記事のほうが新しい記述です。Freeで登録できるカスタムコネクタは1つなので、試験用のサーバーを入れると他のカスタムコネクタを足す余地がなくなります。

組織プランでは担当者も絞られます。Teamではオーナーまたはプライマリオーナーだけがコネクタを組織に追加でき、メンバーは追加済みのコネクタに個別に接続します。Enterpriseでは、これに加えてライブラリの管理権限を含むカスタムロールの持ち主も追加できます。組織向けのコネクタ追加画面(組織設定のConnectors)では、認証の扱いも「Sign in now」「Sign in when needed」「No sign in」から選びます。サインイン不要の検証用サーバーなら最後の選択肢になります。チームで検証したい場合は、追加権限を持つ人を先に確認しておくと止まりません。

どちらのホストも使わない第三の経路

ビルドガイドは、特定のクライアントを使わずに試す方法も用意しています。ext-appsリポジトリのexamples/basic-hostに開発用のテストホストがあり、接続先を環境変数で渡します。

SERVERS='["http://localhost:3001/mcp"]' npm start

起動後にブラウザーでhttp://localhost:8080を開くと、ツールを選んで呼び出す画面が出ます。呼び出すとUIリソースが取得され、サンドボックス化されたiframeに描画されます。接続先を省くとhttp://localhost:3001/mcpに繋ぎにいきます。複数のサーバーはSERVERS='["http://localhost:1234/mcp", "http://localhost:5678/mcp"]'のようにJSON配列で並べます。UIの動作やツール呼び出しの往復を確かめるだけなら、トンネルもアカウントも要りません。VS CodeとClaudeで見え方を比べる前に、まずこの経路でアプリ自体の不具合を潰しておけます。

セキュリティの枠組みはホストを超えて共通

サーバーが返すHTMLはiframe内で動き、親ページのDOMやCookie、ローカルストレージには触れません。親ページを遷移させることも、親のスクリプトを実行することもできません。アプリとホストの通信はすべてpostMessageを通り、ホストがアプリに許す機能を決めます。たとえばツール呼び出しを制限したり、sendOpenLinkを無効にしたりできます。

CSPは既定で外部を拒否する(deny-by-default)設計です。外部のJSやCSSを読み込むアプリは、サーバー側でCSPを設定するか、Viteのvite-plugin-singlefileのようなプラグインでアセットをHTMLに埋め込む必要があります。ビルドガイドのチュートリアルは後者を使っています。

権限の扱いはホストごとに変わりえます。ツール呼び出しの制限やsendOpenLinkの無効化といった設定項目は、ホストの実装が用意したものに限られます。

サーバーを止める操作とサンドボックス

VS Codeの公式ドキュメントには、MCP Appsの節があります。フォームや可視化、ドラッグ操作できるリストなどのUIがチャットの中にインラインで描画されると書かれています。

サーバーを無効にする操作はMCP Appsにも効きます。グローバルまたはワークスペース単位でMCPサーバーを無効にすると、サーバーは起動せず、ツール・プロンプト・リソースに加えてMCP appsもチャットから外れます。

ワークスペースのMCPサーバーはWorkspace Trustを引き継ぎます。ワークスペースを信頼すると、.vscode/mcp.jsonとプロジェクト直下の.mcp.jsonのサーバーは、個別の信頼確認なしで起動できます。制限モードではワークスペースのMCP設定が遮断され、これらのサーバーは起動しません。

Claude側にも対応する操作があります。対話型コネクタはインラインのカードか全画面表示で現れ、全画面でも入力欄は使えます。TeamとEnterpriseのオーナーは、対話型コネクタを描画する特定のツール呼び出しを、組織設定のConnectorsで無効にできます。

VS Codeのドキュメントにはサンドボックスの節もあります。こちらはMCP Appsのiframeではなく、ローカルで動くstdioのMCPサーバーを閉じ込める機能です。macOSとLinuxで有効にでき、ファイルパスやネットワークドメインを明示した範囲だけに制限します。UIを描画するサンドボックスとは対象が別なので、混同しないようにしてください。

雛形を作らせる側の違い

ビルドガイドは、create-mcp-appというSkillをAIコーディングエージェントに読み込ませて雛形を作る方法を最初の手順に置いています。Claude Codeならプラグインとして入れられます。

/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@modelcontextprotocol-ext-apps

手動でコピーする場合の配置先はエージェントごとに決まっています。Claude Codeは~/.claude/skills/、VS CodeとGitHub Copilotは~/.copilot/skills/が代表的な置き場所です。

VS Codeは個人用Skillsとして、~/.copilot/skills/に加えて~/.claude/skills/と~/.agents/skills/も読みます。プロジェクト用も.github/skills/、.claude/skills/、.agents/skills/が対象です。Claude Code用に~/.claude/skills/へ置いたcreate-mcp-appは、VS Codeでもそのまま使えます。Claude Codeの拡張機能を入れたVS Codeでも、置き場所は同じです。

どちらを選ぶか

分かれ目は、手元のサーバーを公開URLに出せるか、AnthropicのIPアドレスを許可リストに入れられるかです。どちらも難しい場合、ClaudeではローカルのstdioサーバーをClaude Desktopの設定ファイルで向ける経路を取ります。