OpenUI:生成式 UI 开放标准,自研流式语言比 JSON 省一半 token

AI 聊天界面里的 UI 渲染,一直是"模型吐 Markdown,前端照着画",样式被协议卡死。OpenUI 想给这件事定一个开放标准:模型按自定义的 OpenUI Lang 语言流式输出结构化 UI,前端组件库负责渲染,官方实测比 JSON 方案省一半以上的 token。

项目简介

OpenUI(thesysdev/openui)是 Thesys 团队 2024 年 12 月开源的生成式 UI 框架,TypeScript 编写,MIT 协议,目前 9068 stars,定位是"The Open Standard for Generative UI"。

核心是一门叫 OpenUI Lang 的紧凑语言。你的组件先生成系统提示词,模型流式返回 OpenUI Lang,渲染器边收边画,整条链路是:

组件库 → 系统提示词 → LLM → OpenUI Lang 流 → 渲染器 → 实时 UI

模型不再输出自由文本,而是输出受组件库约束的结构化界面,助手、copilot 这类对话式产品可以实时"长出"图表、表单和仪表盘。

为什么不直接用 JSON

最大的卖点是 token 效率。官方用 GPT-5 编码器测了七种 UI 场景,对比两种 JSON 流式格式:

七个场景合计省 52% 左右,表单类最高到 67%。对话式产品里 UI 生成是高频动作,这笔账乘上日调用量就很可观。完整方法和复现步骤在仓库 benchmarks 目录里。

核心特性

• 流式渲染:token 到哪画到哪,不用等完整响应
• 受控生成:模型只能输出你注册过的组件,样式和结构可控
• 类型契约:组件 props 用 Zod schema 预先定义,生成结果有类型约束
• 内置组件库:图表、表单、表格、布局开箱即用,也支持换成自己的
• 多框架:React 官方支持,Vue 3、Svelte 5 有社区适配,还有免构建的浏览器 bundle

安装指南

最快的路径是脚手架:

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 Lang 支持和内置组件库,不用手动接线。

按需安装:

# React 应用:渲染运行时 + 预置组件
npm install @openuidev/react-lang @openuidev/react-ui

# 框架无关的后端 / Edge 提示词生成
npm install @openuidev/lang-core

# LangChain / LangGraph agent 集成
npm install @openuidev/langchain @langchain/langgraph

包一览

快速开始

想直观感受效果,打开官方 Playground(openui.com/playground),用默认组件库现场生成 UI,不用装任何东西。

接入自己项目的顺序:先盘点你的组件集合,用 Zod 定义 props,再从组件库生成系统提示词,最后接上模型的流式输出和 React 渲染器。组件库决定模型能画什么,这一步值得多花时间。

注意事项

• 官方特意声明:OpenUI 没有任何官方加密货币或代币,用了这个名字的资产都与项目无关
• 受控生成意味着模型不能画你没注册的组件,组件库的广度直接决定 UI 的上限
• Vue、Svelte 适配由社区维护,进度可能落后 React 版本

项目链接

• GitHub 仓库:https://github.com/thesysdev/openui
• 官网与文档:https://www.openui.com
• Playground:https://www.openui.com/playground