Skip to content Skip to footer

AG-UI 与 Agent Framework 的集成

AG-UI 是一种协议,可用于使用高级功能(如实时流式处理、状态管理和交互式 UI 组件)生成基于 Web 的 AI 代理应用程序。 代理框架 AG-UI 集成提供代理和 Web 客户端之间的无缝连接。

什么是 AG-UI?

AG-UI 是用于生成 AI 代理接口的标准化协议,可提供:

远程代理托管:将 AI 代理部署为多个客户端可访问的 Web 服务

实时流式处理:使用 Server-Sent 事件(SSE)流式处理代理响应以获取即时反馈

标准化通信:可靠代理交互的一致消息格式

会话管理:跨多个请求维护会话上下文

高级功能:人工循环审批、状态同步和自定义 UI 呈现

何时使用 AG-UI

如果需要以下条件,请考虑使用 AG-UI:

生成与 AI 代理交互的 Web 或移动应用程序

将代理以服务的形式部署,使之能够被多用户并发访问

实时流式处理代理响应以提供即时用户反馈

实施审批流程,用户在执行前确认操作

在客户端和服务器之间同步状态以获取交互式体验

基于代理工具调用呈现自定义 UI 组件

支持的功能

代理框架 AG-UI 集成支持所有 7 AG-UI 协议功能:

代理聊天:使用自动工具调用的基本流式聊天

后端工具呈现:在后端执行的工具,结果流式传输到客户端

人机交互:请求用户确认的函数审批

生成式代理 UI:异步工具用于进行长时间运行的操作,并提供进度更新

基于工具的生成 UI:基于工具调用呈现的自定义 UI 组件

共享状态:客户端和服务器之间的双向状态同步

预测状态更新:将工具参数作为乐观状态更新流式传输

使用 CopilotKit 生成代理 UI

CopilotKit 提供丰富的 UI 组件,用于基于标准 AG-UI 协议生成代理用户界面。 CopilotKit 支持流式聊天接口、前端和后端工具调用、人机循环交互、生成 UI、共享状态等。 可以在 AG-UI Dojo 示例应用程序中查看 CopilotKit 支持的各种代理 UI 方案的示例。

若要将 CopilotKit React 前端连接到代理框架 AG-UI 后端,请在 CopilotKit 运行时中将终结点注册为 HttpAgent。 这样,CopilotKit 的前端工具就可以作为 AG-UI 客户端工具流式传输,并且所有 AG-UI 功能(流式处理、审批、状态同步)都会自动工作。

CopilotKit 可帮助你专注于代理的功能,同时提供精致的用户体验,而无需重新发明轮子。

若要详细了解如何开始使用 Microsoft Agent Framework 和 CopilotKit,请参阅 copilotKit 的 Microsoft Agent Framework 集成文档。

AG-UI 与直接代理使用情况

虽然可以使用 Agent Framework 和RunRunStreamingAsync方法直接在应用程序中运行代理,但 AG-UI 提供了其他功能:

功能 / 特点

直接代理使用情况

AG-UI 集成

部署

嵌入到应用程序中

通过 HTTP 远程服务

客户端访问

单个应用程序

多个客户端(Web、移动)

流媒体

进程内异步迭代

Server-Sent 事件(SSE)

状态管理

应用程序管理

协议级状态快照

会话上下文

应用程序管理

协议管理的会话 ID

审批工作流

自定义实现

内置中间件模式

体系结构概述

AG-UI 集成使用 ASP.NET Core,并遵循基于中间件的干净体系结构:

┌─────────────────┐

│ Web Client │

│ (Browser/App) │

└────────┬────────┘

│ HTTP POST + SSE

┌─────────────────────────┐

│ ASP.NET Core │

│ MapAGUI("/", agent) │

└────────┬────────────────┘

┌─────────────────────────┐

│ AIAgent │

│ (with Middleware) │

└────────┬────────────────┘

┌─────────────────────────┐

│ IChatClient │

│ (Azure OpenAI, etc.) │

└─────────────────────────┘

关键组件

ASP.NET Core Endpoint:MapAGUI 扩展方法处理 HTTP 请求和 SSE 流式处理

AIAgent:从 IChatClient 或自定义实现创建的代理框架代理

中间件管道:用于审批、状态管理和自定义逻辑的可选中间件

协议适配器:在代理框架类型和 AG-UI 协议事件之间进行转换

Chat 客户端:Microsoft.Extensions.AI 聊天客户端(Azure OpenAI、OpenAI、Ollama 等)

代理框架如何转换为 AG-UI

了解 Agent Framework 概念如何映射到 AG-UI 有助于构建有效的集成:

代理框架概念

AG-UI 等效项

Description

AIAgent

代理端点

每个代理都成为 HTTP 端点

