AG-UI + CopilotKit：构建插件化AI可视化交互前端，实现多模型协作

AG-UI + CopilotKit 结合，打造可视化、可交互的 AI 前端，支持多模型协作、插件扩展与事件驱动，助力企业快速落地智能应用。

Mark Ren
2025年8月9日
下午9:11
0 评论

过去几年，AI Copilot 应用遍地开花，从 GitHub Copilot 到 Notion AI、ChatGPT 插件系统，越来越多产品尝试将 AI 与真实业务流程结合。但在开发者端，一个关键问题逐渐凸显：前端 UI 如何实时展示 LLM 推理过程、调用的工具、文档来源、状态卡片等复杂信息？

传统的聊天 UI（如 ChatGPT 风格气泡）很难满足这些需求。于是，一套标准的“AI Copilot 前端协议” + “框架化的前端工具链”成为行业亟需的基础设施。

本文将深入介绍两个核心技术组件：

AG‑UI：一套通用的前端交互协议，定义了 LLM 与前端之间的事件和组件规范。
CopilotKit：一个基于 React 的开源前端框架，实现 AG‑UI 协议，提供丰富的交互能力与可扩展性。

通过它们，开发者可以像积木拼装一样构建出具备“工具栏 + 卡片 + 表单 + 可视化流程”的 Copilot 前端界面，让 AI 推理从“黑箱”变成“透明可控的协作过程”。

核心协议 AG‑UI 简介

AG‑UI（Agent-Generated UI）是一种专为 AI Copilot 应用设计的前端协议，核心目标是：

让 LLM（或 Agent）通过结构化数据协议，驱动前端动态生成组件，实现多轮交互、信息展示、工具调用。

其协议本质是一个 LLM 能理解和生成的组件语言，你可以理解为：

对于 LLM 来说：生成结构化 JSON，而不是纯自然语言。
对于前端来说：读取 JSON 并渲染出“卡片、按钮、表单、图表、标签”等组件。

📘 AG‑UI 核心能力

能力	示例
卡片渲染	工具调用返回信息（如“会议创建成功，时间：15:00”）
动作按钮	“重新生成”、“查看详情”、“调用 API”等操作
表单生成	动态生成输入框让用户补全信息
组件组合	一个卡片里包含表格 + 图表 + 多按钮
状态流更新	任务执行进度条、状态流切换（如“处理中 → 完成”）

📎 一个简单的 AG‑UI 示例：

{
  "type": "card",
  "title": "搜索结果",
  "body": [
    { "type": "text", "value": "共找到 12 条相关结果：" },
    {
      "type": "table",
      "columns": ["标题", "来源", "发布时间"],
      "data": [["物联网趋势", "Zedyer", "2025-08-01"]]
    }
  ],
  "actions": [
    { "type": "button", "label": "查看更多", "action": "load_more" }
  ]
}

AG‑UI 并不依赖某个模型或框架，你可以用 GPT‑4、Claude、DeepSeek、或任意支持 JSON 输出的模型实现。

CopilotKit 组件解析

CopilotKit 是一套实现 AG‑UI 协议的前端开发工具包，由 React 开发，支持服务端渲染与前端构建。它的目标是：

为 AI Agent 提供结构化、透明、可操作的前端表现层，形成“Copilot UI 组件标准库”。

🧱 核心组件：

组件名称	功能
CopilotSidebar	AI 聊天框 + 卡片区域，支持多轮回复渲染
CopilotTextarea	支持 LLM 接管输入、自动提示、引用嵌入
CopilotCard	渲染 AI 生成的动态卡片（如状态卡、调用反馈）
CopilotActions	按钮区，可绑定 LLM 返回的 action 执行逻辑
useCopilot Hook	提供事件订阅、推送、流式响应能力
CopilotLayout	响应式布局，适配插件栏、对话区、操作区等

🔗 与 LLM 的连接方式：

CopilotKit 默认支持通过 API 或 Streaming 方式与 LLM 后端（如 OpenAI、Claude、DeepSeek API）连接，开发者可在服务端根据业务逻辑将推理过程包装为 AG‑UI 结构。

