# A2UI MCP Server

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

## 概要

このMCPサーバーは、Claude Codeから[A2UI](https://a2ui.org/)プロトコルを使ってリッチなUIを生成できるようにします。

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

## 特徴

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

## インストール

```bash
cd a2ui-mcp-server
npm install
npm run build
```

## Claude Code設定

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

```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

## 例: 予約フォーム

```json
{
  "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公式サイト](https://a2ui.org/)
- [A2UI GitHub](https://github.com/google/A2UI)
- [MCP仕様](https://modelcontextprotocol.io/)