Testování pomocí AG-UI Dojo

AplikaceAG-UI Dojo poskytuje interaktivní prostředí pro testování a zkoumání agentů rozhraní Microsoft Agent Framework, kteří implementují protokol AG-UI. Dojo nabízí vizuální rozhraní pro připojení k vašim agentům a interakci se všemi 7 funkcemi AG-UI.

Požadavky

Než začnete, ujistěte se, že máte:

• Python 3.10 nebo vyšší
• uv pro správu závislostí
• Klíč rozhraní API OpenAI nebo koncový bod Azure OpenAI
• Node.js a pnpm (pro spuštění front-endu Dojo)

Installation

1. Klonování úložiště AG-UI

Nejprve naklonujte úložiště AG-UI, které obsahuje příklady integrace aplikace Dojo a rozhraní Microsoft Agent Framework:

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

2. Přejděte do adresáře příkladů.

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

Nainstalujte závislosti Pythonu

Slouží uv k instalaci požadovaných závislostí:

uv sync

4. Konfigurace proměnných prostředí

Vytvořte .env soubor z poskytnuté šablony:

cp .env.example .env

.env Upravte soubor a přidejte přihlašovací údaje rozhraní 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

Poznámka:

Pokud používáte DefaultAzureCredential namísto api_key pro ověřování, ujistěte se, že jste ověřeni v Azure (např. prostřednictvím az login). Další informace najdete v dokumentaci k identitě Azure.

Spuštění aplikace Dojo

1. Spusťte back-endový server.

V adresáři příkladů spusťte back-endový server s ukázkovými agenty:

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

Ve výchozím nastavení se server spustí na http://localhost:8888.

2. Spuštění front-endu dojo

Otevřete nové okno terminálu, přejděte do kořenového adresáře úložiště AG-UI a pak do adresáře aplikace Dojo:

cd apps/dojo
pnpm install
pnpm dev

Front-end Dojo bude k dispozici na adrese http://localhost:3000.

3. Připojení k agentu

1. Otevřít http://localhost:3000 v prohlížeči

2. Konfigurace adresy URL serveru na http://localhost:8888

3. V rozevíracím seznamu vyberte Microsoft Agent Framework (Python)

4. Začněte zkoumat ukázkové agenty.

Dostupné ukázkové agenty

Příklady integrace ukazují všechny 7 funkcí AG-UI prostřednictvím různých koncových bodů agenta:

Endpoint	Vlastnost	Description
/agentic_chat	Funkce 1: Agentický chat	Základní konverzační agent s voláním nástrojů
/backend_tool_rendering	Funkce 2: Vykreslování back-endových nástrojů	Agent s vlastním nástrojem pro zobrazení uživatelského rozhraní
/human_in_the_loop	Funkce 3: Člověk v okruhu	Agent s postupy schvalování
/agentic_generative_ui	Funkce 4: Generování agentského uživatelského rozhraní	Agent, který rozkládá úlohy do kroků s průběžnými aktualizacemi.
/tool_based_generative_ui	Funkce 5: Generování uživatelského rozhraní založeného na nástrojích	Agent, který generuje vlastní komponenty uživatelského rozhraní
/shared_state	Funkce 6: Sdílený stav	Agent s obousměrnou synchronizací stavu
/predictive_state_updates	Funkce 7: Prediktivní aktualizace stavu	Agent s prediktivními aktualizacemi stavu během provádění nástrojů

Testování vlastních agentů

Testování vlastních agentů pomocí Dojo:

1. Vytvoření agenta

Vytvořte nového agenta podle příručky Začínáme :

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. Přidání agenta na server

V aplikaci FastAPI zaregistrujte koncový bod agenta:

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. Testování v Dojo

1. Spuštění serveru
2. Otevřít Dojo na adrese http://localhost:3000
3. Nastavení adresy URL serveru na http://localhost:8888
4. Váš agent se v rozevíracím seznamu koncových bodů zobrazí jako "my_agent".
5. Vyberte ho a spusťte testování.

Struktura projektu

Příklady integrace úložiště AG-UI se řídí touto strukturou:

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

Řešení problémů

Problémy s připojením k serveru

Pokud se Dojo nemůže připojit k vašemu serveru:

• Ověřte, že server běží na správném portu (výchozí hodnota: 8888)
• Zkontrolujte, jestli adresa URL serveru v dojo odpovídá vaší adrese serveru.
• Ujistěte se, že žádný firewall neblokuje připojení.
• Vyhledání chyb CORS v konzole prohlížeče

Agent se nezobrazuje

Pokud se váš agent nezobrazí v rozevíracím seznamu Dojo:

• Ověřte, zda je koncový bod agenta registrován správně
• Kontrola chyb při spuštění v protokolech serveru
• Ujistěte se, že hovor se add_agent_framework_fastapi_endpoint úspěšně dokončil.

Problémy s proměnnými prostředí

Pokud se zobrazí chyby ověřování:

• .env Ověřte, že je váš soubor ve správném adresáři.
• Zkontrolujte, jestli jsou nastavené všechny požadované proměnné prostředí.
• Ujistěte se, že klíče rozhraní API a koncové body jsou platné.
• Po změně proměnných prostředí restartujte server.

Další kroky

• Prozkoumejte ukázkové agenty a podívejte se na vzory implementace.
• Informace o vykreslování back-endových nástrojů pro přizpůsobení uživatelských rozhraní nástrojů

Další zdroje

• Dokumentace k AG-UI

• AG-UI úložiště GitHub

• Aplikace Dojo

• Příklady integrace architektury Microsoft Agent

Již brzy.