OpenGenerativeUI

用大白话描述界面，自动生成前端代码，省去手写 UI 的繁琐。

OpenGenerativeUI 是一个开源的生成式 UI 框架，旨在通过大语言模型自动生成用户界面。它解决了传统前端开发中重复劳动多、设计到代码转换效率低的问题，让开发者可以用自然语言描述界面需求，直接生成可运行的 UI 代码。核心能力包括：基于 TypeScript 构建，提供组件化生成、实时预览、多框架适配（如 React、Vue）等功能。框架内置了提示词优化、布局算法和样式系统，能够生成响应式且符合设计规范的界面。项目目前处于成长阶段，适合前端开发者、产品设计师以及希望快速原型验证的团队使用。

开源 free 开源模型

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 1565

维护状态低维护

是否开源是

定价模式 free

项目数据

分类开源模型

开发团队CopilotKit

所属国家

官网地址https://opengenerativeui.copilotkit.ai

GitHubhttps://github.com/CopilotKit/OpenGenerativeUI

定价模式free

价格说明开源框架，MIT许可证，完全免费，无付费版本。

访问状态

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型agent-native,agentic-ai,agentic-visualization,agents,ai-agents,ai-copilot,ai-visualization,assistant-chat-bots,copilot,generative-ui,javascript,llm,open-source,typescript,visualization

GitHub 星标★ 1565

30天Star增速

HF 下载量

上线时间2026-03-12 00:00:00

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

维护状态低维护

中文支持

访问方式

移动端支持

综合评分

收录时间2026-08-09

浏览次数5

使用教程

难度：入门约 10 分钟部署方式：本地安装 4 步

环境要求

能执行 make 命令的类 Unix 环境（macOS/Linux 或已安装 make 的 Windows）
一个真实可用的 Anthropic API Key（README 要求填入 apps/agent/.env）
可访问 Anthropic API 的网络环境

安装与启动步骤

1获取项目代码

克隆官方仓库并进入项目根目录，后续所有 make 命令都在此目录执行。
```
git clone https://github.com/CopilotKit/OpenGenerativeUI.git
cd OpenGenerativeUI
```
2一键初始化

README 指定的第一条命令，会安装依赖并生成 .env 配置模板文件，耐心等待依赖下载完成。
```
make setup
```
3填入 API Key

编辑 setup 生成的 apps/agent/.env，把模板里的 API Key 换成你自己的真实 Anthropic 密钥，否则 Agent 无法调用模型。
4启动全部服务

README 指定的第二条命令，会同时拉起前端与 Agent 服务；终端不要关闭，保持进程运行。
```
make dev
```

关键配置

配置项	必填	说明	示例
`LLM_MODEL`	否	覆盖默认使用的模型，需填入高能力模型	`claude-fable-5`
`apps/agent/.env 中的 Anthropic API Key`	是	Agent 调用 Claude 模型的凭证，setup 后需手工替换	`sk-ant-xxxxxxxx`

如何确认成功

终端无报错并持续输出服务日志，浏览器打开本地开发地址后能向 Agent 提问并看到生成的 UI 组件（README 未给出具体端口）。

常见问题

Q：生成的界面结构混乱、HTML/SVG 不完整怎么办？

A：README 强调必须使用强能力模型。默认是 Anthropic Claude 的 claude-fable-5，若效果差可在 .env 中用 LLM_MODEL 换成更强模型。

Q：make dev 启动后 Agent 无响应？

A：多半是没填真实 API Key，或填错了模型名。检查 apps/agent/.env 中的 Anthropic 密钥与 LLM_MODEL 是否有效。

Q：生成的代码安全吗？

A：所有生成的可视化内容都渲染在沙箱 iframe 中，并自带明暗主题、渐进显现和响应式尺寸。

Q：能生成哪些类型的内容？

A：算法可视化（二分查找、BFS/DFS、排序）、3D 动画、饼图柱状图与网络图、以及表单/模拟/数学绘图等交互组件。

注意事项

README 明确要求使用高能力模型，弱模型难以一次生成结构良好的 HTML/SVG。
默认模型为 claude-fable-5，可在 .env 中通过 LLM_MODEL 覆盖。
务必先填好 apps/agent/.env 再执行 make dev。
项目由 CopilotKit 与 LangChain Deep Agents 驱动，属于展示型开源项目。

核心亮点

自然语言直接生成 UI 代码，显著提升原型开发效率
支持多前端框架适配，方便集成到现有项目
内置布局算法和样式系统，生成界面具备基本设计质量

不足之处

生成复杂交互和动态逻辑时可能不够准确
文档和社区生态尚在建设，可参考案例较少

适用场景

快速搭建产品原型或 MVP 界面
辅助前端开发，自动生成基础页面代码
设计稿到代码的自动转换流程

替代项目

v0、GPT Engineer、Luri

项目介绍

OpenGenerativeUI 是开发框架领域的开源项目，由 CopilotKit 开发，是 2026 年新上线的项目。

在全站 13,014 个收录项目中，它的 GitHub 星标数（1,565）位列前 30%，在开发框架分类中处于中上游。

近 42 天，它的 GitHub 星标从 1,502 增加到 1,565，净增 63。

项目已超过三个月没有代码更新，维护节奏明显放缓，最近一次代码更新于 2026-09-23。MIT许可证，完全免费，无付费版本。

它主要面向的使用场景是：快速搭建产品原型或MVP界面。同类可对比的替代方案包括 v0、GPT Engineer、Luri。

上一篇：mirascope

下一篇：npcpy