Installation

Add Syntave GenUI to your Next.js project in minutes.

1. Install packages

Install the core runtime packages from npm:

npm install @syntave/schemas @syntave/runtime @syntave/cli

@syntave/schemas

Zod schemas for LLM intent validation and props resolution.

@syntave/runtime

The <GenerativeUI /> mapper and server-side data resolver.

@syntave/cli

CLI tool to download and install components into your project.

2. Add components

Use the CLI to download components into your project:

npx genui add metric-card
npx genui add data-table
npx genui add fallback-message

The CLI auto-generates a src/components/genui.ts file with a typed componentMap.

3. Set up the provider

Use the GenerativeUI component with your component map:

import { GenerativeUI } from "@syntave/runtime";
import { resolvePayload } from "@syntave/runtime/server";
import { componentMap } from "@/components/genui";

// Server: resolve LLM intent into props
const resolved = await resolvePayload(llmPayload, {
  get_revenue: {
    handler: async () => db.query("SELECT ..."),
  },
});

// Client: render the component
<GenerativeUI payload={resolved} componentMap={componentMap} />

4. Add base primitives

Primitives provide the visual foundation for GenUI components and can also be used directly in your app:

npx genui add card
npx genui add button
npx genui add badge

See the primitives documentation for all available components.