The shape of A2UI
Every node is an object with atype and properties directly on the object (not nested
under props):
Component families
The schema groups types into families. See the full catalog in the Component Reference.Layout primitives
container, row, column, stack, grid, wrap, padding, align, center,
positioned, transform, sized_box, divider.Interactive
button, slider, toggle, input_text, dropdown: each carries an action.Animated
animated_value, gauge, sparkline, chart, pulse, typing_text,
fade_in_column.Smart components
Self-managing widgets like
live_timer, pomodoro, kanban_board, live_weather:
organized into tiers (see below).Educational
animated_svg, diagram, node_graph, calendar_view for explaining concepts with
animated visuals.Colors and theming
Use hex strings or semantic tokens. Tokens adapt to the active theme (dark / light / glassmorphic) automatically:
Colors must be strings:
"0xFF000000", not 0xFF000000. Property names must be
double-quoted, and no trailing commas; it’s strict JSON.Actions
Interactive elements carry anaction payload the shell dispatches back to the agent:
kill_process, set_volume, set_brightness, toggle_wifi,
run_command, open_app, and refresh.
Safety: the layout validator
Because the UI tree is generated by an LLM, the renderer enforces hard structural limits so a malformed or oversized tree can’t crash the shell. The schema tells the model to stay well under these:
The same caps are enforced in both the assistant and
the desktop; keep them in sync if you change one.
Why JSON instead of code?
Safe
JSON can’t execute. The worst a bad layout does is render oddly, and the validator
catches that.
Fast
No build step. The model returns JSON, the shell renders it in the same frame loop.
Composable
Smart components encapsulate behavior, so the model assembles rich UIs from a small
vocabulary.
Extensible
Add a widget once in the registry and the model can use it everywhere.