目录简介1 什么是DevUI2 快速开始创建一个DevUI示例3 开启调试友好体验3.1 调试单个Agent3.2 调试一个Workflow4 注意事项5 小结示例源码简介大家好我是Edison。上一篇我们学习了MAF中快速集成A2A (Agent to Agent)。本篇我们来了解下在MAF提供的调试利器DevUI。1 什么是DevUIDevUI 是一个开箱即用的交互式 Web 调试界面无需额外开发启用后就能可视化测试、调试 AI 代理从 Agent 列表查看、工具调用验证到工作流流转全流程可视化让 AI 智能体开发从 “盲调” 变 “明调”。DevUI 允许开发者在浏览器中测试 Agent无需编写客户端代码即可与 Agent 对话。查看对话历史清晰展示 User 和 Agent 之间的消息交互。调试多 Agent 系统支持切换不同的 Agent 和 Workflow 进行测试。️零配置启动只需简单的配置即可集成到 ASP.NET Core 应用中。综上所述DevUI 就像是 Agent 的 “浏览器开发者工具”让你能够直观看到 Agent 的 “一举一动”快速调试和定位问题。画外音DevUI 即 Developer UI, its For Developers!2 快速开始创建一个DevUI示例在MAF中提供了一个内置的DevUI组件我们可以非常方便地创建集成DevUI的Agent应用。接下来我们就一步一步完成一个DevUI示例。首先我们创建一个ASP.NET Web应用安装以下NuGet包PackageReference IncludeMicrosoft.Agents.AI.OpenAI Version1.0.0-preview.260128.1 / PackageReference IncludeMicrosoft.Agents.AI.Workflows Version1.0.0-preview.260128.1 / PackageReference IncludeMicrosoft.Agents.AI.DevUI Version1.0.0-preview.260128.1 / PackageReference IncludeMicrosoft.Agents.AI.Hosting Version1.0.0-preview.260128.1 / PackageReference IncludeMicrosoft.Agents.AI.Hosting.OpenAI Version1.0.0-alpha.260128.1 / PackageReference IncludeMicrosoft.Extensions.AI.OpenAI Version10.2.0-preview.1.26063.2 /然后就是整个示例的核心部分我们一块一块来说1创建并注册ChatClientvar builder WebApplication.CreateBuilder(args); // Step0. Load Configuration var config new ConfigurationBuilder() .AddJsonFile($appsettings.json, optional: false, reloadOnChange: true) .Build(); var openAIProvider config.GetSection(OpenAI).GetOpenAIProvider(); // Step1. Register one ChatClient var chatClient new OpenAIClient( new ApiKeyCredential(openAIProvider.ApiKey), new OpenAIClientOptions { Endpoint new Uri(openAIProvider.Endpoint) }) .GetChatClient(openAIProvider.ModelId) .AsIChatClient(); builder.Services.AddChatClient(chatClient);2创建并注册一些示例Agents// Step2. Register some Agents builder.AddAIAgent(Assistant, 你是一位乐于助人的助手。回答问题简洁准确。); builder.AddAIAgent(Poet, 你是一位富有创造力的诗人。使用优美的诗篇回答所有的请求); builder.AddAIAgent(Coder, 你是一位资深的程序员。请协助用户解决编程问题并提供代码示例。);3创建并注册一个Workflow​​​​​​​// Step3. Register one Workflow var writerAgent builder.AddAIAgent(Writer, 你是一位乐于助人的助手善于回答用户提出的各种问题。); var reviewerAgent builder.AddAIAgent(Reviewer, 你是一位专业审阅者请协助审阅并评价之前的回复。); builder.AddWorkflow(TestWorkflow, (sp, key) { var aiAgents new ListIHostedAgentBuilder() { writerAgent, reviewerAgent } .Select(hab sp.GetRequiredKeyedServiceAIAgent(hab.Name)); return AgentWorkflowBuilder.BuildSequential( workflowName: key, agents: aiAgents); }).AddAsAIAgent();4注册DevUI相关服务​​​​​​​// Step4. Register DevUI related services builder.Services.AddOpenAIResponses(); builder.Services.AddOpenAIConversations();5映射DevUI相关端点​​​​​​​var app builder.Build(); // Step5. Mapping DevUI related endpoints app.MapOpenAIResponses(); app.MapOpenAIConversations(); if (app.Environment.IsDevelopment()) { app.MapDevUI(); } ...... app.Run();可以看到我们仅用一行代码 app.MapDevUI() 就启用了DevUI无需开发任何前端代码。综上所述我们创建了一些示例Agent 和 一个Workflow 作为后续演示。3 开启调试友好体验这里我们启动起来就会看到如下所示的界面整个DevUI界面氛围两部分1左边是调试区 和 展示区可以看到对话记录 和 Workflow节点状态2右边是跟踪区展示Trace 和 Event 等执行记录以便快速定位问题我们可以通过点击左上角的下拉框看到我们注册的所有Agent 和 Workflow这就意味着我们可以对所有注册的对象进行调试3.1 调试单个Agent这里我们测试Poet 和 Coder两个Agent首先是Poet我们让它作一首诗。其次是Coder我们让它写一段代码。可以看到它的输出是流式的且针对像代码这块输出做了代码块的展示总之显示地很友好看起来很舒服。3.2 调试一个Workflow这里我们测试一下注册的Workflow这是一个 Editor - Reviewer 的典型顺序工作流首先由创作者编写初稿然后由审阅者进行审阅最终输出给用户。下图展示切换到Workflow的展示可以看到它清晰地展示了工作流的节点和顺序。然后点击Run按钮即可输入启动内容随后可以看到它执行的全过程通过右边的区域可以看到每个执行步骤的过程最终整个工作流节点都变成了绿色的完成状态我们可以在右边点击执行过程看到中间输出内容 和 最终输出内容。此外如果涉及工具调用的话还可以点击 Tools 区域查看调用工具的记录实在不要太方便4 注意事项DevUI 虽好但是其本身只是用来服务开发阶段的因此建议仅在开发环境启用DevUI生产环境请关闭DevUI。如需在测试环境启用DevUI建议添加访问权限控制避免暴露敏感信息。5 小结本文介绍了DevUI是什么它有什么样的优势随后介绍了如何在MAF中快速集成DevUI用于开发调试获得友好的开发调试体验希望本文的案例对你有所帮助。示例源码Github: https://github.com/EdisonTalk/MAFD下一篇​​​​​​​引入地址