Next.js
Install and configure syntux for Next.js.
Initialize
In the root of your project, run:
npx getsyntux@latestThis will install the system prompt in the @/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!
Create render endpoint
Use Vercel's AI SDK to select your model of choice.
Then, use createSyntuxHandler to handle the request inside your endpoint:
// app/api/syntux/route.ts
import { createAnthropic } from '@ai-sdk/anthropic';
import { createSyntuxHandler } from 'getsyntux/server';
import spec from '@/lib/getsyntux/spec';
const anthropic = createAnthropic({
apiKey: "..."
})
export async function POST(request: Request){
const handler = createSyntuxHandler({
model: anthropic('claude-haiku-4-5'),
spec
});
// custom logic here... (authentication)
return handler(request);
}Create update endpoint
This is optional, only if you wish to support reactivity.
The flow is the same, but with a different handler.
Define a separate endpoint:
// app/api/syntux/rerender/route.ts
import { createAnthropic } from '@ai-sdk/anthropic';
import { createSyntuxRerenderHandler } from 'getsyntux/server';
import spec from '@/lib/getsyntux/spec';
const anthropic = createAnthropic({
apiKey: "..."
})
export async function POST(request: Request){
const handler = createSyntuxRerenderHandler({
model: anthropic('claude-haiku-4-5'),
spec
});
// custom logic here... (authentication)
return handler(request);
}Usage
Provide the rerender (and rerender, if used) endpoint URLs to the endpoint and rerenderEndpoint? props:
// app/dashboard/page.tsx
import { GeneratedUI } from 'getsyntux/client';
export default function Page() {
const value = { username: 'John', email: 'john@gmail.com', age: 22 };
return (
<GeneratedUI
endpoint="/api/syntux"
rerenderEndpoint="/api/syntux/rerender"
value={value}
hint="display as a profile card"
/>
);
}