The declarative generative-UI library.
npm install getsyntux
syntux is the generative UI library for the web. It lets you build generative UIs that are consistent and flexible.
jsx
const valueToDisplay = {
"username": "John",
"email": "john@gmail.com",
"age": 22
}
value={valueToDisplay}
hint="UI should look like..."
/>
`
syntux takes the value into consideration and designs a UI to best display it. value can be anything; an object, array or primitive.
> [!TIP]
> If you are passing in a large array as a value, or an object with untrusted input, use the skeletonize property. See the explanation.
$3
In the root of your project:
`
$ npx getsyntux@latest
`
This will automatically install the required components in the lib/getsyntux folder.
We use the Vercel AI SDK to provide support for all LLM providers. To install the model providers:
`
$ npm i ai
$ npm i @ai-sdk/anthropic (if you're using Claude)
`
---
$3
#### Basic Example
Generate a simple UI with a hint:
`jsx
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
}
`
#### Caching
Cache generated UI based on a user ID:
`jsx
const cache: Map = new Map();
export default function Home(){
const userID = 10;
const valueToDisplay = { ... };
return {
cache.set(userID, result)
}} model={anthropic("claude-sonnet-4-5")} value={valueToDisplay} />
}
`
#### Custom components
Use your own components, or someone else's (a library):
`jsx
import { CustomOne, CustomTwo } from '@/my_components'
export default function Home(){
const valueToDisplay = { ... };
{ name: 'Input', props: "{ initial: string, disabled: boolean }", component: CustomTwo, context: "Creates an input field with an (initial) value. Can be disabled." }
]} />
}
`
Note: the components array above can be generated automatically with npx getsyntux generate-defs . See the documentation.
#### Custom actions
Perform server actions, attached automatically to component events:
`jsx
import { defineTool } from "getsyntux";
export default function Home(){
const valueToDisplay = { ... };
"refresh": defineTool(async () => { "use server"; / ... /})
}} />
}
`
The name of the action should specify its purpose (it is seen by the LLM).
Use defineTool to add further context to actions. See the documentation.
---
$3
How expensive is generation?
syntux is highly optimized to save tokens. See here for a cost estimation table and an explanation.
How does generation work? (Does it generate source code?)
Generated UIs must be secure, reusable and cacheable.
As such, syntux does not generate source code. It generates a schema for the UI, known as a "React Interface Schema" (RIS). See the question below to get a better understanding.
This schema is tailored to the value that you provide. It is then hydrated by syntux and rendered.
How does caching work?
The generated UI is determined by the React Interface Schema (see the above question).
Thus, if the same schema is provided, the same UI will be generated.
For simplicity, the schema is simply a string. It is up to you how you wish to store it; in memory, in a file, in a database etc,.
Use the onGenerate and cached properties to retrieve/provide a cached schema respectively.
What about state? Can state be generated?
Generating state is an anti-pattern and leads to poorly performing, insecure applications.
If you need to handle state, wrap non-stateful components in stateful ones, then pass those as custom components to syntux.
What does the React Interface Schema look like?
It's a list of JSON objects, each delimited by a newline. Each object contains information about the element/component, props, and an id and parentId.
The RIS does not hardcode values. It binds to properties of the value and has built-in iterators (with the type field), making it reusable and token-efficient (for arrays).
Originally (pre-v0.2.x), the schema was a deep JSON tree. However, post-v0.2.x it was switched to a flat JSON list, as this allows for the UI to be built progressively (streamed).
As such, the id and parentId fields are used to construct the tree as-you-go.
Below is an example:
`json
{"id":"loop_1", "parentId":"root", "type":"__ForEach__", "props":{"source":"authors"}}
{"id":"card_1", "parentId":"loop_1", "type":"div", "props":{"className":"card"}, "content": {"$bind": "$item.name"}}
``