AI Workflow Studio

基于 LangGraph4j 的智能工作流设计与执行平台

🎨 可视化设计工作流 · 🤖 AI 驱动执行 · 🔌 插件化架构

---

项目简介

AI Workflow Studio 是一个基于 Spring Boot 3 和 LangGraph4j 的智能工作流平台，支持：

• 🎯 可视化工作流设计器：拖拽组件、连接节点、配置 Agent
• 🤖 AI 聊天助手：支持工作流驱动的智能对话
• 🧭 多 Agent 协作：内置旅行规划、天气查询等多 Agent 系统
• 🔌 插件化架构：添加新组件无需修改核心代码

技术栈

• 后端: Java 17 + Spring Boot 3.3.4 + LangGraph4j 1.7.5
• 前端: HTML5 + CSS3 + JavaScript (原生)
• AI: 支持 OpenAI API 及兼容服务
• 构建: Maven 3.8+

快速开始

1. 环境要求

• Java 17 (JDK 17)
• Maven 3.8+
• 大语言模型 API (如 OpenAI)

2. 启动项目

# 克隆项目后进入目录
cd spring-boot-demo

# 启动服务
mvn spring-boot:run

# 或打包后运行
mvn clean package
java -jar target/ai-workflow-studio-1.0.0.jar

3. 访问应用

启动后访问 http://localhost:8080/

核心功能

🎯 工作流设计器

访问地址: http://localhost:8080/workflow.html

功能特性:

• 拖拽式界面：点击顶部按钮添加节点（开始、Agent、结束、转换等）
• 可视化连线：点击连接点拉线连接节点
• 节点配置：配置 Agent 的提示词和参数
• 条件控制：设置连接线条件（成功/失败/包含/等于）
• 保存加载：工作流保存到本地，可在聊天页面使用

操作说明:

1. 点击顶部组件按钮添加节点
2. 点击节点右侧连接点，连接到目标节点左侧连接点
3. 单击节点配置参数（Agent 节点需配置提示词）
4. 单击连接线设置执行条件
5. 点击"保存"，输入工作流名称
6. 点击"执行"测试工作流

💬 AI 聊天助手

访问地址: http://localhost:8080/chat.html

功能特性:

• AI 模型配置：支持 OpenAI 及兼容 API
• 对话上下文：自动维护多轮对话历史
• 工作流集成：可选择已保存的工作流进行对话
• 实时响应：支持流式输出（SSE）

使用步骤:

1. 配置 API：
   • API Base URL: https://api.openai.com/v1
   • API Key: 你的密钥
   • 模型名称: gpt-3.5-turbo 或 gpt-4
2. 选择工作流（可选）：
   • 点击"刷新工作流列表"
   • 选择工作流后，对话会按工作流执行
3. 开始对话：输入消息并发送

🧭 多 Agent 协作系统

功能特性:

• 内置旅行规划 Agent
• 天气查询 Agent
• 主控 Agent 自动调度
• 流式输出执行日志

使用方式: 在聊天页面左侧"LangGraph 多 Agent 旅行助手"表单中填写需求，点击"运行多 Agent"

API 接口

工作流 API

• POST /api/workflow/execute - 执行工作流

  {
    "workflow": { "nodes": [...], "connections": [...] },
    "input": "用户输入"
  }

AI 聊天 API

• GET /api/ai/config - 获取 AI 配置
• PUT /api/ai/config - 更新 AI 配置
• POST /api/ai/chat - 发送消息
• DELETE /api/ai/conversations - 清除对话历史

多 Agent API

• POST /api/graph/travel - 旅行助手（同步）
• POST /api/graph/travel/stream - 旅行助手（流式输出）

项目结构

