AGUI 与 n8n 结合的调研与实践：列举使用场景AGUI 与 n8n 结合的调研与实践：列举使用场景 AGUI 协议

AGUI 与 n8n 结合的调研与实践：列举使用场景

AGUI 协议可以与 n8n 工作流引擎的深度融合应用，结合大语言模型（LLM）的智能理解能力，打造了一套完整的"自然语言输入 → 动态界面生成 → 自动化任务执行"的智能交互系统。

⚡ 总体架构：AGUI + LLM + n8n 三层融合

[用户自然语言输入]
     ↓
[LLM 解析意图 → 生成 AGUI JSON 卡片]
     ↓
[AGUI 前端渲染器呈现 UI 表单]
     ↓
[用户提交结构化数据 → POST 到 n8n Webhook]
     ↓
[n8n 流程接管执行任务 + 返回 AGUI 卡片反馈]

架构价值：

AGUI 提供标准化 UI 协议，适合与 Agent 系统融合
n8n 提供灵活流程编排、集成外部系统能力
LLM 提供自然语言转结构 UI 的“意图驱动器”

一、10 大关键问题（详细拆解 + LLM 支持）

1. AGUI 协议的 UI 结构标准是什么？

📋 说明

AGUI（Agent GUI）是一种 JSON 结构的 UI 协议，旨在让语言模型生成结构化界面卡片，以实现 AI 与人之间的交互。

⭐ 核心结构元素：

type: 卡片类型，如 card, form, text, table, button, progress
title: 卡片标题
body: 组成 UI 主体的组件数组
fields: 表单字段定义（含 name, label, type, options, required 等）
actions: 可触发的按钮数组

📝 示例结构：

{
  "type": "card",
  "title": "创建项目",
  "body": [
    {
      "type": "form",
      "fields": [
        { "name": "project_name", "label": "项目名称", "type": "text" },
        { "name": "deadline", "label": "截止时间", "type": "date" }
      ],
      "actions": [
        { "type": "submit", "label": "提交", "action": "create_project" }
      ]
    }
  ]
}

🤖 LLM 联动点

LLM 可基于用户意图自动生成符合 AGUI 协议的 JSON 卡片
可设计 Prompt 模板提升输出一致性

2. n8n 如何生成符合 AGUI 协议的响应结构？

📋 说明

n8n 中的 Function 或 HTTP Response 节点可以生成 AGUI JSON 卡片，并返回给前端展示。

💻 示例 Function 节点输出：

return [
  {
    json: {
      type: 'card',
      title: '提交成功',
      body: [
        { type: 'text', value: '我们已收到您的请求，将尽快处理。' }
      ]
    }
  }
];

🔧 实践建议：

使用模板引擎拼装 AGUI JSON
可将卡片结构存在环境变量或 Redis 缓存中

🤖 LLM 联动点

由 LLM 生成卡片模板，n8n 按需填充字段

3. 如何在 AGUI 中绑定组件触发 n8n Webhook？

📋 说明

AGUI 的 button 和 form 组件中的 action 字段可指定操作名，前端点击后会通过 onEvent 上报该事件。

示例：

{
  "type": "button",
  "label": "提交工单",
  "action": "submit_ticket"
}

点击后前端发出的事件结构：

{
  "action": "submit_ticket",
  "inputs": { "device": "打印机", "desc": "卡纸" },
  "userId": "user-123"
}

n8n 处理方法：

使用 Webhook 节点接收该结构
使用 Switch 节点根据 action 值路由到不同流程

🤖 LLM 联动点

根据意图生成合适的 action 名称（建议为动词形式，如 apply_gpu, start_backup）

4. AGUI 表单如何提交结构化数据给 n8n？

📋 说明

AGUI 表单支持字段输入，通过用户填写数据并点击"提交"后，以 inputs 形式发送至后端。

🔗 数据结构（提交示例）

{
  "action": "create_project",
  "inputs": {
    "name": "AI中台",
    "owner": "张三",
    "deadline": "2025-09-01"
  },
  "sessionId": "xyz123"
}

🤖 LLM 联动点

