DevUI

DevUI é um aplicativo de exemplo leve e autônomo para executar agentes e fluxos de trabalho no Microsoft Agent Framework. Ele fornece uma interface da Web para testes interativos, juntamente com um back-end de API compatível com OpenAI, permitindo que você depure, teste e itere visualmente em agentes e fluxos de trabalho que você cria antes de integrá-los em seus aplicativos.

Importante

DevUI é um aplicativo de exemplo para ajudá-lo a visualizar e depurar seus agentes e fluxos de trabalho durante o desenvolvimento. Ele não se destina a uso em produção.

Instalar os pacotes

Para um único serviço de .NET, instale o pacote DevUI. Para um Aspire AppHost que agrega vários serviços de agente, instale também a integração de hospedagem do Aspire.

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

Usar o DevUI com o Aspire

Cada serviço de agente expõe pontos de extremidade de Conversas e Respostas OpenAI. O Aspire AppHost adiciona um recurso de DevUI e conecta os serviços do 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);

Os agents: nomes passados devem WithAgentService corresponder aos nomes registrados por AddAIAgent(...) cada serviço.

Expor os pontos de extremidade de serviço do 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

O agregador DevUI combina entidades de todos os serviços configurados e roteia solicitações de Respostas e Conversas para o back-end correto.

Painel DevUI do Agent Framework mostrando o diretório e o rastreamento do agente

Features

  • Interface da Web: interface do usuário interativa para testar agentes e fluxos de trabalho
  • Tipos de entrada flexíveis: suporte para texto, uploads de arquivo e tipos de entrada personalizados com base no primeiro executor do fluxo de trabalho
  • Descoberta Baseada em Diretório: Descoberta automática de agentes e fluxos de trabalho a partir de uma estrutura de diretório
  • In-Memory Registration: registrar entidades programaticamente sem a configuração do sistema de arquivos
  • OpenAI-Compatible API: usar o SDK do Python openai para interagir com seus agentes
  • Galeria de Exemplos: Navegue e baixe exemplos selecionados quando nenhuma entidade for descoberta
  • Rastreamento: visualizar rastros OpenTelemetry para depuração e observabilidade

Tipos de entrada

O DevUI adapta sua interface de entrada com base no tipo de entidade:

  • Agentes: suporte a entrada de texto e anexos de arquivo (imagens, documentos, etc.) para interações multimodais
  • Fluxos de trabalho: a interface de entrada é gerada automaticamente com base no tipo de entrada do primeiro executor. O DevUI introspecta o fluxo de trabalho e reflete o esquema de entrada esperado, facilitando o teste de fluxos de trabalho com tipos de entrada estruturados ou personalizados.

Esse tratamento dinâmico de entrada permite que você teste seus agentes e fluxos de trabalho exatamente como eles receberiam entrada em seu aplicativo.

Installation

Instalar o DevUI do PyPI:

pip install agent-framework-devui --pre

Início Rápido

Opção 1: Registro programático

Inicie o DevUI com agentes registrados na memória:

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

Opção 2: Descoberta de Diretório (CLI)

Se você tiver agentes e fluxos de trabalho organizados em uma estrutura de diretório, inicie o DevUI na linha de comando:

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

Consulte a Descoberta de Diretórios para obter detalhes sobre a estrutura de diretório necessária.

Usando o SDK do OpenAI

O DevUI fornece uma API de respostas compatíveis com OpenAI. Você pode usar o SDK do Python openai para interagir com seus agentes:

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)

Para obter mais detalhes sobre a API, consulte Referência de API.

Opções da 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

O suporte para Go a este recurso estará disponível em breve. Consulte o repositório Agent Framework Go para obter o status mais recente.

Próximas Etapas 

Descoberta de diretório

Vá mais fundo:

  • Last updated on