Reactivity
Regenerate the user interface, statically or dynamically, after generation.
The useSyntux hook allows you to modify the user interface after it has been generated.
Change the value (static)
If you simply want to update the value to display, and keep the user interface.
Use setValue inside your custom component:
"use client";
export default function CustomComponent() {
const { value, setValue } = useSyntux();
return (
<button
onClick={() => {
const newArr = [...value];
newArr.push({ ... });
setValue(newArr);
}}
>
Add value
</button>
);
}Regenerate the UI (dynamic)
If you want to change the design of the user interface itself. This will cause the existing UI to be emptied and a new one streamed in.
There are two steps you will need to do, both very easy.
You will need to provider a server action to the GeneratedUI component. This has already been provided.
Configure RerenderHandler.tsx
In @/lib/getsyntux/RerenderHandler.tsx, the server action has been provided. It must be configured.
"use server";
/**
* this file is optional!
* you can delete it if you do not need rerender functionality.
*
* run "npm i @ai-sdk/anthropic" if you want to use Claude.
*/
import { createAnthropic } from "@ai-sdk/anthropic";
import { createStreamableValue } from "@ai-sdk/rsc";
import { streamText } from "ai";
import spec from "./spec";
/**
* IMPORTANT: replace the below with your own model.
*/
const anthropic = createAnthropic({
apiKey: "..."
})
const model = anthropic("claude-haiku-4-5");
// ... rest of fileRun npm i @ai-sdk/anthropic if you wish to use Claude. Then, configure your model and assign it to model.
You've now configured the server action.
Assign rerender prop
Import the server action and provide it to the rerender prop:
import { rerenderAction } from "@/lib/getsyntux/RerenderHandler"; // preinstalled
<GeneratedUI
model={anthropic("claude-sonnet-4-5")}
value={valueToDisplay}
rerender={rerenderAction}
/>Update useSyntux hook
Finally, in order to trigger a regeneration, provide options to setValue like so:
"use client";
export default function CustomComponent() {
const { value, setValue } = useSyntux();
return (
<button
onClick={() => {
setValue(value, {
regenerate: true, // if false, treated as static
hint: "Change the style to be more..."
})
}}
>
Update UI!
</button>
);
}A new UI will then be streamed when the button is clicked.