我学习到的AG-UI的功能：全面的交互支持

前端工作日常2026-01-14 10:52

AG-UI提供了智能体和应用交互所需的几乎所有功能：

1. 流式聊天

bash 复制代码

{
  type: "message",
  role: "assistant",
  content: "正在为您查找...",
  streaming: true
}

2. 状态同步

css 复制代码

{
  type: "state_sync",
  state: {
    searchQuery: "中餐厅",
    results: [...]
  }
}

3. 生成式UI

bash 复制代码

{
  type: "generative_ui",
  component: "RestaurantCard",
  props: {...}
}

4. 工具调用

matlab 复制代码

{
  type: "tool_call",
  tool: "search_restaurants",
  arguments: {...}
}

5. 前端工具

bash 复制代码

{
  type: "frontend_action",
  action: "open_map",
  params: {...}
}

6. 人机协作（HITL）

bash 复制代码

{
  type: "interrupt",
  reason: "需要用户确认",
  options: [...]
}

7. 思考步骤

bash 复制代码

{
  type: "thinking",
  content: "正在分析用户需求..."
}

8. 多模态支持

less 复制代码

{
  type: "message",
  content: "这是餐厅照片",
  attachments: [{
    type: "image",
    url: "..."
  }]
}

9. 集成方式

ini 复制代码

# 使用LangGraph中间件
from copilotkit import CopilotKitSDK
 
sdk = CopilotKitSDK(
    agents=[my_langgraph_agent]
)

AG-UI可以传输A2UI消息

css 复制代码

// AG-UI事件中包含A2UI消息
{
  type: "generative_ui",
  format: "a2ui",
  content: {
    surfaceUpdate: {
      components: [...]
    }
  }
}