AG-UI + CopilotKit 技术架构图

graph TD
    subgraph AI模型层
        direction TB
        L1["多模型编排(LangGraph / AutoGen / LangChain)"]:::aiLayer
        L2["业务知识库 & 工具集"]:::aiLayer
    end

    subgraph 协议桥接层
        direction TB
        P1["AG-UI 协议解析器"]:::bridgeLayer
        P2["事件与数据绑定模块"]:::bridgeLayer
    end

    subgraph 前端渲染层
        direction TB
        F1["CopilotKit 前端框架"]:::frontendLayer
        F2["插件系统（可视化组件、表格、图表、操作按钮）"]:::frontendLayer
        F3["交互事件监听器"]:::frontendLayer
    end

    subgraph 后端与外部服务
        direction TB
        B1["业务API / IoT平台"]:::backendLayer
        B2["数据库 / 数据仓库"]:::backendLayer
        B3["第三方服务接口"]:::backendLayer
    end

    L1 --> P1
    L2 --> P1
    P1 --> P2
    P2 --> F1
    F1 --> F2
    F2 --> F3
    F3 --> B1
    F3 --> B2
    F3 --> B3

    %% 定义样式
    classDef aiLayer fill:#f6d365,stroke:#333,stroke-width:1px,color:#000;
    classDef bridgeLayer fill:#ffb7b2,stroke:#333,stroke-width:1px,color:#000;
    classDef frontendLayer fill:#c3f0ca,stroke:#333,stroke-width:1px,color:#000;
    classDef backendLayer fill:#cde7f0,stroke:#333,stroke-width:1px,color:#000;

说明：

AI模型层：负责生成结构化的 AG-UI 协议数据，并结合业务工具输出可执行操作。
协议桥接层：解析 AI 输出的 AG-UI JSON，绑定事件与数据流。
前端渲染层：由 CopilotKit 渲染 UI 元素，并通过插件系统实现业务交互。
后端与外部服务：执行 AI 驱动的操作指令，与 IoT 平台或企业系统联动。

插件系统与事件机制

一个优秀的 AI 前端框架，不能只渲染静态卡片，还需要支持动态的工具调用和结果回传。CopilotKit 在实现 AG-UI 协议的同时，引入了插件系统（Plugin System）与事件机制（Event Bus）。

🔌 插件系统

插件本质上是前端可插拔的功能模块，与 AI Agent 约定通信协议后，可以像“应用商店”一样为 Copilot 界面动态添加能力。

常见插件类型包括：

数据源插件：连接数据库、知识库（如向量数据库）并将查询结果以 AG-UI 卡片返回。
业务插件：调用 CRM、ERP、IoT 平台 API 完成业务操作（如更新库存、调节空调温度）。
可视化插件：渲染图表、地图、流程图，便于展示 AI 分析结果。
操作插件：提供按钮、快捷操作入口，如“导出 Excel”“发送邮件”。

📌 插件通信流程示例：

sequenceDiagram
  participant User as 用户
  participant UI as CopilotKit 前端
  participant Plugin as 插件模块
  participant Agent as AI Agent
  User->>UI: 点击“生成销售报告”按钮
  UI->>Plugin: 发送插件调用事件
  Plugin->>Agent: 请求 AI 生成数据
  Agent->>Plugin: 返回分析结果
  Plugin->>UI: 渲染 AG-UI 卡片+图表

📡 事件机制

CopilotKit 内置事件总线（Event Bus），用于管理前端组件、插件与 AI Agent 之间的双向通信。

典型事件类型：

onAction：用户点击按钮触发的业务事件
onUpdate：AI 推理结果的流式更新（状态流）
onError：任务失败或超时的回调
onData：插件返回的数据更新事件

这种机制让开发者无需手动管理复杂的回调链路，而是订阅对应事件即可完成逻辑绑定。

多模型协作（LangGraph、AutoGen、LangChain）

在实际 AI Copilot 系统中，前端只是用户的交互入口，真正的推理和业务执行往往涉及多个模型、多个 Agent 的协作。