自动识别所需字段
补全字段类型、label、是否必填
动态生成 placeholder 说明

⚙️ n8n 处理方式

使用 Webhook 节点接收 JSON 请求
使用 Set 节点提取 $json.inputs.xxx
写入数据库 / 发出通知 / 触发后续流程

5. 如何实现基于用户选择的动态流程交互？

📋 说明

根据用户在表单或按钮中的选择，n8n 可以返回不同的卡片结构，实现动态对话流程。

示例流程

表单提交后判断字段值，如"是否加急"：

if ($json.inputs.urgent === true) {
  return urgentConfirmCard;
} else {
  return normalConfirmCard;
}

🤖 LLM 联动点

根据历史输入推断后续所需卡片
自动生成判断逻辑模板

🧠 多轮交互技巧

每个卡片输出包含 sessionId 或 conversationId
n8n 保存状态上下文，维持连续对话体验

6. 如何展示任务状态（loading/进度/结果）？

📋 说明

AGUI 支持 progress 类型与 text 状态描述，可模拟 loading、执行中、完成等反馈。

示例：

{
  "type": "card",
  "title": "任务执行中",
  "body": [
    { "type": "progress", "value": 40 },
    { "type": "text", "value": "预计还需 1 分钟" }
  ]
}

7. 如何处理用户身份、权限和上下文？

📋 说明

每次 AGUI 提交事件应包含用户 ID、Token、会话 ID，n8n 后台进行校验。

示例结构：

{
  "userId": "user-001",
  "token": "xxx",
  "action": "get_tasks"
}

LLM 联动：

为不同角色生成不同视图（如管理员与普通用户）
根据上下文理解并定制输出卡片结构

🔒 安全建议

使用 JWT Token 验签
限定 action 权限（通过配置 ACL）

8. 如何将 AGUI 与 AI Agent（LLM）结合，实现自动 UI 推理？

📋 说明

LLM 接收自然语言指令后，直接输出符合 AGUI 协议的结构化卡片，实现"意图 → UI"自动对话。

Prompt 示例：

你是一个 UI 设计助手。
根据用户指令"我要申请一个数据库"，请生成 AGUI 卡片 JSON，包含表单字段：数据库类型、用途、申请人。

输出结构：

{
  "type": "card",
  "title": "申请数据库资源",
  "body": [
    {
      "type": "form",
      "fields": [
        { "name": "db_type", "type": "select", "label": "类型", "options": ["MySQL", "PostgreSQL"] },
        { "name": "reason", "type": "textarea", "label": "用途" }
      ],
      "actions": [
        { "type": "submit", "label": "提交申请", "action": "apply_db" }
      ]
    }
  ]
}

9. 如何嵌入 AGUI 卡片至系统并联动 n8n？

📋 说明

AGUI 提供前端渲染器（React/Vue），可集成至 IM、SaaS 平台、企业门户等系统中。

嵌入形式：

iframe 加载 AGUI 渲染器
在应用中集成 React/Vue 组件

事件触发：

<AguiRenderer
  data={cardJson}
  onEvent={(event) => fetch('/webhook/n8n', { method: 'POST', body: JSON.stringify(event) })}
/>

10. 如何处理错误提示、异常捕获和用户反馈？

📋 说明

n8n 支持流程错误捕获，通过 Catch 节点或默认路径发送"错误卡片"回 AGUI。

示例错误卡片：

{
  "type": "card",
  "title": "出错了",
  "body": [
    { "type": "text", "value": "数据库连接失败，请稍后重试。" },
    { "type": "button", "label": "重试", "action": "retry_operation" }
  ]
}

📚 使用场景示例

场景一：AI 驱动的 GPU 资源申请系统

背景

开发人员或数据科学家希望通过自然语言申请 GPU 资源（如 A100 服务器），AI 助手将根据请求生成表单，用户填写信息并触发 n8n 执行自动化审批流程。

交互流程

用户输入：我需要一台 A100 服务器跑训练，能帮我申请吗？
LLM 生成 AGUI 表单卡片：

