Skip to main content
Glama
mitsuru

A2UI MCP Server

by mitsuru
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

A2UI MCP Server

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

概要

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

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

Related MCP server: Figma MCP Bridge

特徴

  • 🎨 ライブプレビュー: ブラウザでリアルタイムに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

参考

This server cannot be installed

F
license - not found
-
quality - not tested
D
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/mitsuru/a2ui-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server