这是AICreator代码生成器的后端服务,基于 Spring Boot 开发,提供 AI 代码生成、应用管理、用户管理等核心功能,为前端提供稳定的 API 支持。
- 🤖 AI 代码生成:支持生成 HTML 单文件、多文件(HTML/CSS/JS)、Vue 项目代码
- 📁 文件管理:自动保存生成的代码文件到本地文件系统
- 🔄 流式响应:支持 AI 生成过程的流式输出,提升前端交互体验
- 🔌 API 服务:提供应用管理、用户管理、聊天记录等接口
- 应用创建、查询、更新、删除
- 应用部署支持
- 精选应用设置
- 用户认证与授权
- 基于角色的权限控制(普通用户/管理员)
- 后端框架:Spring Boot
- AI 集成:支持大语言模型 API 调用
- 数据库:(根据实际使用补充,如 MySQL)
- 构建工具:Maven
- 文件存储:本地文件系统
- API 文档:Swagger/OpenAPI
src/
├── main/
│ ├── java/com/akai/aicreator/
│ │ ├── ai/ # AI 代码生成相关服务
│ │ │ └── AiCodeGeneratorService.java # 代码生成核心接口
│ │ ├── core/ # 核心工具类
│ │ │ └── CodeFileSaver.java # 代码文件保存工具
│ │ ├── controller/ # API 控制器
│ │ ├── service/ # 业务逻辑服务
│ │ └── Application.java # 应用入口
│ └── resources/
│ ├── prompt/ # AI 提示词模板
│ │ ├── codegen-html-system-prompt.txt
│ │ ├── codegen-multi-file-system-prompt.txt
│ │ └── codegen-vue-project-system-prompt.txt
│ └── application.yml # 应用配置文件
└── test/ # 测试代码
- JDK 11+
- Maven 3.6+
- 克隆仓库
- 配置
application.yml中的必要参数(如数据库连接、API 密钥等) - 构建项目
mvn clean package
cd AI-Creator
mvn spring-boot:run服务将在 http://localhost:8080 启动
启动后可访问 Swagger 文档:
http://localhost:8080/swagger-ui.html
或 OpenAPI 规范:
http://localhost:8080/api/v3/api-docs
AiCodeGeneratorService:提供多种代码生成方式- 生成 HTML 代码(同步/流式)
- 生成多文件代码(同步/流式)
- 生成 Vue 项目代码(流式)
CodeFileSaver:负责将生成的代码文件保存到本地文件系统- 存储路径:
/tmp/code_output+ 业务类型 + 雪花ID 生成的唯一目录
- AI 代码生成需要配置有效的大语言模型 API 密钥
- 代码文件存储路径可在配置文件中修改
- 生产环境需配置合适的权限控制和安全策略
- 流式响应需前端支持 Server-Sent Events (SSE) 处理
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开 Pull Request
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情
这是一个基于 Vue 3 + TypeScript + Ant Design Vue 的 AICreator前端项目。用户可以通过与 AI 对话来创建网站应用、查看生成的网站应用效果、部署应用、管理个人应用等。
- 🚀 应用创建:输入用户提示词来创建应用
- 💬 AI 对话:通过和 AI 对话生成网站应用,并实时查看效果
- 📝 应用管理:修改自己的应用信息(应用名称)
- 🗑️ 应用删除:删除自己的应用
- 👀 应用查看:查看应用详情和生成效果
- 🚀 应用部署:部署应用到云端
- 📋 应用列表:分页查询自己的应用列表(支持根据名称查询)
- ⭐ 精选应用:分页查询精选的应用列表
- 🔧 应用管理:删除任意应用
- ✏️ 应用编辑:更新任意应用信息(应用名称、应用封面、优先级)
- 📊 应用查询:分页查询应用列表(支持多字段查询)
- 👁️ 应用查看:查看任意应用详情
- ⭐ 精选设置:设置应用为精选(优先级99)
- 网站标题和描述
- 用户提示词输入框
- 快捷操作按钮
- 我的应用分页列表
- 精选应用分页列表
- 顶部栏:应用名称 + 部署按钮
- 左侧对话区域:消息展示 + 用户输入框
- 右侧网页展示区域:实时预览生成的网站
- 部署成功弹窗
- 仅管理员可见
- 搜索表单:应用名称、创建者、生成类型
- 应用列表表格:支持编辑、删除、精选操作
- 用户和管理员都可进入
- 普通用户只能编辑应用名称
- 管理员可编辑应用名称、封面、优先级
- 应用详细信息展示
- 前端框架:Vue 3 + TypeScript
- UI 组件库:Ant Design Vue
- 路由管理:Vue Router 4
- 状态管理:Pinia
- 构建工具:Vite
- HTTP 客户端:Axios
- 时间处理:Day.js
- 代码规范:ESLint + Prettier
src/
├── api/ # API 接口定义
│ ├── appController.ts # 应用相关接口
│ ├── userController.ts # 用户相关接口
│ └── typings.d.ts # 类型定义
├── components/ # 公共组件
│ ├── GlobalHeader.vue # 全局头部
│ └── GlobalFooter.vue # 全局底部
├── layouts/ # 布局组件
│ └── BasicLayout.vue # 基础布局
├── pages/ # 页面组件
│ ├── HomePage.vue # 首页
│ ├── app/ # 应用相关页面
│ │ ├── AppChatPage.vue # 应用对话页
│ │ └── AppEditPage.vue # 应用编辑页
│ ├── admin/ # 管理员页面
│ │ ├── AppManagePage.vue # 应用管理页
│ │ └── UserManagePage.vue # 用户管理页
│ └── user/ # 用户页面
│ ├── UserLoginPage.vue
│ └── UserRegisterPage.vue
├── stores/ # 状态管理
│ └── loginUser.ts # 登录用户状态
├── utils/ # 工具函数
│ ├── constants.ts # 常量定义
│ ├── format.ts # 格式化工具
│ └── validation.ts # 验证工具
├── router/ # 路由配置
│ └── index.ts
└── main.ts # 应用入口
npm installnpm run devnpm run buildnpm run lint- 用户在主页输入提示词
- 调用创建应用接口得到应用 ID
- 跳转到对话页面
- 自动发送初始提示词给 AI
- 通过 SSE 实时显示 AI 回复
- 生成完成后在右侧展示网站效果
- 在对话页面点击部署按钮
- 调用后端部署接口
- 获取可访问的 URL 地址
- 显示部署成功弹窗
- 管理员进入应用管理页
- 查看应用列表,支持搜索过滤
- 可以编辑、删除、设置精选
- 编辑跳转到应用编辑页面
- 应用生成需要后端 AI 服务支持
- 部署功能需要配置部署服务
- 管理员功能需要相应的权限控制
- 预览功能依赖后端静态资源服务
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开 Pull Request
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情