DEV Community

CodeStreet
CodeStreet

Posted on

Why DevUI Is a Game Changer for .NET Developers? Microsoft Agent Framework DevUI Demo.

#genai #ai #dotnet #openai

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:

dotnet add package Microsoft.Agents.AI.DevUI
dotnet add package Microsoft.Agents.AI.Hosting
dotnet add package Microsoft.Extensions.AI
dotnet add package OpenAI
Enter fullscreen mode Exit fullscreen mode

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:

dotnet new web -n DevUIDemo
cd DevUIDemo
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

?? 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();
Enter fullscreen mode Exit fullscreen mode

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."
);
Enter fullscreen mode Exit fullscreen mode

** 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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

Running Your Application

Start the Application

Run your application using:

dotnet run
Enter fullscreen mode Exit fullscreen mode

Or press F5 in Visual Studio.

Access DevUI

Once the application starts, navigate to:

http://localhost:[PORT]/devui
Enter fullscreen mode Exit fullscreen mode

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

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: Source Code

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.

Support me!

If you found this guide helpful, make sure to check out the accompanying YouTube video tutorial where I walk you through the process visually. Don’t forget to subscribe to my channel for more amazing tutorials!

I would appreciate it if you could buy me a coffee.
Buy me a coffee

Feel free to leave your questions, comments, or suggestions below. Happy coding!

Top comments (0)