A2UI: Agent-to-User Interface – A Revolutionary Approach to Declarative UI Generation

Introduction

The landscape of artificial intelligence has seen remarkable advancements in natural language processing (NLP), enabling agents to generate text, code, and structured responses with unprecedented accuracy. However, one persistent challenge remains: how can AI-driven systems effectively communicate with users through rich, interactive interfaces? Traditional user interfaces (UIs) often rely on rigid frameworks that limit flexibility, especially when dealing with dynamic, context-aware interactions across diverse platforms.

Enter A2UI (Agent-to-User Interface), an open-source initiative designed to bridge the gap between AI-generated content and human interaction. A2UI introduces a novel paradigm where agents can describe UI components in a declarative JSON format, allowing clients—whether web-based, mobile, or desktop—to render these interfaces seamlessly across different frameworks. By decoupling UI generation from rendering, A2UI ensures security, interoperability, and adaptability, making it an ideal solution for next-generation AI-driven applications.

Core Concepts and Philosophy

1. Security First: Safe but Expressive

One of the most critical concerns in AI-generated UIs is security. Unlike traditional code execution, A2UI operates on a declarative data model where agents specify UI components (e.g., buttons, text fields) without executing arbitrary logic. Instead, clients maintain a trusted catalog of pre-approved components, ensuring that only safe, predefined elements can be rendered.

This approach eliminates the risk of malicious code execution while retaining the flexibility to customize interactions through event handling and data binding. For example:

An agent might generate a form for booking a specialized restaurant reservation.
The client renders this form using its native UI framework (e.g., Flutter or React).
Only components from the approved catalog are allowed, preventing unauthorized modifications.

2. LLM-Friendly and Incrementally Updatable

Large language models (LLMs) excel at generating text incrementally, but their ability to produce structured UI elements can be limited by constraints in traditional frameworks. A2UI addresses this by representing UIs as a flat list of components with ID references, making it easy for LLMs to generate and update dynamically.

For instance:

An agent might start with a simple greeting: "Hello, welcome!".
As the conversation progresses, it could expand into a form with fields like name, email, and confirmation.
The client renders these components in real-time, allowing for responsive updates without full UI reloads.

This incremental approach is particularly valuable in conversational AI systems where user interactions evolve over time.

3. Framework-Agnostic and Portable

A2UI’s strength lies in its ability to work across multiple platforms without requiring framework-specific knowledge. The agent describes the UI structure (e.g., type: "text-field", label: "Username"), while the client maps these abstract components to its native widgets.

For example:

A web developer using Lit or React can render the same A2UI payload.
A Flutter developer can use GenUI SDK, which integrates seamlessly with A2UI’s declarative format.
Even legacy systems (e.g., embedded interfaces) can adopt A2UI via a "Smart Wrapper" pattern, allowing them to participate in agentic workflows while maintaining security.

This portability ensures that A2UI remains relevant across diverse environments, from mobile apps to enterprise dashboards.

4. Flexibility Through Open Registry

A2UI’s open registry system enables developers to extend its capabilities beyond standard components. By registering custom wrappers, clients can:

Integrate secure legacy content (e.g., iframes for third-party widgets).
Implement strict sandboxing policies within custom logic.
Create "trust ladders" where higher-level agents delegate rendering to lower-level components with restricted permissions.

This flexibility ensures that A2UI remains adaptable to evolving security and UI design requirements.

Architecture: From Generation to Rendering

A2UI’s architecture follows a clean separation of concerns, ensuring efficiency and scalability:

Generation An AI agent (e.g., using Google’s Gemini) generates an A2UI Response, a JSON payload describing the UI structure. For example:

   {
     "components": [
       { "type": "card", "title": "Restaurant Booking" },
       { "type": "text-field", "label": "Name", "id": "name_field" }
     ]
   }

Transport The JSON payload is sent to the client application via supported protocols (e.g., A2A Protocol or AG UI).
Resolution The client’s A2UI Renderer parses the JSON and maps abstract components to concrete implementations.
Rendering The renderer applies the UI elements to the host framework, ensuring consistency across platforms.

This modular design allows for seamless integration with existing systems while enabling future innovations.

Key Features and Use Cases

1. Dynamic Data Collection

A2UI excels in creating interactive forms tailored to specific contexts. For example:

A travel agent might generate a form for booking a private tour, including fields like date, group size, and special requests.
The client renders this form dynamically, allowing users to input data without manual adjustments.

Example of an A2UI-generated form *A gallery of A2UI rendered cards showcasing dynamic UI compositions.

2. Remote Sub-Agents

In distributed AI systems, agents often delegate tasks to specialized sub-agents (e.g., a booking agent handling reservations). A2UI enables seamless communication by:

Generating a UI payload for the sub-agent.
Rendering this payload within the main interface, allowing users to interact with remote services securely.

3. Adaptive Workflows

Enterprise applications benefit from AI-driven dashboards and visualizations that adjust based on user queries. For example:

An HR agent might generate an approval workflow with progress bars and status updates.
The client renders this UI dynamically, ensuring real-time feedback.

Getting Started: Building with A2UI

Prerequisites

To explore A2UI’s capabilities, developers need:

Node.js (for web clients).
Python (for agent samples).
A valid Gemini API Key (required for sample agents).

Running the Restaurant Finder Demo

Clone the repository:

   git clone https://github.com/google/A2UI.git
   cd A2UI

Set your API key:

   export GEMINI_API_KEY="your_key_here"

Run the agent backend (e.g., restaurant finder):

   cd samples/agent/adk/restaurant_finder
   uv run .

Build and run the client frontend:

Markdown Renderer: bash cd renderers/markdown/markdown-it npm install && npm run build
Web Core Library: bash cd ../../web_core npm install && npm run build
Lit Renderer (for web clients): bash cd ../lit npm install && npm run dev

For Flutter developers, the GenUI SDK provides A2UI integration. Additionally, CopilotKit’s Widget Builder offers a hands-on way to experiment with A2UI components.

Roadmap and Future Directions

A2UI is still in its early stages (v0.8 Public Preview), but the project has a clear vision for future development:

Spec Stabilization: Moving toward v1.0 with refined definitions.
More Renderers: Official support for React, Jetpack Compose, iOS (SwiftUI), and beyond.
Additional Transports: Support for REST APIs and other communication protocols.
Expanded Agent Frameworks: Integration with Genkit, LangGraph, and other AI orchestration tools.

By fostering community collaboration, A2UI aims to shape the future of agentic UIs—where security, flexibility, and interoperability are paramount.

Contributing to A2UI

A2UI is an Apache 2.0 licensed project, open for contributions from developers worldwide. The CONTRIBUTING.md guide provides details on how to:

Extend the renderer library.
Add new framework support.
Improve security policies.

The project’s philosophy emphasizes collaboration, ensuring that A2UI evolves into a robust standard for AI-driven UIs.

Conclusion

A2UI represents a groundbreaking advancement in agentic UI design. By combining security, flexibility, and interoperability, it empowers developers to create dynamic, context-aware interfaces without sacrificing control. Whether used in conversational assistants, enterprise workflows, or remote sub-agent systems, A2UI opens new possibilities for AI-human interaction.

As the project matures, its open-source nature invites contributions from a global community, ensuring that the future of UI generation remains safe, expressive, and adaptable. For developers eager to explore A2UI’s potential, starting with the provided samples is an excellent first step—wherever you are in your journey toward building agentic interfaces.

Agent-to-UI (A2UI): Open-Source Declarative UI Framework for Agents