A2UI MCP Server

Claude Code × A2UI (Agent-to-User Interface) 連携用のMCPサーバー

概要

このMCPサーバーは、Claude CodeからA2UIプロトコルを使ってリッチなUIを生成できるようにします。

A2UIはGoogleが開発したオープンソースプロジェクトで、AIエージェントが宣言的なJSON形式でUIを生成し、様々なフレームワーク（Web, Flutter, React等）でネイティブにレンダリングできます。

特徴

• 🎨 ライブプレビュー: ブラウザでリアルタイムにUI変更を確認
• 🔧 シンプルなAPI: 4つのツールでUI生成
• 📦 標準A2UIコンポーネント: Text, Button, TextField, Column, Row, Card等
• 🔄 WebSocket連携: 変更が即座にプレビューに反映

インストール

cd a2ui-mcp-server
npm install
npm run build

Claude Code設定

~/.claude/mcp_settings.json に追加:

{
  "mcpServers": {
    "a2ui": {
      "command": "node",
      "args": ["/path/to/a2ui-mcp-server/dist/index.js"]
    }
  }
}

使い方

1. サーフェス作成

a2ui_create_surface で surface_id="my_form" を作成して

2. コンポーネント追加

a2ui_update_components で以下のUIを作成:
- タイトル「お問い合わせ」
- 名前入力欄
- メール入力欄
- 送信ボタン

3. プレビュー

a2ui_preview でブラウザプレビューを開いて

提供ツール

ツール	説明
a2ui_create_surface	新しいUIサーフェス（コンテナ）を作成
a2ui_update_components	コンポーネントを追加・更新
a2ui_update_data	データモデルを更新（データバインディング用）
a2ui_preview	ブラウザでライブプレビューを開く
a2ui_clear	全サーフェスをクリア
a2ui_get_state	現在の状態を取得

サポートコンポーネント

• レイアウト: Column, Row, Card
• テキスト: Text（スタイル対応）
• 入力: TextField, Button
• メディア: Image
• その他: Divider, Progress

例: 予約フォーム

{
  "surface_id": "booking",
  "components": [
    { "id": "root", "component": "Column", "children": ["title", "card"] },
    { "id": "title", "component": "Text", "text": "レストラン予約", "style": { "fontSize": 24, "fontWeight": "bold" } },
    { "id": "card", "component": "Card", "title": "予約情報", "children": ["name", "date", "guests", "submit"] },
    { "id": "name", "component": "TextField", "label": "お名前" },
    { "id": "date", "component": "TextField", "label": "日付", "placeholder": "YYYY-MM-DD" },
    { "id": "guests", "component": "TextField", "label": "人数" },
    { "id": "submit", "component": "Button", "label": "予約する", "variant": "primary" }
  ]
}

アーキテクチャ

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   Claude Code   │────>│  A2UI MCP       │────>│  Browser        │
│   (Terminal)    │     │  Server         │     │  Preview        │
└─────────────────┘     └─────────────────┘     └─────────────────┘
        │                       │                       │
        │  MCP (stdio)          │  WebSocket            │
        └───────────────────────┴───────────────────────┘

今後の展望

• [ ] A2A (Agent-to-Agent) プロトコル対応
• [ ] AG-UI連携
• [ ] カスタムコンポーネントカタログ
• [ ] イベントハンドリング（ボタンクリック等）
• [ ] Reactレンダラー統合

ライセンス

MIT

参考

• A2UI公式サイト
• A2UI GitHub
• MCP仕様