OpenUI: Open Framework for Generative UI

What OpenUI is

OpenUI is an open-source framework for generative UI: interfaces that a language model produces as it answers, instead of plain text. The README describes it as a full-stack, framework-agnostic generative UI framework built around a compact, streaming-first language. A framework-agnostic core powers first-party runtimes for React, Vue, Svelte and Angular, and the React side additionally ships built-in component libraries and ready-to-use chat interfaces.

The problem it targets is familiar to anyone who has built an AI assistant: models are good at text, but product teams want charts, forms, tables and layouts that are consistent with their own design system and safe to render. OpenUI lets you define the components a model is allowed to use, generates the prompt instructions from that component library, and renders the structured output progressively as tokens stream in. It is developed by Thesys, licensed under MIT and written mainly in TypeScript.

How it works

At the centre is OpenUI Lang, a compact language for model-generated UI. The README summarises the flow as "your components define what the model can generate":

1. Define or reuse a component library.
2. Generate a system prompt from that library.
3. Send that prompt to your model.
4. Stream OpenUI Lang output back to the client.
5. Render the output progressively with the Renderer.

Component props and structure are defined up front with Zod schemas, which gives typed component contracts and lets the renderer restrict output to the components you registered. Because OpenUI Lang is designed for streaming, the UI can update incrementally rather than waiting for a complete JSON document to parse.

The code is split into packages. @openuidev/lang-core holds the parser, prompt generation, runtime evaluation and type layer with no React, Angular, Vue or Svelte dependency, so it can run in a backend or at the edge. Framework bindings (react-lang, vue-lang, svelte-lang, angular-lang) sit on top, and further packages cover headless chat state, prebuilt chat layouts, email generation, LangChain and LangGraph streaming, the A2UI protocol, a no-build browser bundle, server utilities and a CLI.

Key features

• OpenUI Lang: a compact, streaming-first language for structured UI generation.
• Built-in component libraries: charts, forms, tables, layouts and more, ready to use or extend; @openuidev/react-ui includes two built-in libraries and prebuilt chat layouts.
• Prompt generation from your components: model instructions are generated directly from the components you allow, and the CLI can also emit a system prompt or JSON schema from a library definition.
• Streaming renderer: parse and render model output progressively in React, Vue 3, Svelte 5 or Angular as tokens arrive.
• Headless option: @openuidev/react-headless provides chat state, streaming adapters and message format converters for teams that bring their own chat UI.
• Agent framework integration: @openuidev/langchain provides an agent transformer and server helpers that stream OpenUI through AG-UI, and @openuidev/assistant-ui adds renderers for assistant-ui apps.
• Beyond chat: @openuidev/react-email covers model-generated emails with HTML export, and @openuidev/a2ui is an A2UI v1.0 protocol client with OpenUI Lang component payloads.
• No-build embeds: @openuidev/browser-bundle ships the renderer, UI library, React and styles as script and stylesheet assets for CDN or iframe use.
• Agent Skill: an Agent Skill, maintained in a separate repository, helps coding assistants scaffold and debug OpenUI apps.

Getting started

The fastest route in the README is to scaffold an app with the CLI. The generated project includes streaming, built-in UI and OpenUI Lang support:

npx @openuidev/cli@latest create --name genui-chat-app

To add OpenUI to an existing project, the README lists these common starting points:

# React app with OpenUI rendering and prebuilt components
npm install @openuidev/react-lang @openuidev/react-ui

# Framework-agnostic backend or Edge prompt generation
npm install @openuidev/lang-core

# LangChain/LangGraph agent and server integration
npm install @openuidev/langchain @langchain/langgraph

# Vue, Svelte, or Angular runtime
npm install @openuidev/vue-lang
npm install @openuidev/svelte-lang
npm install @openuidev/angular-lang

# A2UI protocol with OpenUI Lang component payloads
npm install @openuidev/a2ui zod

The coding-agent skill is installed with the skills CLI:

npx skills add thesysdev/skills --skill openui

There is also a browser playground for generating UI with the default component library before writing any code, and the examples/ folder contains cookbooks and reference implementations for agent frameworks, app frameworks, design systems and harnesses.

Use cases

• AI assistants inside SaaS products: answer a question with a table, chart or form built from the product's own components instead of a wall of Markdown.
• Copilots for internal tools: let a model assemble dashboards or settings panels from an approved component set, with rendering restricted to registered components.
• LangGraph agents with a UI: stream structured UI from an agent backend to the browser through the LangChain integration and AG-UI.
• Non-React frontends: use the same core with Vue, Svelte or Angular bindings.
• Generated email: produce model-written emails from React Email components and export HTML.
• Edge prompt generation: run lang-core on the server or at the edge to build prompts without shipping a UI framework.

How it compares

The README compares OpenUI with Vercel's json-render, Google's A2UI and CopilotKit's open generative UI project. Its table claims OpenUI needs roughly a third of the tokens of the JSON-based approaches and shows lower latency at 60 tokens per second, and it lists built-in data fetching and an included chat UI as differences. A separate benchmark measured with tiktoken across seven UI scenarios reports OpenUI Lang using about 52% fewer tokens in total than Vercel JSON-Render and Thesys C1 JSON, with the README's headline figure of "up to 67% fewer tokens than JSON" coming from the contact-form scenario. These numbers are the project's own, with methodology in the repository's benchmarks/ folder; the table also credits json-render with broader output targets (PDF and video).

Things to know before adopting

• Vendor-backed project: OpenUI is maintained by Thesys, and some packages connect to its commercial services. @openuidev/observability-cloud ships OpenUI events to OpenUI Gateway in the Thesys console, and @openuidev/server includes OpenUI Gateway utilities. Both are separate packages you can leave out.
• A new output format: models must learn OpenUI Lang from the generated system prompt, so test output quality with the models you plan to use. The agent skill explicitly covers debugging malformed LLM output.
• React gets the most: prebuilt component libraries and chat interfaces are React-only; the Vue, Svelte and Angular packages provide bindings and rendering.
• Feedback command: npx @openuidev/cli feedback sends anonymous feedback from the terminal, and the README says coding agents using the skill ask for approval before sending it.
• No token: the README warns that OpenUI has no official cryptocurrency, token or coin, and that any asset using the name is unaffiliated.
• Licence: MIT, which permits commercial use and modification with attribution.

Project activity

As of October 2026 the repository has about 12,000 stars. It was created in December 2024, is written mainly in TypeScript and is licensed under MIT, with pushes as recent as October 19, 2026. Adopters are listed in the repository's ADOPTERS.md. Documentation and the playground are at openui.com and the source is at github.com/thesysdev/openui.