MCP Ext Apps

🚀 MCP Ext Apps

MCP Apps Extension (SEP-1865) のサンプル実装 - MCPツールを介したインタラクティブなHTML/JS UI

https://github.com/user-attachments/assets/dd4c968f-1b82-4975-8b89-374933363a99

🚀 クイックスタート

以下のコマンドを実行してください。

npm install
npm start

次に、ブラウザで http://localhost:8080 を開きます。

💻 使用例

基本的な使用法

こちらはアプリケーションを起動するためのコマンドです。

npm install
npm start

高度な使用法

サーバーやホストクライアントを個別に起動する場合のコマンドです。

npm run server  # MCP server (port 3001)
npm run host    # Host client (port 8080)

📚 ドキュメント

動作原理

Host Client                              MCP Server
┌────────────────────┐                  ┌──────────────┐
│  tools-sidebar     │ ── call tool ─> │  Tools:      │
│  app-container     │ <── HTML UI ─── │  - dashboard │
│  [sandboxed iframe]│                 │  - clock     │
└────────────────────┘                  └──────────────┘
   localhost:8080                        localhost:3001

1. ホストはMCPサーバーに接続し、ツールの一覧を取得します。
2. ユーザーがツールをクリックすると、ホストはMCPを介してそのツールを呼び出します。
3. ツールは ui:// URI を持つ text/html+mcp リソースを返します。
4. ホストはCSP付きのサンドボックス化されたiframeでUIをレンダリングします。
5. UIは postMessage を介してJSON-RPC 2.0で通信します。

SEP-1865 準拠事項

• リソースURIの ui:// スキーム
• text/html+mcp MIMEタイプ
• ツールのレスポンスに含まれる _meta.ui/resourceUri
• ui/initialize ハンドシェイクプロトコル
• JSON-RPC 2.0メッセージ形式
• CSPヘッダー付きのサンドボックス化されたiframe

スクリプト

npm start       # Build + start server
npm run server  # MCP server (port 3001)
npm run host    # Host client (port 8080)

📄 ライセンス

MIT