OpenGenerativeUI

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

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署开源模型 🍴 复刻 437 🐛 待处理 95 👀 关注 15

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 4185

维护状态较活跃

是否开源开源

定价模式 🏷️完全免费开源框架，MIT许可证，完全免费，无付费版本。

项目预览

OpenGenerativeUI 项目界面预览图 — 图片来源：GitHub 官方仓库名片

项目数据

分类开源模型

开发团队CopilotKit

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

GitHubhttps://github.com/CopilotKit/OpenIntelligentUI

定价模式🏷️完全免费

价格说明开源框架，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 星标★ 4185

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

代码更新2026-10-13

仓库体积1.4 MB

本站数据更新2026-11-08

维护状态较活跃

收录时间2026-08-09

浏览次数7

项目介绍

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

Star 增长趋势

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

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

技术标签

agent-native agentic-ai agents ai-agents assistant-chat-bots

使用教程

ℹ 本教程由 AI 依据该项目 README 整理，个别步骤可能需要按你的环境微调。

难度：入门约 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`