DevUI

DevUI è un'applicazione di esempio leggera e autonoma per l'esecuzione di agenti e flussi di lavoro in Microsoft Agent Framework. Fornisce un'interfaccia Web per i test interattivi insieme a un back-end dell'API compatibile con OpenAI, che consente di eseguire il debug, il test e l'iterazione visivamente sugli agenti e sui flussi di lavoro compilati prima di integrarli nelle applicazioni.

Importante

DevUI è un'app di esempio che consente di visualizzare ed eseguire il debug degli agenti e dei flussi di lavoro durante lo sviluppo. Non è destinato all'uso in produzione.

Installare i pacchetti

Per un singolo servizio .NET, installare il pacchetto DevUI. Per un Aspire AppHost che aggrega più servizi agente, installare anche l'integrazione di hosting Aspire.

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

Usa DevUI con Aspire

Ogni servizio agente espone gli endpoint OpenAI Responses e Conversations. Aspire AppHost aggiunge una risorsa DevUI e collega i servizi agente.

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);

I nomi agents: passati a WithAgentService devono corrispondere ai nomi registrati da AddAIAgent(...) in ciascun servizio.

Esponi gli endpoint del servizio dell'agente


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'aggregatore DevUI combina le entità di tutti i servizi configurati e indirizza le richieste di risposte e conversazioni al back-end corretto.

Dashboard DevUI di Agent Framework che mostra la directory e la traccia dell'agente

Funzionalità

  • Interfaccia Web: interfaccia utente interattiva per i test di agenti e flussi di lavoro
  • Tipi di input flessibili: supporto per testo, caricamenti di file e tipi di input personalizzati in base al primo executor del flusso di lavoro
  • Individuazione basata su directory: Individuare automaticamente gli agenti e i flussi di lavoro tramite una struttura di directory
  • Registrazione in memoria: registrare entità programmaticamente senza l'installazione del file system
  • APIOpenAI-Compatible: usare OpenAI Python SDK per interagire con gli agenti
  • Raccolta di esempi: Esplorare e scaricare esempi curati quando non vengono individuate entità
  • Tracciamento: visualizzare delle tracce OpenTelemetry per debug e osservabilità

Tipi di input

DevUI adatta l'interfaccia di input in base al tipo di entità:

  • Agenti: supportano l'input di testo e gli allegati di file (immagini, documenti e così via) per le interazioni multipli
  • Flussi di lavoro: l'interfaccia di input viene generata automaticamente in base al tipo di input del primo executor. DevUI introspetta il flusso di lavoro e riflette lo schema di input previsto, semplificando il test dei flussi di lavoro con tipi di input strutturati o personalizzati.

Questa gestione dinamica degli input consente di testare gli agenti e i flussi di lavoro esattamente come riceverebbero input nell'applicazione.

Installation

Installare DevUI da PyPI:

pip install agent-framework-devui --pre

Avvio rapido

Opzione 1: Registrazione a livello di codice

Avviare DevUI con agenti registrati in memoria:

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

Opzione 2: Scoperta della directory (CLI)

Se si dispone di agenti e flussi di lavoro organizzati in una struttura di directory, avviare DevUI dalla riga di comando:

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

L'autenticazione è abilitata per impostazione predefinita. Durante il loopback, DevUI genera un token e lo stampa nella console. Usare --no-auth solo per un ambiente di sviluppo loopback isolato.

Per informazioni dettagliate sulla struttura di directory necessaria, vedere Individuazione delle directory.

Uso di OpenAI SDK

DevUI offre un'API risposte compatibile con OpenAI. Iniziare con un token di sviluppo noto:

DEVUI_AUTH_TOKEN="<secure-dev-token>" devui ./agents

Quindi passa lo stesso token all’OpenAI Python SDK:

import os
from openai import OpenAI

client = OpenAI(
    base_url="http://localhost:8080/v1",
    api_key=os.environ["DEVUI_AUTH_TOKEN"],
)

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)

Per altri dettagli sull'API, vedere Informazioni di riferimento sulle API.

Opzioni CLI

devui [directory] [options]

Options:
  --port, -p      Port (default: 8080)
  --host          Host (default: 127.0.0.1; non-loopback hosts require auth)
  --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)
  --no-auth       Disable auth for loopback-only local development
  --auth-token    Custom token required for non-loopback hosts

Annotazioni

Il supporto per questa funzionalità sarà presto disponibile. Vedere il repository di Agent Framework Go per lo stato più aggiornato.

Passaggi successivi

Individuazione delle directory

Approfondimento:

  • Ultimo aggiornamento: