DEV Community

Cover image for Agentic UI (A2UI + AG-UI) — Build UIs Your Agent Can Update in Real Time
Tahmid Bin Taslim Rafi
Tahmid Bin Taslim Rafi

Posted on

Agentic UI (A2UI + AG-UI) — Build UIs Your Agent Can Update in Real Time

#agents #ui #webdev #ai

If you only ship a chat box, your agent will spend all its time describing interfaces instead of using them.

Agentic UI changes that. It lets agents drive real UI elements—forms, pickers, checklists, tables, charts, and confirmations—in real time.

This guide shows you how to build it using two key technologies:

  • A2UI: A declarative, updateable UI specification that agents can generate and stream
  • AG-UI: An event stream protocol connecting agent backends to client UIs

You'll also learn where MCP Apps (UI for tools) and A2A (agent-to-agent communication) fit into the ecosystem.

What Is Agentic UI?

Agentic UI enables agents to render, update, and react to UI state in real time—not just return text.

There are three main approaches:

  1. Static UI: Hardcoded interfaces where agents only populate data
  2. Declarative UI: Agents output UI blueprints (like A2UI) that clients render using trusted components
  3. Generated UI: Agents output raw HTML/JSX—fast for prototyping but risky in production

Agentic UI typically refers to approach #2: declarative, component-based interfaces.

Why It Matters

Chat-only flows create friction:

  • Users type details one message at a time
  • Agents ask endless clarifying questions
  • The conversation becomes a worse version of a form

With agentic UI, agents can surface the right interface at the right moment. Users click instead of type, and you get structured input immediately.

Here's an example reservation flow powered by A2UI:

A2UI restaurant reservation example UI


A2UI-style reservation interface: fewer chat turns, more structured input

How the Pieces Fit Together

Think of the agentic UI stack like this:

AG2UI Flow Chart

  • AG-UI handles the plumbing: events, streaming, tool calls, and UI updates
  • A2UI defines the payload format: UI blueprints and incremental patches
  • MCP provides tool access; MCP Apps can include tool-specific UI in sandboxed HTML
  • A2A enables agent-to-agent communication across systems

This diagram illustrates the complete data flow from agent to UI to tools:

A2UI end-to-end data flow


Complete flow: agents stream UI and state updates; clients render and send user actions back

Use this checklist when planning your implementation:

A2UI ecosystem checklist


Essential components for production-ready agent-driven UI: rendering, actions, state, and safety

Quick Demo: Run A2UI Locally

See A2UI in action with this complete example using a Lit renderer and agent.

Prerequisites

  • Node.js v18 or higher
  • A Gemini API key

Installation 

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

export GEMINI_API_KEY="your_gemini_api_key_here"

cd samples/client/lit
npm install
npm run demo:all
Enter fullscreen mode Exit fullscreen mode

Try These Prompts

  • "book a table for 2"
  • "find italian restaurants near me"
  • "i want 7pm tomorrow"

What to Observe

  • The UI adapts its structure based on user intent
  • Users interact through clicks and selections, not just text input
  • The interface updates incrementally as the agent processes requests

How A2UI Works Under the Hood

Unlike generated HTML, A2UI streams structured messages that reference a predefined component catalog. This approach prioritizes safety and consistency.

A2UI component gallery


A2UI component catalog: agents select from trusted components instead of generating arbitrary markup

Core Message Types

Most A2UI applications use three fundamental message types:

  1. surfaceUpdate: Defines component structure (IDs and specifications)
  2. dataModelUpdate: Provides data bindings for components
  3. beginRendering: Instructs the client to render the interface

Example: Building a Reservation Form

1. Define the Surface Structure 

