Wink Pings

Google Confines Generative UI to a Component Catalog: A2UI 1.0 Wants to Clean Up the Frontend's Mess

A2UI 1.0 is released under Apache 2.0 and spans web, mobile, watches, and TV. It doesn't let models spit out HTML directly; instead, it uses catalog.json to constrain components and functions. Security, the iframe tax, the Express DSL, and the wire protocol are all worth a look.

Google Cloud Tech has released A2UI 1.0 under the Apache 2.0 license, positioned as a stable, open generative UI protocol and framework. It supports Web-side React, Angular, and Lit; mobile and desktop renderers such as Flutter, SwiftUI, Jetpack Compose, and Lynx; and also provides Agent SDKs for Python, TypeScript, and Dart, with integration into systems such as AGUI. In the original article, author Alan Blount explains six common questions, all of which point to one thing: models can generate interfaces, but interfaces cannot turn into a blob of strings that no one can control.

Letting models write HTML directly: the problem isn't flexibility

If you ask in a dev room what generative UI is, half the people will think of a language model streaming raw HTML and Tailwind classes into the browser. Actually making that conform to a design system and behave consistently on web, mobile, watches, and TUI is basically impossible.

Google Stitch and Vercel have promoted DESIGN.md, writing type scales, spacing tokens, and layout rules into markdown so coding agents don't invent purple gradients in every PR. Vercel's case is very concrete: the file build ran more than 200 rounds, including full rounds, targeted checks, and dry runs, with a model judge writing critiques every round that fed into the next round. Pages generated with design.md had 39 failures; without it, 91 — 57% fewer in the test. This counts as a success story, but the original article also points out that it is fragile: errors have to be caught by people and added back into DESIGN.md, and DESIGN.md still drifts away from the real design system.

What's more awkward is that frontend and mobile teams may have spent years polishing dark-mode contrast, RTL layouts, localized date pickers, WAI-ARIA screen-reader attributes, and touch targets, and these already live in React, Angular, Lit, Flutter, SwiftUI, and Jetpack Compose component libraries. Having the model write them again at runtime is pure duplicated work. A2UI's approach is to give the agent a contract for prebuilt components, catalog.json, and the agent can only reference allowed components. Designers control flexibility, for example 6 large widgets, 20 small widgets, 50 atomic components.

Streaming HTML and JS turns prompt injection into XSS

The original article gives a blunt scenario: an agent reads an unread calendar invite and then streams raw HTML, CSS, and JavaScript into the main app DOM. Some external invite hides a prompt injection in the meeting description, and this untrusted text writes executable markup into an authenticated session. Stripping script tags with an HTML sanitizer is not enough. Crafted CSS can float an invisible click target over the real approval button with position: fixed, can exfiltrate tokens via background URL requests, and can pollute DOM globals. Security engineers will not treat the output of a probabilistic model as trusted client-side code.

In A2UI 1.0, UI messages are purely declarative data, not executable scripts or raw CSS. The agent can only reference component names and functions allowlisted in catalog.json. 1.0 also adds allowedCallers and requiresUserActivation flags, so background streams cannot casually trigger external navigation or clipboard actions unless the user actually clicks.

iframes are not free sandboxes; they have a tax

After ruling out raw HTML in the main DOM, many teams choose a sandboxed iframe. MCP Apps uses a double iframe: an outer proxy sandbox.html feeds untrusted HTML to an inner srcdoc frame, with sandbox set to allow-scripts and origin null. For an independent third-party canvas such as a 3D WebGL viewer or a custom Kanban, that trade is reasonable, and A2UI 1.0 also embeds MCP Apps via @a2ui/catalog-mcp.

But put 15 interactive cards in a chat stream, and iframes start fighting the physics of the browser. Fifteen cards spin up 15 document contexts, and framework JS is duplicated in memory. With origin null, localStorage and cookies throw SecurityError directly. Dropdown menus get clipped at the edges of the rectangle, Tab focus gets trapped, and asynchronously adjusting height via postMessage makes mobile scrolling stutter. If you control the UI yourself, render natively as much as possible and use your own design system rather than paying the iframe tax. Leave iframes for the 10% that truly needs an isolated pixel canvas, or for someone else's fully trusted UI.

Generative UI is a spectrum, not one answer

The original article lays out how agents deliver UI to users as a spectrum: prebuilt UI, where the agent only picks a screen; injecting widgets from elsewhere into your page; declarative UI, composed from a component catalog; and fully coding or rendering UI at runtime. All four work, and A2UI starts from the third while also releasing three approaches for MCP Apps plus A2UI, as well as a working version of custom HTML templates inside an iframe.

LLMs prefer an Express DSL over emitting nested JSON

