DevUI

DevUI adalah aplikasi sampel mandiri yang ringan untuk menjalankan agen dan alur kerja di Microsoft Agent Framework. Ini menyediakan antarmuka web untuk pengujian interaktif bersama dengan backend API yang kompatibel dengan OpenAI, memungkinkan Anda untuk men-debug, menguji, dan melakukan iterasi secara visual pada agen dan alur kerja yang Anda buat sebelum mengintegrasikannya ke dalam aplikasi Anda.

Important

DevUI adalah aplikasi sampel untuk membantu Anda memvisualisasikan dan men-debug agen dan alur kerja Anda selama pengembangan. Ini tidak ditujukan untuk penggunaan produksi.

Instal paket-paket tersebut

Untuk satu layanan .NET, instal paket DevUI. Untuk Aspire AppHost yang menggabungkan beberapa layanan agen, instal juga integrasi hosting Aspire.

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

Menggunakan DevUI dengan Aspire

Setiap layanan agen mengekspos titik akhir Respons dan Percakapan OpenAI. Aspire AppHost menambahkan satu sumber daya DevUI dan menghubungkan layanan agen.

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

Nama agents: yang diteruskan harus WithAgentService sesuai dengan AddAIAgent(...) nama yang terdaftar di setiap layanan.

Mengekspos titik akhir layanan agen


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 menggabungkan entitas dari semua layanan yang dikonfigurasi dan merutekan permintaan Respons dan Percakapan ke backend yang benar.

Dasbor Agent Framework DevUI memperlihatkan direktori dan pelacakan agen

Features

  • Antarmuka Web: Antarmuka pengguna interaktif untuk agen pengujian dan alur kerja
  • Jenis Input Fleksibel: Dukungan untuk teks, unggahan file, dan jenis input kustom berdasarkan pelaksana pertama alur kerja Anda
  • Directory-Based Discovery: Menemukan agen dan alur kerja secara otomatis dari struktur direktori
  • Pendaftaran In-Memory: Mendaftarkan entitas secara programatis tanpa penyiapan sistem file
  • OpenAI-Compatible API: Gunakan OpenAI Python SDK untuk berinteraksi dengan agen Anda
  • Galeri Sampel: Telusuri dan unduh contoh yang dikumpulkan saat tidak ada entitas yang ditemukan
  • Pelacakan: Melihat jejak OpenTelemetry untuk penelusuran kesalahan dan pengamatan

Jenis Input

DevUI mengadaptasi antarmuka inputnya berdasarkan jenis entitas:

  • Agen: Mendukung input teks dan lampiran file (gambar, dokumen, dll.) untuk interaksi multimodal
  • Alur kerja: Antarmuka input dibuat secara otomatis berdasarkan jenis input pelaksana pertama. DevUI mengintrospeksi alur kerja dan mencerminkan skema input yang diharapkan, sehingga mudah untuk menguji alur kerja dengan jenis input terstruktur atau kustom.

Penanganan input dinamis ini memungkinkan Anda menguji agen dan alur kerja persis seperti yang akan menerima input dalam aplikasi Anda.

Penginstalan

Instal DevUI dari PyPI:

pip install agent-framework-devui --pre

Mulai Cepat

Opsi 1: Pendaftaran Terprogram

Luncurkan DevUI dengan agen yang terdaftar dalam memori:

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

Opsi 2: Penemuan Direktori (CLI)

Jika Anda memiliki agen dan alur kerja yang diatur dalam struktur direktori, luncurkan DevUI dari baris perintah:

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

Lihat Penemuan Direktori untuk detail tentang struktur direktori yang diperlukan.

Menggunakan OpenAI SDK

DevUI menyediakan API Respons yang kompatibel dengan OpenAI. Anda dapat menggunakan OpenAI Python SDK untuk berinteraksi dengan agen Anda:

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)

Untuk detail selengkapnya tentang API, lihat Referensi API.

Opsi 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

Nota

Dukungan Go untuk fitur ini akan segera hadir. Lihat repositori Agent Framework Go untuk status terbaru.

Langkah berikutnya

Penemuan Direktori

Masuk lebih dalam:

  • Last updated on