Patterns / A2UI renderer
A2UI renderer for React
A2UI lets an agent describe a UI as data instead of code: a surface, a flat list of components from a catalog, and a data model. A2uiSurface draws one with Candor's parts and implements A2UI's basic catalog.
Pass a store from createA2uiStore to stream messages in, or a plain state to draw a finished surface. Inputs write to the data model at their bound path. Buttons send their action to onAction, with the context resolved; without a handler, they say they aren't connected.
applyA2uiMessage is the pure core: it applies one server message and returns a new state. A message it can't apply leaves the surfaces as they were and adds a sentence saying why.
The components
- A2UI surfaceProDraws A2UI surfaces; the pure message processor and store.
- Card registryFreeCarries an A2UI surface inside a chat reply, as the a2ui card.
- MCP app frameProThe other route: a tool's own HTML UI (MCP Apps), sandboxed on another origin.
See it working
More in the examples: UI an agent ships
Install
Each component brings in what it depends on. The free ones install as they are; Pro and Premium ones need a licence key.
Good to know
- Images, video and audio show as labelled placeholders unless your app opts in. openUrl shows the link as text to copy rather than opening it.
- Components from other catalogs still draw, with unknown parts shown as notes.