A2UI: The Revolutionary Toolkit for Agent-Driven Interfaces

AI agents are brilliant at generating text and code, but they hit a brick wall when trying to create rich, interactive user interfaces. The traditional approach—executing agent-generated code—opens massive security vulnerabilities. Meanwhile, static APIs lack the flexibility agents need. A2UI shatters this tradeoff. This groundbreaking open-source project from Google empowers agents to "speak UI" through a declarative JSON format that's safe like data, but expressive like code. In this deep dive, you'll discover how A2UI transforms agent capabilities, explore real code examples, and learn to implement production-ready agent interfaces that work across any framework.

What Is A2UI? Google's Answer to the Agent UI Challenge

A2UI (Agent-to-User Interface) is an open standard and reference implementation that fundamentally reimagines how AI agents communicate with users visually. Created by Google and currently in v0.8 Public Preview, A2UI addresses a critical gap in the AI ecosystem: the inability of remote agents to safely generate and update rich user interfaces.

The core innovation is deceptively simple yet powerful. Instead of agents sending executable code or HTML—which creates massive security and compatibility issues—A2UI uses a declarative JSON payload that describes UI intent. Your client application maintains a catalog of pre-approved, trusted components (buttons, cards, text fields, charts). The agent simply requests combinations of these components with specific data bindings. The result? Agents can dynamically generate complex interfaces without ever executing untrusted code.

This approach is trending now because it solves the security-expressiveness paradox that has plagued agent development. As enterprises deploy autonomous agents across trust boundaries, they need a way to let these agents collect data, display dashboards, and guide workflows without compromising security. A2UI's framework-agnostic design means the same agent payload can render natively in Flutter, React, Angular, SwiftUI, or web components—making it the first truly portable solution for agentic UIs.

The project is intentionally lightweight and fits into modern AI stacks. It works seamlessly with Google's A2A Protocol and AG UI for transport, can be generated by any LLM that outputs JSON, and currently supports web and Flutter host applications. The philosophy centers on four pillars: security-first design, LLM-friendly incremental updates, framework portability, and developer-controlled flexibility through an open registry pattern.

Key Features That Make A2UI Essential

Security-First Declarative Format A2UI's JSON-based specification eliminates code injection risks entirely. The format describes what to render, not how to render it. Your client application acts as a strict gatekeeper, only rendering components from its pre-vetted catalog. This creates a "trust ladder" where security policies are enforced in your component logic, not just the core system.

LLM-Friendly Incremental Updates The specification uses a flat list of components with ID references—an architecture specifically designed for large language models. This structure makes it trivial for agents to generate UIs incrementally and update them progressively as conversations evolve. Instead of regenerating entire interfaces, agents can efficiently patch specific components, enabling responsive user experiences with minimal token usage.

Framework-Agnostic Portability A2UI completely separates UI structure from implementation. An agent sends an abstract component tree (e.g., type: 'card', type: 'button'), and your renderer maps these to native widgets. The same payload renders as Flutter widgets, React components, Angular directives, Lit elements, or SwiftUI views. This eliminates framework lock-in and enables true cross-platform agent experiences.

Open Registry Pattern Developers can register "Smart Wrappers" that map server-side types to custom client implementations. This includes secure iframe containers for legacy content, native mobile widgets, or proprietary React components. The registry pattern puts you in complete control, allowing you to extend A2UI without modifying the core specification.

Progressive Rendering Support The flat component structure with explicit IDs supports efficient diffing and updates. When an agent needs to modify a UI based on new user input, it can send a targeted update payload that references specific component IDs. The renderer efficiently updates only those components, maintaining state and providing instant feedback.

Ecosystem Integration A2UI is designed to slot into existing AI infrastructure. It works with any transport layer (A2A Protocol, AG UI, REST), any LLM that generates JSON, and any host framework. The project includes official renderers for web (Lit) and references the Flutter GenUI SDK, with React, Jetpack Compose, and SwiftUI support on the roadmap.

Real-World Use Cases Where A2UI Dominates

Dynamic Data Collection in Conversational Flows Imagine a travel booking agent that needs to collect highly specific information based on user context. Instead of showing a generic form, A2UI enables the agent to generate a bespoke interface with date pickers for departure/return, sliders for budget ranges, dropdowns for cabin class, and special request text fields—all dynamically composed based on the conversation. The agent can even add or remove fields in real-time as requirements evolve, creating a fluid data collection experience that feels magical to users.

