基于 AI Agent 的前端应用生成平台，让创意快速变成可运行的应用
English | 中文
用户描述需求 → PM（产品经理）→ 架构师 → 工程师 → 可运行代码
- PM Agent: 将模糊需求转化为清晰的产品需求文档
- Arch Agent: 进行技术选型和架构设计
- Engineer Agent: 生成完整可运行的前端代码
| 能力 | 说明 |
|---|---|
| 自然语言生成 | 用中文描述需求，AI 自动理解并生成 |
| 流式输出 | 实时看到 AI 思考和生成过程 |
| 人工确认 | 每个阶段可审查、修订后再继续 |
| 意图识别 | 自动区分"聊天"和"构建项目" |
| 修订机制 | 生成结果不满意？随时反馈修改意见 |
- Flask 3.0 - 轻量级 Python Web 框架
- SQLite - 开箱即用的数据库
- PyJWT - JWT 用户认证
- SiliconFlow API - AI 模型调用
- React 18 - 现代响应式 UI
- Vite - 极速开发构建工具
- Tailwind CSS - 原子化样式方案
- Framer Motion - 流畅动画
- SSE - 服务端推送，实现打字机效果
- Node.js 18+
- Python 3.10+
- npm 或 yarn
# 克隆项目
git clone <your-repo-url>
cd AppBuilder
# 一键安装（安装依赖 + 初始化数据库）
./install.sh# 启动前后端服务
./start.sh服务启动后：
- 前端: http://localhost:8080
- 后端 API: http://localhost:5000
# 终端 1 - 启动后端
cd backend
pip install -r requirements.txt
python app.py
# 终端 2 - 启动前端
cd frontend
npm install
npm run dev首次使用需要注册账号，支持用户名/密码登录。
在输入框输入问题，AI 会即时回答：
你：什么是 React？
AI：React 是 Facebook 开源的 JavaScript 库，用于构建用户界面...
使用以下关键词触发构建流程：
- "帮我做一个 Todo 应用"
- "创建一个天气查询网页"
- "做一个个人简历页面"
示例：
你：做一个待办事项应用，支持添加、删除、完成标记
AI：[检测到构建意图]
→ PM 正在生成需求文档...
→ 架构师 正在设计...
→ 工程师 正在生成代码...
→ 构建完成！
每个构建项目会经历三个阶段：
| 阶段 | 产出 | 操作 |
|---|---|---|
| PM | 产品需求文档 | 确认 / 修订 |
| Arch | 技术设计文档 | 确认 / 修订 |
| Engineer | 可运行 HTML | 预览 / 修订 / 下载 |
对任何阶段的产出不满意，可以点击"修订"按钮输入修改意见：
你：界面太丑了，换成浅色主题
AI：收到，正在重新生成...
AppBuilder/
├── backend/
│ ├── app.py # 应用入口
│ ├── config.py # 配置文件
│ ├── extensions.py # Flask 扩展
│ ├── models.py # 数据模型
│ ├── routes/
│ │ ├── auth.py # 认证路由
│ │ ├── chat.py # 对话路由
│ │ ├── build.py # 构建流程路由
│ │ └── utils.py # 工具函数
│ └── projects/ # 生成的项目存储
│
├── frontend/
│ ├── src/
│ │ ├── api/ # API 调用
│ │ ├── components/ # React 组件
│ │ ├── pages/ # 页面
│ │ ├── store/ # 状态管理
│ │ └── App.jsx # 路由入口
│ └── index.html
│
├── install.sh # 安装脚本
├── start.sh # 启动脚本
└── README.md
| 接口 | 方法 | 说明 |
|---|---|---|
/api/auth/register |
POST | 注册用户 |
/api/auth/login |
POST | 用户登录 |
| 接口 | 方法 | 说明 |
|---|---|---|
/api/conversations |
GET | 获取会话列表 |
/api/conversations |
POST | 创建会话 |
/api/conversations/<id> |
DELETE | 删除会话 |
/api/chat |
POST | 发送消息（SSE 流式） |
| 接口 | 方法 | 说明 |
|---|---|---|
/api/build/<id> |
GET | 获取项目详情 |
/api/build/<id>/pm/confirm |
POST | PM 确认 |
/api/build/<id>/arch/confirm |
POST | 架构确认 |
/api/build/<id>/engineer/revise |
POST | 代码修订 |
在 backend/.env 中配置：
# Flask 配置
SECRET_KEY=your-secret-key-here
# SiliconFlow API（必须）
SILICONFLOW_API_KEY=your-api-key-here
SILICONFLOW_API_URL=https://api.siliconflow.cn/v1/chat/completions
# 模型配置
MODEL_NAME=Pro/zai-org/GLM-4.7- 访问 SiliconFlow 注册账号
- 在控制台获取 API Key
- 填入
SILICONFLOW_API_KEY
- PM → Arch → Engineer 流水线
- 代码下载功能
- 预览功能修复
- 错误处理优化
- LLM 意图分类（替代关键词匹配）
- Agent 并行化（赛马模式）
- 深度研究 Agent
- Agent 上下文共享
- 后端服务集成（Supabase）
- 多模型支持
- 构建模板系统
- 一键部署
| 功能 | Atoms | AppBuilder |
|---|---|---|
| 多 Agent 协作 | 7 个专业 Agent | 3 阶段流水线 |
| 深度研究 | ✅ | 规划中 |
| 赛马模式 | ✅ | 规划中 |
| 后端支持 | Supabase | 规划中 |
| 一键部署 | ✅ | 规划中 |
| 代码导出 | ✅ | 规划中 |
AppBuilder 是一个精简版的 AI 应用生成平台，专注于前端应用生成，适合学习和快速原型开发。
A: 检查后端日志，可能是：
- API Key 无效或额度用尽
- 网络连接问题
- LLM 输出格式异常
A: 项目保存在 backend/projects/<user_id>/<conversation_id>/index.html
A: 修改 backend/config.py 中的 MODEL_NAME，或使用支持 OpenAI 兼容接口的模型。
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 创建 Pull Request
MIT License
Built with ❤️ for AI-native development