拖拉拽编排数据存储

Cactus li2025年10月19日...大约 4 分钟

一、介绍

通过 Flowgram.ai 框架，实现项目中 AI Agent 的拖拉拽编排能力，以增强用户的易用性。

这一部分的拖拉拽功能主要用于串联 AI Agent 所需的组件，包括 client、prompt、advisor 和 model（API）。通过拖拉拽的方式，替代了 AI 客户端配置（ai_client_config）中需要手动维护的数据关系链。

本节将首先完成拖拉拽页面的搭建以及数据存储的处理。对于后端开发人员而言，不必深入学习前端代码，能够顺利使用该功能即可。在面试中，通常更看重项目的完整性，而不会要求后端开发人员精通前端技术。因此，如果你不熟悉前端代码，不必过于担心。

二、实现效果

如图，是通过拖拉拽实现的 Ai Agent 编排效果；

在创建过程中，Agent 表示用户本次新建的智能体。该智能体所需的 Client，以及 Client 所依赖的 Advisor、Prompt、Model、MCP 等组件，可以通过前端页面的拖拽方式进行可视化编排与连接。
这些节点所需的数据均由服务端接口提供。例如，Client 节点通过接口获取可用的客户端数据，Model 节点获取模型信息，而后续关联的 MCP 工具则可根据需要自由组合，实现灵活配置。

三、工程实现

1. 前端

在前端页面中，有一个拖拽后的保存按钮，点击后将输出一个 JSON 格式的打印。这是原本由 flowgram.ai。您也可以按照官网的教程进行配置，并体验该功能。
在这里，我们需要分析整个配置过程中，后端需要提供哪些支持能力。这些能力包括：拖拽数据的存储接口，以及各个节点从服务端拉取数据的接口，以便前端进行渲染展示和配置选择。

1.1 工程能力介绍

这部分都是前端内容，如果前端能力不是太好，可以使用 aicoding 工具来实现。

1.2 JSON 格式数据

点击保存后，对应的 JSON 数据。这套数据就可以解析存储。

1.2 节点接口演示（model）

在 nodes 部分，您可以根据自己的需求添加或调整拖拽的节点。
这些节点中，除了像 agent 这样新创建的节点外，model、prompt、tool_mcp、advisor 和 client 等节点，都是通过服务端接口拉取的数据，之后由前端页面根据用户选择进行使用即可。

2. 库表（设计）

结合前端页面的拖拽需求，为了实现节点数据的保存，本节新增了一张数据库表用于存储相关数据。
注意：在学习和测试前，请务必导入本节的最新数据库表。

3. 后端（接口）

本次需要实现的后端接口均位于 trigger 下的 admin 目录中，主要涉及剩余的 CRUD 操作。
由于功能较为简单，无需进行复杂的数据转换，因此我们在此采用了通过 trigger 引入基础设施层（infrastructure），直接进行数据库操作。
具体的接口细节，可以参考项目代码。

3.1 拖拉拽存储


/**
 * 保存拖拉拽流程图配置
 *
 * @param request 配置请求参数
 * @return 保存结果
 */
Response<String> saveDrawConfig(AiAgentDrawConfigRequestDTO request);

在 AiAgentDrawAdminController 中，新增了 saveDrawConfig 接口方法，用于前端保存数据。
该接口方法会解析 JSON 结构，并分别存储 Agent 和链路关系数据。

3.2 节点接口演示（model）

@Override
@GetMapping("/query-enabled")
public Response<List<AiClientModelResponseDTO>> queryEnabledAiClientModels() {
    try {
        log.info("查询所有启用的AI客户端模型配置请求");

        List<AiClientModel> aiClientModels = aiClientModelDao.queryEnabledModels();

        // PO转DTO
        List<AiClientModelResponseDTO> responseDTOs = aiClientModels.stream()
                .map(this::convertToAiClientModelResponseDTO)
                .collect(Collectors.toList());

        return Response.<List<AiClientModelResponseDTO>>builder()
                .code(ResponseCode.SUCCESS.getCode())
                .info(ResponseCode.SUCCESS.getInfo())
                .data(responseDTOs)
                .build();
    } catch (Exception e) {
        log.error("查询所有启用的AI客户端模型配置失败", e);
        return Response.<List<AiClientModelResponseDTO>>builder()
                .code(ResponseCode.UN_ERROR.getCode())
                .info(ResponseCode.UN_ERROR.getInfo())
                .data(null)
                .build();
    }
}

在 AiClientModelAdminController 接口服务中，提供了查询可用客户端模型的接口，用于前端通过该接口获取数据并进行渲染。

四、测试验证

注意：在测试之前，请将本节新增的数据库表导入到你的数据库中。

启动后端服务：ai-agent-station-study

启动前端服务：ai-agent-station-study-front