《Ai Agent》第3-19节：拖拉拽编排数据存储

作者：小傅哥
博客：https://bugstack.cn (opens new window)
视频：https://t.zsxq.com/oxIZg (opens new window)

沉淀、分享、成长，让自己和他人都能有所收获！😄

一、本章诉求

通过 flowgram.ai (opens new window) 框架，实现项目中 Ai Agent 拖拉拽编排能力，增强使用的易用性。

这部分拖拉拽主要完成的就是一个 ai agent 所需的，client、prompt、advisor、model（api）的串联使用。通过拖拉拽方式替代 ai_client_config 中需要手动维护的数据关系链。

本节我们先来完成拖拉拽的页面搭建和数据存储处理。提示，对于后端开发人员，不非得学习前端代码，只要能用起来就可以。面试中往往主要考察项目完整性，但不会对后端人员必须会写前端。所以，如果你不会前端代码，也不用太担心。

二、实现效果

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

• 创建过程中，Agent 是用户本次新创建的智能体，这个智能体所需用到的Client、以及 Client 所需的 Advisor、Prompt、Model、MCP 则可以通过拖拉拽的方式进行串联编排。
• 对于这些节点所拉取的数据，则是从服务端接口进行获取的。如，Client 客户端获取可用数据，Model 获取模型，之后链接的 MCP 工具可以自由组合。