openui

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

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署 开源模型 🍴 复刻 995 🐛 待处理 201 👀 关注 46
访问官网 ↗ GitHub ↗
GitHub 星标 ★ 14982
维护状态 活跃
是否开源 开源
定价模式 🏷️完全免费 开源项目，MIT许可证，完全免费，可自行部署使用。

项目预览

openui 项目界面预览图
图片来源：项目官网

项目数据

分类开源模型
开发团队thesysdev
官网地址https://www.openui.com
GitHubhttps://github.com/thesysdev/openui
定价模式🏷️完全免费
价格说明开源项目，MIT许可证，完全免费，可自行部署使用。
访问状态🔧 仅开源项目，无在线服务，需自行部署
是否开源是
开源协议MIT
主要语言TypeScript
技术栈/模型ag-ui,agent,agents,ai,generative-ui,javascript,langchain,llm,mastra,react
GitHub 星标★ 14982
上线时间2024-12-02 00:00:00
代码更新2026-11-08
仓库体积420.8 MB
本站数据更新2026-11-09
维护状态活跃
收录时间2026-08-09
浏览次数11

项目介绍

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

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 14982

使用教程

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

环境要求

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

安装与启动步骤

  1. 1生成项目脚手架

    用官方 CLI 创建名为 genui-chat-app 的示例应用，npx 会自动拉取最新版 CLI。

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

  2. 2进入项目目录

    切换到刚生成的目录，后续命令都在此目录下执行。

    cd genui-chat-app

  3. 3写入 API Key

    在项目根目录创建 .env 文件并写入 OPENAI_API_KEY，记得把示例值换成自己的真实 Key。

    echo "OPENAI_API_KEY=sk-xxxxxxxx" > .env

  4. 4启动开发服务

    运行脚手架的开发脚本，启动带流式输出和内置 UI 的示例应用。

    npm run dev

  5. 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

上一篇：GenerativeArt

下一篇：lida

同类项目推荐

taste-skill 开源

给AI编程代理装上审美，告别模板化网页

Agent skills that give coding agents taste: art direction, reference images and a br···

★ 111955 2026-10-18
impeccable 开源

让 AI 写界面自带设计师审美，少返工

The design vocabulary for your coding agent. Steer with polish and bolder, review wi···

★ 106201 2026-10-08
open-design 开源

让 AI 代工做界面，本地跑完随手改

The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create···

★ 106661 2026-08-09
ux-ui-agent-skills 开源

让 AI 按设计系统出稿，不合格直接构建失败

Turn Claude into a senior design architect: DTCG tokens, 52 components, WCAG 2.2 AA-···

★ 3139 2026-10-13
design-studio-ai 开源

让 AI 和设计师在同一画布上直接干活

Open-source design workspace for AI agents and humans. Cloud editing, 3D, motion, MC···

★ 228 2026-10-08
Mck-ppt-design-skill 开源

给 AI 智能体一套咨询风 PPT 版式库，直接套用出稿

Consulting firm-style PowerPoint design system for AI agents. 70 layout patterns, fl···

★ 335 2026-11-04
cuneus 开源

写计算着色器像写脚本，热重载+多通道+音视频输入，实时出片

Engine for creating compute shader apps. easy multi pass pipelines, hot reload, audi···

★ 212 2026-08-09
Touchdesigner-Art 开源

用 TouchDesigner 玩转生成艺术，拿现成代码做视觉特效

Generative Art Made with Touchdesigner

★ 111 2026-08-09
toolcraft 开源

用 AI 拼装模块，快速做出自己的设计应用

Build your own design apps with AI.

★ 1053 2026-10-08