MCP Appsとは｜作り方・SDK・Claudeでの見え方【2026年11月】

2026年11月12日時点で、MCP Apps は、Model Context Protocol（MCP）のサーバーが自前の画面（HTML でできた UI）を AI の製品の中に出せるようにする、MCP の公式の拡張です。Claude ではこの仕組みの上で「インタラクティブコネクタ」が動いていて、2026年11月10日（米国時間）の発表で、会話の中に加えて横の画面（サイドパネル）と全画面で開く形が、Web と Claude Desktop で順に提供され始めました（Anthropic の発表）。作る側は、自分の MCP サーバーの一部として MCP Apps SDK を使います（Get started with MCP Apps）。

発表は開発者向けの節で、インタラクティブコネクタが MCP Apps の上で動き、作ったアプリは拡張に対応するほかの AI の製品でも動くと説明しています。この記事は、2026年11月11日時点で公式ドキュメントを確認した範囲で、仕組み・動く場所・作り方・見え方・提出の条件・OpenAI の Apps SDK からの移し方・管理者の設定を、手を動かす順に整理します。コードは公式の文書の例の形で、当社はこの記事の時点で MCP Apps の SDK で画面を作って動かしていません。

MCP Apps とは｜ツール・リソースとの違いとインタラクティブコネクタの関係

MCP の公式サイトは MCP Apps を、MCP のホスト（MCP サーバーにつなぐ側の AI の製品。Claude Desktop など）の中で描かれる、操作できる UI のアプリと説明しています。サーバーがデータの可視化・フォーム・ダッシュボードのような HTML の画面を返し、それがチャットの中にそのまま出る、という形です（MCP Apps｜Model Context Protocol）。Claude のドキュメントの言い方では、MCP App は MCP サーバーが Claude の会話の中に描く操作できる UI（グラフや地図など）で、自分の MCP サーバーの一部として MCP Apps SDK で作ります（Get started with MCP Apps）。

動きは、SDK のリポジトリの README で 4 段に分けて説明されています（modelcontextprotocol/ext-apps）。

• ツールが画面を宣言する：ツールの定義の _meta.ui.resourceUri に、HTML の画面を返す ui:// のリソースを書く
• LLM がツールを呼ぶ：会話の流れで、LLM（大規模言語モデル）がサーバーのツールを呼ぶ
• ホストが画面を描く：ホストがそのリソースを取り、サンドボックス（外と切り離した囲い）にした iframe（ページの中に別のページを埋め込む枠）に表示する
• 画面とホストが通信する：ホストはツールのデータを通知で画面に渡し、画面はホストを通じてほかのツールを呼べる

画面とホストのやり取りは、JSON-RPC（JSON でやり取りする呼び出しの決まり）を postMessage（ブラウザの中で枠どうしがメッセージを送る仕組み）で運ぶ通信で、tools/call のような本体の MCP と同じメソッドと、ui/ で始まる新しいメソッドを使います（MCP の公式サイト）。

名前	中身	画面
MCP のツール	モデルが呼ぶ操作。テキスト・画像・リソース・構造化データを返し、ホストが会話の一部として表示する	ホストの表示だけ
MCP のリソース	サーバーが渡すデータ。MCP Apps では ui:// の URI で HTML を返し、MIME タイプ（中身の種類を表す名前）は text/html;profile=mcp-app	中身が画面の HTML
MCP App	ツールの _meta.ui.resourceUri が ui:// のリソースを指す組み合わせ。対応するホストがその HTML を描き、画面からツールを呼べる	サーバーが作った画面
インタラクティブコネクタ	Claude での呼び名。MCP Apps の上で動き、Claude の会話の中・サイドパネル・全画面に画面を出すコネクタ	Claude の中に出る

表の 1〜3 行目は MCP の公式サイトと Claude のクイックスタート（Add an interactive UI to your MCP server）、4 行目は発表とヘルプ（Use interactive connectors in Claude）によります。クイックスタートのツールは、画面用の structuredContent と一緒に UI を描かないホスト向けのテキストも返すので、テキストだけのホストでも今までどおり使えます。

