thesysdev/openui

项目概览

该框架针对大语言模型生成结构化、可交互 UI 时 token 消耗大、延迟高的问题，提供了流式优先的语言设计和渐进式渲染能力，在 token 效率与流式生成适配上具备事实依据。

项目类型

AI Agent · 基础设施

应用场景

知识问答 · 编程开发

部署方式

查看项目说明

License

MIT

适合谁

• 需要在大语言模型生成 UI 场景中减少 token 消耗并实现流式渲染的全栈与前端开发者。
• 使用 React、Vue 3 或 Svelte 5 并希望定义可由模型渲染组件的开发者。
• 希望通过 AI 编码助手辅助搭建和调试生成式 UI 应用的开发者。

核心能力

• 一种紧凑、流式优先的语言，用于模型生成 UI，可在 token 到达时增量输出 UI。
• 在 React 中随 token 到达逐步解析并渲染模型输出。
• 根据所允许的组件直接生成模型指令。
• 提供图表、表单、表格、布局等组件，可直接使用或扩展。
• 提供 React Email 组件定义及面向模型生成邮件的 prompt 选项。
• 提供 Vue 3 和 Svelte 5 绑定，用于定义可由模型渲染的组件并渲染流式 OpenUI Lang。
• 提供核心解析器、prompt 生成、运行时求值和类型层，不依赖 React、Vue 或 Svelte。
• 随附 Agent Skill，使 AI 编码助手能够帮助搭建、构建和调试使用 OpenUI Lang 的生成式 UI 应用。

限制与风险

• 使用该框架需要连接大语言模型，可能产生费用。
• GPU 相关要求未在文档中说明。
• 遥测相关情况未在文档中说明。

如何开始

• 使用 CLI 可通过单条命令完成项目脚手架搭建，上手难度为 easy。
• 运行 npx @openuidev/cli@latest create --name genui-chat-app 创建项目，进入目录后配置 OPENAI_API_KEY，再运行 npm run dev。

核验依据

• README: OpenUI is a full-stack, renderer-agnostic Generative UI framework built around a compact, streaming-first language. It offers official React support with built-in component librar…
• README: OpenUI Lang is designed for model-generated UI that needs to be both structured and streamable.
• README: - **Token efficiency** - Up to 67% fewer tokens than equivalent JSON (see [benchmarks](./benchmarks)).
• README: - **OpenUI Lang** - A compact language for structured UI generation designed for streaming output. - **Built-in component libraries** - Charts, forms, tables, layouts, and more, r…
• README: | [`@openuidev/react-headless`](./packages/react-headless) | Bring-your-own React chat UI | Headless chat state, streaming adapters, and message format converters |

内容核验时间：