OpenUI – 生成式 UI 框架

OpenUI 是一个全栈、框架无关的库，允许你构建由大型语言模型（LLM）生成并逐 token 流式传输到客户端的用户界面。它引入了 OpenUI Lang，一种紧凑、流式优先的语言，比 JSON 更高效地描述 UI 组件（最多可减少 67% 的 token）。核心解析模型的输出，将其转换为实时 UI，并可用于 React、Vue、Svelte、Angular，甚至纯浏览器 bundle。

工作原理

组件库 – 使用类型化 props（通过 Zod）定义一组 UI 组件（图表、表单、表格等）。
系统提示生成 – OpenUI 创建一个提示，告诉 LLM 它可以生成哪些组件。
LLM 调用 – 将提示发送给你的模型。
OpenUI Lang 流 – 模型流式传输紧凑的 UI 描述。
渲染器 – 相应的运行时（React、Vue 等）解析流，并在 token 到达时增量渲染 UI。

该流程在 README 的 Mermaid 图中可视化。

主要包（monorepo）

包	提供内容	典型用途
`@openuidev/lang-core`	解析器、提示生成器、运行时评估、类型层 – 无框架依赖	后端服务、边缘函数、自定义运行时
`@openuidev/react-lang`	用于解析和渲染 OpenUI Lang 的 React 绑定	任何需要流式 UI 的 React 应用
`@openuidev/react-ui`	预构建的聊天 UI、组件库、即用型布局	最快获得完整聊天界面
`@openuidev/react-headless`	无头聊天状态和流式适配器	在流式逻辑之上构建你自己的 UI
`@openuidev/vue-lang`、`@openuidev/svelte-lang`、`@openuidev/angular-lang`	框架特定绑定	Vue / Svelte / Angular 项目
`@openuidev/langchain`	用于 LangChain / LangGraph 代理流式传输 OpenUI Lang 的辅助工具	构建生成 UI 的 LLM 代理
`@openuidev/browser-bundle`	单文件 bundle（脚本 + 样式表），用于 CDN/iframe 嵌入	无构建、嵌入任何页面的场景
`@openuidev/a2ui`	A2UI 协议客户端，携带 OpenUI Lang 负载	与 A2UI 兼容后端互操作
`@openuidev/server`	服务器工具和网关辅助	托管提示生成或事件可观测性
`@openuidev/observability-cloud`	将 OpenUI 事件发送到 Thesys 控制台的云接收器	生产级遥测
`@openuidev/cli`	用于搭建应用、生成提示、转换模式的 CLI	`npx @openuidev/cli@latest create …`

快速开始（React 示例）

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

该命令搭建一个 React 应用，包括：

OpenUI Lang 支持
库驱动的提示生成
流式 UI 更新
即用型聊天界面

你也可以仅为后端服务安装核心解析器：

npm install @openuidev/lang-core

为什么使用 OpenUI Lang？

流式优先 – UI 在模型生成输出时逐步出现，减少感知延迟。
Token 效率 – 基准测试显示，在常见 UI 模式中，相比基于 JSON 的流式格式，token 减少约 50%。
受控输出 – 模型只能生成你定义的组件，防止任意标记。
类型化契约 – 组件 props 使用 Zod 模式描述，提供静态保证并简化调试。

文档与社区

文档与 playground – https://openui.com 和 https://www.openui.com/playground
Discord – https://discord.com/invite/Pbv5PsqUSv
GitHub issues – 用于 bug 和功能请求
Agent Skill – 用于 AI 编码助手的 openui 技能（通过 npx skills add … 安装）

许可证

OpenUI 在 MIT 许可证下发布。

摘要

OpenUI 为你提供一种紧凑的流式语言和一组框架无关的运行时，使 LLM 能够生成即时出现的 UI，且 token 远少于 JSON。安装核心解析器用于后端工作，或引入 React/Vue/Svelte/Angular 绑定以获得完整的前端体验，并使用 CLI 在几秒钟内搭建一个可用的应用。

thesysdev/openui