.NET: Add DevUI package for .NET (#1603)

* Implement DevUI

* Review feedback

* Fix build
This commit is contained in:
Reuben Bond
2025-11-05 12:02:48 -08:00
committed by GitHub
Unverified
parent 94a5ba3448
commit 8855bfb065
36 changed files with 2733 additions and 1176 deletions
@@ -0,0 +1,81 @@
# DevUI Step 01 - Basic Usage
This sample demonstrates how to add the DevUI to an ASP.NET Core application with AI agents.
## What is DevUI?
The DevUI provides an interactive web interface for testing and debugging AI agents during development.
## Configuration
Set the following environment variables:
- `AZURE_OPENAI_ENDPOINT` - Your Azure OpenAI endpoint URL (required)
- `AZURE_OPENAI_DEPLOYMENT_NAME` - Your deployment name (defaults to "gpt-4o-mini")
## Running the Sample
1. Set your Azure OpenAI credentials as environment variables
2. Run the application:
```bash
dotnet run
```
3. Open your browser to https://localhost:50516/devui
4. Select an agent or workflow from the dropdown and start chatting!
## Sample Agents and Workflows
This sample includes:
**Agents:**
- **assistant** - A helpful assistant
- **poet** - A creative poet
- **coder** - An expert programmer
**Workflows:**
- **review-workflow** - A sequential workflow that generates a response and then reviews it
## Adding DevUI to Your Own Project
To add DevUI to your ASP.NET Core application:
1. Add the DevUI package and hosting packages:
```bash
dotnet add package Microsoft.Agents.AI.DevUI
dotnet add package Microsoft.Agents.AI.Hosting
dotnet add package Microsoft.Agents.AI.Hosting.OpenAI
```
2. Register your agents and workflows:
```csharp
var builder = WebApplication.CreateBuilder(args);
// Set up your chat client
builder.Services.AddChatClient(chatClient);
// Register agents
builder.AddAIAgent("assistant", "You are a helpful assistant.");
// Register workflows
var agent1Builder = builder.AddAIAgent("workflow-agent1", "You are agent 1.");
var agent2Builder = builder.AddAIAgent("workflow-agent2", "You are agent 2.");
builder.AddSequentialWorkflow("my-workflow", [agent1Builder, agent2Builder])
.AddAsAIAgent();
```
3. Add DevUI services and map the endpoint:
```csharp
builder.AddDevUI();
var app = builder.Build();
app.MapDevUI();
// Add required endpoints
app.MapEntities();
app.MapOpenAIResponses();
app.MapOpenAIConversations();
app.Run();
```
4. Navigate to `/devui` in your browser