Overview

OpenUI is a comprehensive toolkit for building LLM-powered user interfaces. It consists of three core modules that work together to provide an efficient, type-safe, and production-ready solution for generative UI.

An alternative to Vercel JSON renderer and A2UI that reduces token usage by up to 90%. Define your component library with Zod schemas, get automatic system prompts, and parse LLM responses into renderable components.

Interactive Example

root = Stack([welcomeCard])
welcomeCard = Card([welcomeHeader, welcomeBody], "card")
welcomeHeader = CardHeader("Welcome", "Get started with our platform")
welcomeBody = Stack([signupForm, actions], "column", "m")
signupForm = Form("signup", [nameField, emailField])
nameField = FormControl("Name", Input("name", "Your name", "text", ["required", "minLength:2"]))
emailField = FormControl("Email", Input("email", "you@example.com", "email", ["required", "email"]))
actions = Buttons([signUpBtn, learnMoreBtn], "row")
signUpBtn = Button("Sign up", "submit:signup", "primary")
learnMoreBtn = Button("Learn more", "action:learn_more", "secondary")

Pre-built chat layouts (Copilot, Fullscreen, Bottom Tray) or build custom UIs with headless hooks. Fully themeable and accessible out of the box.

import { FullScreen } from 'genui-chat';

<FullScreen
  apiUrl="/api/chat"
/>

50+ production-ready components optimized for LLM generation. Use them directly or extend with your own custom components. Includes layouts, forms, data display, charts, and more.

import { defaultLibrary } from 'genui-default';

// Use directly
const prompt = defaultLibrary.getSystemPrompt();

// Or extend with custom components
const customLibrary = createLibrary({
  ...defaultLibrary.components,
  CustomWidget: { /* your component */ },
});