Astro

Make sure the React integration is installed:

npx astro add react

Initialize

In the root of your project, run:

npx getsyntux@latest

This 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:

// src/pages/api/syntux.ts

import { createAnthropic } from '@ai-sdk/anthropic';
import { createSyntuxHandler } from 'getsyntux/server';
import spec from '@/lib/getsyntux/spec';
import type { APIRoute } from 'astro';

const anthropic = createAnthropic({
  apiKey: "..."
})

export const POST: APIRoute = async ({ 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:

// src/pages/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 const POST: APIRoute = async ({ 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:

---
// src/pages/dashboard.astro
const value = { username: 'John', email: 'john@gmail.com', age: 22 };
---

<html>
  <body>
    <GeneratedUI
      client:load
      endpoint="/api/syntux"
      rerenderEndpoint="/api/syntux/rerender"
      value={value}
      hint="display as a profile card"
    />
  </body>
</html>

syntuxwiki

Initialize

Create render endpoint

Create update endpoint

Usage

On this page