AG‑UI + n8n Demo

AG‑UI 交互区

n8n / Mock AG‑UI Renderer

点击触发典型工作流（前端事件 → n8n Webhook → 返回 AG‑UI JSON → 自动渲染）

n8n Webhook

使用 Mock 后端（取消勾选以调用 n8n）

建议将 n8n 的 Webhook 节点 设为 POST 并返回 AG‑UI JSON（见下方协议说明）。

说明：每个返回对象都应包含 type 字段（如 card/table/progress/chart/actions），详见示例。

约定常见组件结构（最小子集），后端返回这些 JSON 即可被前端渲染。

card: { type, title, subtitle?, body: [text|table|badge|progress|chart|list], actions? }
table: { type:"table", columns:[...], data:[[...]] }
text: { type:"text", value:"..." }
badge: { type:"badge", value:"在线"/"异常", tone:"ok|warn|err" }
progress: { type:"progress", value:0-100 }
chart: { type:"chart", kind:"bar", labels:[...], values:[...] }
actions: { type:"actions", items:[{label,action,payload?}] }

返回可以是 Object 或 Object[]。数组会顺序渲染多个组件。