API

Components

`GeneratedUI`

<GeneratedUI 
    value={valueToDisplay}
    model={anthropic("claude-sonnet-4-5")}
    hint="UI should look like..." /* optional */

    components={[...]} /* optional */
    placeholder={<div>Awaiting stream...</div>} /* optional */
    cached={cacheStr} /* optional */
    onGenerate={(str) => { cacheStr = str }} /* optional */
    skeletonize={false} /* optional */

    onError={() => { console.log("An error occurred") }} /* optional */
    errorFallback={<div>An error occurred.</div>} /* optional */

    animate={{ offset: 20, duration: 200 }} /* optional */
    rerender={rerenderAction} /* optional */
/>

Explanation:

value (any): the information you would like to display. This can be anything! An object, array or primitive.
model (LanguageModel): the model for generation. Any model from the AI SDK is supported, custom ones included.
hint? (string): a specific design instruction. Can be dynamic, best used for personalizing the generated result.
components? (object[]): a list of allowed components. Use this to include custom React components.
placeholder? (JSX.Element): an element to display while connecting to the model.

The placeholder will only display while connecting (when no UI is available yet), not while it is generating.

If you want to wait for generation to complete before displaying, wrap the GeneratedUI in a Suspense.

cached? (string): a cached schema from a previous generation, used to skip regeneration. Ignored if falsy or empty.
onGenerated? ((arg0: str) => void): a callback for capturing the schema once generation is complete.
skeletonize? (boolean): compresses value for large inputs (arrays) or untrusted input. See the full explanation.
onError? ((arg0: any) => void): a server-action callback, allowing you to react to an error. Almost always triggered by a server error.
errorFallback? (JSX.Element): an element to display if an error occurs.
animate? (AnimateOptions): configuration for animation; object with offset and duration.
rerender? (...): server action for rerender requests. See reactivity for more info.

Methods

`useSyntux()`

A hook for retrieving, modifying the value and regenerating the UI.

const { value, setValue } = useSyntux();

value is identical to the object provided to the value prop of GeneratedUI.

`setValue`

Method for updating the value and/or regenerating the UI.

setValue(value: any, options?: RerenderOptions): Promise<null> | null

value: the value to be displayed (for static updates)
options?: options for dynamic regeneration

If options is not provided, it will be a static update.

The options must adhere to this format:

{
    regenerate: true, // if false, treated as static update
    hint: "The new UI should look like..."
}

A Promise is returned if it is a regeneration request, which will resolve once the new stream has initiated.

CLI

`generate-defs`

Automatically generate component definitions, which you can paste directly into the components property.

npx getsyntux generate-defs ./path/to/component.tsx

It will look something like this:

npx getsyntux generate-defs .\lib\Button.tsx
getsyntux: parsing file...
getsyntux: found 1 component(s) with prop definitions [Button]
getsyntux: component #1: Button
√ What does this component do? (optional) ... displays an interactive button

getsyntux: generated definitions (safe to copy & paste directly):
{ name: "Button", props: "{ text: string, disabled: boolean }", component: Button, context: "displays an interactive button" },

syntuxwiki