当前位置：首页 > news >正文

喜欢搞技术的高技术、喜欢搞业务的搞业务

news 2026/6/1 21:13:19

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 设计规范文档
```

快速开始

前端启动

```bash
cd frontend

安装依赖
npm install

启动开发服务器
npm run dev

构建生产版本
npm run build
```

前端访问地址: http://localhost:3000

后端启动

```bash
cd backend

使用 Maven 构建
./mvnw clean package

启动应用
./mvnw spring-boot:run

或直接运行 JAR
java -jar target/ai-flow-studio-1.0.0.jar
```

后端访问地址: http://localhost:8080

必要配置

MySQL 数据库

创建数据库:

```sql
CREATE DATABASE aiflow_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

Redis (可选)

```bash
使用 Docker 启动
docker run -d -p 6379:6379 redis:alpine
```

环境变量

```bash
数据库密码
export DB_PASSWORD=your_password

Redis 密码 (可选)
export REDIS_PASSWORD=

JWT 密钥
export JWT_SECRET=your-very-long-and-secure-jwt-secret-key
```

API 文档

启动后端后访问 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. 在侧边栏添加导航链接