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 AppHost Aspire che aggrega più servizi agent, installare anche l'integrazione di hosting di Aspire.

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

Usa DevUI con Aspire

Ogni servizio agent 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/*

Per informazioni dettagliate sulla struttura della directory richiesta, vedere Scoperta della directory.

Uso di OpenAI SDK

DevUI offre un'API risposte compatibile con OpenAI. È possibile usare OpenAI Python SDK per interagire con gli agenti:

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)

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

Annotazioni

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

Passaggi successivi

Individuazione directory

Approfondimento:

  • Last updated on