Compartir a través de

Pruebas con AG-UI Dojo

La aplicaciónAG-UI Dojo proporciona un entorno interactivo para probar y explorar los agentes de Microsoft Agent Framework que implementan el protocolo AG-UI. Dojo ofrece una interfaz visual para conectarse a los agentes e interactuar con las 7 AG-UI características.

Prerrequisitos

Antes de comenzar, asegúrese de que tiene:

  • Python 3.10 o superior
  • uv para la administración de dependencias
  • Una clave de API de OpenAI o un punto de conexión de Azure OpenAI
  • Node.js y pnpm (para ejecutar el front-end de Dojo)

Installation

1. Clonar el repositorio de AG-UI

En primer lugar, clone el repositorio de AG-UI que contiene la aplicación Dojo y los ejemplos de integración de Microsoft Agent Framework:

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

2. Vaya al directorio de ejemplos

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

3. Instalación de dependencias de Python

Use uv para instalar las dependencias necesarias:

uv sync

4. Configurar variables de entorno

Cree un .env archivo a partir de la plantilla proporcionada:

cp .env.example .env

Edite el .env archivo y agregue sus credenciales de 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

Nota:

Si usa DefaultAzureCredential en lugar de un api_key para autenticación, asegúrese de estar autenticado con Azure (por ejemplo, a través de az login). Para más información, consulte la documentación de Azure Identity.

Ejecución de la aplicación Dojo

1. Iniciar el servidor back-end

En el directorio de ejemplos, inicie el servidor back-end con los agentes de ejemplo:

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

El servidor se iniciará en http://localhost:8888 de forma predeterminada.

2. Iniciar el front-end de Dojo

Abra una nueva ventana de terminal, vaya a la raíz del repositorio de AG-UI y, a continuación, al directorio de la aplicación Dojo:

cd apps/dojo
pnpm install
pnpm dev

El front-end de Dojo estará disponible en http://localhost:3000.

3. Conéctese con su agente

  1. Abrir http://localhost:3000 en el explorador

  2. Configuración de la dirección URL del servidor en http://localhost:8888

  3. Seleccione "Microsoft Agent Framework (Python)" en la lista desplegable.

  4. Empezar a explorar los agentes de ejemplo

Agentes de ejemplo disponibles

Los ejemplos de integración muestran las 7 características de AG-UI a través de diferentes puntos de conexión del agente:

Punto final Característica Description
/agentic_chat Característica 1: Chat Agentico Agente conversacional básico con llamadas a herramientas
/backend_tool_rendering Característica 2: Representación de herramientas de back-end Agente con representación de la interfaz de usuario de una herramienta personalizada.
/human_in_the_loop Característica 3: Intervención humana Agente con procesos de aprobación
/agentic_generative_ui Característica 4: Interfaz de usuario generativa agente Agente que divide las tareas en pasos con actualizaciones de streaming
/tool_based_generative_ui Característica 5: Interfaz de usuario generativa basada en herramientas Agente que genera componentes de interfaz de usuario personalizados
/shared_state Característica 6: Estado compartido Agente con sincronización de estado bidireccional
/predictive_state_updates Característica 7: Actualizaciones de estado predictivo Agente con actualizaciones de estado predictivo durante la ejecución de la herramienta

Probar sus propios agentes

Para probar sus propios agentes con Dojo:

1. Creación del agente

Cree un nuevo agente siguiendo la guía de introducción :

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. Agregar el agente al servidor

En la aplicación FastAPI, registre el punto de conexión del agente:

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. Prueba en Dojo

  1. Inicio del servidor
  2. Abra Dojo en http://localhost:3000
  3. Establezca la dirección URL del servidor en . http://localhost:8888
  4. El agente aparecerá en la lista desplegable del punto de conexión como "my_agent"
  5. Selecciónelo e inicie las pruebas

Estructura del proyecto

Los ejemplos de integración del repositorio de AG-UI siguen esta estructura:

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

Solución de problemas

Problemas de conexión del servidor

Si Dojo no puede conectarse al servidor:

  • Compruebe que el servidor se está ejecutando en el puerto correcto (valor predeterminado: 8888)
  • Compruebe que la URL del servidor en Dojo coincida con la dirección de su servidor.
  • Asegúrese de que no hay ningún firewall que bloquee la conexión.
  • Busque errores de CORS en la consola del explorador.

No aparece el agente

Si el agente no aparece en la lista desplegable de Dojo:

  • Verifica que el punto de conexión del agente esté registrado correctamente
  • Comprobación de los registros del servidor en busca de errores de inicio
  • Asegúrese de que la add_agent_framework_fastapi_endpoint llamada se completó correctamente

Problemas de variables de entorno

Si ve errores de autenticación:

  • Compruebe que el .env archivo está en el directorio correcto.
  • Compruebe que se establecen todas las variables de entorno necesarias.
  • Asegúrese de que las claves de API y los puntos de conexión son válidos
  • Reiniciar el servidor después de cambiar las variables de entorno

Pasos siguientes

Recursos adicionales

Próximamente.

  • Last updated on