How to Use DevUI in Microsoft Agent Framework with .NET 10 | Build Real AI Agents

Thu, 05 Feb 2026 00:00:00 +0530

Introduction

Building and testing AI agents shouldn’t require building a complex user interface from scratch. That’s where DevUI comes in - a powerful development tool that’s part of the Microsoft Agent Framework for .NET 10. In this comprehensive guide, you’ll learn how to set up, configure, and test multiple AI agents with different personas using a simple web interface.

Whether you’re building chatbots, AI assistants, or conversational applications, DevUI provides an intuitive playground similar to Swagger UI but designed specifically for AI agents.

Watch the video tutorial above for a complete walkthrough, or continue reading for the step-by-step guide.

What is DevUI?

DevUI is a development interface included with the Microsoft Agent Framework that enables developers to:

Test AI agents in real-time during development
Manage conversations with multiple agents simultaneously
Debug agent responses without building a production UI
Prototype quickly before implementing custom interfaces
Validate system prompts and agent behavior instantly

Think of DevUI as your AI agent playground - a tool that accelerates development by providing immediate visual feedback on your agents’ behavior and responses.

Key Benefits

Zero UI Code Required: Test agents immediately without building React, Angular, or Blazor interfaces
Multi-Agent Support: Switch between different agents in the same session
Conversation History: Built-in conversation management and history tracking
Development-Only: Easily disable for production deployments
OpenAI Compatible: Works with any OpenAI-compatible endpoint including Azure OpenAI, GitHub Models, and more

Prerequisites

Before we begin, ensure you have:

.NET 10 SDK installed (Download here)
Visual Studio 2026 or VS Code with C# extensions
Basic knowledge of ASP.NET Core
API access to an OpenAI-compatible service (OpenAI, Azure OpenAI, GitHub Models, etc.)
API Key for your chosen AI service (you can use GitHub Copilot)

Required NuGet Packages

For this tutorial, you’ll need the following packages:

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

Package Overview

Package	Purpose
`Microsoft.Agents.AI.DevUI`	Provides the DevUI web interface
`Microsoft.Agents.AI.Hosting`	Agent hosting infrastructure and registration
`Microsoft.Extensions.AI`	Core AI abstractions and interfaces
`OpenAI`	OpenAI SDK for connecting to AI models

Project Setup

Let’s create a new ASP.NET Core application:

1
2

dotnet new web -n DevUIDemo
cd DevUIDemo

Add the required packages as shown above, and we’re ready to start coding!

Implementation Guide

Step 1: Configure the ChatClient

Open Program.cs and set up your application builder and chat client:

using Microsoft.Agents.AI.DevUI;
using Microsoft.Agents.AI.Hosting;
using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.AI;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;

WebApplicationBuilder builder = WebApplication.CreateBuilder(args);

// Configure ChatClient with your AI service
IChatClient chatClient = new ChatClient(
    "gpt-4o",  // Model name
    new ApiKeyCredential(Environment.GetEnvironmentVariable("OPENAI_API_KEY")!), 
    new OpenAIClientOptions() { 
        Endpoint = new Uri("https://models.github.ai/inference") 
    }
).AsIChatClient();

?? Security Best Practice: Always use environment variables or secure configuration for API keys. Never hardcode credentials in your source code!

Step 2: Register Required Services

Add the necessary services to your dependency injection container:

// Register the chat client for agent use
builder.Services.AddChatClient(chatClient);

// Register OpenAI response handling
builder.Services.AddOpenAIResponses();

// Register conversation state management
builder.Services.AddOpenAIConversations();

These services provide:

AddChatClient: Registers the chat client for dependency injection
AddOpenAIResponses: Handles OpenAI API response processing
AddOpenAIConversations: Manages conversation state and history

Step 3: Create AI Agents

Now comes the fun part - creating your AI agents! The framework makes this incredibly simple:

// Create a Comic Book Guy agent from The Simpsons
builder.AddAIAgent(
    "Comic Book Guy", 
    "You are Comic Book Guy from The Simpsons. Respond with his characteristic " +
    "condescending tone, vast knowledge of pop culture, and frequent use of phrases " +
    "like 'Worst [blank] ever!' Be pedantic and superior in your responses."
);

// Create a YouTube channel advisor agent
builder.AddAIAgent(
    "CodeStreet Agent", 
    "You are an experienced YouTube content strategist specializing in tech channels. " +
    "Provide actionable advice on content ideas, SEO, thumbnails, audience engagement, " +
    "and growth strategies for programming and technology channels."
);

** Pro Tip**: Your system prompt is crucial! Be specific about the agent’s personality, knowledge domain, and response style for best results.

Step 4: Configure Endpoints and Run

