在线咨询 400-826-1668
回到顶部
ARTICLE DETAIL

资讯详情

深耕国风建站与运营引流的一线实战洞察。

MAF快速入门(16)用户智能体交互协议AG-UI(上)

MAF快速入门(16)用户智能体交互协议AG-UI(上) 目录简介1 什么是AG-UI为什么出现AG-UI协议三大Agent协议对比2 快速开始AG-UI对话应用AG-UI ServerAG-UI Client3 小结示例源码简介大家好我是Edison。上一篇我们学习了MAF中快速调试的利器DevUI。本篇我们来了解一个用户智能体交互协议AG-UI。1 什么是AG-UIAG-UI 全称Agent–User Interaction Protocol 即 智能体-用户 交互协议这是一个开放的、基于事件的协议由 CopilotKit 团队发起用于标准化 AI Agent 与 用户界面 的实时交互。为什么出现AG-UI协议这是因为在构建AI Agent应用的界面时传统API模式面临很多问题和挑战而AG-UI则是专门为AI Agent与用户界面的交互而设计的协议其核心价值体现在实时流式响应即时展示 Agent 输出无需等待事件驱动架构细粒度的交互事件精确控制 UI状态同步机制Snapshot/Delta 模式保持 UI 与 Agent 状态一致工具调用可视化透明展示 Agent 的思考和行动过程三大Agent协议对比我们之前已经学习了MCP 和 A2A两个重要的协议了加上AG-UI它们共同组成了Agent的三大通信协议体系。不过它们的定位各有侧重并非非此即彼而是协同使用用形象的比喻来讲AG-UI 像是客服窗口用户与 Agent 之间的交互界面实时展示 Agent 的工作状态支持用户输入和反馈MCP 像是工具箱Agent 调用外部工具完成任务工具是被动的等待调用扩展 Agent 的能力边界A2A 像是同事协作多个 Agent 之间的任务分发每个 Agent 都是自主的可以互相委托和协作在实际企业场景中三大协议通常协同使用AG-UI用户通过界面与主 Agent 交互MCPAgent 内部使用 MCP 调用工具A2A复杂任务委托给专家 Agent 处理下图展示了三大协议的详细对比2 快速开始AG-UI对话应用AG-UI协议定义了清晰的架构组件包括 Server、Client 和 Agent。在MAF中提供了一个内置的AG-UI组件我们可以非常方便地创建集成AG-UI的Agent应用。接下来我们就一步一步完成一个AG-UI对话应用涉及到的Server 和 Client。AG-UI Server首先我们创建一个ASP.NET Web应用安装以下NuGet包Microsoft.Agents.AI.Hosting.AGUI.AspNetCore Microsoft.Agents.AI.OpenAI Microsoft.Extensions.AI.OpenAI然后就是整个示例的核心部分我们一块一块来说1创建应用并注册AG-UI服务// Step0. Create WebApplication builder var builder WebApplication.CreateBuilder(args); builder.Services.AddHttpClient().AddLogging(); // Step1. Register AG-UI services builder.Services.AddAGUI();2创建一个AI Agentvar app builder.Build(); // Step2. Load Configuration var config new ConfigurationBuilder() .AddJsonFile($appsettings.json, optional: false, reloadOnChange: true) .AddJsonFile($appsettings.{Environment.GetEnvironmentVariable(ASPNETCORE_ENVIRONMENT)}.json, optional: true, reloadOnChange: true) .Build(); var openAIProvider config.GetSection(OpenAI).GetOpenAIProvider(); // Step3. Create one ChatClient var chatClient new OpenAIClient( new ApiKeyCredential(openAIProvider.ApiKey), new OpenAIClientOptions { Endpoint new Uri(openAIProvider.Endpoint) }) .GetChatClient(openAIProvider.ModelId) .AsIChatClient(); // Step4. Create one AI Agent var agent chatClient.AsAIAgent( name: AGUI-Assistant, instructions: 你是一个友好的AI助手请使用中文回答用户的问题。); Console.WriteLine(✅ AI Agent 创建成功);3映射AGUI端点并启动应用​​​​​​​// Step5. Mapping AG-UI Endpoints app.MapAGUI(/, agent); Console.WriteLine(━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━); Console.WriteLine( AG-UI Server 已启动); Console.WriteLine( 端点地址: https://localhost:8443/); Console.WriteLine( 使用 CtrlC 停止服务); Console.WriteLine(━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━); app.Run();可以看到我们仅用一行代码 app.MapAGUI() 就启用了AG-UI协议So Easy!启动起来的效果如下图所示AG-UI Client首先我们创建一个控制台应用安装以下NuGet包​​​​​​​Microsoft.Agents.AI.AGUI Microsoft.Agents.AI然后我们创建AG-UI Client 和 AI Agent​​​​​​​// Load Configuration var config new ConfigurationBuilder() .AddJsonFile($appsettings.json, optional: false, reloadOnChange: true) .Build(); var openAIProvider config.GetSection(OpenAI).GetOpenAIProvider(); var serverEndpoint config.GetValuestring(AGUI_SERVER_URL) ?? https://localhost:8443; Console.WriteLine(━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━); Console.WriteLine( AG-UI 客户端已启动); Console.WriteLine($ 服务端地址: {serverEndpoint}); Console.WriteLine(━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n); // Step1. Create HTTP Client using HttpClient httpClient new() { Timeout TimeSpan.FromSeconds(60) }; // Step2. Create AG-UI Client var chatClient new AGUIChatClient(httpClient, serverEndpoint); // Step3. Create AI Agent var agent chatClient.AsAIAgent( name: agui-client, description: AG-UI Client Agent);然后准备开始对话​​​​​​​// Step4. Prepare for Conversation var session await agent.GetNewSessionAsync(); var messages new ListChatMessage() { new ChatMessage(ChatRole.System, 你是一个友好的AI助手使用中文回答用户的问题。) }; Console.WriteLine( 开始对话输入 :q 或 quit 退出\n); while (true) { Console.Write( 用户: ); string? message Console.ReadLine(); if (string.IsNullOrWhiteSpace(message)) continue; if (message is :q or quit) break; // 添加用户消息 messages.Add(new ChatMessage(ChatRole.User, message)); // 流式接收响应 Console.Write( 助手: ); await foreach (var update in agent.RunStreamingAsync(messages, session)) { foreach (AIContent content in update.Contents) { switch (content) { case TextContent textContent: Console.Write(textContent.Text); break; case UsageContent usageContent: Console.WriteLine($\n[ Tokens: {usageContent.Details.TotalTokenCount}]); break; default: Console.Write(Unknown content!); break; } } } Console.WriteLine(\n); } Console.WriteLine( 再见); Console.ReadKey();最终的调试效果如下图所示可以看到我们很容易就创建了一个用户友好的对话客户端实时的流式响应也不需要我们写过多代码实现。3 小结本文介绍了AG-UI协议的基本概念为什么会出现AG-UI协议AG-UI和MCPA2A的对比随后介绍了如何在MAF中快速开发一个基于AG-UI的对话应用。示例源码Github: https://github.com/EdisonTalk/MAFD下一篇GitHub - mzhongl524/MAFD: Microsoft Agent Framwork Demos · GitHub2026-8月更新示例​​​​​​​引入地址
返回列表