واجهة مستخدم DevUI

DevUI هو تطبيق نموذج خفيف الوزن مستقل لتشغيل الوكلاء ومهام سير العمل في إطار عمل عامل Microsoft. يوفر واجهة ويب للاختبار التفاعلي جنبا إلى جنب مع واجهة برمجة التطبيقات الخلفية المتوافقة مع OpenAI، ما يسمح لك بتصحيح الأخطاء واختبارها والتكرار بشكل مرئي على الوكلاء ومهام سير العمل التي تقوم بإنشائها قبل دمجها في تطبيقاتك.

Important

DevUI هو نموذج تطبيق لمساعدتك في تصور وتصحيح أخطاء الوكلاء ومهام سير العمل أثناء التطوير. وهو غير مخصص لاستخدام الإنتاج.

ثبت الحزم

للحصول على خدمة .NET واحدة، قم بتثبيت حزمة DevUI. بالنسبة إلى Aspire AppHost الذي يجمع خدمات عامل متعددة، قم أيضا بتثبيت تكامل استضافة Aspire.

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

استخدام DevUI مع Aspire

تعرض كل خدمة عامل استجابات OpenAI ونقاط نهاية المحادثات. يضيف Aspire AppHost مورد DevUI واحد ويربط خدمات العامل.

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

agents: يجب أن تتطابق الأسماء التي تم تمريرها إلى WithAgentService مع الأسماء المسجلة في AddAIAgent(...) كل خدمة.

كشف نقاط نهاية خدمة العامل

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

يجمع مجمع DevUI بين الكيانات من جميع الخدمات المكونة ويوجه طلبات الاستجابات والمحادثات إلى الخلفية الصحيحة.

الميزات

• واجهة ويب: واجهة مستخدم تفاعلية لاختبار العوامل ومهام سير العمل
• أنواع الإدخال المرنة: دعم النصوص وتحميلات الملفات وأنواع الإدخال المخصصة استنادا إلى المنفذ الأول لسير العمل
• Directory-Based Discovery: اكتشاف العوامل ومهام سير العمل تلقائيا من بنية الدليل
• In-Memory التسجيل: تسجيل الكيانات برمجيا دون إعداد نظام الملفات
• OpenAI-Compatible API: استخدم OpenAI Python SDK للتفاعل مع وكلائك
• معرض العينات: استعراض الأمثلة المنسقة وتنزيلها عندما لا يتم اكتشاف أي كيانات
• التتبع: عرض تتبعات القياس المفتوح لتصحيح الأخطاء وقابلية الملاحظة

أنواع المدخلات

تقوم DevUI بتكييف واجهة الإدخال الخاصة بها استنادا إلى نوع الكيان:

• العوامل: دعم إدخال النص ومرفقات الملفات (الصور والمستندات وما إلى ذلك) للتفاعلات متعددة الوسائط
• مهام سير العمل: يتم إنشاء واجهة الإدخال تلقائيا استنادا إلى نوع إدخال المنفذ الأول. تبسط DevUI سير العمل وتعكس مخطط الإدخال المتوقع، ما يجعل من السهل اختبار مهام سير العمل مع أنواع الإدخال المنظمة أو المخصصة.

تسمح لك معالجة الإدخال الديناميكية هذه باختبار وكلاءك ومهام سير العمل تماما كما سيتلقون الإدخال في التطبيق الخاص بك.

التثبيت

تثبيت DevUI من PyPI:

pip install agent-framework-devui --pre

Quick Start

الخيار 1: التسجيل البرمجي

تشغيل DevUI مع الوكلاء المسجلين في الذاكرة:

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

الخيار 2: اكتشاف الدليل (CLI)

إذا كان لديك عوامل ومهام سير عمل منظمة في بنية دليل، فشغل DevUI من سطر الأوامر:

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

راجع اكتشاف الدليل للحصول على تفاصيل حول بنية الدليل المطلوبة.

استخدام OpenAI SDK

يوفر DevUI واجهة برمجة تطبيقات استجابات متوافقة مع OpenAI. يمكنك استخدام OpenAI Python SDK للتفاعل مع وكلائك:

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)

لمزيد من التفاصيل حول واجهة برمجة التطبيقات، راجع مرجع واجهة برمجة التطبيقات.

خيارات 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

سيتوفر الدعم لهذه الميزة قريبا. راجع مستودع Agent Framework Go للحصول على أحدث حالة.

الخطوات التالية

اكتشاف الدليل

انتقل إلى أبعد من ذلك:

• مرجع واجهة برمجة التطبيقات
• التتبع وقابلية المراقبة
• الأمان والنشر
• العينات