MCP の公式ブログ（2026年1月26日）によると、MCP Apps は 2025年11月に提案され、MCP-UI と OpenAI の Apps SDK を土台に、OpenAI と MCP-UI と組んで共通の標準として作られた、最初の公式の MCP 拡張です。記事は本番で使える段階だと書いています（MCP Apps – Bringing UI Capabilities To MCP Clients）。識別子は io.modelcontextprotocol/ui で、クライアントとサーバーの両方が対応を宣言したときだけ使われます（Extension Support Matrix）。README の表では仕様の版 2026-01-26 が Stable、draft の版が Development（開発中）で、ライセンスは Apache 2.0 です。

どこで動くか｜Claude の Web・Desktop・モバイルと対応する製品

Claude の中では、ヘルプ（2026年11月11日に確認した版）が、インタラクティブコネクタは Claude・Cowork・Claude Desktop・Claude for iOS/Android のすべてのユーザーが使えると書いています（Use interactive connectors in Claude）。2026年1月26日の発表では Free・Pro・Max・Ultra・Team・Enterprise の各プランが対象で（Your favorite work tools are now interactive connectors inside Claude）、iOS と Android のアプリは 2026年3月25日に対応しました（Release notes）。

11月10日に広がったサイドパネル・サイト全体の表示・ナビゲーションから開いて固定する機能は、新しい Claude の体験（チャットと Cowork を 1 つにした Claude）のアカウントに Web と Claude Desktop で順に提供中で、モバイルではまだ使えません（ヘルプ）。発表は全プランが対象とし、アカウントが新しい Claude に切り替わるか、組織がオンにすると見えると書いています。

モバイルの Claude は、画面をサンドボックスの iframe ではなく端末の WebView（iOS は WKWebView、Android は WebView）で描き、カメラ・マイク・位置情報は使えません。コネクタは先に Web か Desktop で足す必要があります（Design guidelines）。Claude Code はツールをテキストとして呼ぶだけで、UI は描きません（クイックスタート）。

Claude 以外の製品は、MCP の公式サイトの MCP Apps のページが 8 つを挙げ、同じサイトの拡張の対応表（コミュニティが更新する表）では MCP Apps の列に 13 の製品の印があります（どちらも 2026年11月11日に確認）。

製品	MCP Apps のページの一覧	拡張の対応表の印
Claude（Web）	あり	あり
Claude Desktop	あり	あり
Claude Code	なし	なし
VS Code GitHub Copilot	あり	あり
Microsoft 365 Copilot	あり	あり
Goose	あり	あり
Postman	あり	あり
MCPJam	あり	あり
Archestra.AI	あり	あり
ChatGPT	なし	あり
Cursor	なし	あり
PostHog Code	なし	あり
Kiro Crew	なし	あり
Glean	なし	あり

出典は MCP Apps のページと Extension Support Matrix です。印があっても対応する表示や機能は製品ごとに違い、MCP の公式サイトも「ホストの対応はクライアントによって異なる」と注記しているので、出す先の製品の文書で確かめます。

作り方の流れ｜公式クイックスタートの 6 つの手順

Claude のクイックスタート「Add an interactive UI to your MCP server」は、最初のクイックスタートで作る roll_dice（さいころを振るツール）に、さいころを描いて「Roll again」ボタンを置く UI を足す例です。server.mjs に約 50 行を足すだけで、ビルドの道具は使いません。MCP サーバーがまだ無い場合は、先にMCPサーバーの作り方｜Python・TS最小実装で最小のサーバーを作っておくと、この手順にそのまま入れます。