{
  "surfaceUpdate": {
    "surfaceId": "main",
    "components": [
      {
        "id": "title",
        "component": {
          "Text": {
            "text": { "literalString": "Book a table" },
            "usageHint": "h1"
          }
        }
      },
      {
        "id": "date",
        "component": {
          "DateTimeInput": {
            "label": { "literalString": "Date" },
            "value": { "path": "/reservation/date" },
            "enableDate": true
          }
        }
      },
      {
        "id": "time",
        "component": {
          "DateTimeInput": {
            "label": { "literalString": "Time" },
            "value": { "path": "/reservation/time" },
            "enableTime": true
          }
        }
      },
      {
        "id": "confirm",
        "component": {
          "Button": {
            "child": "confirmText",
            "action": { "name": "confirm_booking" }
          }
        }
      },
      {
        "id": "confirmText",
        "component": {
          "Text": {
            "text": { "literalString": "Confirm" }
          }
        }
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Populate the Data Model 

{
  "dataModelUpdate": {
    "surfaceId": "main",
    "contents": [
      {
        "key": "reservation",
        "valueMap": [
          { "key": "date", "valueString": "2026-01-10" },
          { "key": "time", "valueString": "19:00" }
        ]
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Trigger Rendering 

{
  "beginRendering": {
    "surfaceId": "main",
    "root": "title"
  }
}
Enter fullscreen mode Exit fullscreen mode

Why This Beats Agent-Generated HTML

A2UI treats UI as data, which provides critical advantages:

  • The client maintains a catalog of vetted, trusted components
  • Agents can only request components from this approved catalog
  • Messages are declarative specifications, not executable code
  • Remote agents can't inject arbitrary markup or scripts

This architectural choice becomes essential when dealing with multi-agent systems or untrusted agent sources.

Quick Demo: Scaffold an AG-UI Application

AG-UI creates a unified event protocol that makes agents and UIs feel like a single cohesive system.

Create a New Project 

npx create-ag-ui-app@latest
npm run dev
Enter fullscreen mode Exit fullscreen mode

What AG-UI Provides

AG-UI gives you a standardized event stream for building:

  • Streaming text responses
  • Tool call handling
  • Real-time UI updates (including A2UI payloads)
  • Bidirectional agent-client communication

Minimal AG-UI Streaming Server

This pattern provides everything you need for a production application using Server-Sent Events (SSE).

// server.ts
import express from "express";
import cors from "cors";

const app = express();
app.use(cors());
app.use(express.json());

app.post("/run", async (req, res) => {
  // Configure SSE headers
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");

  // Helper function for sending events
  const send = (evt: any) => {
    res.write(`data: ${JSON.stringify(evt)}\n\n`);
  };

  // Start the agent run
  send({ type: "RunStarted", runId: crypto.randomUUID() });

  // Stream a text update
  send({ 
    type: "MessageDelta", 
    role: "assistant", 
    delta: "Finding options…" 
  });

  // Send an A2UI surface as a UI event
  send({
    type: "GenerativeUI",
    format: "a2ui",
    message: {
      surfaceUpdate: {
        surfaceId: "main",
        components: [
          {
            id: "title",
            component: {
              Text: { 
                text: { literalString: "Pick a time" }, 
                usageHint: "h2" 
              }
            }
          }
        ]
      }
    }
  });

  // Complete the run
  send({ type: "RunFinished" });
  res.end();
});

app.listen(3030, () => console.log("SSE server running on :3030"));
Enter fullscreen mode Exit fullscreen mode

Key Takeaways

  • AG-UI uses an event-driven architecture
  • Transport can be SSE (shown here) or WebSockets
  • A2UI messages travel inside AG-UI events
  • Events are structured, typed, and loggable

Closing the Loop: Handling User Actions

Rendering UI is straightforward. The real challenge is processing user input cleanly.

The Complete Interaction Cycle

  1. Agent streams a surface definition
  2. User interacts with UI elements
  3. Client emits typed user action events
  4. Agent processes actions and patches UI incrementally

Why Incremental Updates Matter

When you send only the changes instead of rebuilding the entire interface, the UI remains stable and responsive. The agent doesn't waste tokens or bandwidth resending unchanged components.

A2UI vs MCP Apps: When to Use Each

Both technologies are valuable—they solve different problems.

MCP Apps

Best for: Tool-specific interfaces that need custom functionality

  • Tools return text/html content
  • UI renders in sandboxed iframes for security
  • Ideal when a tool needs its own specialized mini-application
  • Each tool controls its own interface design

A2UI

Best for: Native-feeling interfaces integrated into your main application

  • Agents send blueprints referencing your component catalog
  • UI matches your application's styling, accessibility, and behavior
  • Ideal when the agent needs to orchestrate your product's native UI
  • Maintains consistent user experience across all agent interactions

Rule of thumb: If your UI must feel like a native part of your application, choose A2UI. If you need isolated, tool-specific UI panels, use MCP Apps.

Trade-offs to Consider

Advantages

Faster user flows: Reduces back-and-forth messaging by surfacing the right interface at the right time

Enhanced safety: Declarative components are safer than agent-generated HTML

Better accessibility: Native components inherit your existing accessibility implementation

Improved observability: Event-based architecture makes logging and debugging straightforward

Challenges

Component maintenance: You need to build and maintain a component catalog

Schema validation: Requires robust validation and graceful fallback handling

Agent prompt engineering: Agents need clear guidelines on when and how to use UI

Runtime complexity: You're building a binding system, action handlers, and state synchronization

Getting Started

The best way to learn is to build. Start with the demos above, then:

  1. Define your core component catalog based on your most common UI patterns
  2. Implement a minimal AG-UI event stream
  3. Add A2UI message handling for your key use cases
  4. Iterate based on real user interactions

The agent-driven UI paradigm is still evolving, but the foundation is solid. These protocols give you the building blocks to create interfaces that feel both intelligent and responsive.

Resources

Top comments (0)