Getting started

We feature best-in-class developer experience (DX), and we hope you agree :).

syntux is built for React and Next.js.

It supports all LLM providers through the Vercel AI SDK.

Installation

In the root of your project, run:

npx getsyntux@latest

This will install the server components in @/lib/getsyntux folder.

How do I modify the system prompt?

By default, the prompt is installed in the @/lib/getsyntux/spec.ts file. Edit it directly!

In addition, you will need to install the AI SDK:

npm i ai
npm i @ai-sdk/anthropic # if you're using Claude

Usage

One component is all you need:

import { GeneratedUI } from '@/lib/getsyntux/GeneratedUI';

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

If you are passing a large array to value, use the skeletonize property to avoid high token costs.

See the following examples to understand its capabilities.

Examples

Basic example

Generate a simple UI with a hint:

import { GeneratedUI } from "@/lib/getsyntux/GeneratedUI";
import { createAnthropic } from "@ai-sdk/anthropic";

/* this example uses Claude, but all models are supported! */
const anthropic = createAnthropic({ apiKey: ... })

export default function Home(){
    const valueToDisplay = { ... };
    return <GeneratedUI model={anthropic("claude-sonnet-4-5")} value={valueToDisplay} hint="UI should look like..." />
}

Caching

Cache generated UI based on a user ID (generate once per user):

const cache: Map<number, string> = new Map(); // user id → UI schema

export default function Home() {
  const userID = 10;
  const valueToDisplay = { ... };

  return (
    <GeneratedUI
      cached={cache.get(userID)}
      onGenerate={(result) => {
        cache.set(userID, result);
      }}

      model={anthropic("claude-sonnet-4-5")}
      value={valueToDisplay}
    />
  );
}

Custom components

Use custom React components, either your own or somebody else's (a UI library):

import { CustomOne, CustomTwo } from "@/my_components";

export default function Home() {
  const valueToDisplay = { ... };

  return (
    <GeneratedUI
      components={[{
          name: "Button",
          props: "{ color: string, text: string }",
          component: CustomOne,
        }, {
          name: "Input",
          props: "{ initial: string, disabled: boolean }",
          component: CustomTwo,
          context: "Creates an input field with an (initial) value. Can be disabled.",
        }]}

        model={anthropic("claude-sonnet-4-5")}
        value={valueToDisplay}
    />
  );
}

Make sure components are marked with "use client".

The components array can be automatically generated using the generate-defs CLI command.

Customize animation

By default, new elements fade in from below when mounted.

This motion cannot yet be customized. However, the duration and offset can, using the animate property:

<GeneratedUI
    model={anthropic("claude-sonnet-4-5")}
    value={valueToDisplay}
    animate={{
        offset: 10, // pixels
        duration: 100 // ms
    }}
/>

In order to disable the animation, set offset to 0 and/or duration to 0.

syntuxwiki