前端开发正在被 AI 重构。今天介绍一个全栈生成式 UI 开源框架——OpenUI。它用一套极简流式语言，让大模型直接输出可渲染 UI，比传统 JSON 更省流、更快、更可控。

OpenUI 是什么？

OpenUI 是面向生成式 UI 的开源标准，核心是 OpenUI Lang。简单说：

• 不只是输出文本，直接生成可交互 UI 组件
• 流式渲染，边输出边展示
• 基于 React，开箱即用

核心能力

OpenUI 提供了一套完整的生成式 UI 解决方案：

• OpenUI Lang：专为流式 UI 生成设计的精简语法
• 内置组件库：图表、表单、表格、布局，直接用
• 组件驱动提示词：用你的组件库生成模型指令
• 流式渲染：Token 到齐就渲染，不用等全部输出
• 聊天/应用界面：一套底座适配助手、交互产品

为什么用它？Token 省一半多

官方实测对比两种 JSON 流式方案：

• 最高省 67.1% Token
• 平均省 50%+
• 传输更快、成本更低、响应更丝滑

在 Agent 工作流中，每次 UI 生成的 Token 节省累积起来非常可观。对于高频交互的 AI 产品，这意味着显著的成本下降。

工作流程

OpenUI 的工作流程非常清晰：

1. 定义/复用组件库
2. 自动生成系统提示词
3. 发给大模型
4. 模型返回 OpenUI Lang 流
5. 前端实时渲染出可用 UI

一句话总结：组件定边界，AI 生成 UI，前端直接渲染。

快速上手：3 步跑起来

1. 脚手架创建项目：

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

2. 进入目录并配置 Key：

   cd genui-chat-app
   echo "OPENAI_API_KEY=your_key" > .env

3. 启动开发：

   npm run dev

重要提醒

OpenUI 无官方加密货币、代币。任何打着 OpenUI 名义的币，均与项目无关，请勿购买。

适合谁用？

• 想快速做 AI 聊天界面的前端/全栈开发者
• 要降低 Token 成本的 AI 产品团队
• 做生成式界面、助手、仪表盘的开发者
• 追求开源、可定制的技术团队

GitHub：https://github.com/thesysdev/openui