AI Flow Studio - 智能体编排平台 2026年最热门的AI Agent编排平台 - 可视化流程设计、多模型集成、企业级管理项目概述AI Flow Studio 是一个现代化的 AI Agent 智能体编排与管理系统提供可视化流程设计、多模态 AI 模型集成、企业级监控管理等核心功能。核心特性- 可视化流程编排器 - 拖拽式节点设计零代码构建 AI 工作流- 多模型集成 - 支持 GPT-4、Claude 3、通义千问、文心一言等主流大模型- 智能体市场 - 预置丰富的 AI 智能体模板一键部署使用- 实时监控 - 全方位监控 API 调用、延迟、错误率等关键指标- 企业级安全 - API 密钥管理、权限控制、Webhook 通知- ☁️ 可扩展架构 - 支持集群部署、水平扩展技术栈前端- 框架: React 18 TypeScript- UI库: Ant Design 5 TailwindCSS- 状态管理: Zustand- 图表: Recharts- 流程图: xyflow/react- 构建工具: Vite后端- 框架: Spring Boot 3- ORM: MyBatis Plus- 数据库: MySQL 8- 缓存: Redis- 实时通信: WebSocket- 文档: Knife4j (Swagger)- 安全: Spring Security JWT项目结构ai-flow-studio/├── frontend/ React 前端项目│ ├── src/│ │ ├── components/ 通用组件│ │ │ └── Layout.tsx 主布局│ │ ├── pages/ 页面组件│ │ │ ├── Dashboard.tsx 仪表盘│ │ │ ├── AgentMarketplace.tsx 智能体市场│ │ │ ├── MyAgents.tsx 我的智能体│ │ │ ├── FlowDesigner.tsx 流程设计器│ │ │ ├── Monitor.tsx 监控中心│ │ │ └── Settings.tsx 系统设置│ │ ├── api/ API 请求│ │ ├── store/ 状态管理│ │ ├── utils/ 工具函数│ │ └── types/ TypeScript 类型│ └── package.json│├── backend/ Spring Boot 后端项目│ ├── src/main/java/com/aiflow/│ │ ├── controller/ 控制器层│ │ │ ├── AgentController.java│ │ │ ├── FlowController.java│ │ │ ├── MonitorController.java│ │ │ ├── AuthController.java│ │ │ └── SettingsController.java│ │ ├── service/ 服务层│ │ │ └── impl/│ │ ├── model/ 实体类│ │ ├── mapper/ 数据访问层│ │ ├── dto/ 数据传输对象│ │ ├── config/ 配置类│ │ └── websocket/ WebSocket 处理│ └── src/main/resources/│ └── application.yml 应用配置│└── FIGMA-DESIGN.md Figma 设计规范文档快速开始前端启动bashcd frontend安装依赖npm install启动开发服务器npm run dev构建生产版本npm run build前端访问地址: http://localhost:3000后端启动bashcd backend使用 Maven 构建./mvnw clean package启动应用./mvnw spring-boot:run或直接运行 JARjava -jar target/ai-flow-studio-1.0.0.jar后端访问地址: http://localhost:8080必要配置MySQL 数据库创建数据库:sqlCREATE DATABASE aiflow_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;Redis (可选)bash使用 Docker 启动docker run -d -p 6379:6379 redis:alpine环境变量bash数据库密码export DB_PASSWORDyour_passwordRedis 密码 (可选)export REDIS_PASSWORDJWT 密钥export JWT_SECRETyour-very-long-and-secure-jwt-secret-keyAPI 文档启动后端后访问 API 文档:- Swagger UI: http://localhost:8080/swagger-ui.html- Knife4j: http://localhost:8080/doc.html主要接口| 接口 | 方法 | 描述 ||------|------|------|| /api/auth/login | POST | 用户登录 || /api/agents | GET | 获取智能体列表 || /api/agents/{id} | GET | 获取智能体详情 || /api/agents | POST | 创建智能体 || /api/agents/{id}/start | POST | 启动智能体 || /api/agents/{id}/stop | POST | 停止智能体 || /api/agents/marketplace | GET | 获取市场智能体 || /api/flows | GET | 获取流程列表 || /api/flows/{id}/execute | POST | 执行流程 || /api/monitor/metrics | GET | 获取监控指标 || /api/settings/api-keys | GET | 获取 API 密钥 |页面预览1. 仪表盘 (Dashboard)- 系统运行状态概览- API 调用趋势图- 智能体状态分布- 最近活动时间线2. 智能体市场 (Marketplace)- 分类筛选 (客服、数据分析、内容创作、办公自动化)- 智能体卡片展示- 评分和下载量统计- 一键添加功能3. 流程设计器 (Flow Designer)- 左侧: 组件库 (触发器、AI模型、逻辑、动作)- 中间: 可视化画布 (拖拽、连线、缩放)- 右侧: 节点属性配置4. 监控中心 (Monitor)- 实时流量趋势- 延迟分布图- 错误分布饼图- 模型使用统计- 告警通知5. 系统设置 (Settings)- API 密钥管理- Webhook 配置- 团队成员管理- 通知偏好设置设计规范详细的设计规范请参考 [FIGMA-DESIGN.md](./FIGMA-DESIGN.md)包含:- 色彩系统- 字体规范- 间距系统- 组件规格- 交互规范开发指南添加新页面1. 在 frontend/src/pages/ 创建新页面组件2. 在 App.tsx 添加路由3. 在侧边栏添加导航链接添加新 API1. 在 Controller 添加新接口2. 创建对应的 Service 和 Mapper3. 在前端 api/ 目录添加请求函数添加新模型1. 在 model/ 创建实体类2. 在 mapper/ 创建 Mapper 接口3. 在 service/ 创建服务接口和实现LicenseMIT License