Installation

1. Install packages

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

2. Add components

Use the CLI to download components into your project. You can install individual components, multiple at once, or everything:

# Install GenUI components (LLM-driven)
npx genui add metric-card data-table fallback-message pie-chart progress-bar

# Install primitives
npx genui add card button badge dialog toast

# Install everything at once
npx genui add --all

# List available components
npx genui list

# Regenerate component map from components.json
npx genui init

The CLI auto-generates a src/components/genui.ts file with a typed componentMap. Run npx genui list to see all 57 components with install status.

3. Set up the API route

Create an API route that calls the LLM and resolves the data. The route fetches MCP tool definitions from the registry, calls the LLM, validates the response against Zod schemas, and resolves data sources:

import { NextRequest, NextResponse } from "next/server";
import { resolvePayload } from "@syntave/runtime/server";
import {
  MetricCardLLMSchema, DataTableLLMSchema,
  FallbackMessageLLMSchema,
} from "@syntave/schemas";

const LLM_SCHEMAS = {
  MetricCard: MetricCardLLMSchema,
  DataTable: DataTableLLMSchema,
  FallbackMessage: FallbackMessageLLMSchema,
};

const COMPONENT_MAP = {
  render_metric_card: "MetricCard",
  render_data_table: "DataTable",
  render_fallback_message: "FallbackMessage",
};

async function loadTools() {
  const tools = [];
  for (const name of ["metric-card", "data-table", "fallback-message"]) {
    const res = await fetch(`https://genui.syntave.com/r/${name}.json`);
    const json = await res.json();
    const mcp = json.meta?.mcp_tool_definition;
    if (mcp) tools.push({ type: "function", function: mcp });
  }
  return tools;
}

export async function POST(request: NextRequest) {
  const { prompt } = await request.json();
  const tools = await loadTools();
  const apiKey = process.env.LLM_API_KEY;

  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}` },
    body: JSON.stringify({
      model: "gpt-4o-mini",
      messages: [
        { role: "system", content: "You MUST call a tool. NEVER respond with text." },
        { role: "user", content: prompt },
      ],
      tools, tool_choice: "auto",
    }),
  });

  const toolCall = (await response.json())?.choices?.[0]?.message?.tool_calls?.[0];
  const rawArgs = JSON.parse(toolCall.function.arguments);
  const componentType = COMPONENT_MAP[toolCall.function.name];
  const { props } = LLM_SCHEMAS[componentType].parse({ type: componentType, props: rawArgs });
  const resolved = await resolvePayload({ type: componentType, props }, YOUR_DATA_SOURCES);
  return NextResponse.json({ payload: resolved });
}

4. Multi-provider LLM support

Configure different LLM providers via environment variables:

# OpenAI (default)
LLM_PROVIDER=openai
LLM_API_KEY=sk-...
LLM_MODEL=gpt-4o-mini

# DeepSeek / OpenRouter / Groq (OpenAI-compatible)
LLM_PROVIDER=openai-compatible
LLM_API_KEY=sk-...
LLM_BASE_URL=https://api.deepseek.com/v1
LLM_MODEL=deepseek-chat

# Anthropic Claude
LLM_PROVIDER=anthropic
ANTHROPIC_API_KEY=sk-ant-...
ANTHROPIC_MODEL=claude-3-5-haiku-latest

5. Connect the client

Use GenerativeUI with your component map on the client:

"use client";
import { GenerativeUI } from "@syntave/runtime";
import { componentMap } from "@/components/genui";

export function AIPanel() {
  const [payload, setPayload] = useState(null);

  const handlePrompt = async (prompt: string) => {
    const res = await fetch("/api/generate", {
      method: "POST",
      body: JSON.stringify({ prompt }),
    });
    const { payload } = await res.json();
    setPayload(payload);
  };

  return <GenerativeUI payload={payload} componentMap={componentMap} />;
}

6. Available components

GenUI ships with 57 components — 5 GenUI components (LLM-driven with Zod schemas) and 44 primitives. Browse the full list with npx genui list or visit the component docs.

View all components →