Testen mit AG-UI Dojo

Die AG-UI Dojo-Anwendung bietet eine interaktive Umgebung zum Testen und Erkunden von Microsoft Agent Framework-Agents, die das AG-UI-Protokoll implementieren. Dojo bietet eine visuelle Schnittstelle, um eine Verbindung mit Ihren Agents herzustellen und mit allen 7 AG-UI Features zu interagieren.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie folgendes haben:

• Python 3.10 oder höher
• uv für Abhängigkeitsverwaltung
• Ein OpenAI-API-Schlüssel oder Azure OpenAI-Endpunkt
• Node.js und pnpm (zum Ausführen des Dojo-Frontends)

Installation

1. Klonen des AG-UI Repositorys

Klonen Sie zunächst das AG-UI Repository, das die Dojo-Anwendung und Microsoft Agent Framework-Integrationsbeispiele enthält:

git clone https://github.com/ag-oss/ag-ui.git
cd ag-ui

2. Navigieren Sie zu Examples Directory

cd integrations/microsoft-agent-framework/python/examples

3. Installieren von Python-Abhängigkeiten

Verwenden Sie uv, um die erforderlichen Abhängigkeiten zu installieren.

uv sync

4. Konfigurieren von Umgebungsvariablen

Erstellen Sie eine .env Datei aus der bereitgestellten Vorlage:

cp .env.example .env

Bearbeiten Sie die .env Datei, und fügen Sie Ihre API-Anmeldeinformationen hinzu:

# For OpenAI
OPENAI_API_KEY=your_api_key_here
OPENAI_CHAT_MODEL_ID="gpt-4.1"

# Or for Azure OpenAI
AZURE_OPENAI_ENDPOINT=your_endpoint_here
AZURE_OPENAI_API_KEY=your_api_key_here
AZURE_OPENAI_CHAT_DEPLOYMENT_NAME=your_deployment_here

Hinweis

Wenn Sie DefaultAzureCredential anstelle von api_key für die Authentifizierung verwenden, stellen Sie sicher, dass Sie bei Azure authentifiziert sind (z. B. über az login). Weitere Informationen finden Sie in der Azure Identity-Dokumentation.

Ausführen der Dojo-Anwendung

1. Starten des Back-End-Servers

Starten Sie im Beispielverzeichnis den Back-End-Server mit den Beispiel-Agents:

cd integrations/microsoft-agent-framework/python/examples
uv run dev

Der Server wird standardmäßig auf http://localhost:8888 gestartet.

2. Starten des Dojo-Frontends

Öffnen Sie ein neues Terminalfenster, navigieren Sie zum Stamm des AG-UI Repositorys und dann zum Dojo-Anwendungsverzeichnis:

cd apps/dojo
pnpm install
pnpm dev

Das Dojo-Frontend wird unter http://localhost:3000 verfügbar sein.

3. Herstellen einer Verbindung mit Ihrem Agent

1. In Ihrem Browser öffnen http://localhost:3000

2. Konfigurieren der Server-URL für http://localhost:8888

3. Wählen Sie im Dropdownmenü "Microsoft Agent Framework (Python)" aus.

4. Beginnen Sie mit der Erkundung der Beispiel-Agents

Verfügbare Beispiel-Agents

Die Integrationsbeispiele veranschaulichen alle 7 AG-UI Features über verschiedene Agent-Endpunkte:

Endpunkt	Merkmal	Description
/agentic_chat	Feature 1: Agentischer Chat	Einfacher Konversationsagent mit Werkzeugaufrufen
/backend_tool_rendering	Feature 2: Backend-Tool-Rendering	Agent mit benutzerdefiniertem UI-Rendering für Werkzeuge
/human_in_the_loop	Feature 3: Mensch in der Schleife	Agent mit Genehmigungsworkflows
/agentic_generative_ui	Feature 4: Agentische Generative Benutzeroberfläche	Agent, der Aufgaben mithilfe von Streaming-Updates in Schritte aufschlüsselt
/tool_based_generative_ui	Feature 5: Toolbasierte generative UI	Agent, der benutzerdefinierte UI-Komponenten generiert
/shared_state	Feature 6: Freigegebener Status	Agent mit bidirektionaler Zustandssynchronisierung
/predictive_state_updates	Feature 7: Vorausschauende Zustandsaktualisierungen	Agent mit Vorhersagezustandsupdates während der Toolausführung

