Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@A2UI MCP Server Create a login form with username and password fields."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Claude Code × A2UI (Agent-to-User Interface) 連携用のMCPサーバー
このMCPサーバーは、Claude CodeからA2UIプロトコルを使ってリッチなUIを生成できるようにします。
A2UIはGoogleが開発したオープンソースプロジェクトで、AIエージェントが宣言的なJSON形式でUIを生成し、様々なフレームワーク（Web, Flutter, React等）でネイティブにレンダリングできます。
Related MCP server: CC Fig MCP
🎨 ライブプレビュー: ブラウザでリアルタイムにUI変更を確認
🔧 シンプルなAPI: 4つのツールでUI生成
📦 標準A2UIコンポーネント: Text, Button, TextField, Column, Row, Card等
🔄 WebSocket連携: 変更が即座にプレビューに反映
cd a2ui-mcp-server
npm install
npm run build~/.claude/mcp_settings.json に追加:
{
"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 でブラウザプレビューを開いてツール | 説明 |
| 新しいUIサーフェス（コンテナ）を作成 |
| コンポーネントを追加・更新 |
| データモデルを更新（データバインディング用） |
| ブラウザでライブプレビューを開く |
| 全サーフェスをクリア |
| 現在の状態を取得 |
レイアウト: 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
Clear all A2UI surfaces and reset the state.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare destructiveHint=true and idempotentHint=true, so the description does not need to repeat those. It adds useful scope ('all surfaces') and clarifies that state is reset, but it does not mention irreversibility or data-loss consequences beyond what 'clear' implies.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single, compact sentence with no filler. The action and scope are front-loaded, making it immediately understandable.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a parameterless destructive reset operation, the description combined with the annotations is sufficient. It could mention that the action is irreversible or affects all surfaces, but 'clear all surfaces and reset the state' already conveys the essential behavior.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters and the schema provides 100% coverage, so the baseline of 4 applies. The description cannot add parameter-level meaning, and none is needed here.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Clear') with an explicit resource ('all A2UI surfaces') and the resulting effect ('reset the state'). This clearly distinguishes it from sibling tools like a2ui_get_state or a2ui_update_components.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The phrase 'clear all' implies this is for a full UI reset rather than incremental updates, but the description does not explicitly state when to use it versus alternatives or when it should be avoided. Usage guidance is inferred, not stated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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" }
| Name | Required | Description | Default |
|---|---|---|---|
| catalog_id | No | Component catalog ID. Defaults to standard A2UI catalog. | https://a2ui.dev/specification/0.9/standard_catalog_definition.json |
| surface_id | Yes | Unique identifier for the surface (e.g., 'booking_form', 'user_profile') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations indicate this is a mutating, idempotent, non-destructive operation. The description adds useful context beyond that: it explains what a surface is, reinforces the prerequisite relationship, and documents the return value as a JSON confirmation. This matches the annotation profile with no contradictions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-organized with a definition, prerequisite note, args, return info, and example. It is not excessively long, but some of the Args section duplicates the schema, slightly reducing information density.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a two-parameter tool with full schema coverage and no output schema, the description is complete: it states the purpose, the prerequisite, the parameters, the response, and gives a realistic example. An agent has everything needed to call it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters fully. The description restates the parameters and gives an example, which adds minor convenience but no new semantic meaning beyond what the schema provides.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description states a specific verb ('Create'), a concrete resource ('A2UI surface'), and its role as a UI container. It clearly distinguishes the tool from siblings like a2ui_update_components and a2ui_get_state by establishing the surface as the prerequisite top-level container.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly says 'You must create a surface before adding components to it,' which gives clear sequencing guidance. It does not explicitly name alternatives or exclusion cases, but the context makes it obvious when this tool should be used first.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get the current state of all A2UI surfaces and their components.
| Name | Required | Description | Default |
|---|---|---|---|
| surface_id | No | Specific surface to get (optional, returns all if not specified) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already cover readOnlyHint=true, idempotentHint=true, and destructiveHint=false, so the safety profile is fully disclosed. The description adds the scope of the operation (all surfaces/components) and implicitly the optional single-surface filter, but does not extend much beyond what annotations and schema already provide.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence with no redundant words, front-loading the action and object. It complements the schema and annotations without repeating them.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a low-complexity read-only tool with one optional parameter and full schema coverage, the description gives the essential information: what is retrieved and the scope. A minor gap is the lack of detail on the structure/format of the returned state, but no output schema exists and this may be unnecessary for a simple state getter.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The single parameter surface_id is fully documented in the input schema (100% coverage), including its optionality and default behavior. The description does not need to add parameter details; the schema description provides enough semantic meaning.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states a specific verb ('Get') and resource ('current state of all A2UI surfaces and their components'), making it immediately distinguishable from sibling tools that create, update, clear, or preview surfaces. The title reinforces the purpose without adding confusion.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The getter nature of the tool implies its use for inspecting state, and the sibling list contains no competing read tool. However, the description gives no explicit guidance on when to choose this tool vs alternatives, nor does it mention exclusions such as using poll_events for event data.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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).
| Name | Required | Description | Default |
|---|---|---|---|
| peek | No | If true, peek at events without consuming them | |
| surface_id | No | Filter events by surface ID (optional, returns all if not specified) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Discloses critical behavior beyond the annotations: events are consumed when polled unless peek=true, event payload structures are detailed, and a full example response shows the return shape. The annotations only set all hints to false, so the description carries the full transparency burden and does it well.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is front-loaded with a purpose statement, uses terse bullet lists for event types, and includes a compact example response. Every line adds value—event types, payloads, and the enabling flag—with no fluff or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no output schema, the description supplies a representative response and covers the main operational details: peek semantics, event consumption, payloads, and how to enable events. It stops short of edge cases like empty-response behavior or whether polling is blocking, but it is otherwise adequately complete for an agent to invoke correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters (peek and surface_id). The description's mention of peek=true adds narrative context but no new parameter semantics beyond what the schema provides, so a baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States explicitly that the tool polls UI events from the browser with a specific verb and resource, and enumerates concrete event types (tap, change) with payloads. This is clearly distinct from sibling tools like a2ui_get_state or a2ui_update_components, which handle state and component mutations rather than event streaming.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides an explicit use case ('Use this to react to user interactions') and prerequisite setup guidance (set onTap=true or onChange=true). It does not name alternatives or when-not-to-use conditions, but no sibling tool fills the same role, so the context is sufficient for an agent to choose it correctly.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| open_browser | No | Whether to open the preview in the default browser |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already mark the operation read-only, idempotent, and world-opening. The description adds the key behavioral trait that the preview auto-updates with changes from sibling tools, and that it returns a shareable/manually-openable URL. No contradictions with annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three short sentences, each providing distinct information: what it opens, auto-update behavior, and return value. No redundant or filler content.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-required-parameter read-only tool with no output schema, the description covers the operation, update behavior, and return value. Annotations cover the safety profile, so nothing essential is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The single parameter open_browser is fully documented in the schema (100% coverage). The description adds context around its purpose by mentioning the URL can be shared or opened manually, implying why one would set open_browser to false. This is incremental value beyond the schema, so slightly above the high-coverage baseline.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names a specific action and subject: 'Open a live preview of all A2UI surfaces in the browser.' This clearly differentiates the tool from siblings that get state, create/update surfaces, clear, or poll events. No ambiguity about what it does.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description indicates a clear context: it is a preview that auto-updates when changes are made using other a2ui_* tools, so an agent can use it to observe the effects of prior mutations. However, it does not explicitly state when to prefer preview over a2ui_get_state or when not to use it, so it stops short of full exclusion guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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" } ] }
| Name | Required | Description | Default |
|---|---|---|---|
| components | Yes | Array of components. Must include a 'root' component. | |
| surface_id | Yes | Surface ID to update |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations establish that the operation is non-read-only, non-destructive, and idempotent. The description supplements this by explaining how components are structured: a flat list with ID references, the root requirement, and tree construction via children. It does not disclose merge/replacement semantics for existing components or error behavior, but the provided detail is strong for safe invocation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is long but every section earns its place: purpose, structural rule, component catalog, and example. The component list is scannable, the IMPORTANT note is appropriately emphasized, and the example demonstrates nesting without filler or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the lack of an output schema and the mutation-oriented nature of the tool, the description covers all essential invocation details: required surface_id, component array shape, root requirement, and the full catalog of supported components. It does not explain what happens if the surface does not exist or whether existing components are replaced, but the annotations and schema cover the main risk profile sufficiently.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Although schema description coverage is 100%, the description goes well beyond it by mapping each component type to its applicable properties and providing a full JSON example. This per-component guidance resolves ambiguity that the generic schema property descriptions leave open, significantly improving correct parameter usage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a specific verb and resource: 'Add or update components on an A2UI surface.' It also enumerates the exact component types and gives an example, making the tool's function easy to grasp. However, it does not explicitly differentiate itself from sibling tools like a2ui_create_surface or a2ui_update_data.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description clearly implies when to use the tool: when adding or updating UI components on an A2UI surface. It also provides critical usage rules such as the mandatory 'root' component and the flat-list/children structure. It stops short of saying 'use this instead of X' or listing exclusions relative to siblings, so the guidance is implied rather than explicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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 } }
| Name | Required | Description | Default |
|---|---|---|---|
| data | Yes | Data to apply to the surface's data model | |
| operation | No | How to apply the data: 'replace' (overwrite), 'merge' (shallow merge), 'remove' (delete keys) | merge |
| surface_id | Yes | Surface ID to update |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The annotations declare destructiveHint=false, yet the description explicitly states 'remove: Delete specified keys' and 'replace: Completely replace the data model,' both of which are destructive to existing data. This directly contradicts the annotation, so per the rubric this dimension scores 1.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured: a one-line purpose, a brief dataBinding context, a compact operations list, and an example. It is front-loaded and every sentence earns its place with no redundant filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description covers the operations and includes a helpful example, so the tool can generally be invoked. However, the destructiveHint contradiction creates ambiguity about whether replace/remove are safe, and the absence of any return-behavior statement is a gap since no output schema exists. This lands at the minimum viable level.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3. The description adds value by explaining the semantics of each enum value (replace, merge, remove) and providing a concrete example with realistic values, which clarifies how the nested `data` object is used beyond the schema's generic description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states a specific verb and resource: 'Update the data model of an A2UI surface.' It differentiates from siblings like a2ui_update_components by focusing on dataBinding-backed dynamic values, and the operations list removes ambiguity about what the tool does.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies the tool is for updating a surface's dynamic data model, and the dataBinding context gives a clue. However, it never explicitly says when to use this tool instead of a2ui_update_components or other siblings, nor does it provide exclusion criteria or decision rules.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v0.1.0a2ui_cleara2ui_create_surfacea2ui_get_statea2ui_poll_eventsa2ui_previewa2ui_update_componentsa2ui_update_dataEach 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.
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.
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.
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.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Generate, inspect, and manage Flowstep UI designs directly from your AI assistant.
Build, version, review, and export websites, web apps, and games from a conversation.
Use AI models for chat, image, and video generation from Claude Code and other MCP hosts.
Give any MCP-compatible AI assistant a builder for live, hosted web tools and workflows.
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
