Test avec AG-UI Dojo

L’application DojoAG-UI fournit un environnement interactif pour tester et explorer les agents Microsoft Agent Framework qui implémentent le protocole AG-UI. Dojo offre une interface visuelle pour se connecter à vos agents et interagir avec toutes les 7 fonctionnalités de AG-UI.

Prerequisites

Avant de commencer, vérifiez que vous disposez des points suivants :

• Python 3.10 ou version ultérieure
• uv pour la gestion des dépendances
• Une clé API OpenAI ou un point de terminaison Azure OpenAI
• Node.js et pnpm (pour l’exécution du front-end Dojo)

Installation

1. Clonez le référentiel AG-UI

Tout d’abord, clonez le référentiel AG-UI qui contient les exemples d’intégration de l’application Dojo et de Microsoft Agent Framework :

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

2. Accédez au répertoire Examples

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

3. Installer les dépendances Python

Utilisez uv pour installer les dépendances requises.

uv sync

4. Configurer des variables d’environnement

Créez un .env fichier à partir du modèle fourni :

cp .env.example .env

Modifiez le fichier et ajoutez vos informations d’identification .env d’API :

# 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

Note

Si vous utilisez DefaultAzureCredential, à la place d'une api_key pour l'authentification, vérifiez que vous êtes authentifié auprès d’Azure (par exemple, via az login). Pour plus d’informations, consultez la documentation d’Azure Identity.

Exécution de l’application Dojo

1. Démarrer le serveur principal

Dans le répertoire des exemples, démarrez le serveur principal avec les exemples d’agents :

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

Le serveur démarre http://localhost:8888 par défaut.

2. Démarrez le serveur frontal Dojo

Ouvrez une nouvelle fenêtre de terminal, accédez à la racine du référentiel AG-UI, puis au répertoire de l’application Dojo :

cd apps/dojo
pnpm install
pnpm dev

Le front-end Dojo sera disponible à l’adresse http://localhost:3000.

3. Se connecter à votre agent

1. Ouvrir http://localhost:3000 dans votre navigateur

2. Configurer l’URL du serveur pour http://localhost:8888

3. Sélectionnez « Microsoft Agent Framework (Python) » dans la liste déroulante

4. Commencer à explorer les exemples d’agents

Exemples d’agents disponibles

Les exemples d’intégration illustrent les 7 fonctionnalités AG-UI via différents points de terminaison d’agent :

Point de terminaison	Caractéristique	Descriptif
/agentic_chat	Fonctionnalité 1 : Conversation agentique	Agent conversationnel de base avec appel d’outils
/backend_tool_rendering	Fonctionnalité 2 : Rendu de l’outil principal	Agent avec rendu UI personnalisé de l’outil
/human_in_the_loop	Fonctionnalité 3 : Humain dans la boucle	Agent avec flux de travail d’approbation
/agentic_generative_ui	Fonctionnalité 4 : interface utilisateur générative agentique	Agent qui décompose les tâches en étapes avec des mises à jour en temps réel
/tool_based_generative_ui	Fonctionnalité 5 : interface utilisateur générative basée sur les outils	Agent qui génère des composants d’interface utilisateur personnalisés
/shared_state	Fonctionnalité 6 : État partagé	Agent avec synchronisation d’état bidirectionnel
/predictive_state_updates	Fonctionnalité 7 : Mises à jour de l’état prédictif	Agent effectuant des mises à jour d'état prédictif pendant l'exécution de l'outil

Tester vos propres agents

Pour tester vos propres agents avec Dojo :

1. Créer votre agent

Créez un agent en suivant le guide de prise en main :

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. Ajouter l’agent à votre serveur

Dans votre application FastAPI, inscrivez le point de terminaison de l’agent :

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. Tester dans Dojo

1. Démarrer votre serveur
2. Ouvrir Dojo à l’adresse http://localhost:3000
3. Définir l’URL du serveur sur http://localhost:8888
4. Votre agent apparaît dans la liste déroulante du point de terminaison sous la forme « my_agent »
5. Sélectionnez-le et commencez à tester

Structure du projet

Les exemples d’intégration du référentiel AG-UI suivent cette structure :

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

Résolution des problèmes

Problèmes de connexion au serveur

Si Dojo ne peut pas se connecter à votre serveur :

• Vérifiez que le serveur s’exécute sur le port approprié (par défaut : 8888)
• Vérifiez que l’URL du serveur dans Dojo correspond à votre adresse de serveur
• Vérifiez qu’aucun pare-feu ne bloque la connexion
• Rechercher des erreurs CORS dans la console du navigateur

Agent qui n’apparaît pas

Si votre agent n’apparaît pas dans la liste déroulante Dojo :

• Vérifier que le point de terminaison de l’agent est enregistré correctement
• Vérifier les journaux du serveur pour toutes les erreurs de démarrage
• Vérifier que l’appel s’est add_agent_framework_fastapi_endpoint terminé correctement

Problèmes liés aux variables d’environnement

Si vous voyez des erreurs d’authentification :

• Vérifiez que votre .env fichier se trouve dans le répertoire correct
• Vérifier que toutes les variables d’environnement requises sont définies
• Vérifier que les clés d’API et les points de terminaison sont valides
• Redémarrez le serveur après avoir modifié les variables d’environnement

Étapes suivantes

• Explorer les exemples d’agents pour voir les modèles d’implémentation
• En savoir plus sur le rendu de l’outil principal pour personnaliser les interfaces utilisateur d’outil

Ressources additionnelles

• Documentation AG-UI

• AG-UI dépôt GitHub

• Dojo Application

• Exemples d’intégration de Microsoft Agent Framework

À venir.