1. SDK を入れる：mcp-quickstart フォルダで npm install @modelcontextprotocol/ext-apps@^1 を実行します。1.x の MCP SDK と組む 1.x の系列で、ページは @modelcontextprotocol/ext-apps@1.7.5 で確かめたと書いています。
2. 補助関数を読み込む：@modelcontextprotocol/ext-apps/server から registerAppTool・registerAppResource・RESOURCE_MIME_TYPE を import します。前の 2 つは SDK の registerTool・registerResource を包み、UI のメタデータを埋めます。
3. UI を HTML で書く：リソースの URI を ui://quickstart/dice にし、HTML の中の script で SDK のブラウザ側の App を読み込みます。ツールの入力と結果の受け手（ontoolinput・ontoolresult）を決め、ボタンから callServerTool でツールを呼び直し、最後に connect() でホストとつなぎます。受け手は最初の通知を逃さないよう connect() の前に決めます。
4. ツールと UI をつなぐ：server.registerTool( を registerAppTool(server, に替え、_meta.ui.resourceUri で UI のリソースを指し、結果に structuredContent を足します。
5. UI のリソースを登録する：registerAppResource で HTML を返すリソースを登録します。MIME タイプは text/html;profile=mcp-app です。node --check server.mjs で書き間違いを確かめます。
6. curl で確かめる：サーバーを起動し直し、tools/list・resources/read・tools/call を順に送って、UI の URI・HTML・structuredContent が返るのを見ます。

4 と 5 の中身は次の形です（クイックスタートの公式の例から抜粋。当社は実行していません）。

  registerAppTool(
    server,
    'roll_dice',
    {
      title: 'Roll dice',
      description: 'Roll `count` dice with `sides` sides each. Returns each roll and the total.',
      inputSchema: {
        sides: z.number().int().min(2).max(100).describe('Number of sides per die (2-100)'),
        count: z.number().int().min(1).max(10).default(1).describe('How many dice to roll (1-10)'),
      },
      _meta: { ui: { resourceUri: DICE_UI } }, // tells the host which resource renders this tool
    },
    async ({ sides, count }) => {
      const rolls = Array.from({ length: count }, () => 1 + Math.floor(Math.random() * sides));
      const total = rolls.reduce((a, b) => a + b, 0);
      return {
        content: [{ type: 'text', text: `Rolled ${count}d${sides}: [${rolls.join(', ')}] total=${total}` }], // text-only hosts read this
        structuredContent: { sides, count, rolls, total }, // the UI reads this
      };
    },
  );

  registerAppResource(server, 'Dice view', DICE_UI, { description: 'Interactive view for roll_dice' }, async () => ({
    contents: [{
      uri: DICE_UI,
      mimeType: RESOURCE_MIME_TYPE,
      text: DICE_HTML,
      _meta: { ui: { csp: { resourceDomains: ['https://unpkg.com'] } } }, // let the sandbox load the App script
    }],
  }));

csp（Content Security Policy。画面が読み込んでよい先の決まり）の行は、画面の囲いが CDN の unpkg.com から script を読めるようにする設定で、本番では script を自分のオリジンから出すか HTML に入れ、そのオリジンだけを書くよう求めています。6 の最初の確かめ方は次のとおりで（公式の例）、返る _meta に UI の URI が入ります。

curl -sS -X POST http://localhost:3000/mcp \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json, text/event-stream' \
  -d '{"jsonrpc":"2.0","id":2,"method":"tools/list","params":{}}'

Claude で画面を見るには MCP Apps に対応するホストが要ります。claude.ai とデスクトップアプリで URL を指定して足したサーバーには Anthropic の基盤からつなぐため、localhost には届きません。サーバーを公開の HTTPS の URL に置き（作業中はトンネル＝手元のサーバーを外から届くようにする中継で出し）カスタムコネクタとして足すか、SDK の例のサーバーを Claude Desktop の設定ファイルで動かします。例のサーバーは手元のサーバーとして動くので、app tools・エントリーポイント（Claude の画面から直接アプリを開く入口）・埋め込みサイトは自分のリモートのサーバーで試します。クイックスタートのサーバーは届く人なら誰でもツールを呼べるので、ほかの人向けに置く前に認証を足します（MCP認可の実装ガイド｜OAuth 2.1対応）。

サーバーでは registerAppTool() と registerAppResource() がホストごとのメタデータを作り、画面では App.connect() を transport の引数なしで呼ぶと SDK がホストを見分けるので、1 つのコードで Claude とほかのホストを扱えます。Claude 向けの ui.domain（画面が置かれるサンドボックスのオリジン）は、サーバーの URL の SHA-256 の先頭 32 桁に .claudemcpcontent.com を付けた値で、画面が自前の OAuth の流れを持つときに要ります（Get started with MCP Apps とクイックスタート）。

SDK の版にも注意します。Claude のクイックスタートは 1.x ですが、リリースの最新は v2.1.0（2026年11月10日 UTC）です。2.0（2026年9月8日）で MCP TypeScript SDK 2.0 の分割パッケージに移り、Node.js 20 以上が要ります。通信の形は変わらず、2.x の画面は 1.x のホストで、1.x の画面は 2.x のホストで動くとリリースノートは書いています（ext-apps Releases）。AI のコーディングエージェントで作るなら、Claude Code で次の 2 行を実行して MCP Apps のスキルを入れ、「Create an MCP App」「Add a UI to my MCP tool」と頼めます（公式の例）。スキルは create-mcp-app・migrate-oai-app・add-app-to-server・convert-web-app の 4 つで、2 行目は README では mcp-apps@modelcontextprotocol-ext-apps と書かれています。

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

Claude での見え方｜会話の中・サイドパネル・全画面・固定

11月10日の発表で、対応するコネクタは、会話の横に開く・全画面に広げる・開いた道具の中で Claude に変更を頼む（承認はコネクタの操作と同じ）・プロンプトなしで開く・サイドバーと + メニューに固定する、ができるようになりました。開発者向けには、会話の中の表示が中心だった対応を app tools と埋め込みサイトまで広げ、パブリックプレビューとしています（発表）。

見え方	開発者がすること	条件
会話の中	MCP App を作れば、まずここに出る（インラインカード）	表示の型は inline
サイドパネル	availableDisplayModes に fullscreen を入れ、クリックかキー操作の直後に requestDisplayMode で頼む	限られた組織だけ。開く幅は会話の欄の約半分、最小は約 320px
全画面	同じく fullscreen。サイドパネルが開けない狭い窓などでは全画面になる	入力欄は常に見える
固定（エントリーポイント）	ツールの _meta の openai/ui に global を足し、ui.resourceUri も残す	限られた組織。Verified（審査を経た掲載の印）の掲載かカスタムコネクタだけ。反映に最大約 2 時間

出典は Claude のドキュメントの Display modes と Entry points です。サイドパネルでも全画面でも表示の型は fullscreen と伝えられるので、並べ方は伝えられる大きさ（containerDimensions）で変えます。リソースの _meta.ui の preferredDisplayMode: "fullscreen" でクリックなしに開くよう頼めますが、Claude 独自の拡張でほかのホストは読みません。ピンはブラウザごとに保存されます（ヘルプ）。サイドパネルに移すボタンと固定の印は次の形です（公式の例から抜粋。addEventListener は ext-apps 1.4.0 以上）。

import { App } from "@modelcontextprotocol/ext-apps";

const app = new App(
  { name: "example-app", version: "1.0.0" },
  { availableDisplayModes: ["inline", "fullscreen"] }
);

expandButton.addEventListener("click", async () => {
  const { mode } = await app.requestDisplayMode({ mode: "fullscreen" });
  console.log(`Claude set the display mode to ${mode}`);
});

"_meta": {
  "ui": { "resourceUri": "ui://example/home" },
  "openai/ui": { "entrypoints": [{ "type": "global" }] }
}

app tools は、画面の script で app.registerTool（ext-apps 1.7.0 以上）か onlisttools・oncalltool で登録し、Claude が画面に出ている物を変えられるようにする機能です（例: 買い物リストに牛乳を足す）。これも限られた組織だけで、リモートのコネクタの画面に限られ、1 つの画面で 64 本、応答は 45 秒（承認の時間を除く）、結果のテキストは 100,000 字までです（App tools）。

デザイン・セキュリティ・テストの条件｜提出のページの項目

ヘルプは、自分で作るインタラクティブコネクタには追加のデザイン・セキュリティ・テストの条件があるとして、提出のページ（Submit a connector to the directory）を案内しています。MCP Apps はリモートの MCP サーバーとして開発者ポータル（claude.ai/directory/manage）から出し、ディレクトリの規約と次の条件を満たします。

項目	提出のページに書かれた条件
セキュリティ	Anthropic のセキュリティ基準を満たす。提出の時に、セキュリティの問題へ素早く対応することにも同意する
ツールの注釈	すべてのツールに title と、読むだけなら readOnlyHint、変える・消すなら destructiveHint を付ける
認証	認証が要るサービスは OAuth 2.0 を使う
文書	設定と使い方を分かりやすく説明する。掲載にはドキュメントとプライバシーポリシーの URL も要る
スクリーンショット	MCP Apps だけ。PNG・幅 1,000px 以上・3〜5 枚・アプリの応答だけを切り抜きプロンプトは入れない・プロンプトの文は別に渡す・動画と GIF は不可
全ツールのテスト	ポータルの「Test & launch」で、MCP Inspector かカスタムコネクタで全ツールを自分で動かしたことを確かめる

画面から外部のリンクを開く（ui/open-link）なら、自社のオリジンと URI スキームの一覧（allowed link URIs）を任意で出せます。注釈の付け方はMCP Tool Annotations実装｜安全な権限設計5設定、ディレクトリ以外も含めた載せ方はClaude Marketplaceに載せる方法｜3つの経路と条件にまとめています。

審査の点検表（Connector pre-submission checklist）は、読む操作と書く操作を 1 つのツールにまとめない、ツール名は 64 字以内、説明に Claude の振る舞いを指示する文（プロンプトインジェクションの型）を入れない、中身の入ったテスト用アカウントを渡す、を求めます。お金や暗号資産を動かすコネクタと、AI のモデルで画像・動画・音声を作るコネクタは受け付けません（図・グラフ・UI の試作を作る道具は可）。提出すると自動の点検を経て既定で Community の印で載り、役立つと判断された物は、各ツールを動かして確かめる Verified の審査に自動で回ります。

デザインの指針（Design guidelines）は、画面を会話の延長として作る、インラインカードは中にスクロールを作らず操作は 2 つ・データは 4〜5 個まで、メニューやポップオーバーを使わない、すべての画面でライトとダークに対応する、外部のオリジンは既定で遮断されるので _meta.ui.csp で宣言する、モバイルのタップの的は 44pt 以上、を求めています。守りの仕組みはヘルプにあり、画面は厳しい Content Security Policy をかけたサンドボックスの iframe で動き、やり取りは記録して調べられる JSON-RPC で、ホストは描く前に HTML を確かめられます。権限はコネクタと同じで、画面からの購入には対応していません。

OpenAI の Apps SDK から移す｜公式の対応表とスキル

Claude のドキュメントが挙げる移し方は 2 つです。SDK の対応表（Migrating from OpenAI Apps SDK to MCP Apps SDK）を見ながら MCP Apps SDK へ移すか、MCP Apps のスキルに「Migrate from OpenAI Apps SDK」「Convert my OpenAI App to an MCP App」と頼むかです。ツールがすでに openai/ui で global のエントリーポイントを宣言しているなら、Claude で要る ui.resourceUri などを Entry points のページで確かめます。Apps SDK の作りの基本はOpenAI Apps SDK入門｜5ステップで作るにあります。

OpenAI Apps SDK	MCP Apps SDK
_meta["openai/outputTemplate"]	_meta.ui.resourceUri
MIME タイプ text/html+skybridge	text/html;profile=mcp-app（registerAppResource() が自動で付ける）
_meta["openai/widgetCSP"] の resource_domains など	_meta.ui.csp の resourceDomains など（snake_case から camelCase へ）
openai/widgetAccessible（真偽）・openai/visibility（文字列）	_meta.ui.visibility（"app"・"model" を入れる配列）
server.registerTool()・server.registerResource() を直接使う	registerAppTool()・registerAppResource()
window.openai（読み込み時に用意される）	new App(...) と await app.connect()
window.openai.callTool(name, args)	app.callServerTool({ name, arguments: args })
window.openai.toolOutput	app.ontoolresult（connect() の前に登録）

まだ対応する物が無い項目もあります。openai/toolInvocation/invoking・invoked、openai/widgetDescription（代わりに app.updateModelContext()）、uploadFile・getFileDownloadUrl、requestClose・setOpenInAppUrl は「Not yet implemented」で、widgetState・setWidgetState は localStorage やサーバー側の状態など別の手段を使うよう書かれています。移す前に、自分のアプリがこれらを使っていないかを洗い出します。逆に MCP Apps 側には、_meta.ui.permissions（カメラ・マイク・位置情報・クリップボード）や、引数の途中経過を受ける ontoolinputpartial などが足されています（Claude のモバイルではカメラ・マイク・位置情報は使えません）。

会社の管理者ができること｜Team・Enterprise の設定

ヘルプによると、Team と Enterprise の所有者は、組織設定 > コネクタで、インタラクティブコネクタを描く個別のツール呼び出しを止められます。コネクタ自体とテキストで返すツールは通常どおり動きます。11月10日の発表は、コネクタの全ツールを許可済みの組織では新しい機能が提供に合わせて出てくること、管理者は今までと同じ方法でツールを制限できることを書いています。触る場所は次のとおりです。

• 画面を出すツール呼び出しだけを止める：組織設定 > コネクタ（所有者）。テキストのツールは残る（ヘルプ）
• 新しい Claude の体験を切り替える：組織設定 > Capabilities の「Chat and Cowork unified」（Owner か Primary Owner）。サイドパネル・エントリーポイント・app tools は、この体験の会話が前提（Entry points・App tools・Display modes）
• ツールやコネクタを Blocked にする：そのアプリは Artifacts ページのエントリーポイントにも出なくなる（Entry points）
• Enterprise のカスタムロール：役割ごとに、使えるコネクタと、そのコネクタの個別のツールを決める（2026年5月28日のリリースノート）
• 個人の利用者：会話の「Search and tools」メニューから、特定のツールを止める（ヘルプ）

もう 1 本の 11月10日の発表（More ways to work with Claude）は、コネクタごとにできることを絞る例として、Slack を読めても代わりに送れないようにする使い方を挙げています。作る側は、画面を止められてもテキストの結果で用が足りる作りにしておくと、管理者の判断と両立できます。

まだ確かめられていないこと

2026年11月11日時点で、次の点は公式の文書から確かめられませんでした。

• 使える組織の範囲：サイドパネル・エントリーポイント・app tools は「限られた組織」とだけ書かれ、選ばれ方と広げる時期は確認できませんでした。使えるかは、展開のボタンが出るか・Artifacts ページに並ぶか・ツールの承認を求められるか、で見ます。
• 提供が届く時期：新しい Claude の体験が全員に届く時期と、サイドパネルなどがモバイルに来る時期は確認できませんでした。
• SDK の版：Claude のクイックスタートが 2.x の手順に変わるかは確認できず、1.x と 2.x の互換はリリースノートの記載で、当社は確かめていません。
• プラグインの名前：スキルを入れるコマンドの 2 行目が、Claude のドキュメント（mcp-apps@mcp-apps）と README（mcp-apps@modelcontextprotocol-ext-apps）で違い、どちらが今の名前かは確認できませんでした。
• ほかのホストでの動き：openai/ui のエントリーポイントや app tools を、Claude 以外の製品がどう扱うかは確認できませんでした。
• 日本語のヘルプ：日本語版は更新前の内容（表示はインラインカードとフルスクリーンビューの 2 つ）で、サイドパネルは英語版にだけ書かれています。

当社はこの記事の時点で MCP Apps の SDK で画面を作って動かしておらず、手順とコードは公式の文書の記載に基づいています。

【要注意】MCP Apps でよくある読み違い 4 つ

読み違い 1：Claude Code でも画面が出ると考える

❌ MCP App を足したサーバーは、Claude Code でも画面つきで動く
⭕ Claude Code はツールをテキストとして呼び、UI は描かない。画面を見るには Claude Desktop や Web の Claude など、MCP Apps に対応するホストが要る。Claude Code は、MCP Apps のスキルを入れて画面を作る側の道具として使える

なぜ重要か：画面を足しても、Claude Code はテキストのクライアントとして同じサーバーを使い続けるからです（クイックスタート）。拡張の対応表でも、Claude Code の MCP Apps の欄に印はありません。

読み違い 2：localhost のサーバーを claude.ai に足せば画面が出ると考える

❌ 手元で node server.mjs を動かし、http://localhost:3000/mcp を claude.ai に足せば表示できる
⭕ claude.ai とデスクトップアプリで URL を指定して足したサーバーには Anthropic の基盤からつなぐので、localhost には届かない。公開の HTTPS の URL に置くか、作業中はトンネルで出してカスタムコネクタとして足す。手元だけなら SDK の例のサーバーを Claude Desktop の設定ファイルで動かす（app tools・エントリーポイント・埋め込みサイトにはリモートのサーバーが要る）

なぜ重要か：届かないことを、コードの誤りと取り違えないためです（クイックスタート）。

読み違い 3：テストで出たエントリーポイントは、掲載後も全員に出ると考える

❌ カスタムコネクタで試してエントリーポイントと埋め込みサイトが動いたので、ディレクトリに載せれば誰でも使える
⭕ ディレクトリのコネクタでは、エントリーポイントと埋め込みサイトは Verified の掲載だけで使え、Community の掲載から入れた人には出ない。エントリーポイントは、限られた組織であること・新しい Claude の体験・リモートのコネクタも条件

なぜ重要か：提出したコネクタは、既定で Community の掲載になるからです（Get started with MCP Apps・Entry points・審査の点検表）。

読み違い 4：管理者が画面を止めるとコネクタも止まると考える

❌ 組織設定で画面を出すツール呼び出しを止めると、そのコネクタは使えなくなる
⭕ 止まるのは画面を描くツール呼び出しだけで、コネクタ自体とテキストで返すツールは通常どおり動く。止められるのは Team と Enterprise の所有者で、場所は組織設定 > コネクタ

なぜ重要か：画面が止められた組織でも用が足りるよう、作る側はテキストの結果を残しておく必要があるからです（ヘルプ）。

よくある質問

MCP Apps と普通の MCP のツールは何が違いますか？

普通のツールはテキスト・画像・リソース・構造化データなどを返し、ホストが会話の一部として表示します。MCP Apps では、ツールの _meta.ui.resourceUri が ui:// のリソース（HTML の画面）を指し、対応するホストがその画面をサンドボックスの iframe で描きます。画面からホストを通じてツールを呼べるのが違いです。UI を描かないホストでは、同じツールがテキストの結果を返します。

Claude Code で作った MCP App はどこで確かめますか？

Claude Code は UI を描かないので、画面は Claude Desktop か Web の Claude で確かめます。サーバーを公開の HTTPS の URL に置く（作業中はトンネル）か、SDK の例のサーバーを Claude Desktop の設定ファイルで動かします。app tools・エントリーポイント・埋め込みサイトはリモートのサーバーが要り、app tools は Web の新しい Claude の体験の会話で試します。curl で tools/list などを送る確かめは手元でもできます。

OpenAI の Apps SDK で作ったアプリは移せますか？

Claude のドキュメントには、SDK の対応表を見て MCP Apps SDK へ移す方法と、MCP Apps のスキルに「Migrate from OpenAI Apps SDK」「Convert my OpenAI App to an MCP App」と頼む方法があります。openai/outputTemplate は _meta.ui.resourceUri に、MIME タイプは text/html;profile=mcp-app に置き換えます。widgetState やファイルのアップロードなど、まだ対応する物が無い項目もあるので先に洗い出します。

自分の MCP App をサイドパネルで開くには何が要りますか？

画面の availableDisplayModes に fullscreen を入れ、クリックかキー操作の直後に requestDisplayMode で頼みます。使う側の条件は、組織がサイドパネルを使える限られた組織に入っていること、新しい Claude の体験の会話であること、Web か Claude Desktop であること（モバイルはまだ対象外）です。狭い窓などサイドパネルが開けない所では、全画面で開きます。

会社の Claude でインタラクティブコネクタを止められますか？

Team と Enterprise の所有者は、組織設定 > コネクタで、インタラクティブコネクタを描く個別のツール呼び出しを止められます。コネクタ自体とテキストのツールは動き続けます。Enterprise ではカスタムロールで、役割ごとに使えるコネクタと個別のツールを決められます。個人の利用者は、会話の「Search and tools」メニューから特定のツールを止められます。

SDK は 1.x と 2.x のどちらを使えばよいですか？

Claude のクイックスタートは、1.x の MCP SDK と組む @modelcontextprotocol/ext-apps@^1 の手順（1.7.5 で確認）です。2.x（最新は v2.1.0）は MCP TypeScript SDK 2.0 の分割パッケージと Node.js 20 以上が前提で、リリースノートは 1.x と 2.x の画面とホストが互いに動くと書いています。使っている MCP SDK の版に合わせて選び、2.x へ上げる時は SDK の移行ガイドを見ます。

まとめ｜今日・今週・今月にやること

MCP Apps は、MCP サーバーのツールに ui:// の画面をつなぐ公式の拡張で、Claude ではインタラクティブコネクタとして会話の中に出ます。11月10日からはサイドパネルや全画面でも開けるようになり、Web と Claude Desktop の新しい Claude の体験に順に届いています。サイドパネル・エントリーポイント・app tools は限られた組織からなので、会話の中の表示だけでも用が足りる作りにしておくのが安全です。

• 今日やること：自分の MCP サーバーのツールから、表やグラフで見せたい結果を返す物を 1 つ選び、Claude のクイックスタートで _meta.ui.resourceUri と ui:// のリソースの形を確かめる。
• 今週中：サーバーを HTTPS の URL に置くかトンネルで出し、カスタムコネクタとして Claude に足して、会話の中に画面が出るかを見る。組織でサイドパネルと app tools が使えるかも、各ページの確かめ方で見ておく。
• 今月中：ディレクトリに出すなら、ツールの注釈・OAuth 2.0・スクリーンショット 3〜5 枚・審査用のテスト用アカウントをそろえる。OpenAI の Apps SDK のアプリがあれば、対応表でまだ対応の無い項目を洗い出す。

あわせて読みたい：

• MCPサーバーの作り方｜Python・TS最小実装【2026年10月】 — 画面を足す前の、最小の MCP サーバーの作り方とつなぎ方
• OpenAI Apps SDK入門｜5ステップで作る — 移す元になる Apps SDK のアプリの作り

運営元 Uravation よりAIエージェントを構想から本番運用まで進める順番と、体制・KPIの決め方をまとめた資料を無料で公開しています。 AIエージェント導入ロードマップを受け取る（無料）

参考・出典

• Your apps can now open in Claude, and Claude can work in them — Anthropic（2026年11月10日・参照日: 2026-11-11）
• More ways to work with Claude: Sheets, Whiteboards, and Interactive Connectors — Anthropic（2026年11月10日・参照日: 2026-11-11）
• Your favorite work tools are now interactive connectors inside Claude — Anthropic（2026年1月26日・参照日: 2026-11-11）
• Use interactive connectors in Claude — Claude Help Center（英語版・参照日: 2026-11-11）
• Claude でインタラクティブコネクタを使用する — Anthropic ヘルプセンター（日本語版・参照日: 2026-11-11）
• Release notes — Claude Help Center（2026年3月25日・5月28日の項・参照日: 2026-11-11）
• Get started with MCP Apps — Claude Documentation（参照日: 2026-11-11）
• Add an interactive UI to your MCP server — Claude Documentation（参照日: 2026-11-11）
• Show your MCP App in the side panel or full screen — Claude Documentation（参照日: 2026-11-11）
• Let people open your MCP App without asking Claude — Claude Documentation（参照日: 2026-11-11）
• Let Claude call tools in your MCP App — Claude Documentation（参照日: 2026-11-11）
• Design guidelines — Claude Documentation（参照日: 2026-11-11）
• Submit a connector to the directory — Claude Documentation（参照日: 2026-11-11）
• Connector pre-submission checklist — Claude Documentation（参照日: 2026-11-11）
• MCP Apps — Model Context Protocol（参照日: 2026-11-11）
• Extension Support Matrix — Model Context Protocol（コミュニティが更新する表・参照日: 2026-11-11）
• MCP Apps – Bringing UI Capabilities To MCP Clients — MCP Blog（2026年1月26日・参照日: 2026-11-11）
• modelcontextprotocol/ext-apps（README） — GitHub（参照日: 2026-11-11）
• ext-apps Releases（v2.1.0・v2.0.0） — GitHub（参照日: 2026-11-11）
• Migrating from OpenAI Apps SDK to MCP Apps SDK — MCP Apps SDK のドキュメント（参照日: 2026-11-11）

このテーマの関連記事

• ▸ Muse Emberとは｜料金・モデルID・使い方【2026年11月】
• ▸ Claude Managed Agentsのセルフホストとは【2026年11月】
• ▸ Sakana API Platformとは｜モデル・管理機能【2026年10月】
• ▸ Copilot Fusionとは｜正式版の料金・使い方・設定【2026年10月】
• ▸ 【速報】ChatGPT API無料クレジット月最大500ドル