Syntave GenUI

A component registry and runtime for building AI-driven user interfaces. LLMs output structured intent — your backend resolves data, our components render it.

# Install in your project

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

# Add components

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

# Or install everything

npx genui add --all

Why GenUI?

LLM-Driven UI

Components with Zod schemas that LLMs call via tool calling. Structured intent output, no hallucinated data.

49 Components

5 GenUI components + 44 primitives. All monochrome, accessible, and tested.

Data Resolution

Allowlisted data sources. The LLM outputs intent, your backend injects real data via resolvePayload().

Multi-LLM Support

OpenAI, Anthropic Claude, DeepSeek, OpenRouter, Groq — any OpenAI-compatible or Anthropic provider.

CLI Tool

Install components with npx genui add. Supports batch install, --all, and component listing.

Security First

No eval(), no dynamic component generation. Zod validation at every trust boundary. Object.hasOwn() allowlists.

How It Works

1

Register data sources

Define allowlisted handlers in your backend. Each handler returns typed data (revenue, user counts, etc.).

2

LLM outputs intent

The LLM calls MCP tools matching your component schemas. It outputs { type, props, dataSource } — never raw data.

3

Backend resolves payload

resolvePayload() validates the intent against Zod schemas, calls the handler, and injects real data.

4

GenerativeUI renders

The resolved payload is passed to <GenerativeUI> which maps the type to the matching React component.