Testen Ihrer eigenen Agenten

So testen Sie Ihre eigenen Agents mit Dojo:

1. Erstellen Ihres Agents

Erstellen Sie einen neuen Agent nach dem Leitfaden für erste Schritte :

from agent_framework import Agent
from agent_framework_azure_ai import AzureOpenAIChatClient

# Create your agent
chat_client = AzureOpenAIChatClient(
    endpoint=os.getenv("AZURE_OPENAI_ENDPOINT"),
    api_key=os.getenv("AZURE_OPENAI_API_KEY"),
    deployment_name=os.getenv("AZURE_OPENAI_CHAT_DEPLOYMENT_NAME"),
)

agent = Agent(
    name="my_test_agent",
    chat_client=chat_client,
    system_message="You are a helpful assistant.",
)

2. Hinzufügen des Agents zu Ihrem Server

Registrieren Sie in Ihrer FastAPI-Anwendung den Agentendpunkt:

from fastapi import FastAPI
from agent_framework_ag_ui import add_agent_framework_fastapi_endpoint
import uvicorn

app = FastAPI()

# Register your agent
add_agent_framework_fastapi_endpoint(
    app=app,
    path="/my_agent",
    agent=agent,
)

if __name__ == "__main__":
    uvicorn.run(app, host="127.0.0.1", port=8888)

3. Test in Dojo

1. Starten deines Servers
2. Dojo öffnen unter http://localhost:3000
3. Festlegen der Server-URL auf http://localhost:8888
4. Ihr Agent wird im Endpunkt-Dropdown als "my_agent" angezeigt.
5. Wählen Sie es aus, und beginnen Sie mit dem Testen.

Projektstruktur

Die Integrationsbeispiele des AG-UI Repositorys folgen dieser Struktur:

integrations/microsoft-agent-framework/python/examples/
├── agents/
│   ├── agentic_chat/                  # Feature 1: Basic chat agent
│   ├── backend_tool_rendering/        # Feature 2: Backend tool rendering
│   ├── human_in_the_loop/             # Feature 3: Human-in-the-loop
│   ├── agentic_generative_ui/         # Feature 4: Streaming state updates
│   ├── tool_based_generative_ui/      # Feature 5: Custom UI components
│   ├── shared_state/                  # Feature 6: Bidirectional state sync
│   ├── predictive_state_updates/      # Feature 7: Predictive state updates
│   └── dojo.py                        # FastAPI application setup
├── pyproject.toml                     # Dependencies and scripts
├── .env.example                       # Environment variable template
└── README.md                          # Integration examples documentation

Problembehandlung

Serververbindungsprobleme

Wenn Dojo keine Verbindung mit Ihrem Server herstellen kann:

• Überprüfen, ob der Server auf dem richtigen Port ausgeführt wird (Standard: 8888)
• Überprüfen Sie, ob die Server-URL in Dojo Ihrer Serveradresse entspricht.
• Stellen Sie sicher, dass keine Firewall die Verbindung blockiert
• Suchen nach CORS-Fehlern in der Browserkonsole

Agent erscheint nicht

Wenn Ihr Agent nicht in der Dojo-Dropdownliste angezeigt wird:

• Überprüfen, ob der Agentendpunkt ordnungsgemäß registriert ist
• Überprüfen von Serverprotokollen auf Startfehler
• Sicherstellen, dass der add_agent_framework_fastapi_endpoint Anruf erfolgreich abgeschlossen wurde

Probleme mit Umgebungsvariablen

Wenn Authentifizierungsfehler angezeigt werden:

• Überprüfen, ob sich Ihre .env Datei im richtigen Verzeichnis befindet
• Überprüfen, ob alle erforderlichen Umgebungsvariablen festgelegt sind
• Sicherstellen, dass API-Schlüssel und Endpunkte gültig sind
• Starten Sie den Server nach dem Ändern von Umgebungsvariablen neu

Nächste Schritte

• Erkunden Sie die Beispiel-Agents , um Implementierungsmuster anzuzeigen.
• Informationen zum Rendern von Back-End-Tools zum Anpassen von Tool-UIs

Zusätzliche Ressourcen

• AG-UI Dokumentation

• AG-UI GitHub-Repository

• Dojo-Anwendung

• Microsoft Agent Framework-Integrationsbeispiele

Bald verfügbar.