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.
{"id":"user-name","component":"Text","text":{"path":"/user/name"}}When the Agent sends an updateDataModel message that changes /user/name to “Bob”, the renderer updates the bound text.
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 change remains local unless the Surface enables data-model synchronization or an Action sends the bound value.
- The Agent can then decide whether to fetch results.