Open Source · MIT Licensed

Type-Safe Bridge Between LLM Outputs and Your React Components

Register components with Zod schemas. Feed in raw LLM JSON. Get validated, rendered React — or a correction prompt to fix the AI.

Get Started Playground

$npm install @genuikit/core @genuikit/react zod

Everything you need to ship generative UI

A complete toolkit for building type-safe, validated, and auto-correcting UI from LLM outputs.

Type-Safe Registry

Auto-Correction

When LLM output fails validation, GenUIKit generates a correction prompt and retries automatically. Self-healing UI loop.

Streaming Rendering

Progressive UI rendering as tokens arrive from the LLM. No waiting for the full response — users see components build in real time.

Wire Format

Compact serialization that saves 30% on tokens compared to verbose JSON. Less cost, faster responses.

Bidirectional Sync

User interactions flow back to the AI context. Buttons, forms, and selections update the conversation state seamlessly.

Security Built-in

XSS prevention, URL validation, and prop sanitization out of the box. Never render unsafe LLM output.

Pre-built Adapters

Ready-made component adapters for shadcn/ui, Tailwind, and MUI. Drop in your design system and go.

Framework Agnostic

Pure TypeScript core with zero framework dependencies. Use with React, Vue, Svelte, or any framework.

See it in action

What you write

registry.tsTypeScript

import { createRegistry } from "@genuikit/core";
import { z } from "zod";

const registry = createRegistry();

// Register a chart component
registry.register("BarChart", {
  schema: z.object({
    title: z.string(),
    data: z.array(z.object({
      label: z.string(),
      value: z.number(),
    })),
  }),
  component: BarChart,
});

What the LLM sees

tool-definitions.jsonJSON

// Auto-generated for the LLM
{
  "tools": [{
    "type": "function",
    "function": {
      "name": "render_BarChart",
      "parameters": {
        "type": "object",
        "properties": {
          "title": { "type": "string" },
          "data": { "type": "array" }
        }
      }
    }
  }]
}

Runtime Architecture

LLM Output

Zod Validation

React Component

Correction Prompt

Why GenUIKit?

See how GenUIKit compares to other approaches for rendering LLM output as UI.

Capability	GenUIKit	CopilotKit	Vercel AI SDK	Manual
Type-safe validation
Auto-correction loop
No vendor lock-in
Token efficiency
Small bundle size
Framework agnostic
Streaming support
Built-in security

Full support Partial None

Zero Vendor Lock-in

No middleware servers, no hidden costs. Bring your own API key and use any LLM provider. Switch providers without changing a line of UI code.

30% Cheaper & Faster

Wire format compresses tool definitions and LLM output, reducing token count by 30%. Lower cost per request and faster time-to-first-byte.

Hallucination-Safe

Never shows broken UI. Every LLM output is validated against Zod schemas. On failure, auto-corrects with a retry prompt or falls back gracefully.