Early server-driven UI prototypes often had models output wire JSON directly. Looking at the token stream shows that raw UI JSON is verbose: tokens go into component, children, id, quotes, and nested brackets, and one comma at token 600 can crash parsing. Rabi Shanker Guha and the OpenUI project demonstrated with OpenUI Lang: raw UI JSON wastes up to two-thirds of output tokens on structural ceremony, and streaming still has to wait for the outer brackets to close; a line-oriented positional DSL, in the form identifier = Component(...), is closer to how code-trained models generate structure.

This insight inspired A2UI Express, now the default reasoning format for the 1.0 Python, TypeScript, and Dart Agent SDKs. Models write concise positional calls and $/path bindings inside a2ui tags. The original article provides a 54-sample core_v1_0 benchmark using gemini-3.8-flash with temperature set to 0.0: Express reduces median prompt tokens by 45.4%, from 10980 to 6000; generated UI code tokens drop 63.2%, 2.7x without thinking, and 67.3%, 3.1x, with unbounded thinking. A customer used Express to cut a clinical dashboard's latency from 10 seconds to 5 seconds, and Soverius AI fine-tuned a local Gemma 4 to stream Express directly in the browser.

The reasoning format and the wire format must be separated

Seeing how fast the positional DSL streams, it's tempting to parse it directly in every iOS, Android, and web client. That's a trap. Six client rendering SDKs coupled to one LLM syntax means every future prompt-format upgrade has to wait for mobile app store releases. Anyone who has waited three weeks for an iOS binary update knows the pain.

A2UI 1.0 draws a hard boundary between the server-side reasoning format and the transport wire protocol. On the server, A2uiGenerator compiles Express blocks into standard A2UI 1.0 JSON and JSONL envelopes. The same wire format also accepts server-side @macro expansion, keeping private database queries outside the LLM prompt, or accepts structured choices from a System 1 decision model, such as Jev in the ByteDance Lynx playground. createSurface opens a surface and can inline initial components and dataModel in one message. updateComponents streams a flat, ID-addressed component list, so updates don't need to diff a deep tree. updateDataModel sends small updates via RFC 6901 JSON Pointer, over SSE, WebSockets, A2A, AG-UI, or MCP. Client renderers only parse validated JSON. Changing models, changing reasoning syntax, or moving tricky cards into deterministic Python @macros requires no client update.

Ecosystem and getting started

The original article mentions that OpenUI built the positional DSL and a React catalog, ByteDance built streaming native generative UI for Lynx, and Alation built a declarative SQL backend feed for AIOS that needs to render simultaneously in Alation's Data Products App and Claude. Atlassian is building interactive agent cards in Jira. Bloomberg, CommerceTools, CopilotKit, and Google-internal Gemini Notebook and Gemini Enterprise are all having agents respond with UI.

The original article gives several installation options: npx skills add a2ui-project/a2ui to add the A2UI 1.0 skill to coding agents such as Antigravity, Claude Code, Codex, and Cursor; pip install a2ui-agent-sdk; npm install @a2ui/agent @a2ui/react @a2ui/web_core. Docs, quickstart, and spec are at a2ui.org, and browser experiments are at A2UI Playground. The original link is here.

The community follow-ups are more interesting than the launch post

Invariant asked whether 1.0 will break builds from older versions or be a direct drop-in. Ruslan cares whether, when an old app receives a component not in the catalog, the rest of the screen can keep working and only that unsupported component is stopped. Juliano tried searching Northwind in the manual playground: from page 2, the search correctly returned a row from page 1, and after no matches, clear also recovered; he asked whether this filtering can withstand irrelevant streaming component updates. S4ck3 said a native SwiftUI renderer would make it easier for Mac and iOS developers to buy in. nick's comment was short: protocols beat demos, and A2UI is betting on contracts. Wei Sun asked whether it can be used to implement an MCP App. Amy expressed discomfort with the phone experience of 15 cards and 15 iframes. Raúl believes generative UI lets agents move from reporting results to building interfaces for the task, and standards matter because the same agent output should render sensibly in any app, not only the app that generated it. will asked whether it could redefine the UI framework for AI coding. Agentik wants to see what agents would actually render on a watch.

The value of A2UI 1.0 is not making models better at writing interfaces, but giving runtime UI a contract. Ordinary users may only notice that agent replies change from walls of text into clickable cards. Developers get reuse of existing design systems, clear security boundaries, and clients that are not held hostage by reasoning syntax. The risks are also obvious: how the catalog is governed, how old clients degrade, and whether cross-platform details can really be aligned. Whether the protocol wins depends on whether the ecosystem is willing to treat the component catalog as a public contract, rather than yet another internal JSON field table.

发布时间: 2026-11-12 02:32