Skip to main content
Glama
Sign In
A2UI MCP Server

A2UI MCP Server

by mitsuru
OverviewSchemaSourceRelated ServersDiscussionsAdmin
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: genui-mockup

特徴

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

参考

Available Tools

7 tools
a2ui_clearClear A2UI SurfacesA
DestructiveIdempotent

Clear all A2UI surfaces and reset the state.

Inputs: no named parameters.

a2ui_create_surfaceCreate A2UI SurfaceA
Idempotent

Create a new A2UI surface (UI container) for rendering components.

A surface is the top-level container for A2UI components. You must create a surface before adding components to it.

Args:

  • surface_id (string): Unique identifier for the surface

  • catalog_id (string, optional): Component catalog to use

Returns: JSON message confirming surface creation

Example: Create a surface for a booking form: { "surface_id": "booking_form" }

Inputs: surface_id (required), catalog_id.

a2ui_get_stateGet A2UI StateA
Read-onlyIdempotent

Get the current state of all A2UI surfaces and their components.

Inputs: surface_id.

a2ui_poll_eventsPoll A2UI EventsA

Poll for UI events from the browser (button clicks, text input, etc.).

Events are consumed when polled (unless peek=true). Use this to react to user interactions.

Event types:

  • tap: Button was clicked (payload: { action?: string })

  • change: TextField value changed (payload: { value: string, dataBinding?: string })

Example response: [ { "eventId": "abc-123", "surfaceId": "my_form", "componentId": "submit_btn", "eventType": "tap", "timestamp": 1234567890, "payload": { "action": "submit" } } ]

To enable events on components, set onTap=true (Button) or onChange=true (TextField).

Inputs: peek, surface_id.

a2ui_previewPreview A2UIA
Read-onlyIdempotent

Open a live preview of all A2UI surfaces in the browser.

The preview auto-updates when you make changes using other a2ui_* tools.

Returns the preview URL that you can share or open manually.

Inputs: open_browser.

a2ui_update_componentsUpdate A2UI ComponentsA
Idempotent

Add or update components on an A2UI surface.

Components are defined as a flat list with ID references. The component tree is built using the 'children' property.

IMPORTANT: You must include a component with id='root' as the entry point.

Available components:

  • Column: Vertical layout container (children: string[])

  • Row: Horizontal layout container (children: string[])

  • Card: Card container with optional title (children: string[], title?: string)

  • Text: Text display (text: string, style?: {...})

  • Button: Clickable button (label: string, variant?: 'primary'|'secondary'|'outlined', action?: string)

  • TextField: Input field (label: string, placeholder?: string, value?: string)

  • Image: Image display (src: string, alt?: string)

  • Divider: Horizontal line

  • Progress: Progress bar (value?: number 0-100, indeterminate?: boolean)

Example - Simple form: { "surface_id": "my_form", "components": [ { "id": "root", "component": "Column", "children": ["title", "name_field", "submit_btn"] }, { "id": "title", "component": "Text", "text": "Contact Form", "style": { "fontSize": 24, "fontWeight": "bold" } }, { "id": "name_field", "component": "TextField", "label": "Your Name", "placeholder": "Enter name..." }, { "id": "submit_btn", "component": "Button", "label": "Submit", "variant": "primary" } ] }

Inputs: components (required), surface_id (required).

a2ui_update_dataUpdate A2UI Data ModelA
Idempotent

Update the data model of an A2UI surface.

The data model provides dynamic values that components can bind to using dataBinding.

Operations:

  • replace: Completely replace the data model

  • merge: Shallow merge with existing data

  • remove: Delete specified keys

Example: { "surface_id": "booking_form", "operation": "merge", "data": { "userName": "John Doe", "selectedDate": "2025-01-15", "guestCount": 4 } }

Inputs: data (required), surface_id (required), operation.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    TDQS

    A4.1/5.0

    Scored across 7 tools

    Disambiguation5/5

    Each tool serves a clearly distinct purpose: state inspection, surface creation, component updates, data model updates, preview, reset, and event polling. There is no meaningful overlap or ambiguity between tool responsibilities.

    Naming Consistency4/5

    All tools share the a2ui_ prefix and most follow a verb_noun pattern such as create_surface, update_components, and poll_events. The exceptions are preview and clear, which lack a noun target, creating a minor inconsistency.

    Tool Count5/5

    Seven tools is a well-scoped size for a UI surface management server. Each tool addresses a necessary part of the workflow without redundancy or unnecessary expansion.

    Completeness4/5

    The toolset covers the main surface lifecycle well: create, read, update, preview, reset, and handle events. The main gap is the lack of targeted removal for individual surfaces or components, though a2ui_clear provides a blunt workaround.

    Maintenance

    ActivityInactive
    ResponsivenessNo recent community issues

    Resources

    Related MCP Connectors

    Related MCP Servers

    • genui-mockup

      noah-vh
      A
      license
      Not graded
      quality
      D
      maintenance
      Enables Claude to generate and iterate on UI mockups using OpenUI Lang against a shadcn/ui palette, with live preview and auto-persisted assemblies that can be updated in place.
      MIT

    • mcp-use-a2ui

      manufacts
      A
      license
      Not graded
      quality
      C
      maintenance
      Enables chat models to generate and render interactive A2UI interfaces within MCP Apps through a single render-ui tool, supporting components like cards, sliders, and checkboxes with local state bindings.
      MIT

    • ai.dynsoft/sac

      dynsoft-lab
      A
      license
      Not graded
      quality
      C
      maintenance
      Enables AI agents to respond to users with live, persistent, interactive web apps served at a single URL that evolve in place as the conversation continues. It exposes UI generation and evolution tools over MCP so agent responses can include clickable buttons and streaming interfaces alongside chat replies.
      4
      Apache 2.0