spring-boot-demo/
├── src/main/java/com/example/demo/
│   ├── DemoApplication.java                 # 应用入口
│   ├── controller/                           # REST 控制器
│   │   ├── AIChatController.java            # AI 聊天 API
│   │   ├── LangGraphController.java         # 多 Agent API
│   │   └── WorkflowController.java          # 工作流 API
│   ├── ai/                                   # AI 服务
│   │   ├── AIChatService.java               # AI 聊天服务
│   │   └── AIChatConfig.java                # AI 配置
│   ├── langgraph/                            # LangGraph 多 Agent
│   │   ├── LangGraphMultiAgentService.java  # 多 Agent 服务
│   │   ├── LLMService.java                  # LLM 调用服务
│   │   └── TravelAgentState.java            # Agent 状态
│   └── workflow/                             # 工作流系统
│       ├── WorkflowExecutionService.java    # 工作流执行服务
│       ├── WorkflowState.java               # 工作流状态
│       ├── WorkflowConfig.java              # 工作流配置 DTO
│       └── executor/                         # 节点执行器（插件）
│           ├── NodeExecutor.java            # 执行器接口
│           ├── NodeExecutorFactory.java     # 执行器工厂
│           ├── StartNodeExecutor.java       # 开始节点
│           ├── AgentNodeExecutor.java       # Agent 节点
│           ├── EndNodeExecutor.java         # 结束节点
│           └── TransformNodeExecutor.java   # 转换节点
├── src/main/resources/
│   ├── application.properties               # 应用配置
│   └── static/                               # 前端资源
│       ├── index.html                        # 首页
│       ├── workflow.html                     # 工作流设计器
│       ├── workflow.js                       # 设计器逻辑
│       ├── chat.html                         # 聊天页面
│       ├── chat.js                           # 聊天逻辑
│       └── styles.css                        # 全局样式
├── WORKFLOW_EXTENSION_GUIDE.md              # 组件扩展指南
├── WORKFLOW_ARCHITECTURE.md                 # 架构说明
└── pom.xml                                   # Maven 配置

插件化架构

添加新组件只需 3 步

1. 创建执行器类:

@Component
public class YourNodeExecutor implements NodeExecutor {
    public Map<String, Object> execute(WorkflowNode node, WorkflowState state) {
        // 你的逻辑
    }
    public String getSupportedType() {
        return "your_type";
    }
}

2. 添加前端按钮:

<button class="component-btn" data-type="your_type">🔧 你的组件</button>

3. 完成！ Spring 自动注册，无需修改核心代码

已实现的组件

• StartNode: 开始节点
• AgentNode: Agent 节点（调用 LLM）
• EndNode: 结束节点
• TransformNode: 转换节点（示例）

详见 组件扩展指南

核心特性

1. 动态工作流构建

前端设计的工作流会动态转换为 LangGraph4j 状态图：

前端配置 → JSON → StateGraph → CompiledGraph → 执行

2. 状态管理

使用 WorkflowState 在节点间传递数据：

• input: 用户输入
• output: 当前输出（每个节点可更新）
• executionLog: 执行日志
• currentNode: 当前节点 ID

3. 条件控制

连接线支持条件配置：

• 成功/失败判断
• 输出内容匹配
• 自定义条件

4. LLM 集成

Agent 节点自动调用配置的大语言模型，支持：

• 系统提示词定义 Agent 角色
• 用户提示词模板（支持 {input}, {output} 占位符）
• 错误处理和重试

使用示例

示例 1: 翻译工作流

开始 → 翻译Agent → 结束

配置翻译 Agent:

• 系统提示词: 你是专业的翻译助手
• 用户提示词: 请将以下文本翻译成英文: {input}

示例 2: 多步处理工作流

开始 → 摘要Agent → 分析Agent → 结束

配置:

• 摘要Agent: 提取关键信息
• 分析Agent: 分析摘要结果（使用 {output} 获取上一步输出）

示例 3: 条件分支工作流

开始 → 分类Agent → 处理Agent1 (条件: 包含"技术")
                  → 处理Agent2 (条件: 包含"业务")

开发指南

本地开发

# 编译
mvn clean compile

# 运行测试
mvn test

# 启动开发服务器
mvn spring-boot:run

添加新组件

参考 组件扩展指南 和 架构说明

配置说明

在 application.properties 中配置：

server.port=8080

常见问题

Q: 如何添加新的节点类型？

A: 创建实现 NodeExecutor 接口的类，添加 @Component 注解即可。参考 TransformNodeExecutor。

Q: 工作流保存在哪里？

A: 默认保存在浏览器 localStorage，同时会下载 JSON 文件到本地。

Q: 如何在聊天中使用工作流？

A: 在工作流设计器中保存工作流后，在聊天页面点击"刷新工作流列表"，选择工作流即可。

Q: 支持哪些 LLM？

A: 支持所有兼容 OpenAI API 格式的服务（OpenAI、Azure OpenAI、本地模型等）。

贡献

欢迎贡献新的节点执行器！

许可

MIT License

---

AI Workflow Studio v1.0.0 | Powered by LangGraph4j