\n\n\n \n\n\n# OpenUI - The Open Standard for Generative UI\n\n
\n \n \n \n
\n\n\n\n
\n\nOpenUI is a full-stack, renderer-agnostic Generative UI framework built around a compact, streaming-first language. It offers official React support with built-in component libraries and ready-to-use chat interfaces, plus community-supported integrations for other frameworks. OpenUI Lang uses up to 67% fewer tokens than JSON.\n\n
\n\n> **Important:** OpenUI has no official cryptocurrency, token, or coin. Any asset using the OpenUI name is unaffiliated with this project and is not endorsed by its maintainers.\n\n---\n\n## What is OpenUI\n\n
\n\n\n
\n\nAt the center of OpenUI is **OpenUI Lang**: a compact, streaming-first language for model-generated UI. Instead of treating model output as only text, OpenUI lets you define components, generate prompt instructions from that component library, and render structured UI as the model streams.\n\n**Core capabilities:**\n\n- **OpenUI Lang** - A compact language for structured UI generation designed for streaming output.\n- **Built-in component libraries** - Charts, forms, tables, layouts, and more, ready to use or extend.\n- **Prompt generation from your component library** - Generate model instructions directly from the components you allow.\n- **Streaming renderer** - Parse and render model output progressively in React as tokens arrive.\n- **Chat and app surfaces** - Use the same foundation for assistants, copilots, and broader interactive product flows.\n\n## Quick Start\n\n```bash\nnpx @openuidev/cli@latest create --name genui-chat-app\ncd genui-chat-app\necho \"OPENAI_API_KEY=sk-your-key-here\" > .env\nnpm run dev\n```\n\nThis is the fastest way to start with OpenUI. The scaffolded app gives you an end-to-end starting point with streaming, built-in UI, and OpenUI Lang support.\n\nWhat this gives you:\n\n- **OpenUI Lang support** - Start with structured UI generation built into the app flow.\n- **Library-driven prompts** - Generate instructions from your allowed component set.\n- **Streaming support** - Update the UI progressively as output arrives.\n- **Working app foundation** - Start from a ready-to-run example instead of wiring everything manually.\n\n## How it works\n\nYour components define what the model can generate.\n\n```mermaid\nflowchart LR\n A[\"Component Library\"] --> B[\"System Prompt\"]\n B --> C[\"LLM\"]\n C --> D[\"OpenUI Lang Stream\"]\n D --> E[\"Renderer\"]\n E --> F[\"Live UI\"]\n```\n\n1. Define or reuse a component library.\n2. Generate a system prompt from that library.\n3. Send that prompt to your model.\n4. Stream OpenUI Lang output back to the client.\n5. Render the output progressively with Renderer.\n\nTry it yourself in the [Playground](https://www.openui.com/playground): generate UI live with the default component library.\n\n## Packages\n\n| Package | Best for | Description |\n| :--------------------------------------------------------------------------------------------------------- | :----------------------------------------------- | :----------------------------------------------------------------------------------------------------------- |\n| [`@openuidev/lang-core`](./packages/lang-core) | Framework-agnostic parsing and prompt generation | Core parser, prompt-generation, runtime-evaluation, and type layer with no React, Vue, or Svelte dependency |\n| [`@openuidev/langchain`](./packages/langchain) | LangChain and LangGraph agents | Agent transformer and server helpers that stream OpenUI through AG-UI |\n| [`@openuidev/react-lang`](./packages/react-lang) | React rendering runtimes | Define component libraries, generate prompts, and render streamed OpenUI Lang in React |\n| [`@openuidev/react-headless`](./packages/react-headless) | Bring-your-own React chat UI | Headless chat state, streaming adapters, and message format converters |\n| [`@openuidev/react-ui`](./packages/react-ui) | Fastest path to a full React chat experience | Prebuilt chat layouts, standalone UI primitives, and two built-in component libraries |\n| [`@openuidev/react-email`](./packages/react-email) | Email generation and HTML export | React Email component definitions plus prompt options for model-generated emails |\n| [`@openuidev/vue-lang`](./packages/vue-lang) | Vue integrations | Vue 3 bindings for defining model-renderable components and rendering streamed OpenUI Lang |\n| [`@openuidev/svelte-lang`](./packages/svelte-lang) | Svelte integrations | Svelte 5 bindings for defining model-renderable components and rendering streamed OpenUI Lang |\n| [`@openuidev/browser-bundle`](./packages/browser-bundle) | CDN, iframe, and no-build embeds | Prebuilt browser bundle that ships the renderer, UI library, React, and styles as script + stylesheet assets |\n| [`@openuidev/cli`](./packages/openui-cli) | Project scaffolding and prompt generation | CLI for creating new apps and generating system prompts or JSON schema from a library definition |\n| [`@openuidev/openclaw-os-plugin`](https://github.com/thesysdev/openclaw-os/tree/main/packages/claw-plugin) | OpenClaw workspaces | OpenClaw OS plugin for serving OpenUI-powered OpenClaw workspaces |\n\nCommon starting points:\n\n```bash\n# React app with OpenUI rendering and prebuilt components\nnpm install @openuidev/react-lang @openuidev/react-ui\n\n# Framework-agnostic backend or Edge prompt generation\nnpm install @openuidev/lang-core\n\n# LangChain/LangGraph agent and server integration\nnpm install @openuidev/langchain @langchain/langgraph\n\n# Vue or Svelte runtime\nnpm install @openuidev/vue-lang\nnpm install @openuidev/svelte-lang\n```\n\n## Why OpenUI Lang\n\nOpenUI Lang is designed for model-generated UI that needs to be both structured and streamable.\n\n- **Streaming output** - Emit UI incrementally as tokens arrive.\n- **Token efficiency** - Up to 67% fewer tokens than equivalent JSON (see [benchmarks](./benchmarks)).\n- **Controlled rendering** - Restrict output to the components you define and register.\n- **Typed component contracts** - Define component props and structure up front with Zod schemas.\n\n### Token efficiency benchmarks\n\nMeasured with `tiktoken` (GPT-5 encoder). OpenUI Lang vs two JSON-based streaming formats across seven UI scenarios:\n\n| Scenario | Vercel JSON-Render | Thesys C1 JSON | OpenUI Lang | vs Vercel | vs C1 |\n| ------------------ | -----------------: | -------------: | ----------: | ---------: | ---------: |\n| simple-table | 340 | 357 | 148 | -56.5% | -58.5% |\n| chart-with-data | 520 | 516 | 231 | -55.6% | -55.2% |\n| contact-form | 893 | 849 | 294 | -67.1% | -65.4% |\n| dashboard | 2247 | 2261 | 1226 | -45.4% | -45.8% |\n| pricing-page | 2487 | 2379 | 1195 | -52.0% | -49.8% |\n| settings-panel | 1244 | 1205 | 540 | -56.6% | -55.2% |\n| e-commerce-product | 2449 | 2381 | 1166 | -52.4% | -51.0% |\n| **TOTAL** | **10180** | **9948** | **4800** | **-52.8%** | **-51.7%** |\n\nFull methodology and reproduction steps in [`benchmarks/`](./benchmarks).\n\n## Documentation\n\nDetailed documentation is available at [openui.com](https://openui.com).\n\n## Repository structure\n\n```\nopenui/\n├── packages/\n│ ├── react-lang/ # Core runtime (parser, renderer, prompt generation)\n│ ├── react-headless/ # Headless chat state & streaming adapters\n│ ├── react-ui/ # Prebuilt chat layouts & component libraries\n│ ├── react-email/ # React Email component library for generated emails\n│ ├── lang-core/ # Framework-agnostic parser, prompt, and runtime layer\n│ ├── langchain/ # LangChain/LangGraph streaming integration\n│ ├── vue-lang/ # Vue runtime bindings for OpenUI Lang\n│ ├── svelte-lang/ # Svelte runtime bindings for OpenUI Lang\n│ ├── browser-bundle/ # Script-tag bundle for CDN / iframe / no-build embeds\n│ └── openui-cli/ # CLI for scaffolding & prompt generation\n├── skills/\n│ └── openui/ # Claude Code skill for AI-assisted development\n├── examples/ # Capability and integration reference implementations\n│ ├── agent-frameworks/\n│ ├── app-frameworks/\n│ ├── design-systems/\n│ ├── harnesses/\n│ └── miscellaneous/\n├── docs/ # Documentation site (openui.com)\n└── benchmarks/ # Token efficiency benchmarks\n```\n\nGood places to start:\n\n- [openui.com](https://openui.com) for the full docs\n- [Quickstart](https://www.openui.com/docs/agent/getting-started/quickstart) to scaffold a working app\n- [`examples/README.md`](./examples/README.md) to find a focused reference implementation\n- [`CONTRIBUTING.md`](./CONTRIBUTING.md) if you want to contribute\n\n## Community\n\n- [Discord](https://discord.com/invite/Pbv5PsqUSv) - Ask questions, share what you're building\n- [GitHub Issues](https://github.com/thesysdev/openui/issues) - Report bugs or request features\n\n## How OpenUI compares\n\n| Feature | OpenUI | json-render (Vercel) | A2UI (Google) | CopilotKit OpenGenUI |\n| ---------------------- | -----------------: | -----------------------------: | ----------------: | -------------------: |\n| Tokens | 1x | 3x | 3x | 4x |\n| Latency (60 tok/s) | 4.9s | 14.2s | 14.2s | ~20s |\n| Streaming | Yes | Yes | Yes | Partial |\n| Consistent output | Yes | Yes | Yes | No |\n| Components | Library + custom | Library + custom | Custom only | None |\n| Multi-platform | Web, mobile, email | Web, mobile, PDF, email, video | Web, iOS, Android | Web |\n| Built-in data fetching | Yes | No | No | No |\n| Chat UI included | Yes | No | No | Yes |\n\nFor more details, refer to the official [OpenUI Lang comparison documentation](https://www.openui.com/docs/openui-lang/comparison).\n\n## Adopters\n\nA list of organizations and projects using OpenUI is maintained in [`ADOPTERS.md`](./ADOPTERS.md). If you're using OpenUI, please consider adding your organization; it helps the project gain momentum and helps other adopters find peers using OpenUI in similar contexts.\n\n## Contributing\n\nContributions are welcome. See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for contribution guidelines and ways to get involved.\n\n## Agent Skill\n\nOpenUI ships an [Agent Skill](https://agentskills.io) so AI coding assistants (Claude Code, Codex, Cursor, Copilot, etc.) can help you scaffold, build, and debug Generative UI apps using OpenUI Lang.\n\nThe skill is maintained in the [`thesysdev/skills`](https://github.com/thesysdev/skills/tree/main/skills/openui) repository.\n\n### Install\n\n```bash\n# With the skills CLI (works across all agents)\nnpx skills add thesysdev/skills --skill openui\n```\n\nThe skill covers component library design, OpenUI Lang syntax, system prompt generation, the Renderer, SDK packages, and debugging malformed LLM output.\n\n## License\n\nThis project is available under the terms described in [`LICENSE`](./LICENSE).\n",
"bytes": 14205,
"sha": "c2399e90dfe0937e8a4db12e7168d7ed9ccbb11d941c205458d09db405bc786a",
"repo_slug": "thesysdev/openui",
"fonte": "repo",
"truncated": false,
"api": "https://agentalog.com/api/listings/skl_thesysdev_openui_openui_4aacef9d/readme"
}
![\"OpenUI](\"./assets/banner.png\")
\n\n\n# OpenUI - The Open Standard for Generative UI\n\n![\"Build\"](\"https://github.com/thesysdev/openui/actions/workflows/build-js.yml/badge.svg\"){kind=icon}
\n ![\"License:](\"https://img.shields.io/badge/License-MIT-blue.svg\"){kind=icon}
\n ![\"Discord\"](\"https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fdiscord.com%2Fapi%2Fv10%2Finvites%2FPbv5PsqUSv%3Fwith_counts%3Dtrue&query=%24.approximate_presence_count&label=Discord&suffix=%20online&logo=discord&logoColor=white&color=5865F2\"){kind=icon}
![\"OpenUI](\"./assets/demo.gif\")
\n