Claudeのインタラクティブコネクタとは — 対応連携先と仕組み
一部のConnectorは会話内にダッシュボードやボードをそのまま描画し、操作までできます。表示形式・対応連携先・セキュリティの仕組みをまとめます。
インタラクティブコネクタは通常のConnectorと何が違うか
インタラクティブコネクタは、テキストの応答ではなく、分析ダッシュボードやタスクボード、デザインツールのような操作できる画面を会話の中に描画するConnectorです。チャットを離れずに、そのアプリの実際のインターフェースを触れます。
たとえばプロジェクトの進捗を尋ねると、Asanaのボードが会話内に開きます。タスクのチェックや状態の更新を、Claudeとのやり取りを続けながら同じ画面で行えます。関連するConnectorが有効なら追加設定は要らず、既定でオンです。
対応環境はClaude・Cowork・Claude Desktop・Claude for iOS/Androidで、全ユーザーが使えます。この一覧にClaude Codeは入っていません。
Claude Codeでは、ui:// や text/html;profile=mcp-app のUIリソースは、@の候補にもリソース一覧にも出ません(v2.1.281)。URIを指定して読むことはできます。
デスクトップとWebのどちらでConnectorをつなぐかという別の軸は、Claudeコネクタはデスクトップ接続とWeb接続をどう使い分けるかで扱っています。
画面は2通りの形で出てくる
インラインカードとフルスクリーン表示
インラインカード
会話の流れの中に置かれる小さな部品です。ステータスの更新、メッセージ下書きの確認、単発の操作の確定のような短いやり取りに向きます。
フルスクリーン表示
データの可視化、ドキュメント編集、プロジェクトの詳細確認といった複雑な操作のための画面です。会話の入力欄は表示されたままなので、Claudeに話しかけながら操作を続けられます。
画面の中で直接できるのは、データの絞り込み・並び替え・掘り下げ、設定のトグルやチェックボックス、完了・送信・保存の実行、セクションの展開と折りたたみです。見た目を変えたい、結果を絞りたい、別の文脈へ移りたいといった依頼は、会話の入力欄に書きます。Claudeがその指示を解釈して画面を更新します。
対応している連携先
Connectorsディレクトリでは、対応するConnectorに「Interactive」バッジが付きます。対応は次の8つです。
| Connector | できること |
|---|---|
| Amplitude | できること分析ダッシュボードの閲覧・操作 |
| Asana | できることタスクとプロジェクトボードの管理 |
| Box | できることドキュメント・ファイルの操作 |
| Canva | できることデザインの作成・編集 |
| Clay | できること連絡先とアウトリーチの管理 |
| Figma | できることデザインの確認・注釈付け |
| Hex | できることデータとノートブックの探索 |
| Slack | できることメッセージの下書き・送信 |
対応Connectorは今後も追加されます。バッジの有無がそのまま対応の目印なので、新しく試すConnectorもディレクトリ上でバッジを見れば判断できます。
Claudeが自分で作るビジュアルとの使い分け
混同しやすいのが、Claudeがその場で生成するカスタムビジュアルです。図表やグラフ、簡単な操作要素をゼロから組み立てて描画するもので、接続済みのサービスとは無関係に動きます。
優先順位は決まっています。接続中のサービスが依頼に合うインターフェースを持っていれば、それが使われます。どのConnectorの画面も要件に合わないときだけ、カスタムビジュアルが埋めます。どちらを出すかの優先順位はClaude側で決まります。
画面の裏側で何が起きているか
インタラクティブコネクタを支えるのは、Model Context Protocolのオープンソース拡張仕様MCP Appsです。仕様側の説明では、1回の表示は次の流れで進みます。
MCP Appsが画面を描画するまで
- 1
ツールがUIを宣言する
ツールの説明に
_meta.ui.resourceUriがあり、ui://で始まるリソースを指します。ホストはツールが呼ばれる前にこのリソースを先読みできます。 - 2
ホストがUIを取得する
リソースの中身はHTMLで、JavaScriptとCSSを同梱するのが一般的です。外部のスクリプトやリソースを読み込む場合は、
_meta.ui.cspで指定した配信元からに限られます。 - 3
サンドボックスで描画する
Webのホストは通常、HTMLを会話内のサンドボックス化されたiframeに描画します。マイクやカメラのような追加の能力が要るときは、
_meta.uiのpermissionsで要求します。 - 4
双方向にやり取りする
画面とホストの間はpostMessageで、メッセージの形式はJSON-RPCです。画面側からツール呼び出しの要求、メッセージ送信、モデルのコンテキスト更新ができ、ホストは最新の結果を画面へ返します。
ヘルプセンターが「監査可能なJSON-RPC通信」と呼ぶのは、この最後の段のやり取りです。標準のウェブ技術だけで組まれているため、画面の実装にフレームワークの指定はなく、React・Vue・Svelteなどのテンプレートが公式リポジトリに用意されています。
MCP Appsに対応するのはClaudeだけではありません。MCPの仕様ページは、ClaudeとClaude Desktopのほか、VS CodeのGitHub Copilotなどを対応クライアントに挙げています。Microsoft 365 Copilot、Goose、Postmanも並んでいます。画面が出るかどうかは、Connector側の実装とホスト側の対応の両方で決まります。
別のWebアプリへのリンクではなく、会話内に画面を置く理由
画面をリンクで開く方式もありえますが、仕様側は会話内に置く利点を4つ挙げています。
閲覧と操作の面では、タブを移らずに議論の流れの中で画面を見られます。画面からツールを呼び、ホストが最新の結果を返す双方向の流れも、既存のMCPの仕組みで使えます。
委任と安全の面では、ユーザーが接続済みの機能へホストを通して操作を委ねられます。ホストが管理するサンドボックスのおかげで、第三者の画面を安全に描画できる点も利点です。たとえば会議の予定を入れたいとき、画面側は「予定を入れる」という結果を要求するだけで、メールやカレンダーとの連携はホストが持つ接続を通ります。
向いている場面として仕様ページが挙げるのは、複雑なデータの探索、選択肢の多い設定、PDFや3Dモデルのようなリッチメディアの閲覧、リアルタイム監視、経費承認や課題の仕分けといった複数段階の作業です。たとえば「地域別の売上を見せて」と頼めば、数値の羅列ではなく、クリックで掘り下げられる地図が返ってくる、というのが仕様ページの例です。
セキュリティと権限の範囲
ヘルプセンターが挙げる防御は4つです。
外部の画面を会話に埋め込むための仕組み
サンドボックスiframe
画面は隔離された枠の中で動きます。ホストのページから切り離されているので、第三者が作った画面でも、サーバー作者を無条件に信頼せずに描画できます。仕様側の説明では、親ページのDOMやホストのCookie・ローカルストレージに触れず、親ページを遷移させることもできません。
厳格なCSP
Content Security Policyにより、画面が読み込めるものを制限します。
ドメインの事前宣言
サーバーは、必要な外部ドメインを先に宣言しなければなりません。
HTMLのレビュー
ホストはレンダリングの前にHTMLの内容を確認できます。
権限は、Connectorを接続したときに許可した範囲のままです。インタラクティブ表示だからといって追加のデータアクセスは求められません。MCP Appsの仕様は、画面側が使える機能をホストが絞れるとも書いており、たとえばツールの呼び出し範囲を制限したり、リンクを開く機能を無効にしたりできます。Canva Connectorの接続手順と権限の扱いはClaude Canva連携の始め方にあります。
サードパーティのインタラクティブコネクタ経由の購入や金銭取引には対応していません。画面に決済や予約のUIが見えても、そこで取引は完了しません。
止めたいとき:個人と組織で操作が違う
Team・Enterpriseプランのオーナーは、インタラクティブ表示を描画する特定のツール呼び出しだけを、Organization settings > Connectorsで無効にできます。Connector自体は無効になりません。テキストベースのツール機能は、そのまま動きます。外部のインターフェースを会話に描画することだけを避けたい組織は、Connectorを丸ごと外さずに済みます。
個人で使っている場合は、会話中の「検索とツール」メニューから、特定のConnectorのツールを個別に無効にします。Team・Enterpriseのメンバーが同じことをしたいなら、オーナーにOrganization settings > Connectorsでの無効化を頼む形になります。
試すまでの流れ
- Connectorsディレクトリで「Interactive」バッジの付いたConnectorを探す
- 接続して認証する
- そのConnectorが扱う内容についてClaudeに話しかける
3つ目の段階で、関連するタイミングに画面が自動で現れます。専用の起動操作はありません。
画面が出ない・反応しないときの切り分け
症状ごとに、公式ヘルプが示す確認の順番は次のとおりです。
- 画面が出ない: そのConnectorが接続済みで、今の会話で有効かを見ます。新しい会話を始め、Connectorが扱える質問を投げ直す方法もあります。
- 画面は出るが操作に反応しない: インターネット接続を確認し、ページの再読み込みかClaude Desktopの再起動を試します。直らなければ、Settings > Connectorsで該当Connectorを切断して再接続します。
画面そのものを消したい場合は、前節の個人向け・組織向けの手順になります。
自分でインタラクティブなConnectorを作るとき
MCP Appsは仕様がオープンなので、画面を実装するのはAnthropicではなくConnectorを提供する開発者です。ディレクトリに載せるConnectorには、通常のConnector開発に加えて、設計・セキュリティ・テストの追加要件があります。掲載審査の詳細はAnthropic Connectors Directoryとはにあります。
雛形づくりには、MCP Appsのドキュメントが案内する create-mcp-app スキルがあります。Claude Codeでは次の2行でインストールします。
/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@modelcontextprotocol-ext-apps手作業で組むなら、Node.js 18以上が前提です。MCPのツールとリソースの両方を使う作りなので、どちらにも慣れておくと理解が早くなります。
インストール後に「Create an MCP App that displays a color picker」のように頼むと、サーバー・UI・設定ファイルが揃ったプロジェクトが生成されます。生成後は npm install && npm run build && npm run serve で起動し、新しい会話でClaudeにカラーピッカーを頼んで動作を確かめる流れです。スキルの使い方はMCP Appの作り方 — create-mcp-appスキルで雛形を生成するで詳しく扱っています。
まとめ
画面が出るかどうかは、2つの条件で決まります。ConnectorにInteractiveバッジが付いていること、そしてClaude・Cowork・Claude Desktop・iOS/Androidのいずれかで使っていることです。Claude Codeは対象外です。
止めたい場面では、組織はオーナーがOrganization settings > Connectorsで、個人は「検索とツール」メニューで操作します。誰が止めるかは、プランの種類で分かれます。
Connectors全体の仕組みと標準搭載の一覧はClaude Connectorsとはに、Coworkでの運用はClaude CoworkのConnectors一覧にあります。