API

Components

`GeneratedUI`

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

    actions={{ "delete": defineTool(async () => { "use server"; }) }} /* 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 */
/>

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.
actions? (object): a dictionary of callbacks that are automatically attached to relevant events.
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.

Methods

`defineTool()`

Attaches metadata/context to a function, allowing an LLM to understand how to use it.

defineTool(fn: Function, params?: string, context?: string)

fn (Function): the server action
params? (string): the parameters the function accepts, in Typescript format
context? (string): a description of what the function does, for better LLM context

Example:

import { defineTool } from 'getsyntux';

const myFunction = async (id: string) => { "use server"; /* ... */ };
const myFunctionWithContext = defineTool(myFunction, "id: string", "what does this function do?")

`useSyntux()`

A hook for retrieving and modifying the value.

Example:

const { value, setValue } = useSyntux();

console.log(value); // current value 
setValue({ ... }); // change value

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