DevUI

DevUI est un exemple d’application léger et autonome pour l’exécution d’agents et de flux de travail dans Microsoft Agent Framework. Il fournit une interface web pour les tests interactifs, ainsi qu’un back-end d’API compatible OpenAI, ce qui vous permet de déboguer visuellement, de tester et d’itérer sur les agents et les flux de travail que vous créez avant de les intégrer à vos applications.

Important

DevUI est un exemple d’application pour vous aider à visualiser et déboguer vos agents et flux de travail pendant le développement. Elle n’est pas destinée à une utilisation en production.

Installer les packages

Pour un seul service .NET, installez le package DevUI. Pour un Aspire AppHost qui agrège plusieurs services d’agent, installez également l’intégration de l’hébergement Aspire.

dotnet add package Microsoft.Agents.AI.DevUI --prerelease
dotnet add package Aspire.Hosting.AgentFramework.DevUI --prerelease

Utiliser DevUI avec Aspire

Chaque service d’agent expose les points de terminaison OpenAI Responses and Conversations. Aspire AppHost ajoute une ressource DevUI et connecte les services d’agent.

var writerAgent = builder.AddProject<Projects.WriterAgent>("writer-agent", launchProfileName: "https")
    .WithHttpHealthCheck("/health", endpointName: "https")
    .WithReference(foundry).WaitFor(foundry);

// Add the editor agent service
var editorAgent = builder.AddProject<Projects.EditorAgent>("editor-agent")
    .WithHttpHealthCheck("/health")
    .WithReference(foundry).WaitFor(foundry);

// Add DevUI integration that aggregates agents from all agent services.
// Agent metadata is declared here so backends don't need a /v1/entities endpoint.
_ = builder.AddDevUI("devui")
    .WithAgentService(writerAgent, agents: [new("writer")]) // the name of the agent should match the agent declaration in WriterAgent/Program.cs
    .WithAgentService(editorAgent, agents: [new("editor")]) // the name of the agent should match the agent declaration in EditorAgent/Program.cs
    .WaitFor(writerAgent)
    .WaitFor(editorAgent);

Les agents: noms passés doivent WithAgentService correspondre aux noms inscrits dans AddAIAgent(...) chaque service.

Exposer les points de terminaison de service de l’agent


var builder = WebApplication.CreateBuilder(args);

builder.AddServiceDefaults();

builder.AddAzureChatCompletionsClient(connectionName: "foundry",
    configureSettings: settings =>
        {
            // WARNING: DefaultAzureCredential is convenient for development but requires careful consideration in production.
            // In production, consider using a specific credential (e.g., ManagedIdentityCredential) to avoid
            // latency issues, unintended credential probing, and potential security risks from fallback mechanisms.
            settings.TokenCredential = new DefaultAzureCredential();
            settings.EnableSensitiveTelemetryData = builder.Environment.IsDevelopment();
        })
    .AddChatClient("gpt41");

builder.AddAIAgent("writer", "You write short stories (300 words or less) about the specified topic.");

// Register services for OpenAI responses and conversations
builder.Services.AddOpenAIResponses();
builder.Services.AddOpenAIConversations();

var app = builder.Build();

app.UseHttpsRedirection();

// Map OpenAI API endpoints — DevUI aggregator routes requests here

L’agrégateur DevUI combine des entités de tous les services configurés et achemine les demandes réponses et conversations vers le serveur principal approprié.

Tableau de bord DevUI agent Framework montrant le répertoire et le suivi de l’agent

Fonctionnalités

  • Interface web : interface utilisateur interactive pour tester les agents et les flux de travail
  • Types d’entrée flexibles : prise en charge du texte, des chargements de fichiers et des types d’entrée personnalisés en fonction du premier exécuteur de votre flux de travail
  • Découverte basée sur un répertoire : découvrir automatiquement les agents et les flux de travail à partir d’une structure de répertoires
  • In-Memory Inscription : Inscrire des entités par programmation sans configuration du système de fichiers
  • OpenAI-Compatible API : Utiliser le Kit de développement logiciel (SDK) Python OpenAI pour interagir avec vos agents
  • Galerie d'exemples : Parcourir et télécharger des exemples sélectionnés lorsqu'aucune entité n’est découverte
  • Suivi : afficher les traces OpenTelemetry pour le débogage et l’observabilité

Types d’entrée

DevUI adapte son interface d’entrée en fonction du type d’entité :

  • Agents : prise en charge de l'entrée de texte et des pièces jointes de fichiers (images, documents, etc.) pour les interactions multimodales
  • Flux de travail : l’interface d’entrée est générée automatiquement en fonction du type d’entrée du premier exécuteur. DevUI introspect le flux de travail et reflète le schéma d’entrée attendu, ce qui facilite le test des workflows avec des types d’entrée structurés ou personnalisés.

Cette gestion dynamique des entrées vous permet de tester vos agents et flux de travail exactement comme ils recevaient des entrées dans votre application.

Installation

Installez DevUI à partir de PyPI :

pip install agent-framework-devui --pre

Quick Start

Option 1 : Inscription par programmation

Lancez DevUI avec les agents inscrits en mémoire :

from agent_framework import Agent
from agent_framework.openai import OpenAIChatClient
from agent_framework.devui import serve

def get_weather(location: str) -> str:
    """Get weather for a location."""
    return f"Weather in {location}: 72F and sunny"

# Create your agent
agent = Agent(
    name="WeatherAgent",
    client=OpenAIChatClient(),
    tools=[get_weather]
)

# Launch DevUI
serve(entities=[agent], auto_open=True)
# Opens browser to http://localhost:8080

Option 2 : Découverte d’annuaires (CLI)

Si vous avez des agents et des flux de travail organisés dans une structure de répertoires, lancez DevUI à partir de la ligne de commande :

# Launch web UI + API server
devui ./agents --port 8080
# Web UI: http://localhost:8080
# API: http://localhost:8080/v1/*

Pour plus d’informations sur la structure de répertoire requise, consultez la découverte d’annuaires.

Utilisation du Kit de développement logiciel (SDK) OpenAI

DevUI fournit une API Réponses compatibles OpenAI. Vous pouvez utiliser le Kit de développement logiciel (SDK) Python OpenAI pour interagir avec vos agents :

from openai import OpenAI

client = OpenAI(
    base_url="http://localhost:8080/v1",
    api_key="not-needed"  # API key not required for local DevUI
)

response = client.responses.create(
    metadata={"entity_id": "weather_agent"},  # Your agent/workflow name
    input="What's the weather in Seattle?"
)

# Extract text from response
print(response.output[0].content[0].text)

Pour plus d’informations sur l’API, consultez Informations de référence sur l’API.

Options CLI (Interface de Ligne de Commande)

devui [directory] [options]

Options:
  --port, -p      Port (default: 8080)
  --host          Host (default: 127.0.0.1)
  --headless      API only, no UI
  --no-open       Don't automatically open browser
  --tracing       Enable OpenTelemetry tracing
  --reload        Enable auto-reload
  --mode          developer|user (default: developer)
  --auth          Enable Bearer token authentication
  --auth-token    Custom authentication token

Note

La prise en charge de Go pour cette fonctionnalité arrivera bientôt. Consultez le référentiel Agent Framework Go pour connaître l’état le plus récent.

Étapes suivantes

Aller plus loin :