AG-UI + n8n：从事件触发到业务数据可视化的完整方案

在 AI 应用和自动化编排的融合趋势下，前端的可视化交互能力与后端的自动化工作流编排，正成为企业构建智能化系统的核心要素。

AG-UI 作为一种AI交互协议和可视化组件体系，让开发者能够快速构建具备多模态输入、实时响应、插件扩展等能力的前端；而 n8n 则是一款开源、可扩展的工作流自动化平台，支持上百种服务与API的集成，可轻松串联数据源、模型API、业务逻辑与IoT设备。

将 AG-UI 与 n8n 结合使用，可以实现从用户交互 → AI处理 → 业务执行的全链路自动化。例如：

• 用户在可视化面板中发起指令（AG-UI）
• 指令通过 WebSocket / HTTP 传递给 n8n
• n8n 执行业务工作流（如调用 OpenAI API、数据库查询、IoT设备控制）
• 结果实时返回 AG-UI 展示给用户

这种架构的价值在于：

1. 零代码快速构建：前端可直接调用 n8n 暴露的 API，业务逻辑在 n8n 中可视化编排。
2. 模型与任务解耦：AG-UI 处理 UI 层与用户输入，n8n 专注业务流程与外部系统集成。
3. 跨平台与多场景支持：无论是 Web、桌面端还是移动端，只需实现 AG-UI 协议即可对接 n8n。

核心协议 AG-UI 简介

AG-UI（Agent Graphical User Interface）是一种面向 AI 应用的前端协议标准，核心目标是让不同模型、不同Agent之间的交互具备统一的UI渲染与事件机制。

主要特性：

• 协议化组件：如对话气泡、多模态输入框、Markdown渲染区、表单、交互按钮等，均可由协议描述并动态渲染。
• 事件驱动：支持 onClick, onSubmit, onChange 等事件，将用户操作实时传给后端（此处可直接对接 n8n API Endpoint）。
• 数据流可追踪：前端 UI 组件与后端任务节点可一一映射，便于调试和链路分析。

在与 n8n 结合时，AG-UI 前端并不关心后端是调用 AI 模型、IoT设备还是外部API，它只负责用户输入和结果展示；n8n 则根据事件触发对应的工作流。

n8n 在组合架构中的角色

n8n 是一个基于节点的可视化工作流编排工具，支持多种触发方式和执行逻辑，非常适合作为 AG-UI 的后端执行引擎。

关键优势：

• 支持 AI API 集成：可直接调用 OpenAI、DeepSeek、Anthropic 等大模型API。
• 丰富的连接器：内置超过 300+ 服务节点，包括数据库、HTTP、MQTT、Slack、Google Sheets、AWS等。
• 可扩展性：支持编写自定义节点，将私有业务逻辑、算法模型或设备控制集成到工作流中。
• 多触发模式：Webhook、定时任务、MQTT订阅、文件变更、数据库事件等。

结合 AG-UI 的常见模式：

1. Webhook触发：AG-UI 将用户事件通过 HTTP POST 发送至 n8n Webhook 节点。
2. WebSocket/实时API：实现前后端实时通信，n8n 完成任务后立即推送结果。
3. MQTT（适合 IoT 场景）：AG-UI 发布指令到 MQTT Broker，n8n 订阅并执行工作流。

插件系统与事件机制

AG-UI 的强大之处在于其插件化架构与事件驱动机制。

• 插件化架构允许开发者为 UI 增加自定义组件（如 AI 绘图面板、语音输入框、地图控件等），这些组件通过统一的协议与后端通信。
• 事件机制确保每一次点击、输入、提交，都能触发相应的后端逻辑。例如，一个“生成报告”按钮点击后，可以直接触发 n8n 中的一个数据分析工作流。

当与 n8n 对接时，这种机制可以映射为：

1. AG-UI 捕获事件并发送给 n8n Webhook 节点。
2. n8n 解析事件数据，进入对应的工作流分支。
3. 执行后端逻辑（AI调用 / IoT设备指令 / 数据分析等）。
4. 将结果回传 AG-UI，通过协议描述渲染为用户可视化结果。

架构图（AG-UI + n8n 集成方案）

flowchart TB
    %% ---------- 前端 ----------
    subgraph FE["🎨 前端层"]
        UI[AG-UI 界面]:::frontend
        Evt[事件监听器]:::frontend
        UI --> Evt
    end

    %% ---------- 后端 ----------
    subgraph BE["🛠️ 后端层"]
        WH[Webhook / API 接口]:::backend
        N8N[n8n 工作流引擎]:::backend
        RES[处理结果]:::backend
        Evt --> WH --> N8N
        N8N --> RES
    end

    %% ---------- 外部服务 ----------
    subgraph EXT["🌐 外部服务与系统"]
        AIAPI["大模型 API<br/>(OpenAI, DeepSeek)"]:::external
        DEV[IoT设备<br/>/ MQTT Broker]:::external
        DB[数据库 / 业务系统]:::external
        N8N -->|AI调用| AIAPI
        N8N -->|IoT控制| DEV
        N8N -->|业务逻辑| DB
    end

    %% ---------- 返回路径 ----------
    RES --> UI

    %% ---------- 样式 ----------
    classDef frontend fill:#E6F4FF,stroke:#1677FF,color:#0B3D91,stroke-width:1.5px,rounded:10px
    classDef backend  fill:#FFF7E6,stroke:#FAAD14,color:#7C4A03,stroke-width:1.5px,rounded:10px
    classDef external fill:#E8FFEE,stroke:#52C41A,color:#124D18,stroke-width:1.5px,rounded:10px

说明：