Finally, build the app and register the DevUI endpoints:

WebApplication app = builder.Build();

// Register OpenAI API endpoints (required for DevUI)
app.MapOpenAIResponses();
app.MapOpenAIConversations();

// Register DevUI endpoint
app.MapDevUI();

app.Run();

Complete Code Example

Here’s the complete Program.cs:

using Microsoft.Agents.AI.DevUI;
using Microsoft.Agents.AI.Hosting;
using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.AI;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;

WebApplicationBuilder builder = WebApplication.CreateBuilder(args);

IChatClient chatClient = new ChatClient(
    "gpt-4o", 
    new ApiKeyCredential(Environment.GetEnvironmentVariable("OPENAI_API_KEY")!), 
    new OpenAIClientOptions() { 
        Endpoint = new Uri("https://models.github.ai/inference") 
    }
).AsIChatClient();

builder.Services.AddChatClient(chatClient);
builder.Services.AddOpenAIResponses();
builder.Services.AddOpenAIConversations();

builder.AddAIAgent("Comic Book Guy", 
    "You are comic-book guy from The Simpsons");
    
builder.AddAIAgent("CodeStreet Agent", 
    "You are an agent who gives suggestions for youtube channels");

WebApplication app = builder.Build();
app.MapOpenAIResponses();
app.MapOpenAIConversations();
app.MapDevUI();
app.Run();

Running Your Application

Start the Application

Run your application using:

`1`	`dotnet run`

Or press F5 in Visual Studio.

Access DevUI

Once the application starts, navigate to:

`1`	`http://localhost:[PORT]/devui`

Replace [PORT] with the port number shown in your console output (typically 5000 or 5173).

Testing Your Agents

Select an Agent: On the left sidebar, you’ll see both agents listed
Start a Conversation: Click on an agent to begin chatting
Send Messages: Type your message in the input box
View Responses: Watch your agent respond in character
Switch Agents: Click another agent to test different personas
View History: All conversation history is maintained automatically

Development Best Practices

1. Use Environment-Specific Configuration

Only enable DevUI in development environments:

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

2. Secure Your API Keys

Use user secrets for development:

1
2

dotnet user-secrets init
dotnet user-secrets set "OpenAI:ApiKey" "your-api-key-here"

Then access in code:

`1`	`var apiKey = builder.Configuration["OpenAI:ApiKey"];`

3. Configure CORS for Development

If accessing DevUI from different origins:

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

// ... later
app.UseCors();

4. Add Logging for Debugging

Enable detailed logging to troubleshoot issues:

1
2

builder.Logging.AddConsole();
builder.Logging.SetMinimumLevel(LogLevel.Debug);

Troubleshooting Common Issues

Issue 1: Can’t Access /devui

Symptoms: 404 error when navigating to /devui

Solutions:

Verify app.MapDevUI() is called
Check you’re running in Development environment
Ensure all three Map methods are registered:
app.MapOpenAIResponses()
app.MapOpenAIConversations()
app.MapDevUI()

Issue 2: Agents Not Responding

Symptoms: Agents don’t generate responses

Solutions:

Validate your API key is correct and active
Check your endpoint URL is accessible
Verify builder.Services.AddChatClient(chatClient) was called
Review console logs for API errors

Issue 3: Connection Errors

Symptoms: Network or timeout errors

Solutions:

Check your internet connection
Verify firewall settings allow outbound HTTPS
Confirm your API service is operational
Test with a simple curl request to the endpoint

Issue 4: CORS Errors

Symptoms: CORS policy errors in browser console

Solutions:

Add CORS configuration (see best practices above)
Ensure app.UseCors() is called before endpoint mapping
Check your endpoint configuration in OpenAI options

Advanced Scenarios

Creating Custom Agent Classes

For complex logic, create custom agent implementations:

public class CustomAgent : AIAgent
{
    public override async Task<AgentResponse> RespondAsync(
        AgentRequest request, 
        CancellationToken cancellationToken = default)
    {
        // Custom logic here
        // Access databases, external APIs, etc.
        
        return new AgentResponse 
        { 
            Message = "Custom response" 
        };
    }
}

Integrating with Azure OpenAI

Switch to Azure OpenAI Service:

IChatClient chatClient = new AzureOpenAIClient(
    new Uri(azureEndpoint),
    new ApiKeyCredential(azureApiKey)
).GetChatClient("gpt-4");

Adding Function Calling

Enable agents to call functions:

var options = new ChatClientAgentOptions
{
    Name = "Function Agent",
    Description = "Agent with tools",
    Tools = new List<AIFunction>
    {
        AIFunctionFactory.Create(
            GetWeather,
            "Get weather for a location"
        )
    }
};

Multiple Chat Clients

