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 作为后续演示。