基于 AI 的实时 UI 生成系统，通过自然语言描述生成 React UI 组件。
- 实时流式生成 - 逐 Token 生成 JSON Schema，前端即时渲染
- 多 Agent 分层架构 - 五阶段流水线：骨架生成 → 并行展开 → 数据绑定 → 逻辑生成 → UX 增强
- 递归并行展开 - 支持任意深度嵌套，自动处理复杂结构
- JSON Patch 修改 - 增量修改现有 UI，无需重新生成
- 可拖拽编辑 - 支持拖拽重排组件
- 110+ 组件库 - 涵盖基础、布局、表单、数据、反馈、导航、图表 7 大分类
后端
- FastAPI + Python 3.12+
- OpenAI SDK（AsyncOpenAI）
- SSE 实时通信
- uv 包管理
前端
- React 19 + TypeScript 5.9
- Vite 7.2
- Tailwind CSS 4.1
- Radix UI / shadcn/ui
- @dnd-kit 拖拽库
- Recharts 图表库
- Python 3.12+
- Node.js 18+
- uv（Python 包管理器）
# 克隆项目
git clone <repo-url>
cd ChatUI
# 配置环境变量
cp .env.example .env
# 编辑 .env 填入你的 API Key
# 安装后端依赖
uv sync
# 安装前端依赖
cd frontend && npm install# 终端 1：启动后端（热重载）
uv run main --dev
# 终端 2：启动前端
cd frontend && npm run dev# 构建前端并启动服务
uv run main
# 或强制重新构建
uv run main --build| 变量 | 说明 | 默认值 |
|---|---|---|
OPENAI_API_KEY |
OpenAI API Key（必填） | - |
OPENAI_BASE_URL |
API 端点（可选，支持兼容服务） | - |
OPENAI_MODEL |
使用的模型 | qwen3-max |
EXPANSION_MODELS |
展开阶段模型池（逗号分隔） | - |
LOG_LEVEL |
日志级别 | INFO |
完整配置见 .env.example
ChatUI/
├── main.py # FastAPI 入口
├── pyproject.toml # Python 项目配置
├── app/ # 后端核心
│ ├── agents/ # 多 Agent 架构
│ │ ├── base.py # Agent 基类
│ │ ├── skeleton.py # 骨架生成
│ │ ├── builder.py # 内容构建（递归）
│ │ ├── data_binding.py
│ │ ├── logic.py
│ │ ├── ux_enhancement.py
│ │ └── orchestrator.py
│ ├── api/ # API 路由
│ ├── services/ # 业务逻辑
│ ├── store/ # 分片存储
│ └── utils/ # 工具函数
├── components/ # 组件文档（LLM 提示词）
│ ├── basic/
│ ├── layout/
│ ├── form/
│ ├── data/
│ ├── chart/
│ ├── feedback/
│ └── navigation/
├── frontend/ # 前端应用
│ ├── src/
│ │ ├── App.tsx
│ │ ├── components/ui/ # 110+ UI 组件
│ │ ├── renderer/ # Schema 渲染器
│ │ └── lib/ # 工具库
│ └── package.json
└── logs/ # 日志目录
POST /api/generate-ui/stream
Content-Type: application/json
{
"prompt": "创建一个登录表单",
"mode": "auto" // auto | simple | hierarchical
}
返回 SSE 事件流：
start- 开始生成partial_schema- 部分 Schema（可渲染）schema- 完整 Schemacomplete- 完成
POST /api/modify-ui/stream
Content-Type: application/json
{
"prompt": "把按钮改成红色",
"current_schema": { ... }
}
返回 SSE 事件流，包含 patch 事件（JSON Patch 操作）
GET /health
| 模式 | 说明 | 适用场景 |
|---|---|---|
simple |
直接流式生成 | 简单表单、卡片 |
hierarchical |
五阶段分层生成 | 复杂仪表盘、多区域页面 |
auto |
自动判断 | 默认模式 |
分层模式流程：
- SkeletonAgent - 生成带
$placeholder的骨架 - BuilderAgent - 并行递归展开各区域
- DataBindingAgent - 配置数据绑定
- LogicAgent - 生成交互逻辑
- UXEnhancementAgent - 规则式 UX 优化
| 分类 | 组件数 | 示例 |
|---|---|---|
| 基础 | 13 | Text, Button, Input, Badge, Link, Image |
| 布局 | 12 | Row, Col, Container, Grid, Card |
| 表单 | 15 | Select, Checkbox, Switch, Slider, Rating |
| 数据 | 18 | Table, Tag, Statistic, Timeline, List |
| 反馈 | 10 | Alert, Progress, Skeleton, Spinner, Result |
| 导航 | 8 | Tabs, Breadcrumb, Pagination |
| 图表 | 8 | LineChart, BarChart, PieChart, AreaChart |
项目已配置 Railway 部署支持，推送到 main 分支自动部署。
# 构建镜像
docker build -t chatui .
# 运行
docker run -p 8000:8000 -e OPENAI_API_KEY=your-key chatuiMIT