Use different models for different agents:

var gpt4Client = new ChatClient("gpt-4o", credential, options);
var gpt35Client = new ChatClient("gpt-3.5-turbo", credential, options);

builder.Services.AddKeyedSingleton("gpt4", gpt4Client);
builder.Services.AddKeyedSingleton("gpt35", gpt35Client);

Performance Optimization

1. Enable Response Streaming

For better user experience:

var options = new ChatClientAgentOptions
{
    EnableStreaming = true
};

2. Implement Caching

Cache common responses:

1
2

builder.Services.AddMemoryCache();
builder.Services.AddDistributedMemoryCache();

3. Set Timeouts

Prevent long-running requests:

builder.Services.Configure<HttpClientFactoryOptions>(options =>
{
    options.HandlerLifetime = TimeSpan.FromMinutes(5);
});

Deployment Considerations

Disable DevUI in Production

Critical: Never expose DevUI in production:

if (!app.Environment.IsProduction())
{
    app.MapDevUI();
}

Environment Variables in Production

Use Azure App Configuration or Key Vault:

if (app.Environment.IsProduction())
{
    builder.Configuration.AddAzureKeyVault(
        new Uri(keyVaultUrl),
        new DefaultAzureCredential()
    );
}

Health Checks

Add health checks for monitoring:

builder.Services.AddHealthChecks()
    .AddCheck<ChatClientHealthCheck>("chat-client");

app.MapHealthChecks("/health");

Real-World Use Cases

1. Customer Support Chatbots

Create specialized agents for different support tiers:

builder.AddAIAgent("Level 1 Support", 
    "Handle common customer inquiries about account issues...");
    
builder.AddAIAgent("Technical Support", 
    "Provide detailed technical assistance for product issues...");

2. Educational Tutors

Build subject-specific tutoring agents:

builder.AddAIAgent("Math Tutor", 
    "Explain mathematical concepts step-by-step...");
    
builder.AddAIAgent("Code Mentor", 
    "Help students learn programming with examples...");

3. Content Creation Assistants

Develop specialized writing agents:

builder.AddAIAgent("Blog Writer", 
    "Create SEO-optimized blog posts...");
    
builder.AddAIAgent("Social Media Manager", 
    "Craft engaging social media content...");

Resources and Next Steps

Official Documentation

Further Learning

Advanced Agent Patterns: Explore multi-agent conversations and orchestration
Function Calling: Enable agents to interact with external systems
Custom UI Development: Build production interfaces using React or Blazor
Azure Deployment: Deploy agents to Azure App Service or Container Apps

Sample Code Repository

Find the complete source code for this tutorial on GitHub: [GitHub Repository Link]

Conclusion

DevUI provides a powerful, efficient way to develop and test AI agents in .NET 10 without the overhead of building custom interfaces. By following this guide, you’ve learned:

How to set up the Microsoft Agent Framework
Configure OpenAI-compatible chat clients
Create multiple AI agents with distinct personas
Use DevUI for rapid testing and iteration
Implement best practices for security and deployment
Troubleshoot common issues

The Microsoft Agent Framework, combined with DevUI, dramatically reduces the time from concept to functional AI agents. Whether you’re building chatbots, virtual assistants, or complex multi-agent systems, these tools provide the foundation for rapid, efficient development.

C# on The Code Street

How to Use DevUI in Microsoft Agent Framework with .NET 10 | Build Real AI Agents

Introduction

What is DevUI?

Key Benefits

Prerequisites

Required NuGet Packages

Package Overview

Project Setup

Implementation Guide

Step 1: Configure the ChatClient

Step 2: Register Required Services

Step 3: Create AI Agents

Step 4: Configure Endpoints and Run

Complete Code Example

Running Your Application

Start the Application

Access DevUI

Testing Your Agents

Development Best Practices

1. Use Environment-Specific Configuration

2. Secure Your API Keys

3. Configure CORS for Development

4. Add Logging for Debugging

Troubleshooting Common Issues

Issue 1: Can’t Access /devui

Issue 2: Agents Not Responding

Issue 3: Connection Errors

Issue 4: CORS Errors

Advanced Scenarios

Creating Custom Agent Classes

Integrating with Azure OpenAI

Adding Function Calling

Multiple Chat Clients

Performance Optimization

1. Enable Response Streaming

2. Implement Caching

3. Set Timeouts

Deployment Considerations

Disable DevUI in Production

Environment Variables in Production

Health Checks

Real-World Use Cases

1. Customer Support Chatbots

2. Educational Tutors

3. Content Creation Assistants

Resources and Next Steps

Official Documentation

Further Learning

Sample Code Repository

Conclusion

What’s Next

Comments and Discussion

Share This Article