openui

用 AI 生成 UI，一套标准通吃所有前端

openui 是一个旨在成为生成式 UI 开放标准的开源项目，基于 TypeScript 构建。它解决的是当前 AI 生成前端界面缺乏统一规范、难以复用和集成的问题。其核心能力是提供一套标准化的接口和组件模型，让开发者能够用声明式的方式描述 UI，并借助大语言模型生成对应的界面代码。项目包含运行时、解析器和工具链，支持将自然语言或结构化描述转换为可交互的 UI 组件，并可与主流前端框架（如 React）集成。通过定义生成式 UI 的通用协议，openui 降低了 AI 生成界面的落地门槛，提升了开发效率和跨平台一致性。目前项目处于成长阶段，社区活跃，适合对 AI 驱动前端开发感兴趣的团队探索。

开源 free 开源模型

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 9799

维护状态活跃

是否开源是

定价模式 free

项目数据

分类开源模型

开发团队thesysdev

所属国家

官网地址https://www.openui.com

GitHubhttps://github.com/thesysdev/openui

定价模式free

价格说明开源项目，MIT许可证，完全免费，可自行部署使用。

访问状态

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型agent,agents,ai,generative-ui,javascript,llm

GitHub 星标★ 9799

30天Star增速

HF 下载量

上线时间2024-12-02 00:00:00

最近更新2026-09-22 00:00:00

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-08-09

浏览次数8

使用教程

难度：入门约 10 分钟部署方式：命令行工具 5 步

环境要求

Node.js 环境（需能使用 npx / npm 命令）
一个可用的 OpenAI API Key
如需在 Vue 或 Svelte 中使用，需要对应前端工程环境

安装与启动步骤

1生成项目脚手架

用官方 CLI 创建名为 genui-chat-app 的示例应用，npx 会自动拉取最新版 CLI。
```
npx @openuidev/cli@latest create --name genui-chat-app
```
2进入项目目录

切换到刚生成的目录，后续命令都在此目录下执行。
```
cd genui-chat-app
```
3写入 API Key

在项目根目录创建 .env 文件并写入 OPENAI_API_KEY，记得把示例值换成自己的真实 Key。
```
echo "OPENAI_API_KEY=sk-xxxxxxxx" > .env
```
4启动开发服务

运行脚手架的开发脚本，启动带流式输出和内置 UI 的示例应用。
```
npm run dev
```
5（可选）装 Vue/Svelte 运行时

官方主打 React 支持；若需在其他框架中使用，按需安装社区运行时包。
```
npm install @openuidev/vue-lang
npm install @openuidev/svelte-lang
```

关键配置

配置项	必填	说明	示例
`OPENAI_API_KEY`	是	调用大模型生成 UI 所需密钥，写在项目根目录 .env 文件中	`sk-xxxxxxxx`

如何确认成功

npm run dev 执行后终端输出本地开发地址且无报错，浏览器打开即可看到可运行的生成式 UI 示例应用。

常见问题

Q：快速开始需要哪些前提？

A：需要本机具备 Node.js 环境（使用 npx、npm 命令），并准备一个 OpenAI API Key 写入项目根目录的 .env 文件。

Q：只能用于 React 吗？

A：官方提供 React 支持，包含内置组件库和开箱即用的聊天界面；Vue 与 Svelte 由社区包 @openuidev/vue-lang、@openuidev/svelte-lang 支持。

Q：生成的 UI 用什么描述？

A：使用 OpenUI Lang，这是面向流式的紧凑语言，相比 JSON 最多可减少 67% 的 token 消耗，并支持边生成边更新界面。

Q：脚手架自带哪些能力？

A：包含 OpenUI Lang 支持、基于允许组件集生成提示词、流式渲染，以及一个可直接运行的前后端示例应用。

注意事项

示例命令中的 sk-xxxxxxxx 只是占位，必须替换为真实 API Key 才能正常调用模型。
.env 文件包含密钥，切勿提交到公开仓库。
CLI 通过 npx @openuidev/cli@latest 拉取，会使用当时的最新版本。
Vue/Svelte 运行时为社区支持集成，是否选用取决于你的技术栈。

核心亮点

提出生成式 UI 的开放标准，避免各家自研格式割裂，利于生态共建
基于 TypeScript 实现，类型安全，易于集成到现有前端工程
支持自然语言描述生成界面，降低 UI 开发门槛，提升效率

不足之处

项目仍处于早期阶段，API 和标准可能频繁变动，稳定性待验证
文档和示例相对有限，社区生态尚未成熟，上手需自行探索

适用场景

快速原型设计：用自然语言描述界面，自动生成可运行代码
低代码平台：作为底层标准，支持 AI 驱动的可视化搭建
前端自动化测试：通过生成式 UI 标准生成测试用例的界面描述

替代项目

v0、GPT Engineer、shadcn/ui

项目介绍

openui 是设计创意领域的开源项目，由 thesysdev 开发，2024 年首次发布。

在全站 13,090 个收录项目中，它的 GitHub 星标数（9,799）位列前 5%，在设计创意分类的 163 个项目里位列前 4%。

近 41 天，它的 GitHub 星标从 8,344 增加到 9,799，净增 1,455。

项目目前处于活跃维护状态，最近一次代码更新于 2026-09-22。MIT许可证，完全免费，可自行部署使用。

它主要面向的使用场景是：快速原型设计：用自然语言描述界面，自动生成可运行代码。同类可对比的替代方案包括 v0、GPT Engineer、shadcn/ui。

上一篇：GenerativeArt

下一篇：lida