Remote Sub-Agent Delegation In enterprise orchestration scenarios, a master agent often delegates tasks to specialized sub-agents running in different security domains. A2UI becomes the universal language for these sub-agents to return UI payloads. For example, a main customer service agent could delegate flight rebooking to a specialized airline agent, which returns an A2UI payload containing seat selection interfaces and upgrade options. The master agent simply renders this in its chat window without understanding the airline's specific UI logic.

Adaptive Workflow Dashboards Enterprise agents frequently need to generate approval workflows, data visualizations, or monitoring dashboards on-demand. A2UI allows agents to compose complex dashboards with charts, tables, action buttons, and status indicators based on real-time queries. A manager asking "show me pending expenses over $500" receives an instantly generated dashboard with sortable tables, approval/rejection buttons, and drill-down capabilities—all rendered using the company's approved component library.

Real-Time Analytics Visualization Data analysis agents can leverage A2UI to create interactive visualizations that update as the agent processes information. An agent analyzing sales data might start with a simple bar chart, then progressively add filters, pivot tables, and comparison metrics as the user asks follow-up questions. Each update is an efficient JSON patch rather than a full page reload, maintaining interactivity even with large datasets.

Multi-Platform Customer Support Customer support agents can generate tailored troubleshooting interfaces that work across web, mobile, and desktop clients. When a user reports a technical issue, the agent creates a diagnostic UI with progress indicators, log viewers, and step-by-step guidance. Because A2UI is framework-agnostic, the same payload renders natively in a Flutter mobile app, a React web portal, or an Electron desktop application—ensuring consistent support experiences everywhere.

Step-by-Step Installation & Setup Guide

Getting started with A2UI is straightforward. The repository includes a complete Restaurant Finder demo that demonstrates the full pipeline from agent generation to client rendering.

Prerequisites Before beginning, ensure you have Node.js installed for web clients, Python with uv for agent samples, and a valid Gemini API key from Google AI Studio. The demo specifically requires these tools to run both the agent backend and client frontend.

Step 1: Clone and Configure First, clone the repository and set your API key as an environment variable. This key allows the agent sample to access Gemini for generating UI payloads.

git clone https://github.com/google/A2UI.git
cd A2UI
export GEMINI_API_KEY="your_gemini_api_key"

Step 2: Launch the Agent Backend Navigate to the Restaurant Finder agent sample and run it using uv. This starts a Python-based agent that listens for requests and generates A2UI JSON responses.

cd samples/agent/adk/restaurant_finder
uv run .

The agent will initialize and wait for client connections, ready to process restaurant search queries and generate corresponding UI descriptions.

Step 3: Build the Renderer Libraries In a new terminal, build the core rendering infrastructure. This involves three sequential builds: the Markdown renderer for rich text, the Web Core library for A2UI parsing, and the Lit renderer for web component generation.

# Build Markdown renderer
cd renderers/markdown/markdown-it
npm install
npm run build

# Build Web Core
cd ../../web_core
npm install
npm run build

# Build Lit renderer
cd ../lit
npm install
npm run build

Each build compiles TypeScript to JavaScript and prepares the renderer for component mapping.

Step 4: Run the Client Shell Finally, launch the interactive shell client that connects to your agent and renders responses.

cd ../../samples/client/lit/shell
npm install
npm run dev

The shell client provides a web interface where you can type queries like "find Italian restaurants near me" and watch as the agent generates rich card-based UIs in real-time. For Flutter developers, the GenUI SDK offers equivalent functionality with native Flutter widgets.

Real Code Examples from the Repository

Let's examine the actual code powering A2UI's Restaurant Finder demo. These snippets reveal how the framework bridges agent generation and client rendering.

Example 1: Agent Backend Initialization The Python agent uses Google's Agent Development Kit (ADK) to create a specialized restaurant finder that generates A2UI payloads.

# samples/agent/adk/restaurant_finder/main.py
from google.adk import Agent
from google.adk.runners import InMemoryRunner
from a2ui.agent.adk import A2UIAgentMixin

