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 虽好，但是其本身只是用来服务开发阶段的，因此建议：