Why an agent needs an interface
Text conversation copes badly with tasks that involve choosing. The example from Google’s announcement: to book a table, the user and the agent trade a series of messages about the date, the time and the free slots — when a form with a date picker, a time selector and a button would solve it in one step. The difficulty is that the agent often runs remotely, on another server or at another company, and cannot change the application’s interface directly. The only option used to be sending HTML and JavaScript into an iframe, which is heavy, looks out of place and complicates security.
How A2UI works
- The user writes to the agent.
- The agent produces A2UI messages: create a surface, describe the components, pass the data.
- The messages travel over any transport: A2A, AG-UI, SSE, WebSockets.
- The application maps the components to its own catalogue and renders them natively — on the web, in a mobile or a desktop client.
- User actions such as taps and input go back to the agent as events.
A simplified example based on the v0.9.1 documentation — a card title and a button:
{"version": "v0.9.1", "updateComponents": {"surfaceId": "product", "components": [
{"id": "title", "component": "Text", "text": "Trail running shoes, UK size 8", "variant": "h1"},
{"id": "buy-label", "component": "Text", "text": "Add to basket"},
{"id": "buy", "component": "Button", "child": "buy-label", "action": {"event": {"name": "add_to_cart"}}}
]}}
A2UI, AG-UI and MCP Apps
| A2UI | AG-UI | MCP Apps | |
|---|---|---|---|
| What it is | An interface description format | An event protocol between agent and frontend | An MCP extension for interfaces |
| Author | Google, with contributions from CopilotKit | CopilotKit | The MCP ecosystem (SEP-1865) |
| How it renders | The app’s native components | Up to the developer | Ready-made HTML in an iframe |
| Who controls styling | The application | The application | The server |
| Protection | Data instead of code | Trusted code in your own app | Iframe sandboxing |
The approaches do not compete: AG-UI can serve as the transport for A2UI, and for MCP the A2UI documentation covers both directions — A2UI over MCP and MCP Apps inside A2UI.
What it means for e-commerce
- A shop window in the chat. An AI Shopping Assistant can show product cards, filters and variant pickers instead of a paragraph of text with links.
- Consistent styling. Components come from your design system, so the agent’s answer looks like part of your site or app.
- Control. The agent cannot show anything that is not in your component catalogue, which reduces the risk of a spoofed interface.
- Where to start. Draw up a short component catalogue for conversational commerce — card, list, size picker, form, button — and test it on the official renderers.