一个基于MCP架构、采用双LLM策略的AI Agent系统，可以通过自然语言对话生成、修改和修复React前端应用。

• 🤖 智能代码生成: 通过自然语言描述生成完整的React应用
• 👁️ 实时预览: 在IDE中实时预览生成的页面
• 📝 版本控制: 每次成功构建自动提交到Git，支持版本切换
• 💻 IDE体验: 文件树、代码编辑器（VS Code同款）、实时预览
• 🔧 自动调试: 构建失败时自动分析错误并修复
• 📦 项目下载: 支持下载任意历史版本的项目代码
• 🎯 MCP架构: 安全的代理-工具分离，Docker沙箱隔离
• ⚡ 双LLM协作: DeepSeek-R1（需求分析）+ Gemini-Flash-2.5（代码生成）

• Python 3.9+ - 主要开发语言
• FastAPI - 高性能Web框架
• Pydantic - 数据验证
• Docker - 容器化沙箱环境
• GitPython - Git版本控制
• HTTPX - 异步HTTP客户端
• DeepSeek-R1 API - 需求分析与任务规划
• Gemini-Flash-2.5 API - 代码生成与修复

• React 18 - UI框架
• Vite - 现代构建工具
• TypeScript - 类型安全
• TanStack Query - 数据获取与状态管理
• Zustand - 轻量级状态管理
• Monaco Editor - VS Code同款代码编辑器
• Tailwind CSS - 实用优先的CSS框架
• Lucide React - 现代图标库

┌─────────────────────────────────────────────────────────────────┐
│                        AI Agent IDE                               │
├──────────────────┬────────────────────┬──────────────────────────┤
│  🤖 Chat Panel  │  📁 File Tree      │  👁️ Preview Panel        │
│                 │  + Code Editor    │                          │
│  • 输入需求      │                   │  • 实时页面预览          │
│  • AI响应        │  • 文件浏览       │  • 刷新/新窗口打开       │
│  • 历史记录      │  • 代码查看       │  • 版本历史              │
│                 │                   │                          │
└──────────────────┴────────────────────┴──────────────────────────┘

• Python 3.9+
• Node.js 18+
• Docker
• DeepSeek API Key
• Gemini API Key

git clone <repository-url>
cd ai-agent-frontend-generator

cp backend/.env.example backend/.env
nano backend/.env  # 填入你的API密钥

编辑 .env 文件：

DEEPSEEK_API_KEY=sk-your-deepseek-key-here
GEMINI_API_KEY=your-gemini-key-here

后端：

cd backend
pip install -r requirements.txt

前端：

cd frontend
npm install

启动后端：

cd backend
python -m uvicorn main:app --reload --host 0.0.0.0 --port 8000

启动前端（新终端）：

cd frontend
npm run dev

打开浏览器访问：http://localhost:3000

API文档：http://localhost:8000/docs

在聊天面板输入：

创建一个计数器，包含增加、减少和重置按钮

系统会自动：

1. DeepSeek分析需求 → 生成执行计划
2. Gemini创建Counter.jsx组件
3. 修改App.jsx引入组件
4. 执行构建
5. Git提交变更
6. 启动预览服务

将计数器的按钮改为蓝色背景，增加阴影效果

1. 点击预览面板顶部的版本图标
2. 查看所有历史提交
3. 选择任意版本点击"Checkout"
4. 系统切换到该版本并重新预览

如果构建失败，系统会：

1. 自动捕获错误日志
2. Gemini分析错误原因
3. 生成修复代码
4. 重新构建
5. 重复直到成功

/workspace
├── backend/                  # 后端服务
│   ├── api/                 # API路由
│   │   ├── chat.py         # 聊天与错误修复
│   │   ├── project.py      # 项目状态
│   │   ├── version.py      # 版本控制
│   │   ├── download.py     # 下载服务
│   │   └── preview.py      # 预览代理
│   ├── services/            # 业务逻辑
│   │   ├── llm_service.py  # LLM调用
│   │   ├── docker_service.py # Docker操作
│   │   ├── git_service.py   # Git操作
│   │   └── workspace_service.py # 工作区管理
│   ├── config.py           # 配置管理
│   ├── models.py           # 数据模型
│   ├── main.py             # 应用入口
│   ├── requirements.txt    # Python依赖
│   └── Dockerfile          # Docker镜像
│
├── frontend/               # 前端应用
│   ├── src/
│   │   ├── components/    # React组件
│   │   ├── api/           # API客户端
│   │   ├── store/         # 状态管理
│   │   └── utils/         # 工具函数
│   ├── package.json       # Node依赖
│   └── Dockerfile        # Docker镜像
│
├── docs.md               # 产品设计文档
├── ARCHITECTURE.md       # 架构文档
├── DEV_GUIDE.md         # 开发指南
├── USER_GUIDE.md        # 使用指南
└── README.md            # 本文件

系统采用模型-上下文-协议（MCP）架构，实现清晰的关注点分离：

┌──────────────┐
│  AI Agent    │  ← "大脑"：理解意图、规划任务
│  (DeepSeek)  │
└──────┬───────┘
       │ JSON请求
┌──────▼───────┐
│  MCP Server  │  ← "四肢"：安全执行具体操作
│  - Docker    │
│  - Git       │
│  - File Ops  │
└──────────────┘