• 前端 AG-UI 提供统一的交互界面和组件协议，适配桌面端、Web、移动端。
• n8n 作为核心编排引擎，处理 AI、IoT、数据等多方向任务。
• 双向通信：支持 Webhook 推送与实时返回，也可在长连接模式下直接更新 UI。

实战案例：智慧零售门店巡检系统

背景

一家拥有 500+ 家门店的零售集团，需要每天自动巡检POS机运行状态、广告屏播放内容、店内温湿度传感器数据。

原有流程依赖人工检查，效率低、出错率高。

方案实现（AG-UI + n8n）

1. AG-UI 前端：
   • 店长通过 Web 面板选择“开始巡检”按钮。
   • 巡检进度实时显示，包括 POS 状态、广告播放截图、传感器读数。
2. n8n 后端：
   • 接收到“开始巡检”事件，触发三个并行任务节点：
     • POS状态检测（API调用到 POS 系统）
     • 广告屏截图验证（调用摄像头 + 图像识别模型）
     • 温湿度采集（MQTT 获取传感器数据）

• 对比数据与阈值，生成巡检报告 PDF。

3. 回传结果：
   • n8n 将报告链接与异常设备清单回传到 AG-UI。
   • 前端渲染为可下载文件和高亮标记异常设备。

演示demo

demo 架构示意图

flowchart LR

  %% =============== 分层与方向 ===============
  %% 顶层用 LR：客户端 → 后端 → 业务系统；响应再回到客户端
  %% 各分区内部用 TB，使节点垂直对齐、阅读更顺
  %% =========================================

  %% ---------- Client ----------
  subgraph Client["🌐 前端（AG-UI Renderer Demo）"]
    direction TB
    UI1["操作按钮（销售报告/巡检/重启）"]:::client
    UI2["自由输入事件 JSON"]:::client
    UI3["本地渲染 AG-UI JSON"]:::client
  end

  %% ---------- Backend ----------
  subgraph Backend["🛠️ 后端逻辑"]
    direction TB
    Mock["Mock Server（内置示例数据）"]:::backend
    N8N["n8n Webhook 节点"]:::backend
    WF1["n8n 工作流：获取业务数据"]:::backend
    WF2["n8n 工作流：封装 AG-UI JSON 响应"]:::backend
  end

  %% ---------- System ----------
  subgraph System["🏭 IoT / 业务系统"]
    direction TB
    IOT["IoT 设备管理平台"]:::system
    ERP["ERP / CRM / 数据库"]:::system
  end

  %% =============== 触发与入站 ===============
  UI1 -- "事件 JSON" --> Mock
  UI1 -- "事件 JSON" --> N8N
  UI2 -- "事件 JSON" --> N8N

  %% =============== n8n 工作流与外部系统 ===============
  N8N --> WF1
  WF1 -- "查询/聚合" --> IOT
  WF1 -- "查询/聚合" --> ERP
  WF1 --> WF2

  %% =============== 返回前端渲染 ===============
  WF2 -- "AG-UI JSON" --> UI3
  Mock -- "AG-UI JSON（示例）" --> UI3

  %% =============== 样式 ===============
  classDef client  fill:#E6F4FF,stroke:#1677FF,color:#0B3D91,stroke-width:1.5px,rounded:10px
  classDef backend fill:#FFF7E6,stroke:#FAAD14,color:#7C4A03,stroke-width:1.5px,rounded:10px
  classDef system  fill:#E8FFEE,stroke:#52C41A,color:#124D18,stroke-width:1.5px,rounded:10px

多模型协作（LangGraph / AutoGen / LangChain 与 n8n 联动）

虽然 n8n 本身已经支持 API 调用，但在多模型协作（Multi-Agent / Multi-LLM）场景中，直接调用可能无法满足复杂推理、任务拆分、长对话等需求。

AG-UI 在这里可以作为 统一交互前端，而 n8n 负责 orchestrator（编排器）的角色，调用 LangGraph、AutoGen 或 LangChain 来完成多模型协作。

技术流程示例：

1. AG-UI 前端：
   • 用户输入复杂任务（如“帮我制定门店促销方案，并生成广告海报”）。
2. n8n 后端：
   • 将任务传递给 LangGraph / AutoGen，进行多 Agent 分工：
     • 策划Agent：生成促销策略
     • 设计Agent：调用 AI 绘图模型生成海报
     • 校对Agent：检查文本与设计的一致性

3. 结果汇总：
   • n8n 收集各 Agent 输出，整合为一份完整的促销方案包
4. 回传 AG-UI：
   • 前端直接渲染文本、图片和下载链接，用户可一键发布到广告屏或电商平台。

好处：

• 无缝集成：n8n 作为中间层，支持不同 AI 框架的组合调用
• 易扩展：未来可加入语音助手、IoT 控制等新 Agent

典型落地场景

总结与源码推荐

AG-UI 与 n8n 的组合，本质上是 “可视化前端 + 自动化后端” 的 AI 应用模式。

• AG-UI 负责多端交互、事件驱动和 UI 协议标准化
• n8n 则作为自动化引擎，连接 AI 模型、IoT 设备、企业系统
• 通过插件系统、Webhook 和多模型协作，可以构建出从数据采集、AI 分析到可视化展示的全链路智能化系统

推荐资源：

• 大模型企业级应用
• n8n.io 官网
• LangGraph
• AutoGen
• LangChain

如果是面向企业客户的落地，可以基于这一架构直接封装为行业解决方案，例如 [智慧零售门店 AI 运维平台](Retail Store Management Software | Multi-Store SaaS Platform) 或 AI 赋能的工业生产可视化管理平台。