FastGPT源码解析 Agent工作流编排前端详解

FastGPT 工作流编排的核心前端框架

ReactFlow (

reactflow: ^11.7.4

) 

1. ReactFlow - 工作流可视化核心

import ReactFlow, { NodeProps, SelectionMode } from 'reactflow';
import 'reactflow/dist/style.css';

// 在 Flow/index.tsx 中使用
<ReactFlow
  ref={reactFlowWrapper}
  fitView
  nodes={nodes}
  edges={edges}
  nodeTypes={nodeTypes}
  edgeTypes={edgeTypes}
  onNodesChange={handleNodesChange}
  onEdgesChange={handleEdgeChange}
  onConnect={customOnConnect}
  // ... 更多配置
/>

ReactFlow 特性:

• 节点拖拽和连接

• 自定义节点类型

• 边的样式和交互

• 缩放和平移

• 选择模式

• 上下文菜单

2. UI 框架 - Chakra UI

"@chakra-ui/react": "2.8.1"
"@chakra-ui/icons": "2.1.1"
"@chakra-ui/next-js": "2.1.5"

3. 状态管理 - Context + Zustand

// 工作流上下文管理
import { WorkflowNodeEdgeContext, WorkflowInitContext } from '../context/workflowInitContext';
import { WorkflowEventContext } from '../context/workflowEventContext';

// 全局状态管理
"zustand": "^4.3.5"
"use-context-selector": "^1.4.4"

4. 自定义节点类型

FastGPT 定义了丰富的节点类型：

const nodeTypes: Record<FlowNodeTypeEnum, any> = {
  [FlowNodeTypeEnum.chatNode]: NodeSimple,           // AI对话节点
  [FlowNodeTypeEnum.datasetSearchNode]: NodeSimple,  // 知识库搜索
  [FlowNodeTypeEnum.httpRequest468]: NodeHttp,       // HTTP请求
  [FlowNodeTypeEnum.ifElseNode]: NodeIfElse,         // 条件判断
  [FlowNodeTypeEnum.code]: NodeCode,                 // 代码执行
  [FlowNodeTypeEnum.loop]: NodeLoop,                 // 循环节点
  // ... 30+ 种节点类型
};

5. 动态加载优化

// 使用 Next.js dynamic 实现按需加载
const NodeSimple = dynamic(() => import('./nodes/NodeSimple'));
const NodeHttp = dynamic(() => import('./nodes/NodeHttp'));

工作流编排架构

节点系统

• 输入输出: 每个节点有标准化的输入输出接口

• 连接器: Handle 组件处理节点间的连接

• 模板系统: 预定义的节点模板和配置

交互功能

• 拖拽创建: 从模板面板拖拽创建节点

• 可视化连接: 通过拖拽连接节点

• 实时预览: 支持工作流调试和预览

• 上下文菜单: 右键操作菜单

数据流

用户操作 → ReactFlow事件 → Context状态更新 → 节点重渲染 → 后端同步

前端总结

FastGPT 工作流编排前端主要基于 ReactFlow 框架实现，这是一个专门用于构建节点编辑器和工作流的 React 库。配合 Chakra UI 提供美观的界面，使用 Context 和 Zustand 进行状态管理，通过 Next.js 的动态加载优化性能。提供了强大的可视化工作流编排能力，支持复杂的 AI 应用逻辑构建。