OpenUI: Open Standard for Generative UI
摘要
OpenUI 是开放标准工具包，流程为：1. 定义组件库（用 defineComponent & createLibrary 注册）；2. 生成系统提示词发给 LLM；3. LLM 用 OpenUI Lang 回复（token 高效、行导向）；4. Renderer 解析并实时渲染 UI。适用于仪表盘、CRM、客服、DevTools 等场景，支持实时数据、流式渲染、交互状态、与工具 / MCP 服务器运行时通信。相比 JSON-Render 快 3 倍、token 减少 67%。支持所有 LLM（OpenAI、Anthropic 等）、任何 UI 库（ShadCN 等）和框架（Vercel AI SDK 等），可集成已有的设计系统。另有 OpenUI Cloud 版提供生产级渲染、artifact 生成、模板支持、错误修正、观测性等功能。GitHub 7,016 stars，跨浏览器、响应式、安全默认（仅用指定组件）。
荐读理由
用defineComponent & createLibrary注册组件，LLM以OpenUI Lang输出，renderer解析渲染实时UI；搭配现有shadcn/vite等栈，无需改架构
原文
OpenUI
Open Standard for Generative UI
OpenUI
Open Standard for Generative UI
Copied. Paste in your terminal to install.
An open source toolkit to make your AI agents respond with your UI.
- 1
You define your library
Register components with
defineComponent&createLibrary.OpenUI generates system prompt
Generate a system prompt from your library and send it to LLM.
LLM responds in OpenUI Lang
The model returns token-efficient, line-oriented OpenUI Lang.
Renderer parses and renders UI
- The renderer parses the output and renders UI in real time.
Generative UI for every use case
From dashboards to support to dev tools, OpenUI renders the interface your users need.
Analytics
Help users move from raw data to dashboards, insights, and decision-ready reports.
CRM / Sales
Customer support
DevTools
Project management
Help users move from raw data to dashboards, insights, and decision-ready reports.
Renders 3x faster
with 67% fewer tokens
when compared to JSON-Render
Live data
Interfaces query your tools and MCP servers at runtime, so the data is always current.
Cross-platform
One spec renders natively to React, React Native, Vue, and more.
Streaming-first
UI renders progressively as the model responds, not after the full output.
Interactive
Reactive state, inputs, and actions wired straight to your tools.
Safe by default
The model only composes your components and never runs arbitrary code.
Bring your own components
Build from the components and design system you already have.
OpenUI works with any stack
OpenUI works with any LLM, UI library, and agent framework. Add generative UI without changing your stack.
All LLMs
OpenAI
Anthropic
Gemini
Mistral
xAI
DeepSeek
OpenAI
Anthropic
Gemini
Mistral
xAI
DeepSeek
OpenAI
Anthropic
Gemini
Mistral
xAI
DeepSeek
Any UI Library
OpenUI Design system
ShadCN
Material Design system
D
DaisyUI
B
Base UI
OpenUI Design system
ShadCN
Material Design system
D
DaisyUI
B
Base UI
OpenUI Design system
ShadCN
Material Design system
D
DaisyUI
B
Base UI
Any Framework
Vercel AI SDK
LangChain
CrewAI
OpenAI Agents SDK
Anthropic Agents SDK
Vercel AI SDK
LangChain
CrewAI
OpenAI Agents SDK
Anthropic Agents SDK
Vercel AI SDK
LangChain
CrewAI
OpenAI Agents SDK
Anthropic Agents SDK
Introducing OpenUI Cloud
Production-ready Generative UI
Production-grade rendering
Tested, responsive components that render consistently across browsers, devices, and screen sizes.
Editable artifact generation
Generate static artifacts like slides and reports, and live artifacts like dashboards and pages.
Bring your design system
Apply your fonts, colors, spacing, and component styles across every generated interface.
Output validation
Detect and correct invalid model output before it turns into broken UI.
Model & provider resilience
Keep generated UI working across model quirks, upgrades, slowdowns, and provider failures.
Observability & audit trail
Track performance, failures, cost, and what was rendered across your deployment.
Pre-tested componentsCross-browser compatibilityBuilt-in accessibilityResponsive by defaultTemplate supportEditable text and chartsEditable layoutsExport as PPTXExport as PDFDesign tokensTypographyComponent variantsBrand configurationsError correctionModel normalizationVersion pinningRollbacksProvider fallbacksRender success ratesLatency percentilesError frequencyAudit trailPre-tested componentsCross-browser compatibilityBuilt-in accessibilityResponsive by defaultTemplate supportEditable text and chartsEditable layoutsExport as PPTXExport as PDFDesign tokensTypographyComponent variantsBrand configurationsError correctionModel normalizationVersion pinningRollbacksProvider fallbacksRender success ratesLatency percentilesError frequencyAudit trail
Want to learn more, or need hands-on engineering support?
Trusted by thousands of developers
7,016stars1 Million+downloads across all packages
这条对你有帮助吗？