Bagikan melalui

Pengujian dengan AG-UI Dojo

Aplikasi AG-UI Dojo menyediakan lingkungan interaktif untuk menguji dan menjelajahi agen Microsoft Agent Framework yang menerapkan protokol AG-UI. Dojo menawarkan antarmuka visual untuk terhubung ke agen Anda dan berinteraksi dengan 7 fitur AG-UI.

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

  • Python 3.10 atau lebih tinggi
  • uv untuk manajemen dependensi
  • Kunci API OpenAI atau titik akhir Azure OpenAI
  • Node.js dan pnpm (untuk menjalankan frontend Dojo)

Installation

1. Kloning Repositori AG-UI

Pertama, kloning repositori AG-UI yang berisi aplikasi Dojo dan contoh integrasi Microsoft Agent Framework:

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

2. Navigasi ke Direktori Contoh

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

3. Pasang Dependensi Python

Gunakan uv untuk menginstal dependensi yang diperlukan:

uv sync

4. Mengonfigurasi Variabel Lingkungan

Buat .env file dari templat yang disediakan:

cp .env.example .env

.env Edit file dan tambahkan kredensial API Anda:

# 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

Jika menggunakan DefaultAzureCredential sebagai pengganti api_key untuk autentikasi, pastikan Anda telah terautentikasi dengan Azure (misalnya, melalui az login). Untuk informasi selengkapnya, lihat dokumentasi Azure Identity.

Menjalankan Aplikasi Dojo

Mulai Server Backend

Dalam direktori contoh, mulai server backend dengan contoh agen:

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

Server akan dimulai secara otomatis pada http://localhost:8888.

2. Mulai Frontend Dojo

Buka jendela terminal baru, navigasikan ke akar repositori AG-UI, lalu ke direktori aplikasi Dojo:

cd apps/dojo
pnpm install
pnpm dev

Frontend Dojo akan tersedia di http://localhost:3000.

3. Sambungkan ke Agen Anda

  1. Buka http://localhost:3000 di browser Anda

  2. Konfigurasikan URL server ke http://localhost:8888

  3. Pilih "Microsoft Agent Framework (Python)" dari menu dropdown

  4. Mulai menjelajahi agen contoh

Contoh Agen yang Tersedia

Contoh integrasi menunjukkan 7 fitur AG-UI melalui titik akhir agen yang berbeda:

Titik akhir Fitur Description
/agentic_chat Fitur 1: Obrolan Agenik Agen percakapan dasar dengan panggilan alat
/backend_tool_rendering Fitur 2: Pemrosesan Alat Pendukung Belakang Agen dengan penyajian UI alat kustom
/human_in_the_loop Fitur 3: Manusia dalam Sistem Agen dengan alur kerja persetujuan
/agentic_generative_ui Fitur 4: UI Generatif Agentik Agen yang memecah tugas menjadi langkah-langkah dengan pembaruan langsung
/tool_based_generative_ui Fitur 5: UI Generatif berbasis alat Agen yang menghasilkan komponen UI kustom
/shared_state Fitur 6: Status Bersama Agen dengan sinkronisasi status dua arah
/predictive_state_updates Fitur 7: Pembaruan Status Prediktif Agen dengan pembaruan status prediktif selama eksekusi alat

Menguji Agen Anda Sendiri

Untuk menguji agen Anda sendiri dengan Dojo:

1. Buat Agen Anda

Buat agen baru dengan mengikuti panduan Memulai :

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. Tambahkan Agen ke Server Anda

Di aplikasi FastAPI Anda, daftarkan titik akhir agen:

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. Uji di Dojo

  1. Memulai server Anda
  2. Buka Dojo di http://localhost:3000
  3. Atur URL server ke http://localhost:8888
  4. Agen Anda akan muncul di dropdown titik akhir sebagai "my_agent"
  5. Pilih dan mulai pengujian

Struktur Proyek

Contoh integrasi repositori AG-UI mengikuti struktur ini:

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

Troubleshooting

Masalah Koneksi Server

Jika Dojo tidak dapat tersambung ke server Anda:

  • Verifikasi server berjalan pada port yang benar (default: 8888)
  • Periksa apakah URL server di Dojo cocok dengan alamat server Anda
  • Pastikan tidak ada firewall yang memblokir koneksi
  • Cari kesalahan CORS di konsol browser

Agen Tidak Muncul

Jika agen Anda tidak muncul di dropdown Dojo:

  • Verifikasikan bahwa endpoint agen terdaftar secara benar
  • Periksa log server untuk kesalahan startup apa pun
  • add_agent_framework_fastapi_endpoint Pastikan panggilan berhasil diselesaikan

Masalah Variabel Lingkungan

Jika Anda melihat kesalahan autentikasi:

  • Verifikasi bahwa file Anda .env berada di direktori yang benar
  • Periksa apakah semua variabel lingkungan yang diperlukan diatur
  • Pastikan kunci API dan titik akhir valid
  • Mulai ulang server setelah mengubah variabel lingkungan

Langkah Selanjutnya

Sumber Daya Tambahan

Segera datang.

  • Last updated on