Generative UI Rendering

Render generative UI trees, build present-tool schemas, and inspect or serialize model-produced UI nodes.

API Reference

buildPresentParameters

Builds the JSON schema for the present tool from a GenerativeUILibrary.

The model produces a node { $type, $key?,...props } where $type selects a component, the optional $key pins a stable identity for list items that may reorder, and the rest are its props. The schema is a flat object: $type is an enum of the component names, every component's props are merged into one optional bag, and children recurses via $defs so the tree can nest.

It is intentionally flat rather than a per-$type discriminated union. Tool / function-call schemas (OpenAI and others) require the top-level parameters to be a plain object and reject a top-level oneOf/anyOf/enum. So props can't be refined per $type at the root; the model is guided instead by $type's description (which lists each component) and each prop's own description. The renderer validates nothing here — an unknown $type or stray prop is handled at render time — so a looser schema only costs the model a hint, not safety.

buildPresentParameters
libraryGenerativeUILibrary

GenerativeUIRender

Internal renderer. Resolves a GenerativeUISpec against the consumer allowlist. Used by MessagePrimitive.GenerativeUI and by MessagePrimitive.Parts when handling a generative-ui part.

GenerativeUIRender props
specGenerativeUISpec

The JSON spec to render.

GenerativeUISpec
rootGenerativeUINode | readonly GenerativeUINode[]

Root node(s) to render.

componentsGenerativeUIComponentRegistry

The component allowlist.

Fallback?ComponentType<{ component: string; props?: unknown }> | undefined

Optional fallback for unknown component names.

GenerativeUIRenderContext

The render context threaded through renderGenerativeUI.

GenerativeUIRenderContext
statusGenerativeUIStatus

Whether the tool call's arguments are still streaming or are complete.

dispatch?GenerativeUIDispatch

GenerativeUIRenderError

Thrown when a generative-ui spec references a component name that is not present in the consumer-provided allowlist. The allowlist is the security boundary in the same-realm rendering path — there is no fallback by default. Pass Fallback to opt into a soft-fail UX.

GenerativeUIRenderError
constructor?(componentName: string, message: string = `Component "${componentName}" is not in the generative-ui allowlist.`) => GenerativeUIRenderError

componentName?string

generativeUIToJSX

Serializes a generative-UI node to a JSX-like string for display: the "view source" of a model-produced tree. The wire form { $type: "Weather", id: "x" } becomes <Weather id="x" />, and nested children render between tags: <Card title="Hi"><Text>hello</Text></Card>. A model-provided $key becomes the JSX key attribute.

By default this is a faithful textual rendering, not a parser: text children are emitted verbatim (not HTML/JSX-escaped), so the result is meant to be shown, not re-parsed. Returns "" for nodes that aren't renderable (no $type yet, null, booleans).

Pass { escape: true } to make the output safe to paste back into JSX: any string child containing <, >, &, {, or } is emitted as a JSON-stringified expression ({JSON.stringify(child)}) instead of verbatim, while a string child with none of those characters still renders verbatim.

Pass { pretty: true } to pretty-print nested element trees with two-space indentation, while pure text children stay on one line.

generativeUIToJSX
nodeunknown

options?GenerativeUIToJSXOptions

GenerativeUIToJSXOptions
escape?boolean

Escape string children so the output is safe to paste back into a JSX file. Defaults to `false`.

pretty?boolean

Pretty-print nested element trees with two-space indentation. Defaults to `false`.

renderGenerativeUI

Renders a generative-ui tree against a GenerativeUILibrary.

The model emits each node as a flat object { $type,...props }. We first normalize that wire form into the canonical NormalizedUINode (with children lifted to a reserved top-level key), then render: each type is looked up in the library and its props are passed to the component's render(props, context), with children rendered recursively so components can nest.

renderGenerativeUI
nodeunknown

libraryGenerativeUILibrary

context?GenerativeUIRenderContext

GenerativeUIRenderContext
statusGenerativeUIStatus

Whether the tool call's arguments are still streaming or are complete.

dispatch?GenerativeUIDispatch