thesysdev /
openui
A framework and compact language for letting LLMs stream live UI components
- 13.1k stars
- TypeScript
- Updated today
- Some experience
- Design & UI
Most AI apps return text. OpenUI is for apps where the model should return interface: a table, a form, a chart, a dashboard. You list the components the model may use, and OpenUI turns that list into a system prompt.
The model answers in OpenUI Lang, a compact format built to be read while it streams. A renderer parses tokens as they arrive and draws the UI step by step. Output is limited to the components you register, and component props are typed with Zod schemas.
The README compares it with JSON-based formats such as Vercel's json-render and Thesys C1 JSON, and reports about 52% fewer tokens in its own benchmarks across seven scenarios. It also lists Google's A2UI and CopilotKit's OpenGenUI as alternatives. The core is framework-agnostic, with runtimes for React, Vue, Svelte and Angular.
What it does
OpenUI Lang
A compact language for model-generated UI, designed so output can be rendered while tokens are still arriving.
Prompts from your component library
You define which components are allowed, and OpenUI generates the model instructions from that set.
Streaming renderers
Progressive rendering in React, Vue, Svelte and Angular, on top of a framework-agnostic core parser.
Built-in components and chat UIs
React packages include charts, forms, tables, layouts and prebuilt chat interfaces, plus a headless option for your own chat UI.
Agent and framework integrations
Packages for LangChain/LangGraph via AG-UI, assistant-ui, React Email, and a browser bundle for script-tag embeds.
What you could build
- Build a chat assistant that answers with charts, tables and forms instead of plain text.
- Let a LangChain or LangGraph agent stream interactive UI to a web front end.
- Generate emails from a model using React Email components and export them as HTML.
- Restrict a model to your own design-system components and render its output safely.
- Embed generated UI in a page with a script tag and no build step.
Get started
Run the CLI to scaffold a working chat app with streaming and OpenUI Lang already wired up. To add it to an existing React app, install the react-lang and react-ui packages, or try the online playground first.
npx @openuidev/cli@latest create --name genui-chat-appnpm install @openuidev/react-lang @openuidev/react-uiCommands are copied from the project's README. Read it on GitHub for the full setup.
More in Design & UI
awesome-design-md
A curated set of DESIGN.md files that capture the look of well-known websites
open-design
Local-first workspace where coding agents build prototypes, decks, images and motion
diagram-design
A skill that makes on-brand HTML and SVG diagrams from a plain-language request
design.md
A file format that tells coding agents your colors, fonts, and spacing, plus why
pascalorg/editor
Local-first 3D building editor you can use in a browser, a CLI, or through AI agents
awesome-design-skills
A registry of 67 ready-made design system files for AI coding agents