前言
在构建 AI Agent 框架的过程中，基础节点的实现与 gRPC 服务的暴露只是第一步。手动编辑文本配置 Workflow 不仅效率低下，且容易出错。为了提升开发体验与运维效率，我们需要一个可视化的 Web UI 来自动生成和管理 Workflow。
本文将详细介绍如何基于 Rust 的 egui 库，从零开始设计并实现一个支持 Agent/Workflow 的在线编辑器，涵盖界面设计、插件系统架构及核心功能实现。
竞品分析与设计目标
在设计之前，我们分析了现有的主流工具，以明确我们的差异化优势。
Dify 的 UI
Dify 提供了丰富的功能节点，支持多种模型和工具的集成。其优点在于能够打开单个节点的详细内容，并提供 Debug 能力，让用户看到执行细节。但缺点是只能一次查看一个节点的详情，难以把握整体流程。
Coze 的 UI
Coze 的界面交互更加丝滑，支持在编辑页直接查看节点细节，Debug 信息也绑定在节点上。然而，当节点数量增多时，操作难度显著增加，视觉负担较重。
ComfyUI (Stable Diffusion)
ComfyUI 采用了更自由的节点设计，变量间相互链接而非单纯的流转。这种模式灵活性极高，但也带来了维护困难的问题，节点多了之后极难梳理逻辑。
设计目标
综合上述分析，本项目的 UI 设计遵循以下原则：
- 全局视图：能够清晰看到整体节点的流转关系，同时每个界面可以单独打开或关闭（参考 Dify）。
- 调试能力：必须提供 Debug 功能，最好像 Coze 一样直接绑定到节点上，实时反馈执行状态。
- 开放定义：节点的界面设计采用开放式结构，允许用户随意定义输入输出参数及 UI 组件类型（参考 ComfyUI）。
功能预览与操作指南
服务启动后，主要包含以下几个核心区域：
- 顶边控制栏：包含 Project、Setting、About 菜单。点击 Project 会在左侧生成控制界面，用于加载项目的 Service 节点。
- 编辑窗口：
- FlowChart、LLM Script、Workflow 均为具体的服务节点。
- 红色 Clean：清理所有已生成的节点。
- 红色 Reset：重置整个界面状态。
- 绿色 Save：保存配置，默认 30 秒自动保存，时间可在 Project 界面调整。
- 绿色 Debug：执行一次流程调试。
- 右侧节点列表：展示所有可用节点，可在此打开/关闭节点视图或删除节点。
- 底部日志区：显示运行日志，支持展开查看详情。
此外，提供两个关键视图：
- Work-flow-view：查看节点间的流转关系图。
- Plan-text-view：查看执行计划，支持下载所有生成的节点配置，或上传节点配置（会覆盖当前配置）。
窗口设计与数据结构
窗口的结构目前固定为五部分，未来可扩展。每个节点包含以下元数据：
- 节点编号与描述
- Service 类型
- Input（输入参数结构）
- Output（输出参数结构）
- Goto（向哪些节点流转）
- Debug（调试信息）
插件配置示例
所有的视图配置都在 webui/server/plugin 目录下。当点击 Project -> LOAD 按钮时，系统会默认加载该目录下的全部配置。
以下是一个 OpenAI LLM 节点的 JSON 配置示例，展示了如何通过 Schema 定义 UI 控件：
