MAF快速入门（15）中，DevUI是调试Agent的什么利器？

大家好，我是Edison。 最近我一直在跟着圣杰的《.NET+AI智能体开发进阶》课程学习MAF开发多智能体工作流，我强烈推荐你也上车跟我一起出发！ 上一篇，我们学习了MAF中快速集成A2A (Agent to Agent)。本篇，我们来了解下在MAF提供的调试利器：DevUI。 1 什么是DevUI DevUI 是一个开箱即用的交互式 Web 调试界面，无需额外开发，启用后就能可视化测试、调试 AI 代理，从 Agent 列表查看、工具调用验证到工作流流转，全流程可视化，让 AI 智能体开发从 “盲调” 变 “明调”。 DevUI 允许开发者： 🧪在浏览器中测试 Agent：无需编写客户端代码即可与 Agent 对话。 📊查看对话历史：清晰展示 User 和 Agent 之间的消息交互。 🔍调试多 Agent 系统：支持切换不同的 Agent 和 Workflow 进行测试。 🛠️零配置启动：只需简单的配置即可集成到 ASP.NET Core 应用中。 综上所述，DevUI 就像是 Agent 的 “浏览器开发者工具”，让你能够直观看到 Agent 的 “一举一动”，快速调试和定位问题。 画外音：DevUI 即 Developer UI, it's For Developers! 2 快速开始：创建一个DevUI示例 在MAF中提供了一个内置的DevUI组件，我们可以非常方便地创建集成DevUI的Agent应用。 接下来，我们就一步一步完成一个DevUI示例。 首先，我们创建一个ASP.NET Web应用，安装以下NuGet包： <PackageReference Include="Microsoft.Agents.AI.OpenAI" Version="1.0.0-preview.260128.1" /> <PackageReference Include="Microsoft.Agents.AI.Workflows" Version="1.0.0-preview.260128.1" /> <PackageReference Include="Microsoft.Agents.AI.DevUI" Version="1.0.0-preview.260128.1" /> <PackageReference Include="Microsoft.Agents.AI.Hosting" Version="1.0.0-preview.260128.1" /> <PackageReference Include="Microsoft.Agents.AI.Hosting.OpenAI" Version="1.0.0-alpha.260128.1" /> <PackageReference Include="Microsoft.Extensions.AI.OpenAI" Version="10.2.0-preview.1.26063.2" /> 然后，就是整个示例的核心部分，我们一块一块来说： （1）创建并注册ChatClient var builder = WebApplication.CreateBuilder(args); // Step0. Load Configuration var config = new ConfigurationBuilder() .AddJsonFile($"appsettings.json", optional: false, reloadOnChange: true) .Build(); var openAIProvider = config.GetSection("OpenAI").Get<OpenAIProvider>(); // 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 List<IHostedAgentBuilder>() { writerAgent, reviewerAgent } .Select(hab => sp.GetRequiredKeyedService<AIAgent>(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： 这就意味着，我们可以对所有注册的Agent对象进行调试！ 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 参考资料 圣杰，《.NET + AI 智能体开发进阶》（推荐指数：★★★★★） Microsoft Learn，《Agent Framework Tutorials》 作者：爱迪生 出处：https://edisontalk.cnblogs.com 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。