Generative AI does nice at producing textual content, pictures, and code. Now, it’s time for it for use to generate contextually related interfaces. In the present day we’re making the A2UI venture public so we will collaborate with others on this early stage format and implementations. A2UI was designed to deal with the particular challenges of interoperable, cross-platform, generative or template-based UI responses from brokers. A2UI permits brokers to generate the interface which most closely fits the present dialog with the agent, and ship it to a entrance finish software. Now we have been constructing A2UI for a few of our merchandise, and we want to interact with the neighborhood to assist refine the A2UI specs, add extra transports, and add extra consumer renderers and integrations.
A2UI is an open-source venture, full with a format optimized for representing updateable, agent-generated UIs and an preliminary set of renderers, that enables brokers to generate or populate wealthy consumer interfaces, to allow them to be displayed in numerous host functions, rendered by a spread of UI frameworks reminiscent of Lit, Angular, or Flutter (with extra to come back). Renderers assist a set of frequent elements and/or a consumer marketed set of customized elements that are composed into layouts. The consumer owns the rendering and may combine it seamlessly into their branded UX. Orchestrator brokers and distant A2A subagents can all generate UI layouts that are securely handed as messages, not as executable code.
Under are examples of A2UI rendered playing cards, displaying a wide range of UI compositions that A2UI can obtain.
The Drawback: Brokers have to converse UI
Think about an agent designed that can assist you ebook a desk at a restaurant. A text-only interplay may contain a clunky back-and-forth:
Consumer: (typing) “Ebook a desk for two.”
Agent: “Okay, for what day?”
Consumer: (typing) “Tomorrow.”
Agent: “What time?”
Consumer: (typing) “Perhaps 7p”
Agent: “We shouldn’t have reservation availability then, another instances?
Consumer: (typing) “When do you might have reservations?”
Agent: “Now we have availability at 5:00, 5:30, 6:00, 8:30, 9:00, 9:30 and 10:00, Do any of these be just right for you?”
This may be gradual and inefficient. A greater expertise could be for the agent to shortly generate, or use, a easy type with a date picker, a time selector, and a submit button. With A2UI, LLMs can compose bespoke UIs from a catalog of widgets to supply a graphical, lovely, simple to make use of interface for the precise job at hand.
For instance, as a substitute of the text-based chat backwards and forwards above, you should utilize A2UI to compose this reservation UI. The beneath is one doable rendering of an A2UI illustration of the restaurant reserving, with many different potentialities due to A2UI’s design that offers the front-end host app plenty of management over the styling.
The problem: Rendering throughout belief boundaries
We’re getting into the period of the multi-agent mesh. Brokers from Google are speaking to brokers from Cisco, IBM, SAP, and Salesforce to resolve complicated duties. Because of this we collectively created the Agent-to-Agent (A2A) Protocol and donated it to the Linux Basis: to allow brokers to collaborate even once they don’t share reminiscence, instruments, or context.
Nevertheless, this decentralization creates a consumer interface downside.
In case your agent lives inside your software, it could straight manipulate the view layer (e.g. DOM). However in a multi-agent world, the agent doing the work is usually distant—operating within the background, on a distinct server, or owned by a distinct group. It can not contact your UI straight; it should ship messages.
Traditionally, rendering UI from a distant, untrusted supply meant sending HTML or JavaScript and sandboxing it inside iframes. This strategy is heavy, could be visually disjointed (it not often matches your app’s native styling), and introduces complexity round safety boundaries.
We would have liked a option to transmit UI that’s secure like knowledge, however expressive like code.
The answer: UI spec as a sequence of messages
A2UI supplies a typical format which could be generated on the fly as structured output, or used as a template and hydrated with values. The agent producing this response may be a distant A2A agent or the orchestrator the consumer is interacting with. The JSON payload could be despatched to the consumer over A2A, AG UI, and doubtlessly different transports. The consumer software renders utilizing its personal native UI elements. This implies the consumer retains full management over styling and safety, serving to to make sure the agent’s output at all times feels native to your app.
On this instance, the consumer uploads a photograph, and a distant agent makes use of Gemini to grasp it and makes a bespoke type for the particular wants of the landscaping buyer
On this instance, the agent decides to reply with a customized part containing an interactive chart and a customized part containing Google Maps.
Core philosophy: Safe, updateable, and decoupled
We designed A2UI round just a few key ideas:
- Safety first: Operating arbitrary code generated by an LLM might current a big safety danger. A2UI is a declarative knowledge format, not executable code. Your consumer software maintains a “catalog” of trusted, pre-approved UI elements (e.g.,
Card,Button,TextField), and the agent can solely request to render elements from that catalog. This lets you scale back the danger of UI injection and different vulnerabilities. - LLM-friendly and incrementally updateable: The UI is represented as a flat checklist of elements with ID references which is straightforward for LLMs to generate incrementally, permitting for progressive rendering and a responsive consumer expertise. An agent can effectively make incremental adjustments to the UI based mostly on new consumer requests because the dialog progresses.
- Framework-agnostic and transportable: A2UI separates the UI construction from the UI implementation. The agent sends an outline of the part tree and its related knowledge mannequin. Your consumer software is liable for mapping these summary descriptions to its native widgets—be it net elements, Flutter widgets, React elements, SwiftUI views or one thing else solely. The identical A2UI JSON payload from an agent could be rendered on a number of totally different shoppers constructed on prime of various frameworks.
Navigating the agentic UI ecosystem
The area for agentic UI is evolving quickly, with wonderful instruments rising to resolve totally different components of the stack. We view A2UI not as a substitute for these frameworks, however as a specialised protocol that goals to resolve the particular downside of interoperable, cross-platform, generative or template-based responses.
That will help you select the proper instrument, or mixture of instruments, right here is how we map the panorama:
1. Constructing the “host” software UI
If you’re constructing a full-stack software (the “host” UI that the consumer interacts with), along with constructing the precise UI, you might also make the most of a framework (AG UI, Vercel AI SDK, GenUI SDK for Flutter which already makes use of A2UI below the covers) to deal with the “pipes”: state synchronization, chat historical past, and enter dealing with.
- The place A2UI can match: A2UI is complementary. If you happen to join your host software utilizing AG UI, it could use A2UI as the info format for rendering responses from the host agent and likewise from third-party or distant brokers. This provides you the most effective of each worlds: a wealthy, stateful host app that may safely render content material from exterior brokers it would not management.
- A2UI with A2A: You’ll be able to ship through A2A on to a consumer entrance finish.
- A2UI with AG UI: You’ll be able to ship through AG UI on to a consumer entrance finish.
- 2UI as a “useful resource” (MCP apps)sports activities are possible however not but accessible.2.
2. UI as a “useful resource” (MCP apps)
The Mannequin Context Protocol (MCP) has lately launched MCP Apps, a brand new customary consolidating work from MCP-UI and OpenAI to allow servers to supply interactive interfaces. This strategy treats UI as a useful resource (accessed through a ui:// URI) that instruments can return, usually rendering pre-built HTML content material inside a sandboxed iframe to make sure isolation and safety.
How A2UI is totally different: A2UI takes a “native-first” strategy that’s distinct from the resource-fetching mannequin of MCP Apps. As an alternative of retrieving an opaque payload to show in a sandbox, an A2UI agent sends a blueprint of native elements. This permits the UI to inherit the host app’s styling and accessibility options completely. In a multi-agent system, an orchestrator agent can simply perceive the light-weight A2UI message content material from a subagent, permitting for extra fluid collaboration between brokers.
3. Platform-specific ecosystems (OpenAI ChatKit)
Instruments like ChatKit supply a extremely built-in, optimized expertise for deploying brokers particularly inside the OpenAI ecosystem.
How A2UI is totally different: A2UI is designed for builders constructing their very own agentic surfaces throughout Internet, Flutter, and native cellular, or for enterprise meshes (like A2A) the place brokers want to speak throughout belief boundaries. A2UI provides the consumer extra management over styling on the expense of the agent, as a way to enable for larger visible consistency with the host consumer software.
Constructed for the actual world
From day one, A2UI has been developed in partnership with a number of groups inside and out of doors of Google to resolve real-world issues. We’re thrilled to construct with assist from key collaborators:
AG UI / CopilotKit: A robust mixture
We imagine in a collaborative ecosystem. The crew behind AG UI / CopilotKit has labored with us to make sure day-zero compatibility, providing builders a robust “higher collectively” story.
“The Agent-Consumer Interplay Protocol (AG-UI) connects agentic backends and agentic frontends. It supplies builders with sensible constructing blocks for constructing wealthy fullstack agentic functions. AG-UI totally helps the A2UI spec for wealthy declarative generative UIs dynamically generated by brokers. AG-UI additionally implements a full handshake with A2A protocol, for seamless full-featured integration with any A2A system. We’re excited to supply day-0 compatibility between AG-UI and A2UI.” — Atai Barkai, Founding father of CopilotKit and AG UI
Opal: Powering experimental AI mini-apps
Opal lets a whole bunch of hundreds of individuals construct, edit, and share AI mini-apps utilizing pure language. The Opal crew at Google has been a core contributor to A2UI. Along with serving to construct A2UI, the crew has additionally been utilizing it to quickly prototype and combine it into the core app constructing move. A2UI in Opal will allow anybody to construct AI mini-apps with dynamic, generative UI customized for every use case. Within the subsequent few weeks, you’ll be capable of see and expertise A2UI in motion in Opal.
“A2UI is foundational to our work. It provides us the pliability to let the AI drive the consumer expertise in novel methods, with out being constrained by a hard and fast front-end. Its declarative nature and give attention to safety enable us to experiment shortly and safely.” — Dimitri Glazkov, Principal Engineer, Opal Group
Gemini Enterprise: Customized UIs for enterprise brokers
Gemini Enterprise allows companies to construct highly effective, customized AI brokers. A2UI is being built-in to permit these enterprise brokers to render wealthy, interactive UIs inside their host functions.
“Our clients want their brokers to do extra than simply reply questions; they want them to information workers by complicated workflows. A2UI will enable builders constructing on Gemini Enterprise to have their brokers generate the dynamic, customized UIs wanted for any job, from knowledge entry types to approval dashboards, dramatically accelerating workflow automation.” — Fred Jabbour, Product Supervisor, Gemini Enterprise
Flutter: Multi-platform Generative UI app experiences
Flutter and its GenUI SDK helps you generate dynamic, customized UI with Gemini (or different LLMs) to considerably enhance the usability and satisfaction of your GenAI and agent-based consumer experiences. These generative UIs adhere to your established model pointers and use your individual widget catalog. A2UI is utilized by GenUI SDK because the UI declaration format between distant server-side brokers and the app.
“Our builders select Flutter as a result of it lets them shortly create expressive, brand-rich, customized design methods that really feel nice on each platform. A2UI was a terrific match for Flutter’s GenUI SDK as a result of it ensures that each consumer, on each platform, will get a top quality native feeling expertise.” — Vijay Menon, Engineering Director, Dart
AI Powered Google: Standardizing Agentic UI
As Google adopts AI throughout the corporate, A2UI provides groups a standardized means for AI brokers to alternate consumer interfaces, not simply textual content. This interoperability permits brokers to render on any frontend, helps workflows involving a number of brokers per floor or a number of surfaces per agent, and allows internally constructed brokers to be simply uncovered externally, reminiscent of in Gemini Enterprise.
“Very similar to A2A lets any agent speak to a different agent no matter platform, A2UI standardizes the consumer interface layer and helps distant agent use circumstances by an orchestrator. This has been extremely highly effective for inside groups, permitting them to quickly develop brokers the place wealthy consumer interfaces are the norm, not the exception. As Google pushes additional into generative UI, A2UI supplies an ideal platform for server-driven UI that renders on any consumer.” — James Wren, Senior Employees Engineer, AI Powered Google
Get began: Check out A2UI
The easiest way to grasp A2UI is to see it in motion.
- Begin by going to a2ui.org and studying the quickstart information and documentation.
- Subsequent go to the samples folder and take a look at a consumer UI and a few background pattern brokers, maybe the restaurant finder.
Right here’s learn how to launch the restaurant finder:
git clone https://github.com/google/A2UI.git
export GEMINI_API_KEY="your_gemini_api_key"
# Run the restaurant finder A2A agent
cd A2UI/samples/agent/adk/restaurant_finder
uv run .
# Run the lit consumer that makes use of the A2UI lit renderer library
cd A2UI/samples/consumer/lit/shell
npm set up
npm run devShell
One other option to see A2UI in motion is to strive the GenUI SDK for Flutter.
The GenUI SDK for Flutter makes use of A2UI below the covers when speaking to distant or server-side brokers. It is easy to get began, go to https://docs.flutter.dev/ai/genui or watch the Getting began with GenUI video. Within the GenUI SDK repo on GitHub, you can even discover a client-server pattern that makes use of A2UI.
CopilotKit has a public A2UI Widget Builder to check out as effectively.
Supported integrations
Listed below are just a few key integrations that the venture has at present, and a few that we hope the venture helps sooner or later. We welcome neighborhood contributions in these areas.
The long run is open: Be part of us!
In the present day marks the primary public milestone of A2UI. Our format is at present at v0.8 as a result of we’ve been by many rounds of battle hardening and testing for the preliminary use circumstances, and there’s extra to evolve and uncover. Now we have early, however working, consumer libraries for Flutter, Internet Elements and Angular.
With the venture now open, we’re excited to work with the ecosystem to:
- Refine and evolve the format
- Join A2UI into your favourite consumer libraries
- Construct extra strong and helpful instruments sooner or later
- Contribute to developer onboarding and supply samples
A2UI is an Apache 2 licensed venture, and we imagine its success relies on the neighborhood. We invite you to discover the code, strive the demos, and particularly to contribute. Whether or not you wish to construct a consumer in your favourite UI framework, add assist to an agent-building library, or construct a candy demo, we wish to hear from you and collaborate with you.
Take a look at our public roadmap to see the place we’re headed and discover out how one can get entangled. Let’s construct the way forward for agentic consumer experiences collectively.
