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

1. Zero UI Code Required: Test agents immediately without building React, Angular, or Blazor interfaces
2. Multi-Agent Support: Switch between different agents in the same session
3. Conversation History: Built-in conversation management and history tracking
4. Development-Only: Easily disable for production deployments
5. 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:

1
2
3
4

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

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

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:

1
2
3
4
5
6
7
8

// 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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

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

Development Best Practices

1. Use Environment-Specific Configuration

Only enable DevUI in development environments:

1
2
3
4
5
6

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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:

1
2
3
4

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

Adding Function Calling

Enable agents to call functions:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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:

1
2
3
4
5

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:

1
2
3
4

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:

1
2
3
4

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

Deployment Considerations

Disable DevUI in Production

Critical: Never expose DevUI in production:

1
2
3
4

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

Environment Variables in Production

Use Azure App Configuration or Key Vault:

1
2
3
4
5
6
7

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

Health Checks

Add health checks for monitoring:

1
2
3
4

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:

1
2
3
4
5

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:

1
2
3
4
5

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:

1
2
3
4
5

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

• Microsoft Agent Framework Documentation
• .NET AI Development Guide
• OpenAI .NET SDK

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.

What’s Next

Ready to take your AI agent development further Check out these resources:

• Video Tutorial: Watch the complete walkthrough (embedded above)
• Source Code: Download the full sample project
• Community: Join discussions on GitHub and Stack Overflow
• Newsletter: Subscribe for more .NET AI tutorials

Comments and Discussion

Have questions or feedback? Drop a comment below! I’d love to hear about:

• What AI agents are you building?
• What challenges have you encountered?
• What topics would you like covered next?

Share This Article

Found this helpful? Share it with your network!