agent.Run()

HTTP POST 请求

客户端通过 HTTP 发送消息

agent.RunStreamingAsync()

“服务器已发送”事件

通过 SSE 流式处理响应

AgentResponseUpdate

AG-UI 事件

自动转换为协议事件

AIFunctionFactory.Create()

后端工具

在服务器上执行,结果流式传输

ApprovalRequiredAIFunction

人在环

中间件转换为审批协议

AgentSession

会话管理

ConversationId 维护上下文

ChatResponseFormat.ForJsonSchema()

状态快照

结构化输出成为状态事件

Installation

AG-UI 集成包含在 ASP.NET Core托管包中:

dotnet add package Microsoft.Agents.AI.Hosting.AGUI.AspNetCore

此包包括 AG-UI 集成所需的所有依赖项,包括 Microsoft.Extensions.AI。

后续步骤

若要开始 AG-UI 集成,

入门:生成第一个 AG-UI 服务器和客户端

后端工具渲染:向代理程序添加功能工具

人机交互:实现审批工作流

状态管理:在客户端和服务器之间同步状态

其他资源

代理框架文档

AG-UI 协议文档

Microsoft.Extensions.AI 文档

Agent Framework GitHub 存储库

AG-UI 与直接代理使用情况

虽然可以使用 Agent Framework 和runrun(..., stream=True)方法直接在应用程序中运行代理,但 AG-UI 提供了其他功能:

功能 / 特点

直接代理使用情况

AG-UI 集成

部署

嵌入到应用程序中

通过 HTTP 远程服务

客户端访问

单个应用程序

多个客户端(Web、移动)

流媒体

进程内异步迭代

Server-Sent 事件(SSE)

状态管理

应用程序管理

双向协议级同步

线程上下文

应用程序管理

协议管理的线程 ID

审批工作流

自定义实现

内置协议支持

体系结构概述

AG-UI 集成使用干净的模块化体系结构:

┌─────────────────┐

│ Web Client │

│ (Browser/App) │

└────────┬────────┘

│ HTTP POST + SSE

┌─────────────────────────┐

│ FastAPI Endpoint │

│ (add_agent_framework_ │

│ fastapi_endpoint) │

└────────┬────────────────┘

┌─────────────────────────┐

│ AgentFrameworkAgent │

│ (Protocol Wrapper) │

└────────┬────────────────┘

┌─────────────────────────┐

│ Orchestrators │

│ (Execution Flow Logic) │

└────────┬────────────────┘

┌─────────────────────────┐

│ Agent │

│ (Agent Framework) │

└────────┬────────────────┘

┌─────────────────────────┐

│ Chat Client │

│ (Azure OpenAI, etc.) │

└─────────────────────────┘

关键组件

FastAPI 终结点:处理 SSE 流式处理和请求路由的 HTTP 终结点

AgentFrameworkAgent:使 Agent Framework 代理适应 AG-UI 协议的轻型包装器

编排器:处理不同的执行流(默认、人机协作、状态管理)

事件桥:将代理框架事件转换为 AG-UI 协议事件

消息适配器:AG-UI 和 Agent Framework 消息格式之间的双向转换

确认策略:特定于域的确认消息的可扩展策略

代理框架如何转换为 AG-UI

了解 Agent Framework 概念如何映射到 AG-UI 有助于构建有效的集成:

代理框架概念

AG-UI 等效项

Description

Agent

代理端点

每个代理都成为 HTTP 端点

agent.run()

HTTP POST 请求

客户端通过 HTTP 发送消息

agent.run(..., stream=True)

“服务器已发送”事件

通过 SSE 流式处理响应

代理响应更新

AG-UI 事件

TEXT_MESSAGE_CONTENT、TOOL_CALL_START 等

函数工具 (@tool)

后端工具

在服务器上执行,结果流式传输到客户端

工具审批模式

人在环

通过协议审批请求/响应

会话历史记录

线程管理

threadId 维护跨请求的上下文

Installation

安装 AG-UI 集成包:

pip install agent-framework-ag-ui --pre

这会同时安装核心代理框架和 AG-UI 集成组件。

后续步骤

若要开始 AG-UI 集成,

入门:生成第一个 AG-UI 服务器和客户端

后端工具渲染:向代理程序添加功能工具

工作流:通过 AG-UI 公开多代理工作流

人为介入:实现审批工作流

MCP 应用兼容性:将 MCP 应用与 AG-UI 终结点配合使用

状态管理:在客户端和服务器之间同步状态

其他资源

代理框架文档

AG-UI 协议文档

AG-UI Dojo 应用 - 演示 Agent Framework 集成的示例应用程序

CopilotKit MAF 集成 - 将 CopilotKit React 前端连接到 AG-UI 后端

Agent Framework GitHub 存储库