API

Components

`GeneratedUI`

<GeneratedUI 
  value={valueToDisplay}
  endpoint="/api/syntux"
  rerenderEndpoint="/api/syntux/rerender" /* optional */
  hint="UI should look like..." /* optional */

  components={[...]} /* optional */
  placeholder={<div>Awaiting stream...</div>} /* optional */

  errorFallback={<div>An error occurred.</div>} /* optional */

  cached={cacheStr} /* optional */
  onGenerate={(str) => { console.log(str) }} /* optional */
  onUpdate={(str) => { console.log(str) }} /* optional */

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

  skeletonize={false} /* optional */
/>

Explanation:

value (any): the value (object, primitive, or array) to be displayed.
endpoint (string): the relative URL endpoint created with createSyntuxHandler.
rerenderEndpoint (string): the relative URL endpoint for regeneration.
hint? (string): custom instructions for the LLM.
components? (object[]): list of allowed components that the LLM can use.
placeholder? (JSX.Element): element to be displayed whilst awaiting streaming to begin.

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.

errorFallback? (JSX.Element): element to be displayed if an error occurs.
cached? (string): pre-generated schema string (from onGenerate), skips API call.
onGenerate? ((arg0: str) => void): a callback for capturing the schema once generation is complete.
onUpdate? ((arg0: str) => void): a callback invoked when the stream updates, containing the latest schema.
animate? (AnimateOptions): configuration for on-mount animation; object with offset and duration.
skeletonize? (boolean): compresses value for large inputs (arrays) or untrusted input. See the full explanation.

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