{
  "type": "card",
  "title": "申请 GPU 资源",
  "body": [
    {
      "type": "form",
      "fields": [
        { "name": "gpu_type", "label": "GPU 类型", "type": "select", "options": ["A100", "V100"] },
        { "name": "duration", "label": "申请时长（小时）", "type": "number" },
        { "name": "reason", "label": "用途说明", "type": "textarea" }
      ],
      "actions": [
        { "type": "submit", "label": "提交申请", "action": "apply_gpu" }
      ]
    }
  ]
}

用户填写表单并点击提交
AGUI 上报结构数据至 n8n Webhook
n8n 执行如下流程：
- 判断是否为高优先级任务
- 通知审批人
- 自动创建资源记录表
- 将结果以卡片形式返回：审批中 / 成功 / 拒绝

技术亮点

LLM 根据自然语言动态生成字段
AGUI 渲染卡片统一界面体验
n8n 实现流程审批、异步状态轮询与反馈

场景二：IT 报修流程自动化

背景

企业员工可通过 IM 或 Portal 向 AI 助手提交报修工单，系统自动采集信息并生成报修记录，指派维修人。

流程概述

用户输入：我电脑蓝屏了，帮我报修
LLM 解析问题，生成表单卡片：

{
  "type": "card",
  "title": "填写报修单",
  "body": [
    {
      "type": "form",
      "fields": [
        { "name": "device", "label": "设备名称", "type": "text" },
        { "name": "issue", "label": "故障描述", "type": "textarea" }
      ],
      "actions": [
        { "type": "submit", "label": "提交报修", "action": "submit_repair" }
      ]
    }
  ]
}

用户填写信息，点击“提交报修”
n8n 接收数据后执行：
- 写入报修数据库
- 分配维修人（如值班轮值）
- 给用户返回工单编号和处理状态卡片

优势

无需固定表单入口，LLM 实时生成交互卡片
用户体验更接近“对话式服务台”
后台可自由定义 n8n 任务执行策略

场景三：项目协同任务创建与进度反馈

背景

产品经理或项目负责人希望通过自然语言快速发起协作任务、指定参与者，并能周期性收到任务进展卡片。此流程结合 AGUI 表单生成、n8n 任务拆解与 LLM 状态追踪，适用于需求管理、跨部门协同等。

操作流程

用户输入：我想让设计、前端、测试各认领任务，三天后一起同步进度。
LLM 输出任务拆解并生成表单：

{
  "type": "card",
  "title": "创建协作任务",
  "body": [
    {
      "type": "form",
      "fields": [
        { "name": "task_title", "label": "任务标题", "type": "text" },
        { "name": "design_owner", "label": "设计负责人", "type": "user" },
        { "name": "frontend_owner", "label": "前端负责人", "type": "user" },
        { "name": "qa_owner", "label": "测试负责人", "type": "user" },
        { "name": "sync_date", "label": "进度同步时间", "type": "date" }
      ],
      "actions": [
        { "type": "submit", "label": "创建任务", "action": "create_collab_task" }
      ]
    }
  ]
}

用户填写人员与任务，点击“创建任务”
n8n 拆分任务项：为每个负责人发出 AGUI 卡片通知 + 任务认领请求
到达“sync_date”当天，n8n 定时触发：
- 收集进度汇报（通过 AGUI 表单）
- 汇总为卡片返回给发起人

系统亮点

LLM 可从自然语言中推断多任务结构
n8n 实现自动任务分配、协同推进
AGUI 为多角色提供统一反馈界面（每人看到不同字段）

✅ 总结

以上的几个说明，可以很方便构建一个以 LLM 为引擎、AGUI 为前端、n8n 为执行器的完整智能自动化系统架构：

用户通过自然语言发起请求
LLM 将请求解析为结构化 UI 卡片（AGUI）
用户交互填表 → 提交 → n8n 执行自动化任务
系统返回卡片反馈，完成闭环

未来方向：

将 AGUI 与 RAG、搜索增强、知识库等结合
构建多 Agent 协作的 UI 流程图系统
生成式 UI 与流程图自动编排一体化

AGUI 与 n8n 结合的调研与实践：列举使用场景