《AI Agent 场景应用 - ai draw.io》第4-4节：AI+用户+DrawIO，交互式画图

作者：小傅哥
博客：https://bugstack.cn (opens new window)
视频：待更新

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

一、本章诉求

增强服务端 ai agent 智能体配置，以分析，绘制，检查的流程处理 draw.io 的图的制作，如果用户信息不准确的时候，则返回给前端让用户补全信息。

此外，对于前端的使用也做一些优化处理，包括；增加对话列表页、保存用户绘图信息到浏览器、交互式完成绘图操作、提供案例绘图、携带历史绘图等。

二、流程设计

如图，AI 交互式绘图流程设计；

• 首先，第一个改造点是服务端的智能体流程配置，让 ai agent 对用户的请求进行分析、绘制、检查，如果用户提供的信息不全则让用户继续补充，如果全面则可以直接绘制。那么这个时候，就要给前端返回一个 json 结构，并按照不同的类型返回数据。
• 之后，因为服务端智能体返回的不再是一个 draw.io 的 xml，所以要对 agent 智能体返回的结果，进行序列化成对象，再返回给前端。前端拿到结果后要对不同的类型的结果，反馈给用户（user）、渲染到 draw.io 页面（xml）。
• 此外，除了结果的渲染，对前端的对话操作，增加一个历史记录页，保存 draw.io 的绘图内容到浏览器里。这样刷新页面也可以看到历史的画图。
• 注意，你还可以再此基础上，增加更多的功能。如，学习了星球里的小型支付，那么可以把扫码登录、支付购买额度，对接进来。也可以把大营销的积分，兑换，抽奖对接进来。这些内容，都是可以衔接起来的。