# 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.

Web page: https://candor.themethodic.com/patterns/a2ui-react-renderer

## Components

- **A2UI surface** (`a2ui-surface`, Pro; https://candor.themethodic.com/docs/a2ui-surface.md): Draws A2UI surfaces; the pure message processor and store.
- **Card registry** (`card-registry`, free; https://candor.themethodic.com/docs/card-registry.md): Carries an A2UI surface inside a chat reply, as the a2ui card.
- **MCP app frame** (`mcp-app-frame`, Pro; https://candor.themethodic.com/docs/mcp-app-frame.md): The other route: a tool's own HTML UI (MCP Apps), sandboxed on another origin.

## Install

```bash
npx candor-ui add a2ui-surface
```

## Notes

- 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.