⚠️ This blog post was created with the help of AI tools. Yes, I used a bit of magic from language models to organize my thoughts and automate the boring parts, but the geeky fun and the 🤖 in C# are 100% mine.

Hi!

If you’re building intelligent applications in .NET, the new Microsoft Agent Framework opens the door to agent-based architectures, message-driven reasoning, and multi-agent collaboration. But one of the most powerful pieces of the ecosystem is DevUI—a visual debugging and tracing experience to see your agents think.

In my latest video, I break down how DevUI works, how to activate it in your own .NET project, and how it looks when used inside a full multi-agent Aspire + Blazor application.

Below is a quick guide so you can follow along, copy the code, and try it yourself.

🎯 Why DevUI?

When you enable DevUI in a .NET Agent Framework app, you unlock:

• 🔍 Visual debugging: Agents, messages, capabilities, and steps
• 🧠 Reasoning traces: Each step of the chain-of-thought (the safe, inspectable version)
• 🔄 Message flow view: How agents collaborate and respond
• ⚡ Faster iteration: No more guessing what your agent is doing

It’s essentially “F12 Developer Tools”… but for AI agents inside .NET.

🧪 Step 1 — Add the Required NuGet Packages

You need two key packages:

dotnet add package Microsoft.Agents.AI.DevUI
dotnet add package Microsoft.Agents.AI.Hosting
dotnet add package Microsoft.Agents.AI.Hosting.OpenAI

🧩 Step 2 — Configure the Agent in Program.cs

Below is a minimal example of the necessary code to have DevUI enabled in a webapp.

// Register services for OpenAI responses and conversations (also required for DevUI)
builder.Services.AddOpenAIResponses();
builder.Services.AddOpenAIConversations();

var app = builder.Build();

// more code goes here ...

// Map endpoints for OpenAI responses and conversations (also required for DevUI)
app.MapOpenAIResponses();
app.MapOpenAIConversations();

if (builder.Environment.IsDevelopment())
{
    // Map DevUI endpoint to /devui
    app.MapDevUI();
}

app.Run();

With this, as soon as your agent processes a message, DevUI will visualize:

• The agent profile
• The invocation request
• The reasoning trail
• The messages sent internally

🕹️ Step 3 — Run the Project and Open DevUI

Once you launch your .NET app you’ll be able to access the devui page in the /devui url:

DevUI listening on http://localhost:####/devui

Open that URL in your browser and you’ll find:

• A dashboard of your agents
• Incoming/outgoing messages
• Reasoning steps
• Execution timeline

🧪 Move to a Real Multi-Agent Demo (Shown in the Video)

After covering the basics, the video transitions into a richer scenario:

✨ A multi-agent Web AI chat app running on .NET Aspire + Blazor

This project includes:

• A Coordinator Agent
• A Domain Agent
• A Reasoning Agent
• A Web Chat UI built with Blazor
• Execution orchestrated using Agent Framework
• Full DevUI visualization of all message flow

🔗 Demo shown in the video:
https://github.com/microsoft/Generative-AI-for-beginners-dotnet/tree/main/samples/AgentFx/AgentFx-AIWebChatApp-MutliAgent

It’s the perfect way to see DevUI in an end-to-end multi-agent system.

🧠 Taking It Further

You can extend the sample by:

• Adding custom tools (file search, database, Azure services)
• Connecting to local or Azure AI models
• Exposing agents as APIs
• Building multi-agent systems with shared memory
• Deploying with .NET Aspire

Once you’re familiar with DevUI, debugging and exploring these architectures becomes much easier.

📚 Main References

📘 Agent Framework for C# developers
https://learn.microsoft.com/en-us/agent-framework/overview/agent-framework-overview

🤖 Generative AI for .NET
https://aka.ms/genainet

Both are continuously updated and worth bookmarking.