DevUI

DevUI to uproszczona, autonomiczna przykładowa aplikacja do uruchamiania agentów i przepływów pracy w programie Microsoft Agent Framework. Udostępnia interfejs internetowy do testowania interaktywnego wraz z zapleczem interfejsu API zgodnym z interfejsem OpenAI, co umożliwia wizualne debugowanie, testowanie i iterowanie agentów i przepływów pracy, które tworzysz przed zintegrowaniem ich z aplikacjami.

Ważna

DevUI to przykładowa aplikacja , która ułatwia wizualizowanie i debugowanie agentów i przepływów pracy podczas programowania. Nie jest przeznaczony do użytku produkcyjnego.

Instalowanie pakietów

W przypadku pojedynczej usługi .NET zainstaluj pakiet DevUI. W przypadku aspirującego hosta AppHost, który agreguje wiele usług agentów, zainstaluj również integrację hostingu Aspire.

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

Korzystanie z interfejsu DevUI z aspirem

Każda usługa agenta uwidacznia punkty końcowe openAI i konwersacji. Obiekt Aspire AppHost dodaje jeden zasób DevUI i łączy usługi agenta.

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

Przekazane agents: nazwy WithAgentService muszą być zgodne z nazwami zarejestrowanymi AddAIAgent(...) w każdej usłudze.

Uwidacznianie punktów końcowych usługi agenta


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

Agregator DevUI łączy jednostki ze wszystkich skonfigurowanych usług i kieruje żądania Odpowiedzi i Konwersacje do poprawnego zaplecza.

Panel kontrolny devUI Agent Framework pokazujący katalog agentów i śledzenie

Funkcje

  • Interfejs internetowy: interaktywny interfejs użytkownika do testowania agentów i przepływów pracy
  • Elastyczne typy danych wejściowych: obsługa tekstu, przekazywania plików i niestandardowych typów danych wejściowych na podstawie pierwszego wykonawcy przepływu pracy
  • Odnajdywanie Oparte na Katalogu: automatyczne odnajdywanie agentów i przepływów pracy ze struktury katalogów
  • Rejestracja In-Memory: programowe rejestrowanie elementów bez konfiguracji systemu plików
  • Interfejs API kompatybilny z OpenAI: używanie zestawu SDK języka Python OpenAI do interakcji z agentami
  • Przykładowa galeria: przeglądanie i pobieranie wyselekcjonowanych przykładów, gdy nie odnaleziono żadnych jednostek
  • Śledzenie: Wyświetlanie śladów OpenTelemetry na potrzeby debugowania i obserwowania

Typy danych wejściowych

Usługa DevUI dostosowuje interfejs wejściowy na podstawie typu jednostki:

  • Agenci: obsługują załączniki tekstu i plików (obrazy, dokumenty itp.) na potrzeby interakcji wielomodalnych
  • Przepływy pracy: interfejs wejściowy jest generowany automatycznie na podstawie typu danych wejściowych pierwszego wykonawcy. DevUI wykonuje introspekcję przepływów pracy i odzwierciedla oczekiwany schemat wejściowy, co upraszcza testowanie za pomocą uporządkowanych lub niestandardowych typów danych wejściowych.

Ta dynamiczna obsługa danych wejściowych umożliwia testowanie agentów i przepływów pracy dokładnie tak, jak będą odbierać dane wejściowe w aplikacji.

Instalacja

Zainstaluj DevUI z PyPI.

pip install agent-framework-devui --pre

Szybki start

Opcja 1. Rejestracja programowa

Uruchom interfejs DevUI z agentami zarejestrowanymi w pamięci:

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

Opcja 2: Wykrywanie katalogów (CLI)

Jeśli masz agentów i przepływy pracy zorganizowane w strukturze katalogów, uruchom narzędzie DevUI z poziomu wiersza polecenia:

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

Aby uzyskać szczegółowe informacje na temat wymaganej struktury katalogów, zobacz Odnajdywanie katalogów .

Korzystanie z zestawu OpenAI SDK

Interfejs DevUI udostępnia interfejs API odpowiedzi zgodny z interfejsem OpenAI. Zestaw SDK języka Python openAI umożliwia interakcję z agentami:

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)

Aby uzyskać więcej informacji na temat interfejsu API, zobacz Dokumentacja interfejsu API.

Opcje 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

Note

Obsługa tej funkcji w języku Go będzie dostępna wkrótce. Aktualny status znajdziesz w repozytorium Agent Framework dla Go.

Następne kroki

Głębiej: