DevUI: Interactive Testing Interface for Microsoft Agent Framework

What is DevUI?

DevUI is a built-in, browser-based chat interface provided by the Microsoft Agent Framework (via the Microsoft.Agents.AI.DevUI NuGet package). It gives developers an instant, zero-configuration web UI to interact with and test their AI agents during local development — without needing to build a frontend, connect a client, or deploy to any service.

When you navigate to /devui on your running application, you get a full-featured chat panel that communicates with your registered agent through the OpenAI-compatible endpoints. It supports multi-turn conversations, displays tool/function call invocations, and shows real-time agent responses.

Benefits of DevUI

Prerequisites

• .NET 8.0 or later
• A Microsoft Agent Framework project with at least one registered AI agent
• The Microsoft.Agents.AI.DevUI NuGet package

Integration Steps

Step 1: Install the NuGet Package

dotnet add package Microsoft.Agents.AI.DevUI --prerelease        

Step 2: Register DevUI in Your Application

In your Program.cs, add the DevUI services and map its endpoints. Wrap both calls in a development-environment check so DevUI is never exposed in production:

using Microsoft.Agents.AI.DevUI;

var builder = WebApplication.CreateBuilder(args);

// ... register your AI agent, chat client, tools, etc. ...

// Register DevUI (development only)
if (builder.Environment.IsDevelopment())
{
    builder.AddDevUI();
}

// Register OpenAI-compatible hosting endpoints (required for DevUI communication)
builder.AddOpenAIResponses();
builder.AddOpenAIConversations();

var app = builder.Build();

// Map the API endpoints
app.MapOpenAIResponses();
app.MapOpenAIConversations();

// Map DevUI endpoint (development only)
if (app.Environment.IsDevelopment())
{
    app.MapDevUI(); // Available at /devui
}

app.Run();        

Step 3: Run and Access DevUI

dotnet run        

Open your browser and navigate to:

http://localhost:<port>/devui        

You will see a chat interface where you can type messages and interact with your registered agent.

Step 4: Test Your Agent

1. Type a question in the chat input and press Enter.
2. Observe tool calls — if your agent uses tools (like SQL execution), DevUI shows the function invocations and their results.
3. Ask follow-up questions to test multi-turn conversation support and context retention.
4. Click "New Conversation" to reset the chat history and start fresh.

Complete Minimal Example

Below is a minimal Program.cs showing DevUI integrated with a simple agent:

using Azure.AI.OpenAI;
using Azure.Identity;
using Microsoft.Agents.AI;
using Microsoft.Agents.AI.DevUI;
using Microsoft.Agents.AI.Hosting;
using Microsoft.Agents.AI.Hosting.OpenAI;
using Microsoft.Extensions.AI;

var builder = WebApplication.CreateBuilder(args);

// Register chat client (Azure OpenAI)
var endpoint = builder.Configuration["AZURE_OPENAI_ENDPOINT"]!;
var deployment = builder.Configuration["AZURE_OPENAI_DEPLOYMENT"]!;

builder.Services.AddChatClient(new AzureOpenAIClient(
    new Uri(endpoint),
    new DefaultAzureCredential())
    .GetChatClient(deployment)
    .AsIChatClient());

// Register AI agent
builder.AddAIAgent("myAgent", (sp, name) =>
{
    var chatClient = sp.GetRequiredService<IChatClient>();
    return new ChatClientAgent(chatClient,
        name: name,
        instructions: "You are a helpful assistant.");
});

// DevUI (development only)
if (builder.Environment.IsDevelopment())
{
    builder.AddDevUI();
}

builder.AddOpenAIResponses();
builder.AddOpenAIConversations();

var app = builder.Build();

app.MapOpenAIResponses();
app.MapOpenAIConversations();

if (app.Environment.IsDevelopment())
{
    app.MapDevUI();
}

app.Run();        

Key Points to Remember

• Development only: Always gate DevUI behind IsDevelopment() checks. It is not intended for production use.
• OpenAI endpoints required: DevUI relies on AddOpenAIResponses() / MapOpenAIResponses() and AddOpenAIConversations() / MapOpenAIConversations() to communicate with your agent.
• Agent registration required: At least one agent must be registered via builder.AddAIAgent(...) for DevUI to have something to talk to.
• Default URL: The DevUI interface is served at /devui by default.

Troubleshooting

References

• Microsoft Agent Framework Overview
• Your First Agent — Getting Started Tutorial
• Microsoft.Agents.AI.DevUI on NuGet
• Agents for .NET — GitHub Repository
• Agent Framework Tools Documentation
• Microsoft.Extensions.AI Documentation
• Azure OpenAI Service Documentation