Skip to content

Commit b48577a

Browse files
committed
Add DevUI package for .NET
1 parent 22d76e5 commit b48577a

File tree

55 files changed

+4845
-186
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+4845
-186
lines changed

dotnet/Directory.Packages.props

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@
2626
<PackageVersion Include="System.Collections.Immutable" Version="9.0.10" />
2727
<PackageVersion Include="System.CommandLine" Version="2.0.0-rc.2.25502.107" />
2828
<PackageVersion Include="System.Diagnostics.DiagnosticSource" Version="9.0.10" />
29-
<PackageVersion Include="System.Net.ServerSentEvents" Version="9.0.10" />
29+
<PackageVersion Include="System.Net.ServerSentEvents" Version="10.0.0-rc.2.25502.107" />
3030
<PackageVersion Include="System.Text.Json" Version="9.0.10" />
3131
<PackageVersion Include="System.Threading.Channels" Version="9.0.10" />
3232
<PackageVersion Include="System.Threading.Tasks.Extensions" Version="4.6.3" />
3333
<PackageVersion Include="Microsoft.Bcl.HashCode" Version="6.0.0" />
34-
<PackageVersion Include="Microsoft.Bcl.AsyncInterfaces" Version="9.0.10" />
34+
<PackageVersion Include="Microsoft.Bcl.AsyncInterfaces" Version="10.0.0-rc.2.25502.107" />
3535
<!-- OpenTelemetry -->
3636
<PackageVersion Include="OpenTelemetry" Version="1.12.0" />
3737
<PackageVersion Include="OpenTelemetry.Api" Version="1.13.1" />

