A2UI Concepts Overview
The Big Picture
A2UI is built around three core ideas:
- Streaming Messages: UI updates flow as a sequence of JSON messages from agent to client.
- Declarative Components: UIs are described as data, not programmed as code.
- Data Binding: UI structure is separate from application state, enabling reactive updates.
Key Topics
Data Flow
How messages travel from agents to rendered UI. Includes a complete lifecycle example of a restaurant booking flow, transport options (SSE, WebSockets, A2A), progressive rendering, and error handling.
Component Structure
A2UI’s adjacency list model for representing component hierarchies. Learn why flat lists are better than nested trees for Generative UI, how to use static vs. dynamic children, and best practices for incremental updates.
Data Binding
How components connect to application state using JSON Pointer paths. Covers reactive components, dynamic lists, input bindings, and the separation of structure from state that makes A2UI powerful.
Message Types
A2UI uses four message types:
- surfaceUpdate: Define or update UI components
- dataModelUpdate: Update application state
- beginRendering: Signal the client to render
- deleteSurface: Remove a UI surface
For complete technical details, see the Message Reference.
Ready to Build?
Now that you understand the concepts, dive into practical implementation:
| Your Goal | Recommended Guide |
|---|---|
| Quick Start | Getting Started in 5 Minutes |
| Build a Real Agent | Flight Search Tutorial |
| Customize Components | Custom Components Guide |
| Integrate with CopilotKit | CopilotKit Integration |