生成UI时比JSON减少67%的token https://t.co/B8crPruCiS https://t.co/rcPiZ2wFbw

thesysdev/openui 来源: https://github.com/thesysdev/openui

OpenUI — 生成式UI的开放标准 构建 (https://github.com/thesysdev/openui/actions/workflows/build-js.yml) License: MIT Discord (https://discord.com/invite/Pbv5PsqUSv)

OpenUI 是一个全栈生成式UI框架——一种紧凑的流式优先语言、一个内置组件库的React运行时，以及开箱即用的聊天界面——其token效率比JSON高67%。

⚠️ 重要提示：OpenUI没有官方的加密货币、代币或硬币。任何在Pump.fun或其他平台上使用OpenUI名称的代币或硬币均与本项目及其维护者无关，也未得到本项目的认可或创建。请勿购买任何声称与OpenUI相关的加密货币。

OpenUI是什么

OpenUI的核心是OpenUI Lang：一种紧凑的、流式优先的语言，专为模型生成的UI而设计。OpenUI不把模型输出仅仅当作文本，而是让你定义组件、从组件库生成提示指令，并在模型流式输出时渲染结构化的UI。

核心能力：

• OpenUI Lang — 一种紧凑的语言，用于结构化UI生成，专为流式输出设计。
• 内置组件库 — 图表、表单、表格、布局等——开箱即用或可扩展。
• 基于组件库的提示生成 — 直接从你允许的组件生成模型指令。
• 流式渲染器 — 在React中随着token到达逐步解析和渲染模型输出。
• 聊天和应用界面 — 将相同的基础用于助手、副驾驶以及更广泛的交互产品流程。

快速开始

bash npx @openuidev/cli@latest create --name genui-chat-app cd genui-chat-app echo "OPENAI_API_KEY=sk-your-key-here" > .env npm run dev

这是使用OpenUI最快的方式。搭建的应用为你提供了端到端的起点，包括流式传输、内置UI和OpenUI Lang支持。

你将获得：

• OpenUI Lang支持 — 从应用流程中内置的结构化UI生成开始。
• 基于库的提示 — 从你允许的组件集合生成指令。
• 流式传输支持 — 随着输出的到达逐步更新UI。
• 可工作的应用基础 — 从可运行的示例开始，无需手动配置一切。

工作原理

你的组件定义了模型可以生成的内容。

mermaid flowchart LR A["Component Library"] --> B["System Prompt"] B --> C["LLM"] C --> D["OpenUI Lang Stream"] D --> E["Renderer"] E --> F["Live UI"]

1. 定义或复用组件库。
2. 从该库生成系统提示。
3. 将提示发送给你的模型。
4. 将OpenUI Lang输出流式传输回客户端。
5. 使用渲染器逐步渲染输出。

在Playground (https://www.openui.com/playground) 中亲自尝试——使用默认组件库实时生成UI。

包

bash npm install @openuidev/react-lang @openuidev/react-ui

为什么选择OpenUI Lang

OpenUI Lang是为需要同时满足结构化和流式传输的模型生成UI而设计的。

• 流式输出 — 随着token到达增量地发出UI。
• Token效率 — 比等效的JSON减少高达67%的token（参见基准测试）。
• 受控渲染 — 将输出限制为你定义和注册的组件。
• 类型化组件契约 — 使用Zod模式预先定义组件的属性和结构。

Token效率基准测试

使用tiktoken（GPT-5编码器）测量。OpenUI Lang对比两种基于JSON的流式格式，涵盖七个UI场景：

完整的方法论和重现步骤见benchmarks/。

文档

详细文档位于 openui.com (https://openui.com)。

仓库结构

openui/ ├── packages/ │ ├── react-lang/ # 核心运行时（解析器、渲染器、提示生成） │ ├── react-headless/ # 无头聊天状态和流式适配器 │ ├── react-ui/ # 预构建的聊天布局和组件库 │ └── openui-cli/ # 搭建应用和提示生成的CLI ├── skills/ │ └── openui/ # Claude Code技能，用于AI辅助开发 ├── examples/ │ └── openui-chat/ # 完整的工作示例应用（Next.js） ├── docs/ # 文档站点（openui.com） └── benchmarks/ # Token效率基准测试

推荐的入门路径：

• openui.com (https://openui.com) 获取完整文档
• examples/openui-chat 获取可工作的应用
• CONTRIBUTING.md 如果你想贡献

社区

• Discord (https://discord.com/invite/Pbv5PsqUSv) — 提问、分享你正在构建的内容
• GitHub Issues (https://github.com/thesysdev/openui/issues) — 报告bug或请求功能

采用者

使用OpenUI的组织和项目列表维护在ADOPTERS.md中。如果你正在使用OpenUI，请考虑添加你的组织——这有助于项目获得动力，并帮助其他采用者在类似场景中找到使用OpenUI的同行。

贡献

欢迎贡献。参见CONTRIBUTING.md了解贡献指南和参与方式。

Agent Skill

OpenUI附带一个Agent Skill (https://agentskills.io)，使得AI编码助手（Claude Code、Codex、Cursor、Copilot等）能够帮助你使用OpenUI Lang搭建、构建和调试生成式UI应用。

安装

``bash

使用skills CLI（适用于所有代理）

npx skills add thesysdev/openui –skill openui

手动方式——复制到你的项目中

cp -r skills/openui .claude/skills/openui
``

该技能涵盖了组件库设计、OpenUI Lang语法、系统提示生成、渲染器、SDK包以及调试格式错误的LLM输出。

Star历史

许可证

本项目使用LICENSE中描述的条款。