MCP Apps プロトコル デモ

MCP Apps は AI チャット内でアプリを動かすプロトコル。 Figma・Slack・Asana 等が Claude / ChatGPT 上で直接操作できる仕組みです。

このデモではプロトコルの動作を可視化。 Viewer の Raw Data で構造化データ、Protocol Log で JSON-RPC の流れを確認できます。

1

データとUIの分離

ツールは構造化データだけ返し、UIテンプレートが受け取って描画。

2

UIリソース配信

ui:// スキームでテンプレートを取得、sandbox iframe内で実行。

3

JSON-RPC 2.0

Host↔iframe間はJSON-RPC over postMessageで標準化・監査可能。

4

双方向ツール呼び出し

UI操作がサーバーにtools/callを送信。プロンプト不要で更新。

MCP Apps Chat

AIにUIを作ってもらおう

下のボタンをクリック、または自由にリクエスト

MCP App Viewer
UI
接続
注入
双方向
🧩

左のチャットからUIを生成してみてください

AIが構造化データを生成 → UIリソースがレンダリング → クリック操作でサーバーと双方向通信