用 OpenUI Lang 让 LLM 流式生成结构化 UI 并渐进渲染

方案简介

OpenUI 是一个全栈、框架无关的生成式 UI 框架，核心是一门紧凑、面向流式的语言 OpenUI Lang。传统方式把模型输出仅当作文本，而 OpenUI 让你定义组件库、从组件库生成提示词指令，并在模型流式输出时直接渲染结构化 UI。核心为框架无关实现，官方为 React、Vue、Svelte、Angular 提供第一方运行时；React 还额外内置组件库和开箱即用的聊天界面。项目声称 OpenUI Lang 相比 JSON 至多节省 67% 的 token。适合为 assistants、copilots 及更广泛交互产品流构建生成式界面的前端/全栈开发者。

亮点与能力

• OpenUI Lang：为流式输出设计的结构化 UI 生成紧凑语言
• 内置组件库：图表、表单、表格、布局等，可直接使用或扩展
• 组件库驱动提示生成：直接从你允许的组件集合生成模型指令
• 流式渲染器：在 React、Vue、Svelte 或 Angular 中随 token 到达渐进解析渲染
• 聊天与应用界面：同一套基础可用于 assistants、copilots 及交互产品流
• Email 生成：@openuidev/react-email 提供 React Email 组件定义及模型生成邮件的提示选项
• 浏览器嵌入：@openuidev/browser-bundle 提供 CDN/iframe/免构建嵌入

组成与分工

• OpenUI Lang (@openuidev/lang-core)：核心解析器、提示生成、运行时求值与类型层，不依赖 React/Angular/Vue/Svelte
• @openuidev/react-lang：React 渲染运行时，定义组件库、生成提示并渲染流式输出
• @openuidev/react-headless：无头聊天状态、流式适配器与消息格式转换器，适合自建聊天 UI
• @openuidev/react-ui：预构建聊天布局、独立 UI 原语和两个内置组件库，最快获得完整 React 聊天体验
• @openuidev/langchain：面向 LangChain/LangGraph 智能体的转换器与服务端助手，通过 AG-UI 流式传输 OpenUI
• @openuidev/assistant-ui：assistant-ui 应用的 Tool UI 渲染器与指令接线
• @openuidev/vue-lang / svelte-lang / angular-lang：各框架绑定，定义可被模型渲染的组件并渲染流式 OpenUI Lang
• LLM：接收由组件库生成的系统提示，流式输出 OpenUI Lang

前置要求

• Node.js 与 npm 环境（CLI 通过 npx 运行）
• 一个 OpenAI API Key（用于示例应用调用模型）
• 安装/创建脚手架命令：

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

• 配置环境变量：

bash
echo "OPENAI_API_KEY=sk-your-key-here" > .env

使用与配置要点

• 验证成功：应用启动后即可进行结构化 UI 生成，UI 随模型输出逐步更新（流式支持）。
• 在 Playground 可用默认组件库实时生成 UI。
• 按需选包：要最快获得完整 React 聊天体验用 @openuidev/react-ui；要自建聊天 UI 用 @openuidev/react-headless；LangChain/LangGraph 智能体用 @openuidev/langchain；CDN/iframe 嵌入用 @openuidev/browser-bundle。
• 详细文档见 Docs。

注意事项与常见问题

• 警惕仿冒：OpenUI 没有官方加密货币、代币或 coin，任何使用 OpenUI 名称的资产均与本项目无关，也不被维护者认可。
• 仓库 README 未给出 Vue/Svelte/Angular 的完整示例代码，多框架使用建议查阅官方文档。

优缺点

• ✓ 比 JSON 少用至多 67% toke
• ✓ 多框架运行时齐备
• ✕ README 未给多框架示例代码

出处

本方案挖掘自开源项目 thesysdev/openui，方案内容与实施命令均来自其 README 原文。