React Router
Install and configure syntux for React Router / Remix.
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/routes/api.syntux.ts
import { createAnthropic } from '@ai-sdk/anthropic';
import { createSyntuxHandler } from 'getsyntux/server';
import spec from '@/lib/getsyntux/spec';
import type { ActionFunctionArgs } from '@remix-run/node';
const anthropic = createAnthropic({
apiKey: "..."
})
export async function action({ request }: ActionFunctionArgs) {
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/routes/api.syntux.rerender.ts
import { createAnthropic } from '@ai-sdk/anthropic';
import { createSyntuxHandler } from 'getsyntux/server';
import spec from '@/lib/getsyntux/spec';
import type { ActionFunctionArgs } from '@remix-run/node';
const anthropic = createAnthropic({
apiKey: "..."
})
export async function action({ request }: ActionFunctionArgs) {
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/routes/dashboard.tsx
import { GeneratedUI } from 'getsyntux/client';
import { useLoaderData } from '@remix-run/react';
export async function loader() {
return { username: 'John', email: 'john@gmail.com', age: 22 };
}
export default function Dashboard() {
const value = useLoaderData<typeof loader>();
return (
<GeneratedUI
endpoint="/api/syntux"
rerenderEndpoint="/api/syntux/rerender"
value={value}
hint="display as a profile card"
/>
);
}