class RestaurantFinderAgent(A2UIAgentMixin, Agent):
    def __init__(self):
        super().__init__(
            name="restaurant_finder",
            instruction="You help users find restaurants. Generate A2UI responses."
        )
    
    async def generate_ui(self, query: str) -> dict:
        # Calls Gemini to generate A2UI JSON based on user query
        response = await self.llm.generate(
            prompt=f"Create A2UI for: {query}",
            output_schema="a2ui_response"
        )
        return response

# The A2UIAgentMixin automatically handles UI payload generation
# and ensures the response conforms to the A2UI specification

The A2UIAgentMixin is crucial—it provides the bridge between ADK's agent framework and A2UI's JSON format, automatically validating that generated UIs match your component catalog.

Example 2: A2UI JSON Payload Structure Here's what the agent actually sends to the client—a declarative description of UI components.

{
  "a2ui_version": "0.8",
  "components": [
    {
      "id": "restaurant_card_1",
      "type": "card",
      "properties": {
        "title": "Bella Italia",
        "subtitle": "4.5 stars • Italian • $$$",
        "image_url": "https://example.com/image.jpg"
      },
      "children": ["details_button_1", "reserve_button_1"]
    },
    {
      "id": "details_button_1",
      "type": "button",
      "properties": {
        "label": "View Details",
        "variant": "outlined",
        "on_click": {"action": "show_details", "params": {"id": "bella_italia"}}
      }
    }
  ],
  "data_model": {
    "restaurants": [
      {"id": "bella_italia", "name": "Bella Italia", "cuisine": "Italian"}
    ]
  }
}

Notice the flat structure with explicit IDs. This makes it easy for LLMs to generate and for renderers to update efficiently. The children array and on_click handlers create a component tree without executable code.

Example 3: Lit Renderer Component Mapping The client-side renderer maps A2UI types to actual web components. Here's how the Lit renderer handles a button:

// renderers/lit/src/components/a2ui-button.ts
import { LitElement, html, css } from 'lit';
import { property } from 'lit/decorators.js';
import { A2UIComponent } from '../core/a2ui-component-interface';

export class A2UIButton extends LitElement implements A2UIComponent {
  @property({ type: String }) label = '';
  @property({ type: String }) variant = 'filled';
  @property({ type: Object }) onClick?: { action: string; params: any };

  static styles = css`
    :host {
      display: inline-block;
    }
    button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .outlined {
      background: transparent;
      border: 1px solid #1976d2;
      color: #1976d2;
    }
  `;

  private _handleClick() {
    if (this.onClick) {
      // Dispatch custom event for the application to handle
      this.dispatchEvent(new CustomEvent('a2ui-action', {
        detail: this.onClick,
        bubbles: true,
        composed: true
      }));
    }
  }

  render() {
    return html`
      <button 
        class=${this.variant}
        @click=${this._handleClick}
      >
        ${this.label}
      </button>
    `;
  }
}

customElements.define('a2ui-button', A2UIButton);

The renderer enforces security by only implementing approved component types. The onClick handler doesn't execute arbitrary code—it dispatches a sanitized event that your application logic must explicitly handle.

Example 4: Incremental Update Payload When a user clicks "View Details," the agent can send a targeted update:

{
  "a2ui_version": "0.8",
  "update_type": "patch",
  "components": [
    {
      "id": "restaurant_card_1",
      "properties": {
        "expanded": true,
        "description": "Family-owned since 1985. Known for handmade pasta."
      },
      "children_to_add": ["menu_section_1"]
    },
    {
      "id": "menu_section_1",
      "type": "list",
      "properties": {
        "items": ["Spaghetti Carbonara", "Margherita Pizza", "Tiramisu"]
      }
    }
  ]
}

The patch update type and targeted component IDs allow efficient, real-time UI modifications without re-rendering the entire interface.

Advanced Usage & Best Practices

Custom Component Registration Extend A2UI by registering Smart Wrappers for your existing components. This pattern lets you connect legacy UI elements to A2UI's data binding while enforcing your security policies.

// Register a secure iframe wrapper for legacy content
registry.register('legacy-dashboard', {
  component: SecureIframeWrapper,
  securityPolicy: {
    allowedOrigins: ['https://trusted-domain.com'],
    sandboxFlags: ['allow-scripts', 'allow-same-origin'],
    maxSize: { width: 800, height: 600 }
  }
});

