Browser renderer

Render a response

Hand GenUI the whole text so far on every chunk, or an already parsed object. Output sits in a comp0 BusyRegion, so it is aria-busy while streaming is true.

<GenUI
  response={response}
  streaming={streaming}
  onAction={(action) => send(action.message)}
  onStateChange={(state) => save(state)}
  initialState={savedState}
  onError={(errors) => send(formatErrors(errors))}
/>;

The streaming contract

Any provider that streams text works, because the renderer only sees a growing string.

• Every prefix of a response renders without errors, warnings, or thrown exceptions.
• A component appears once its type is complete and every prop it requires has arrived. A string that is still being written shows as written, except URLs, binding names, and expressions, which are used only once complete.
• Nodes are keyed by their JSON Pointer, so a component already drawn is never replaced as the response grows; typed text, focus, and open sections survive.
• While streaming is true, buttons, suggestions, copy buttons, and submits are disabled, nothing is reported as an error, and comp0 parts hold back data warnings and focus moves.
• When streaming becomes false the full response is validated once, defaults are written into the state, and onError is called if there are problems.

Connect the interface to your app

The model composes layout; your app supplies what it can reach. A tool is a function with a schema for its input, declared with defineTool. The interface calls tools through one call(name, args) function you pass to the renderer, so the same tools work from an HTTP endpoint (handleToolRequest on the server, httpToolCaller or just the endpoint's URL in the browser), a function that calls runTool (which validates the arguments and keeps error details on the server), or an MCP tools/call.

A Query node calls a tool and stores the result under a name, again whenever a bound argument changes, without another turn; a chart's data, a table's rows, or a list's items bound to that name follow it. A button's action runs steps in order: call a tool, set a value, or send a message. A Slot places one of your own views, which read the same values with hooks, so a slider the model wrote can drive your canvas live.

With React Server Components, @comp0/genui/rsc streams layout as server HTML: GenUIRoot holds the values, slots, and tool caller, and any number of GenUIView elements stream responses into it, sharing them. Server components covers it in full.

Inside an MCP Apps host, @comp0/genui/mcp renders a response the model writes as a tool call's arguments: genuiAppTool describes that tool on your MCP server, and McpAppGenUI renders it in the app's ui:// resource while the arguments stream, with tools going through the host's tools/call and actions becoming the person's next message.

<GenUI
  response={response}
  streaming={streaming}
  call={callTool}
  slots={{ shader: <ShaderCanvas /> }}
/>;

// With React Server Components
<GenUIRoot call={callTool} slots={{ shader: <ShaderCanvas /> }}>
  <GenUIView stream={modelStream} />
</GenUIRoot>;

Turn actions into the next turn

A form's message uses the visible labels and, for choices, the visible option labels: Plan: Pro; Seats: 5. A form submitted untouched falls back to its submit label. A Button sends its message or its label, and inside a form it also carries the values so far. A suggestion sends its text.

Save and restore what the person entered

onStateChange receives every stored value by state key whenever the person edits a control. Save it with the message, and pass it back as initialState to restore the answer later. To keep state across remounts, create a store with createGenUIStore() and pass it as store.

const store = createGenUIStore(savedState);

<GenUI response={response} store={store} />;

Errors the model can fix

Once the response is complete, onError receives the problems found in it, at most 50, each written to be sent back to the model. formatErrors turns them into one repair message. The renderer still shows everything that is valid: unknown components and props are left out, a prop of the wrong type is dropped, an unsafe URL is not used, and a component missing a required prop is not drawn.

formatErrors(errors);
// The response has 1 problem. Fix it and answer again with the complete corrected JSON:
// - /children/1 [Select]: required property label is missing