Flab × A2UI
v0.0.2Render Google's A2UI (Agent to UI) protocol with Flab components. An agent streams a platform-agnostic UI description as JSON; the renderer builds it progressively from the native Flab widget set — no arbitrary code, styling owned by the Flab theme.
Install
The renderer ships as @flabbergasted-ai/a2ui. See Installation for the full setup — package, token layer, theme provider, transport and the agent catalog.
import { A2uiClient, A2UISurface, createMemoryTransport } from '@flabbergasted-ai/a2ui';
const client = new A2uiClient(createMemoryTransport());client.connect();
// In a client component, hand a live surface to the renderer:<A2UISurface surface={client.surfaces.getSurface('main')!} onAction={(action) => { void client.onAction(action).catch((error) => console.error('A2UI action failed', error)); }}/>;The message stream
createSurface
Open a UI surface, optionally with an initial tree and data.
updateComponents
Add or replace components — a flat adjacency list keyed by id.
updateDataModel
Upsert or delete data by JSON Pointer; bound components re-render.
deleteSurface
Tear the surface down and free its state.
What the renderer does
Flab components as the widget set
Every A2UI component maps to a real Flab component, so agent-generated UI inherits the calm, data-dense design language and the theme automatically.
Data binding & two-way inputs
Text, inputs, tables and lists bind to a JSON data model by pointer. Inputs write back locally and travel to the agent only with the next action.
Validation & actions
Built-in checks (required, email, regex, numeric…) gate a Button; interactions dispatch typed action messages back to the agent.
No arbitrary code
The renderer only draws components in the catalog and only calls registered functions — the agent describes intent, never executable code.