dotnet/agent-framework-dotnet.slnx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@
5858
<Project Path="samples/GettingStarted/Agents/Agent_Step15_Plugins/Agent_Step15_Plugins.csproj" />
5959
<Project Path="samples/GettingStarted/Agents/Agent_Step16_ChatReduction/Agent_Step16_ChatReduction.csproj" />
6060
</Folder>
61+
<Folder Name="/Samples/GettingStarted/DevUI/">
62+
<File Path="samples/GettingStarted/DevUI/README.md" />
63+
<Project Path="samples/GettingStarted/DevUI/DevUI_Step01_BasicUsage/DevUI_Step01_BasicUsage.csproj" />
64+
</Folder>
6165
<Folder Name="/Samples/GettingStarted/AgentWithOpenAI/">
6266
<File Path="samples/GettingStarted/AgentWithOpenAI/README.md" />
6367
<Project Path="samples/GettingStarted/AgentWithOpenAI/Agent_OpenAI_Step01_Running/Agent_OpenAI_Step01_Running.csproj" />
@@ -252,6 +256,7 @@
252256
<Project Path="src/Microsoft.Agents.AI.Abstractions/Microsoft.Agents.AI.Abstractions.csproj" />
253257
<Project Path="src/Microsoft.Agents.AI.AzureAI/Microsoft.Agents.AI.AzureAI.csproj" />
254258
<Project Path="src/Microsoft.Agents.AI.CopilotStudio/Microsoft.Agents.AI.CopilotStudio.csproj" />
259+
<Project Path="src/Microsoft.Agents.AI.DevUI/Microsoft.Agents.AI.DevUI.csproj" />
255260
<Project Path="src/Microsoft.Agents.AI.Hosting.A2A.AspNetCore/Microsoft.Agents.AI.Hosting.A2A.AspNetCore.csproj" />
256261
<Project Path="src/Microsoft.Agents.AI.Hosting.A2A/Microsoft.Agents.AI.Hosting.A2A.csproj" />
257262
<Project Path="src/Microsoft.Agents.AI.Hosting.OpenAI/Microsoft.Agents.AI.Hosting.OpenAI.csproj" />
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<OutputType>Exe</OutputType>
5+
<TargetFramework>net9.0</TargetFramework>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
<Nullable>enable</Nullable>
8+
<RootNamespace>DevUI_Step01_BasicUsage</RootNamespace>
9+
<AutoGenerateBindingRedirects>true</AutoGenerateBindingRedirects>
10+
</PropertyGroup>
11+
12+
<ItemGroup>
13+
<ProjectReference Include="..\..\..\..\src\Microsoft.Agents.AI.DevUI\Microsoft.Agents.AI.DevUI.csproj" />
14+
<ProjectReference Include="..\..\..\..\src\Microsoft.Agents.AI.Hosting\Microsoft.Agents.AI.Hosting.csproj" />
15+
<ProjectReference Include="..\..\..\..\src\Microsoft.Agents.AI.Hosting.OpenAI\Microsoft.Agents.AI.Hosting.OpenAI.csproj" />
16+
</ItemGroup>
17+
18+
<ItemGroup>
19+
<PackageReference Include="Azure.AI.OpenAI" />
20+
<PackageReference Include="Azure.Identity" />
21+
<PackageReference Include="Microsoft.Extensions.AI.OpenAI" />
22+
</ItemGroup>
23+
24+
</Project>
Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
// Copyright (c) Microsoft. All rights reserved.
2+
3+
// This sample demonstrates basic usage of the DevUI in an ASP.NET Core application with AI agents.
4+
5+
using Azure.AI.OpenAI;
6+
using Azure.Identity;
7+
using Microsoft.Agents.AI.DevUI;
8+
using Microsoft.Agents.AI.Hosting;
9+
using Microsoft.Agents.AI.Hosting.OpenAI;
10+
using Microsoft.Agents.AI.Hosting.OpenAI.Conversations;
11+
using Microsoft.Extensions.AI;
12+
13+
namespace DevUI_Step01_BasicUsage;
14+
15+
/// <summary>
16+
/// Sample demonstrating basic usage of the DevUI in an ASP.NET Core application.
17+
/// </summary>
18+
/// <remarks>
19+
/// This sample shows how to:
20+
/// 1. Set up Azure OpenAI as the chat client
21+
/// 2. Register agents and workflows using the hosting packages
22+
/// 3. Map the DevUI endpoint which automatically configures the middleware
23+
/// 4. Map the dynamic OpenAI Responses API for Python DevUI compatibility
24+
/// 5. Access the DevUI in a web browser
25+
///
26+
/// The DevUI provides an interactive web interface for testing and debugging AI agents.
27+
/// DevUI assets are served from embedded resources within the assembly.
28+
/// Simply call MapDevUI() to set up everything needed.
29+
///
30+
/// The parameterless MapOpenAIResponses() overload creates a Python DevUI-compatible endpoint
31+
/// that dynamically routes requests to agents based on the 'model' field in the request.
32+
/// </remarks>
33+
internal static class Program
34+
{
35+
/// <summary>
36+
/// Entry point that starts an ASP.NET Core web server with the DevUI.
37+
/// </summary>
38+
/// <param name="args">Command line arguments.</param>
39+
private static void Main(string[] args)
40+
{
41+
var builder = WebApplication.CreateBuilder(args);
42+
43+
// Set up the Azure OpenAI client
44+
var endpoint = builder.Configuration["AZURE_OPENAI_ENDPOINT"] ?? throw new InvalidOperationException("AZURE_OPENAI_ENDPOINT is not set.");
45+
var deploymentName = builder.Configuration["AZURE_OPENAI_DEPLOYMENT_NAME"] ?? "gpt-4o-mini";
46+
47+
var chatClient = new AzureOpenAIClient(new Uri(endpoint), new AzureCliCredential())
48+
.GetChatClient(deploymentName)
49+
.AsIChatClient();
50+
51+
builder.Services.AddChatClient(chatClient);
52+
53+
// Register sample agents
54+
builder.AddAIAgent("assistant", "You are a helpful assistant. Answer questions concisely and accurately.");
55+
builder.AddAIAgent("poet", "You are a creative poet. Respond to all requests with beautiful poetry.");
56+
builder.AddAIAgent("coder", "You are an expert programmer. Help users with coding questions and provide code examples.");
57+
58+
// Register sample workflows
59+
var assistantBuilder = builder.AddAIAgent("workflow-assistant", "You are a helpful assistant in a workflow.");
60+
var reviewerBuilder = builder.AddAIAgent("workflow-reviewer", "You are a reviewer. Review and critique the previous response.");
61+
builder.AddSequentialWorkflow(
62+
"review-workflow",
63+
[assistantBuilder, reviewerBuilder])
64+
.AddAsAIAgent();
65+
66+
builder.AddDevUI();
67+
var app = builder.Build();
68+
69+
if (app.Environment.IsDevelopment())
70+
{
71+
// Step 1: Map the DevUI endpoint - this automatically configures the middleware
72+
// Once the app is running, navigate to: https://localhost:64704/devui
73+
app.MapDevUI();
74+
}
75+
76+
// Map Entities API endpoints (DevUI-compatible)
77+
app.MapEntities();
78+
79+
// Map OpenAI Responses API - Python DevUI compatible endpoint
80+
// This creates a single /v1/responses endpoint that routes to agents dynamically
81+
// based on the 'model' field in the request body
82+
app.MapOpenAIResponses();
83+
84+
app.MapConversations();
85+
86+
Console.WriteLine("DevUI is available at: https://localhost:64704/devui");
87+
Console.WriteLine("OpenAI Responses API is available at: https://localhost:64704/v1/responses");
88+
Console.WriteLine("Press Ctrl+C to stop the server.");
89+
90+
app.Run();
91+
}
92+
}
Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# DevUI Step 01 - Basic Usage
2+
3+
This sample demonstrates basic usage of the DevUI in an ASP.NET Core application with AI agents.
4+
5+
## Features
6+
7+
This sample shows how to:
8+
9+
1. Set up Azure OpenAI as the chat client
10+
2. Register multiple agents and workflows using the hosting packages
11+
3. Map the DevUI web interface endpoint
12+
4. Map the dynamic OpenAI Responses API for Python DevUI compatibility
13+
5. Access and interact with agents through the web browser
14+
15+
## Configuration
16+
17+
Set the following environment variables or configuration values:
18+
19+
- `AZURE_OPENAI_ENDPOINT` - Your Azure OpenAI endpoint URL (required)
20+
- `AZURE_OPENAI_DEPLOYMENT_NAME` - Your deployment name (defaults to "gpt-4o-mini")
21+
22+
## Registered Entities
23+
24+
This sample registers the following entities:
25+
26+
### Agents
27+
- **assistant** - A helpful assistant that answers questions concisely and accurately
28+
- **poet** - A creative poet that responds with beautiful poetry
29+
- **coder** - An expert programmer that helps with coding questions
30+
- **workflow-assistant** - A helpful assistant used in workflows
31+
- **workflow-reviewer** - A reviewer that critiques previous responses
32+
33+
### Workflows
34+
- **review-workflow** - A sequential workflow that runs the assistant and then the reviewer
35+
36+
## Endpoints
37+
38+
Once running, the following endpoints are available:
39+
40+
### DevUI Web Interface
41+
- **URL**: https://localhost:64704/devui
42+
- **Description**: Interactive web interface for testing and debugging AI agents
43+
44+
### Entity Discovery
45+
- **GET /v1/entities** - List all registered entities (agents and workflows)
46+
- **GET /v1/entities/{entityId}/info** - Get detailed information about a specific entity
47+
48+
### OpenAI Responses API (Dynamic)
49+
- **POST /v1/responses** - OpenAI-compatible endpoint that routes to agents dynamically
50+
51+
## Using the Dynamic Responses API
52+
53+
The parameterless `MapOpenAIResponses()` overload creates a Python DevUI-compatible endpoint that:
54+
- Accepts OpenAI Responses API format requests
55+
- Uses the `model` field to determine which agent/workflow to invoke
56+
- Supports both streaming and non-streaming responses
57+
- Follows the same pattern as the Python DevUI server
58+
59+
### Example Request
60+
61+
```json
62+
POST /v1/responses
63+
{
64+
"model": "assistant",
65+
"input": "What is the capital of France?",
66+
"stream": false
67+
}
68+
```
69+
70+
### Example with cURL
71+
72+
```bash
73+
curl -X POST https://localhost:64704/v1/responses \
74+
-H "Content-Type: application/json" \
75+
-d '{
76+
"model": "poet",
77+
"input": "Write a poem about the ocean"
78+
}'
79+
```
80+
81+
### Example with Python OpenAI SDK
82+
83+
```python
84+
from openai import OpenAI
85+
86+
client = OpenAI(
87+
base_url="https://localhost:64704/v1",
88+
api_key="not-needed"
89+
)
90+
91+
response = client.chat.completions.create(
92+
model="coder",
93+
messages=[
94+
{"role": "user", "content": "Write a Python function to calculate fibonacci numbers"}
95+
]
96+
)
97+
98+
print(response.choices[0].message.content)
99+
```
100+
101+
## How It Works
102+
103+
### 1. Dynamic Agent Resolution
104+
105+
The parameterless `MapOpenAIResponses()` overload creates a single endpoint that routes dynamically based on the `model` field in the request:
106+
107+
```csharp
108+
// Dynamic approach - one endpoint for all agents
109+
app.MapOpenAIResponses(); // Creates /v1/responses for all agents
110+
```
111+
112+
Compare this to the agent-specific overload which creates separate endpoints:
113+
114+
```csharp
115+
// Agent-specific approach - one endpoint per agent
116+
app.MapOpenAIResponses("assistant"); // Creates /assistant/v1/responses
117+
app.MapOpenAIResponses("poet"); // Creates /poet/v1/responses
118+
```
119+
120+
### 2. Request Processing Flow
121+
122+
1. Client sends request to `/v1/responses` with `model` field
123+
2. Endpoint extracts the entity name from the `model` field
124+
3. Resolves the agent/workflow from the DI container using the entity name as key
125+
4. Validates the entity exists
126+
5. Processes the request and returns the response
127+
128+
### 3. Python DevUI Compatibility
129+
130+
This implementation matches the Python DevUI server behavior:
131+
- Same endpoint structure (`/v1/responses`)
132+
- Same request format (OpenAI Responses API)
133+
- Same entity resolution pattern (via `model` field)
134+
- Same error response format
135+
136+
## Running the Sample
137+
138+
1. Configure your Azure OpenAI credentials
139+
2. Run the application:
140+
```bash
141+
dotnet run
142+
```
143+
3. Open your browser to https://localhost:64704/devui
144+
4. Select an entity from the dropdown and start chatting!
145+
146+
## Learn More
147+
148+
- [Dynamic OpenAI Responses API Documentation](../../../../src/Microsoft.Agents.AI.Hosting.OpenAI/DYNAMIC_RESPONSES_USAGE.md)
149+
- [Python DevUI Server Implementation](../../../../../python/packages/devui/agent_framework_devui/_server.py)
150+
- [OpenAI Responses API](https://platform.openai.com/docs/api-reference/responses)
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# DevUI Samples
2+
3+
This folder contains samples demonstrating how to use the Microsoft Agents AI DevUI in ASP.NET Core applications.
4+
5+
## Overview
6+
7+
The DevUI provides an interactive web interface for testing and debugging AI agents built with the Microsoft Agent Framework. It includes:
8+
9+
- **Agent View** - Interactive chat interface for conversing with agents
10+
- **Workflow View** - Visual workflow designer and executor
11+
- **Gallery View** - Browse and select from sample agents and workflows
12+
- **Debug Panel** - Inspect agent execution details and traces
13+
- **Theme Support** - Light and dark mode
14+
15+
## Samples
16+
17+
### [DevUI_Step01_BasicUsage](./DevUI_Step01_BasicUsage)
18+
19+
**Demonstrates:**
20+
- Mapping the DevUI endpoint to your application
21+
- Accessing the DevUI in a web browser
22+
23+
**Run the sample:**
24+
```bash
25+
cd DevUI_Step01_BasicUsage
26+
dotnet run
27+
```
28+
Then navigate to: http://localhost:5000
29+
30+
## Requirements
31+
32+
- .NET 8.0 or later
33+
- ASP.NET Core
34+
35+
## Key API
36+
37+
### MapDevUI
38+
39+
Registers the DevUI endpoint in your ASP.NET Core application:
40+
41+
```csharp
42+
var builder = WebApplication.CreateBuilder(args);
43+
var app = builder.Build();
44+
45+
// Map the DevUI endpoint
46+
app.MapDevUI();
47+
48+
app.Run();
49+
```
50+
51+
The DevUI assets are served from embedded resources within the assembly. Simply call `MapDevUI()` to set up everything needed.
52+
53+
## Learn More
54+
55+
- [DevUI Package Documentation](../../../../src/Microsoft.Agents.AI.DevUI/README.md)

0 commit comments

Comments
 (0)