CopilotKit 与 AG-UI 协议的结合，可以无缝支持 LangGraph、AutoGen、LangChain 等多模型编排框架。

🔹 LangGraph 协作

适合构建有状态、多节点的推理工作流。
每个节点可返回一个 AG-UI 组件，如进度条、阶段性结果卡片。

🔹 AutoGen 协作

强调 Agent 与 Agent 之间的对话式任务分解。
CopilotKit 可以将多 Agent 对话过程实时可视化，让用户看到任务的分工和执行链路。

🔹 LangChain 集成

常用于工具链整合（Tool Calling）。
AI 调用工具后的结果可通过 AG-UI 卡片展示，例如调用数据库查询后生成表格+图表。

示例：多模型协作的 UI 效果

graph LR
    A[用户请求: 生成市场分析报告]:::input --> B[LangChain 调用数据分析工具]:::process
    B --> C[LangGraph 协调图表生成模型]:::process
    C --> D[AutoGen 团队撰写结论与建议]:::ai
    D --> E[AG-UI 渲染综合报告卡片 + 交互按钮]:::ui

    %% 样式定义
    classDef input fill:#fff9c4,stroke:#fbc02d,stroke-width:2px,color:#6d4c41,rounded:10px
    classDef process fill:#bbdefb,stroke:#1976d2,stroke-width:2px,color:#0d47a1,rounded:10px
    classDef ai fill:#ffe0b2,stroke:#ef6c00,stroke-width:2px,color:#e65100,rounded:10px
    classDef ui fill:#c8e6c9,stroke:#388e3c,stroke-width:2px,color:#1b5e20,rounded:10px

场景案例

为了更直观地理解 AG-UI 与 CopilotKit 的结合，我们来看几个落地场景。

1. 企业数据分析 Copilot

需求：业务人员希望快速生成销售报表，并能对数据进行交互分析。
实现：
- CopilotKit 前端集成 AG-UI 协议，用户输入分析需求。
- AI Agent 调用 LangChain 工具获取数据库数据。
- 结果通过可视化插件渲染成交额趋势图、区域分布地图，并附带导出按钮。

效果：用户无需编写 SQL，点击按钮即可获取可视化报表，AI 能根据上下文推荐下一步分析。

2. 智能运维监控台

需求：运维人员需要实时查看 IoT 设备状态，并在出现故障时快速下发控制指令。
实现：
- IoT 平台数据通过 API 接入 CopilotKit 插件系统。
- AI 负责健康状态分析，并在 AG-UI 卡片上高亮异常设备。
- 提供“一键重启”“切换备用线路”等交互按钮，通过事件机制调用后端接口。

效果：将 AI 推理与实时控制结合，形成自适应运维面板。

3. 多语言客户支持面板

需求：跨国 SaaS 平台需要为客服提供多语言 AI 辅助对话。
实现：
- 前端 CopilotKit 渲染多轮对话卡片。
- AI Agent 集成翻译模型与行业知识库。
- 提供“发送邮件”“生成工单”等快捷操作插件。

效果：AI 在后台完成多语言处理，客服在同一界面完成全流程操作。

总结

AG-UI 协议解决了 AI 输出“缺乏结构化与交互性”的问题，而 CopilotKit 则提供了前端实现与插件化扩展能力，让开发者可以快速构建可交互、可视化、可执行的 AI 前端。

核心优势：

统一协议：AI 输出与前端渲染之间的标准桥梁。
插件扩展：按需引入业务功能模块，支持快速迭代。
事件驱动：降低开发复杂度，便于维护和升级。
多模型兼容：支持 LangGraph、AutoGen、LangChain 等编排框架。

随着企业对 AI 可视化、可交互的需求提升，这套组合有望成为下一代 AI 应用前端的事实标准。

源码推荐
如果你想快速上手，可以参考以下开源资源：
AG-UI 协议：https://github.com/ag-ui协议规范与示例。
CopilotKit：https://github.com/CopilotKit提供 React/Vue 前端 SDK 及插件系统示例。
多模型编排框架：
LangGraph
AutoGen
LangChain