A2UI Component Catalog

Unlike nested JSON trees, A2UI uses a flat list where components reference each other by ID. This enables LLMs to generate UI incrementally and update individual elements without regenerating entire hierarchies.

// Traditional nested (problematic for LLMs)
{ "card": { "children": [{ "text": "Hello" }] }}

// A2UI adjacency list (LLM-friendly)
[
  { "id": "card-1", "type": "Card", "children": ["text-1"] },
  { "id": "text-1", "type": "Text", "content": "Hello" }
]

Components connect to data through path expressions rather than embedding data directly. This separates concerns: the LLM defines what to show, the client handles how to fetch it.

// Literal value (static)
{ "value": { "literalString": "Fixed text" }}

// Data binding (dynamic)
{ "value": { "path": "/stores/openCount" }}

// The client resolves paths against its data model:
// dataModel["/stores/openCount"] → 42

A2UI supports two patterns for child components:

"children": {
  "explicitList": ["id1", "id2"]
}

"children": {
  "template": "row-template",
  "dataPath": "/stores"
}

The flat structure enables three atomic update operations, allowing LLMs to modify UI progressively: