cd a2ui-mcp-server
npm install
npm run build

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

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

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

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

{
  "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            │
        └───────────────────────┴───────────────────────┘