The Concept: A2UI isn’t just a static JPEG generator. It creates Live Applications. To do this, it separates the Skeleton (Structure) from the Blood (Data).
Why separate Data from Layout?
Imagine a “Stock Market Tracker” component.
- Static Way: The LLM re-generates the entire Pricing Table every second. (Costly, slow, flickery).
- A2UI Way: The LLM sends the Table Once. Then, it sends tiny Data Updates (
price: 105.20). The UI updates instantly.
How it Works: JSON Pointers
Think of your data as a file system tree. Every piece of data has an “address”.
The Data Model (The Store)
{
"user": { "name": "Alice" },
"cart": { "total": 99.00 }
}The Component (The View)
Instead of hardcoding “Alice”, the component points to the address /user/name.
{
"component": {
"Text": {
"text": { "path": "/user/name" }
}
}
}Now, whenever the Agent sends a dataModelUpdate changing /user/name to “Bob”, the text on screen magically changes to “Bob”.
Dynamic Lists (Loops)
Want to render a list of items? Use a Template.
It works like a map() function in programming.
- Data:
items: [ {name: "Apple"}, {name: "Banana"} ] - Template: “For each item in
/items, render a Card with text bound to/name.”
Two-Way Binding (Forms)
Data binding isn’t just for reading. It’s for writing too.
When a user types in a <TextField binding="/search/query" />:
- The value in the Data Store updates to “Pizza”.
- The Agent receives an event identifying the new state.
- The Agent can decide to fetch pizza results.