MCP Apps: AI会話にインタラクティブUIを追加する

MCPツールは常にデータの取得やアクションの実行に優れていました。しかし、できなかったのは有用な情報を視覚的に表示することでした。AIアシスタントに売上数値の取得を依頼すると、テキストの羅列が返ってきます。地域でフィルタリングしたい場合は、別のプロンプトが必要です。売上順にソートしたい場合も、また別のプロンプトが必要です。機能はしますが、遅く、フラストレーションが溜まります。

MCP Appsはこの問題を解決します。MCPサーバーがインタラクティブなUIコンポーネント(ダッシュボード、フォーム、ビジュアライゼーション、設定パネル)を返せるようにし、それらが会話内で直接レンダリングされます。別のアプリも、コンテキストの切り替えも不要です。

MCP Appsとは?

MCP AppsはModel Context Protocolの最初の公式拡張機能です。2026年初頭に正式化され、MCP-UIやOpenAI Apps SDKですでに探求されていたパターンを標準化しました。

MCP Apps以前は、各クライアントが独自にUI問題を解決する必要がありました。この分断化により、Claude向けに構築されたサーバーがVS CodeやChatGPTでは同じように動作しないという問題がありました。MCP Appsは共通の標準を確立し、単一の実装がすべての対応クライアントで機能するようにします。

MCP Appsはまだ新しく、進化中であることに注意が必要です。しかし、ClaudeやDevelopment Toolsを含む複数のMCPクライアントですでにサポートされています。これは意味のあるスタートラインアップです。

MCPインタラクティブアプリの仕組み

アーキテクチャは明快です。ツールはインタラクティブなインターフェースを指すUIリソースを参照します:

{
  "name": "visualize_sales",
  "description": "Returns an interactive sales dashboard",
  "_meta": {
    "ui": {
      "resourceUri": "ui://dashboards/sales"
    }
  }
}

ホストはそのリソース(ui://スキーム下で提供されるHTMLバンドル)を取得し、サンドボックス化されたiframe内でレンダリングします。UIはpostMessage経由のJSON-RPCを使用してホストと通信します。つまり、すべてのメッセージは構造化され、監査可能で、MCPの他の部分と一貫性があります。

ext-apps SDKがこの通信レイヤーを処理します:

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

const app = new App()
await app.connect()

app.ontoolresult = (result) => renderDashboard(result.data)

await app.updateModelContext({
  content: [{ type: "text", text: "User filtered by Q3" }],
})

モデルはループ内に留まります。ユーザーがUIと対話する(フィルターをクリックする、設定オプションを選択する、ドキュメントセクションを承認する)と、モデルはそれを認識し、応答できます。

MCP UIコンポーネントは単なるWebアプリ

これはフロントエンド開発者が最も評価する部分です。UIバンドルは標準的なWebアプリケーションです。React、Vue、Svelte、またはプレーンなJavaScriptで構築できます。学習すべき独自のレンダリングエンジンはありません。

ui://リソースは、バンドルされたアセットを含む自己完結型のHTMLファイルです。ホストはそれをサンドボックス化されたiframe内でロードするため、馴染みのあるブラウザ環境で実行されます。コンポーネントの記述方法は従来と同じです。唯一の新しい要素は、App SDKを使用してホストと通信することです。

UIサポートは段階的な機能拡張でもあります。 クライアントがMCP Appsをサポートしていない場合、ツールは引き続き機能します。テキストレスポンスを返すだけです。サーバーは常にテキストフォールバックを提供すべきであり、これによりUI非対応クライアントからロックアウトされることはありません。

MCPインタラクティブアプリが最も効果を発揮する場面

一部のワークフローには本当にUIが必要です。テキストレスポンスでは以下を置き換えられません:

• データダッシュボード - ユーザーがフィルタリング、ソート、ドリルダウンする必要がある場合
• 設定ウィザード - 選択に基づいて変化する依存フィールドがある場合
• ドキュメントレビューパネル - ユーザーがインラインコンテンツを承認またはフラグ付けする場合
• リアルタイムモニター - 新しいツール呼び出しを必要とせずに更新される場合

Shopifyはコマースユースケースでこれを明確に実証しました。製品バリアント、バンドルビルダー、在庫制約は、プロンプトのやり取りで管理するには複雑すぎます。UIがそれをクリーンに処理します。

始め方

ext-appsリポジトリには、動作する例示サーバーが含まれています: threejs-server、map-server、pdf-server、system-monitor-server。構築したいものに最も近いものを選んで、そこから始めてください。

まとめ

MCP Appsは初期段階ですが、すでに使用可能です。AI会話にインタラクティブなUIを直接埋め込む標準的な方法を提供し、MCPツールが取得できるものとユーザーが実際にそのデータで実行できることの間のギャップを埋めます。すでにMCPサーバーを構築している場合、UIレイヤーの追加は自然な次のステップであり、そのためのツールは準備が整っています。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.