1. DeepSeek-R1 - 需求分析师

   • 解析用户意图
   • 分析项目状态
   • 生成结构化执行计划

2. Gemini-Flash-2.5 - 代码工匠

   • 按计划生成/修改代码
   • 修复构建错误
   • 生成高质量React代码

启动后端后访问：http://localhost:8000/docs

方法	端点	描述
POST	/api/v1/chat	发送消息生成代码
POST	/api/v1/fix-error	修复构建错误
GET	/api/v1/project-state	获取项目状态
GET	/api/v1/file-content	获取文件内容
GET	/api/v1/versions	获取版本历史
POST	/api/v1/checkout	切换版本
GET	/api/v1/download	下载项目
GET	/api/v1/preview/:id	预览页面

在 backend/.env 中配置：

# API Keys（必需）
DEEPSEEK_API_KEY=sk-your-key
GEMINI_API_KEY=your-key

# Server Configuration
HOST=0.0.0.0
PORT=8000

# Docker Configuration
DOCKER_BASE_IMAGE=node:20-alpine
VITE_PREVIEW_PORT=4173

# Storage
WORKSPACE_DIR=/tmp/ai-agent-workspace

1. 在 backend/services/ 创建新服务：

# backend/services/format_service.py
class FormatService:
    async def format_code(session_id: str, file_path: str):
        container = docker_service.containers[session_id]
        exit_code, output = container.exec_run(
            f"npx prettier --write /app/{file_path}"
        )
        return exit_code == 0

2. 在 WorkspaceService 中集成：

from .format_service import format_service

async def format_project_files(self, session_id: str):
    # 实现格式化逻辑
    pass

3. 更新DeepSeek的系统提示词，告知工具新增。

// frontend/src/components/NewComponent.jsx
import React from 'react'

export default function NewComponent({ prop1, prop2 }) {
  return (
    <div className="new-component">
      {/* 组件内容 */}
    </div>
  )
}

查看后端日志：

cd backend
python -m uvicorn main:app --reload --log-level debug

查看前端网络请求：

• 打开浏览器开发者工具
• 切换到 Network 标签
• 查看API请求和响应

测试API端点：

# 健康检查
curl http://localhost:8000/health

# 测试聊天
curl -X POST http://localhost:8000/api/v1/chat \
  -H "Content-Type: application/json" \
  -d '{"sessionId":"test","prompt":"测试消息"}'

在聊天面板输入你的需求：

创建一个待办事项列表，可以添加、删除和标记完成

系统会自动生成相应的React组件和样式。

将待办事项列表的背景改为浅灰色

• 左侧文件树显示项目结构
• 点击文件查看代码
• 在编辑器中可以查看和复制代码

• 右侧预览面板实时显示生成的页面
• 可以在预览中直接交互
• 点击刷新按钮重新加载

• 每次成功构建自动提交
• 点击版本图标查看历史
• 选择版本点击Checkout切换
• 支持下载任意版本

构建失败时系统会自动：

1. 捕获错误日志
2. 分析错误原因
3. 生成修复代码
4. 重新构建

在版本控制面板：

1. 选择要下载的版本
2. 点击下载图标
3. 自动打包为ZIP文件

为了获得更好的结果，建议：

• 明确描述需求和功能
• 指定技术细节（如组件名称、样式要求）
• 提供上下文（如"在上面的基础上..."）

A: 系统会自动尝试修复。如果多次失败：

1. 查看后端日志了解错误详情
2. 尝试修改提示词，更明确地描述需求
3. 手动在编辑器中查看并修改代码

A:

1. 等待几秒钟，项目正在构建
2. 点击预览面板的刷新按钮
3. 检查后端Docker服务是否正常运行
4. 查看后端日志确认构建状态

A: 构建日志会显示在后端终端窗口中，或者查看：

tail -f /tmp/backend.log

A: 支持所有现代React特性：

• Hooks (useState, useEffect, useContext, etc.)
• 函数组件
• Props和Context
• CSS Modules
• 路由（如需要）
• 状态管理

A: 当前版本主要生成JavaScript/JSX。可以在提示词中明确要求TypeScript。

A: 可以在工作目录中手动删除对应的session文件夹：

rm -rf /tmp/ai-agent-workspace/session-*

• Docker沙箱: 所有代码执行在隔离的Docker容器中
• MCP协议: 代理不能直接执行命令，必须通过受控工具
• 输入验证: 所有API输入都经过严格验证
• 错误处理: 完善的异常处理和错误日志

欢迎贡献代码！

1. Fork本项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启Pull Request

• 遵循PEP 8代码风格（Python）
• 使用ESLint和Prettier（JavaScript/React）
• 添加适当的注释和文档
• 编写测试（可选但推荐）

本项目采用 MIT 许可证 - 详见 LICENSE 文件

• DeepSeek - 提供强大的推理API
• Google - 提供Gemini API
• FastAPI - 优秀的Python Web框架
• Vite - 快速的前端构建工具
• Monaco Editor - VS Code编辑器核心

• 问题反馈：提交 GitHub Issues
• 功能建议：提交 GitHub Discussions

• 支持TypeScript默认输出
• 支持Vue框架
• 添加组件市场
• 支持团队协作
• 项目模板库
• 代码质量检查
• 性能分析工具
• CI/CD集成

---

Made with ❤️ by AI Agent Team

⭐ 如果觉得这个项目有用，请给个Star！