人工智能大模型AI 应用低代码后端前端流程编排RAG【免费下载链接】app-platformAppPlatform 是一个前沿的大模型应用工程旨在通过集成的声明式编程和低代码配置工具简化和优化大模型的训练与推理应用的开发过程。本工程为软件工程师和产品经理提供一个强大的、可扩展的环境以支持从概念到部署的全流程 AI 应用开发。项目地址https://gitcode.com/ModelEngine/app-platform点击查看免费下载导读fit-elsa/agent-flow是 ModelEngine app-platform 仓库中基于 React 构建的前端应用模块它为fit-elsa/elsa核心框架提供完整的 React 封装与开箱即用的 UI 组件是大模型应用可视化编排节点拖拽、连线、配置抽屉、试运行、校验的前端落地方案。阅读本文后你将掌握如何通过JadeFlow快速嵌入流程图编辑器、通过createGraphOperator操作画布数据、通过MultiConversation实现多会话配置并理解其基于 Context、React.memo与 Ant Design 表单/树组件封装的底层设计。项目定位与架构总览fit-elsa/agent-flow的定位在 agent-flow/README.md 中写得很清楚它是「基于 React 的前端应用模块为 fit-elsa/elsa 核心框架提供 React 封装和 UI 组件」。从源码结构看该模块是一个 Vite 库工程核心导出集中在 src/index.jsexport {JadeFlow, NODE_STATUS, MultiConversation, MultiConversationContent, createGraphOperator};也就是说对外主要暴露五类能力JadeFlow流程图容器负责新建、编辑、评估三种流程模式createGraphOperator纯数据层面的画布操纵器不依赖 DOMMultiConversation/MultiConversationContent多会话配置组件NODE_STATUS节点运行状态常量集合。构建层面vite.config.js 将工程打包为可发布库agent-flow.js/agent-flow.umd.cjs并声明react、react-dom、fit-elsa/elsa、antd等为 external 依赖交由宿主项目提供。入口页 App.jsx 则演示了宿主项目中最典型的用法先准备各节点类型的后端接口配置configs再调用JadeFlow.edit(...)把流程元数据渲染进指定 DOM 容器。功能亮点React 与 Ant Design 的深度整合README 归纳了 agent-flow 的两大技术亮点结合源码可以进一步看到它们的实际落点。基于 Context 的上下文传递整个模块依赖 React 的 Context 机制在组件树中传递流程数据与事件回调。典型示例是 MultiConversation.jsx外层面板接收itemId、config、disabled、props等属性再通过内部组件逐层透传给内容区MultiConversationContent.jsx 则根据props.type.value动态渲染「按对话轮次」「按条数」「按 Token 大小」「按时间」「自定义」等记忆模式配置项一级菜单切换时还会同步写入二级菜单的默认值如轮次默认3、条数默认20、Token 默认1000。节点渲染缓存React.memo 自定义 shouldComponentUpdate在画布节点较多上限见下文的场景下为避免无关数据变更触发全量重渲染节点组件通过React.memo配合自定义的shouldComponentUpdate进行渲染缓存将画布交互保持在流畅水平。这是 README 明确宣称的能力与 jadeFlowPage.js 中大量使用ignoreChange包裹状态更新的思路一致——只在真正需要刷新的时机触发重绘。基于 Form 组件的实时校验提示系统节点配置抽屉中的每一项参数都使用 Ant DesignForm.Item承载并声明rules与validateTriggeronBlur实现失焦即时校验。同时 agent-flow 还提供了一整套「导入后数据合法性校验」能力详见后文「画布数据校验与导入校验」小节其设计文档位于 agent-flow/docs/features/shape-data-validation/index.md核心实现位于 agent-flow/src/data/ShapeDataValidationProcessor.js。基于 Tree 组件封装的节点上下文观察者机制节点之间的数据引用如后置节点引用前置节点的输出通过「可被观察对象Observable」机制管理。相关实现位于 jadeFlowPage.js 中的ObservableStore每个节点可以registerObservable注册可监听项其他节点通过observeTo订阅数据更新时自动通知观察者配合基于 Tree 组件封装的选择器JadeReferenceTreeSelect、JadeReferenceMultiTreeSelect等完成上下文变量的可视化引用。安装在宿主 React 项目中安装 agent-flow 及其核心依赖npm install fit-elsa/agent-flow fit-elsa/elsa仓库内 agent-flow/package.json 显示其当前版本为1.0.0-alpha.8同时依赖antd4.24.13、react^18.2.0、tinymce/tinymce-react、monaco-editor等。模块还内置了中英文双语资源可通过子路径直接引入import en from fit-elsa/agent-flow/locales/en.json; import zh from fit-elsa/agent-flow/locales/zh.json;国际化初始化逻辑见 agent-flow/src/i18n/i18n.js本地翻译会与fit-elsa/elsa核心翻译合并本地优先级更高默认语言为zh。快速开始基本用法嵌入 JadeFlow 流程图README 给出的最小可运行示例完整如下import React from react; import { JadeFlow, createGraphOperator } from fit-elsa/agent-flow; function MyFlowApp() { // 创建图形操作器 const graphOperator createGraphOperator(); // 处理图形数据变更 const handleGraphChange (graphData) { console.log(图形数据已变更:, graphData); }; return ( div style{{ width: 100%, height: 100vh }} JadeFlow graphOperator{graphOperator} onGraphChange{handleGraphChange} height{600} width{800} / /div ); } export default MyFlowApp;需要说明的是仓库当前实际对外暴露的JadeFlow是一个命令式 API 对象而非受控组件真正的接入方式是先准备好 DOM 容器再调用JadeFlow.new(...)/JadeFlow.edit(...)/JadeFlow.evaluate(...)三种模式之一返回一个流程控制代理见 jadeFlowEntry.jsx。仓库自带的 App.jsx 演示了标准接入方式JadeFlow.edit({ div: stage, // 目标 DOM 容器 tenant: 1111, appId: xxx, flowConfigData: graphData, // 流程元数据JSON configs: configs, // 各节点类型对应的后端接口配置 i18n: i18n, }).then(agent { window.agent agent; // agent 即流程控制代理 window.operator createGraphOperator(JSON.stringify(graphData)); });三种模式的适用场景如下模式方法用途新建JadeFlow.new(div, tenant, configs)创建空白流程自动生成开始节点、结束节点及一条连线并填充画布编辑JadeFlow.edit({div, tenant, appId, flowConfigData, configs, i18n, importStatements, flowType})反序列化已有流程元数据并进入编排模式评估JadeFlow.evaluate(div, tenant, appId, flowConfigData, isPublished, configs, i18n, importStatements)以评估流程模式加载对应仓库evaluation子模块多会话示例开始节点支持多轮对话记忆配置README 给出的组件级用法如下import React, { useState } from react; import { MultiConversation, MultiConversationContent } from fit-elsa/agent-flow; function MultiConvApp() { const [selectedConversation, setSelectedConversation] useState(null); const conversations [ { id: 1, title: 会话 1, content: 这是第一个会话的内容 }, { id: 2, title: 会话 2, content: 这是第二个会话的内容 } ]; return ( div style{{ display: flex, height: 100vh }} div style{{ width: 300px, borderRight: 1px solid #ccc }} MultiConversation conversations{conversations} onSelectConversation{setSelectedConversation} selectedConversationId{selectedConversation?.id} / /div div style{{ flex: 1, padding: 20px }} {selectedConversation ( MultiConversationContent conversation{selectedConversation} / )} /div /div ); } export default MultiConvApp;在仓库内部MultiConversation组件实际接收的是itemId、config、className、disabled、props五类属性见 MultiConversation.jsxprops.switch.value控制记忆开关props.type.value控制记忆模式。对外属性conversations、onSelectConversation、selectedConversationId是 README 层面的简化封装描述实际使用时两者可互相映射。组件 API 详解JadeFlow主要的流程图组件用于显示和编辑流程图。属性README 定义graphOperator: 图形操作器实例onGraphChange: 图形数据变更时的回调函数height: 流程图高度width: 流程图宽度readOnly: 是否只读模式locale: 语言设置从源码看JadeFlow的实际控制能力由jadeFlowAgentjadeFlowEntry.jsx承载核心方法包括方法说明want(shapeType, properties)在当前活动页中添加图形import(importStatement)动态导入用户自定义组件serialize()序列化流程全量数据getFlowRunInputMetaData()获取流程试运行入参元数据来自开始节点run()启动试运行返回{refresh, reset, stop}三个控制句柄getAvailableNodes()获取可创建节点列表数据检索、大模型、人工检查、FIT 调用createNode(type, e, metaData)/createNodeByPosition(type, position, metaData)在画布上创建节点createTool(e, schemaData)/createToolByPosition(position, schemaData)创建工具调用节点toolInvokeNodeStateonChange(callback)画布数据变更监听含校验信息自动清理逻辑getNodeConfigs()获取所有节点的最新配置数据validate(validateInfo, refresh)校验所有节点数据是否合法支持传入历史校验信息与刷新回调readOnly()将流程切换为只读模式禁用节点、禁止移动与分支编辑scrollToShape(shapeId)将画布中心平移到指定节点onModelSelect/onCreateButtonClick/onImportButtonClick/onKnowledgeBaseSelect/onPluginSelect/onToolSelect/onLoopSelect/onParallelSelect/onKnowledgeSearchArgsSelect/onAddInputParam/onEditInputParam/onFormSelect/listen(event, listener)各类外部选择/事件回调挂载destroy()销毁流程实例MultiConversation多会话列表组件用于显示和选择多个会话。属性conversations: 会话列表数据onSelectConversation: 选择会话时的回调函数selectedConversationId: 当前选中的会话IDMultiConversationContent会话内容组件用于显示选中会话的详细内容。属性conversation: 会话对象数据createGraphOperator创建图形操作器的函数用于管理图形数据和操作。它是 agent-flow 中最值得深入的数据层 API下文单独展开。createGraphOperator 源码级解析createGraphOperator(graphString)的实现位于 agent-flow/src/data/GraphOperator.js。它接收一个画布 JSON 字符串内部解析graph.pages[0].shapes返回一个纯数据操纵器核心 API 如下getConfig(keys)按「节点 ID 参数名路径」读取配置。内部先找到节点再依据节点类型定位入参来源——开始节点取flowMeta.inputParams结束节点取flowMeta.callback.converter.entity.inputParams其余节点取flowMeta.jober.converter.entity.inputParamsGraphOperator.js。最终通过configToStruct将原始配置转换为结构体。update(keys, updates)按路径修改配置GraphOperator.js。关键行为若最后一层参数不存在则自动创建新配置项生成uuid类型根据updates自动推导为Array/Object/String/Number/Boolean见 GraphOperator.js对象类型更新会逐字段 diff字段缺失则补齐字段from为Reference类型时跳过不修改避免覆盖用户引用其余递归更新GraphOperator.js。getGraph()将内部画布对象序列化回 JSON 字符串。getFormsToValidateInfo()遍历所有节点对每一类需要特殊校验的节点调用ShapeDataValidationProcessor(shape).extractValidationInfo()提取待校验信息并按节点类型分组返回{type, nodeInfos: [{nodeId, nodeName, configs}]}GraphOperator.js。这是「导入应用后无需加载流程即可提取校验信息」的入口。getStartNodeInputParams()获取画布中开始节点的全部入参信息。getShapeIdsByType(type)按节点类型返回对应节点 ID 列表。节点体系与运行机制节点类型与画布限制jadeFlowGraphagent-flow/src/flow/jadeFlowGraph.js在初始化时注册了全部节点插件覆盖开始、结束、大模型llm、数据检索retrieval、知识检索、人工检查、FIT 调用、工具调用、条件分支、代码、HTTP、文本提取、问题优化、变量聚合、文本拼接、变量更新、循环、并行、智能表单、笔记、回复、文生图、HuggingFace 等。画布级限制也在该文件与 jadeFlowPage.js 中定义每种类型节点上限 19 个sameTypeNodeNumLimit画布总节点上限 99 个allNodeNumLimit开始节点全局唯一创建第二个会直接抛错节点 ID 统一以jade前缀开头由initJadeId保证jadeFlowPage.js节点重名时自动追加_1、_2等序号generateNodeNamejadeFlowPage.js。试运行状态机节点试运行由 runners.js 中的三类 runner 驱动standardRunner常规节点。启动时置为UN_RUNNING并禁用refreshRun(dataList)根据后端返回的{nodeId, status}逐节点刷新状态——有数据则设置运行状态并写入运行报告无数据且所有前驱节点均SUCCESS时置为RUNNINGresetRun清空输出/输入/成本并恢复可编辑runners.js。conditionRunner条件节点专用在标准 runner 基础上额外控制分支禁用runners.js。inactiveNodeRunner游离节点不可达节点专用仅做禁用/恢复不参与状态流转runners.js。节点状态常量定义在 agent-flow/src/common/Consts.jsRUNNING、ERROR、SUCCESS(ARCHIVED)、DEFAULT、UN_RUNNING、TERMINATED。状态变更通过 statusManager.js 以 Proxy 拦截方式统一收集并在微任务中批量刷新节点 UI。流程校验page.validate()jadeFlowPage.js执行完整的流程合法性校验开始节点必须存在且唯一从开始节点做 BFS 遍历计算可达节点集合节点总数不得少于 3 个即至少开始 结束 一个业务节点对所有jadeNode并发执行节点级validate(linkNodeSet)失败节点onError()标红汇总所有errorFields后整体reject供上层展示。画布数据校验与导入校验针对「应用导入后依赖的插件、模型、知识库、表单等信息需要查询后端接口确认」的场景agent-flow 提供了不依赖流程加载的校验信息提取能力设计文档agent-flow/docs/features/shape-data-validation/index.md前端拿到 graph 后调用createGraphOperator(graph).getFormsToValidateInfo()或agent.validate提取需要校验的信息覆盖知识检索-知识库、大模型-模型/插件、插件节点、智能表单-表单、结束节点-表单前端将提取信息发送给后端接口做真实性校验右侧浮窗展示校验结果失败项高亮进入编排页面后含失败项的节点以红框包裹失焦校验 / 页面级校验触发用户修改失败项后对应校验项自动移除节点红框恢复为蓝色点击浮窗中的节点可将画布中心定位到该节点scrollToShape。提取与有效性判定由 ShapeDataValidationProcessor.js 按节点类型分发实现endNodeEnd、huggingFaceNodeState、knowledgeRetrievalNodeState、llmNodeState、manualCheckNodeState、retrievalNodeState、toolInvokeNodeState其余走默认空实现。validate(validateInfo, refresh)接口改造后支持传入既有校验信息并通过递归 Proxy 监听其变化以驱动前端刷新jadeFlowEntry.jsxonChange回调则会在数据变更时自动剔除已失效的校验项jadeFlowEntry.jsx。开发与构建在 agent-flow 目录下执行 README 提供的命令# 安装依赖 npm install # 启动开发服务器 npm run dev # 构建生产版本产物输出到 build/生成 agent-flow.js 与 agent-flow.umd.cjs npm run build # 预览生产版本 npm run preview此外package.json还提供了npm run linteslint 全量检查--max-warnings 0用于代码规范校验。仓库内的 App.jsx 自带一套完整的交互演示validate / 调试 / reset / 创建各类节点 / 代码抽屉可结合npm run dev直接体验 agent-flow 的完整能力。许可证与版权fit-elsa/agent-flow遵循 MIT License版权归属华为技术有限公司ModelEngine 项目的一部分详见 agent-flow/README.md 及 License.txt。小结fit-elsa/agent-flow通过将fit-elsa/elsa的画布能力封装为 React 组件与命令式代理屏蔽了底层图形引擎的复杂度同时以 Ant Design 表单与树组件为基座落地了表单实时校验、节点上下文观察、导入数据合法性校验等大模型应用编排的关键能力。无论是嵌入完整的流程编排器JadeFlow还是仅操作画布数据createGraphOperator又或是复用多会话配置组件开发者都能在宿主 React 工程中快速获得一套可扩展的 Agent 流程编排前端方案。赞分享人工智能大模型AI 应用低代码后端前端流程编排RAG【免费下载链接】app-platformAppPlatform 是一个前沿的大模型应用工程旨在通过集成的声明式编程和低代码配置工具简化和优化大模型的训练与推理应用的开发过程。本工程为软件工程师和产品经理提供一个强大的、可扩展的环境以支持从概念到部署的全流程 AI 应用开发。项目地址https://gitcode.com/ModelEngine/app-platform点击查看免费下载相关推荐Lobe UI专为AIGC应用打造的高性能React组件库Lobe UI专为AIGC应用打造的高性能React组件库 在人工智能生成内容AIGC技术快速发展的今天开发者们迫切需要一套既美观又实用的UI组件库来构前端UI组件Elsa Workflows 核心库中的 WorkflowBuilder 使用详解Elsa Workflows 核心库中的 WorkflowBuilder 使用详解 概述 在 Elsa Workflows 工作流引擎中WorkflowBui后端工作流自动化流程编排低代码Elsa Workflows 优雅停机核心协议IDrainOrchestrator 排空编排器深度解析Elsa Workflows 优雅停机核心协议IDrainOrchestrator 排空编排器深度解析 本文围绕 specs/002 graceful shu后端工作流自动化流程编排低代码上一篇Easy-Vibe 计算机系统全景指南从按下电源键到浏览器渲染出网页的完整链路下一篇Pyroscope Helm Chart 部署指南单二进制与微服务架构的 Kubernetes 落地实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考