Security Best Practices Always validate component properties against a schema. Use the open registry to implement "trust ladders"—progressively stricter security policies based on agent origin. For example, internal agents might access more powerful components than third-party agents.

Performance Optimization Leverage the flat component structure for efficient virtual DOM diffing. Implement component memoization in your renderer to avoid re-rendering unchanged elements. For large lists, use virtual scrolling components registered in your catalog.

Agent Prompt Engineering Structure your agent prompts to output A2UI JSON directly. Provide few-shot examples of component combinations in your system prompt. This dramatically improves generation quality and reduces token usage compared to asking agents to "describe" a UI in natural language.

State Management Maintain a client-side component state store that mirrors the agent's data model. This enables optimistic UI updates and smooth reconciliation when the agent's response arrives. Use the component IDs as keys in your state map.

Comparison: A2UI vs. Alternative Approaches

Why Choose A2UI? Unlike direct code generation, A2UI eliminates security nightmares while maintaining expressiveness. Compared to traditional API approaches, it gives agents the flexibility to create bespoke interfaces without backend changes. Against React Server Components, it offers true framework freedom and simpler LLM integration. A2UI uniquely balances safety, flexibility, and developer experience for the agentic era.

Frequently Asked Questions

What makes A2UI secure compared to other approaches? A2UI is a declarative data format, not executable code. Your client application maintains a catalog of pre-approved components, and agents can only request combinations of these trusted elements. This eliminates code injection, XSS, and remote execution vulnerabilities inherent in generating HTML, JavaScript, or SQL from LLMs.

Which frameworks and platforms currently support A2UI? Official renderers exist for web components (Lit) and Flutter (via GenUI SDK). The roadmap includes React, Jetpack Compose, and SwiftUI. The framework-agnostic design means you can implement a renderer for any platform that can parse JSON and render native components.

How does A2UI compare to React Server Components (RSC)? While both send UI descriptions from server to client, A2UI is framework-agnostic and LLM-optimized. RSC is React-specific and designed for developer-written components. A2UI's flat JSON structure is easier for LLMs to generate incrementally, and its open registry pattern gives you more control over component security and implementation.

Can I use A2UI with LangChain, LlamaIndex, or other agent frameworks? Yes. A2UI is transport and framework-agnostic. You can integrate it into any agent system capable of generating JSON. The repository includes examples using Google's ADK, but the core specification works equally well with LangGraph, CrewAI, or custom agent orchestrators.

What's the performance impact of using A2UI? Minimal. The flat component structure enables efficient O(n) diffing. Renderers can implement virtual DOM optimizations, and incremental updates prevent full re-renders. The JSON payload is typically smaller than equivalent HTML or component code, reducing network overhead.

Is A2UI production-ready? Currently v0.8 Public Preview means the specification is functional but evolving. Early adopters are using it in controlled production environments. Expect API changes before v1.0, but the core concepts are stable. Google is actively seeking community feedback to finalize the specification.

How do I contribute to A2UI development? A2UI is Apache 2.0 licensed and welcomes contributions. Priority areas include new renderers (React, SwiftUI), additional transports (REST, gRPC), and agent framework integrations (LangGraph, Genkit). See CONTRIBUTING.md for guidelines and the roadmap for current priorities.

Conclusion: Why A2UI Deserves Your Attention

A2UI represents a paradigm shift in how we think about AI agent interfaces. By treating UI as data rather than code, Google has created a framework that finally makes secure, dynamic agent interfaces practical at scale. The combination of declarative JSON, framework-agnostic renderers, and incremental updates solves problems that have blocked agent adoption in enterprise environments.

What excites me most is the open registry pattern—it acknowledges that developers need control while providing a safe foundation. You're not locked into Google's component choices; you can wrap your existing UI library and enforce your own security policies. This balance of opinionated architecture and flexible implementation is rare.

The v0.8 preview status means now is the perfect time to experiment. The Restaurant Finder demo provides a solid starting point, and the specification is stable enough for prototyping. As the ecosystem matures with React and mobile renderers, A2UI could become the de facto standard for agentic UIs.

Ready to build the future of agent interfaces? Clone the repository, run the demo, and start contributing to the specification. The agentic UI revolution won't build itself—join the A2UI community on GitHub today.

Repository Link: https://github.com/google/A2UI