AG-UI Dojo ile test yapmak

AG-UI Dojo uygulaması, AG-UI protokolü uygulayan Microsoft Agent Framework aracılarını test etmek ve keşfetmek için etkileşimli bir ortam sağlar. Dojo, aracılarınıza bağlanmak ve 7 AG-UI özelliğin tümüyle etkileşim kurmak için görsel bir arabirim sunar.

Önkoşullar

Başlamadan önce şunların olduğundan emin olun:

• Python 3.10 veya üzeri
• bağımlılık yönetimi için uv
• OpenAI API anahtarı veya Azure OpenAI uç noktası
• Node.js ve pnpm (Dojo ön ucu çalıştırmak için)

Kurulum

1. AG-UI Deposunu kopyalama

İlk olarak, Dojo uygulamasını ve Microsoft Agent Framework tümleştirme örneklerini içeren AG-UI deposunu kopyalayın:

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

2. Örnek Dizini'ne gidin

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

3. Python Bağımlılıklarını Yükleme

Gerekli bağımlılıkları yüklemek için kullanın uv :

uv sync

4. Ortam Değişkenlerini Yapılandırma

Sağlanan şablondan bir .env dosya oluşturun:

cp .env.example .env

.env Dosyayı düzenleyin ve API kimlik bilgilerinizi ekleyin:

# 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

Uyarı

kullanıyorsanız DefaultAzureCredential, kimlik doğrulaması için api_key yerine Azure ile kimlik doğrulaması yaptığınızdan emin olun (örneğin aracılığıyla az login). Daha fazla bilgi için Azure Identity belgelerine bakın.

Dojo Uygulamasını Çalıştırma

1. Arka Uç Sunucusunu Başlatma

Örnekler dizininde arka uç sunucusunu örnek aracılarla başlatın:

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

Sunucu varsayılan olarak http://localhost:8888 üzerinde başlayacak.

2. Dojo Ön Ucu'na başlayın

Yeni bir terminal penceresi açın, AG-UI deposunun köküne ve ardından Dojo uygulama dizinine gidin:

cd apps/dojo
pnpm install
pnpm dev

Dojo frontend adresinde http://localhost:3000 kullanılabilir olacaktır.

3. Temsilcinize Bağlanma

1. Tarayıcınızda açın http://localhost:3000

2. Sunucu URL'sini yapılandır http://localhost:8888

3. Açılan listeden "Microsoft Agent Framework (Python)" öğesini seçin

4. Örnek aracıları keşfetmeye başlayın

Kullanılabilir Örnek Aracılar

Tümleştirme örnekleri, farklı aracı uç noktaları aracılığıyla 7 AG-UI özelliğinin tümünü gösterir:

Bitiş noktası	Özellik	Description
/agentic_chat	Özellik 1: Aracılı Sohbet	Araç çağrısı ile temel konuşma aracısı
/backend_tool_rendering	Özellik 2: Arka Uç Aracı İşleme	Özel araç kullanıcı arabirimi sunan aracı
/human_in_the_loop	Özellik 3: Döngüde İnsan	Onay iş akışlarına sahip ajan
/agentic_generative_ui	Özellik 4: Özerk Üretken Kullanıcı Arabirimi	Gerçek zamanlı güncellemelerle görevleri aşamalara ayıran ajan
/tool_based_generative_ui	Özellik 5: Araç Tabanlı Oluşturucu Kullanıcı Arabirimi	Özel kullanıcı arabirimi bileşenleri oluşturan aracı
/shared_state	Özellik 6: Paylaşılan Durum	Çift yönlü durum eşitlemesi olan aracı
/predictive_state_updates	Özellik 7: Tahmine Dayalı Durum Güncelleştirmeleri	Araç yürütme sırasında tahmine dayalı durum güncellemeleri olan ajan

Kendi Ajanlarınızı Test Etmek

Dojo ile kendi aracılarınızı test etmek için:

1. Temsilcinizi oluşturun

Başlarken kılavuzunu izleyerek yeni bir aracı oluşturun:

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. Aracıyı Sunucunuza Ekleme

FastAPI uygulamanızda aracı uç noktasını kaydedin:

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. Dojo'da test

1. Sunucunuzu başlatma
2. Dojo'yu http://localhost:3000 açın
3. Sunucu URL'sini http://localhost:8888 olarak ayarla.
4. Temsilciniz son nokta açılır listesinde "my_agent" olarak görünür
5. Seçin ve test etmeye başlayın

Proje Yapısı

AG-UI deposunun tümleştirme örnekleri şu yapıyı izler:

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

Sorun giderme

Sunucu Bağlantısı Sorunları

Dojo sunucunuza bağlanamıyorsa:

• Sunucunun doğru bağlantı noktasında çalıştığını doğrulayın (varsayılan: 8888)
• Dojo'daki sunucu URL'sinin sunucu adresinizle eşleşir olup olmadığını denetleyin
• Güvenlik duvarının bağlantıyı engellemediğinden emin olun
• Tarayıcı konsolunda CORS hatalarını arayın

Aracı Görünmüyor

Temsilciniz Dojo açılan listesinde görünmüyorsa:

• Aracı uç noktasının doğru kaydedildiğini doğrulayın.
• Başlatma hataları için sunucu günlüklerini denetleyin
• Çağrının başarılı bir şekilde tamamlandığından add_agent_framework_fastapi_endpoint emin olun

Ortam Değişkeni Sorunları

Kimlik doğrulama hataları görürseniz:

• Dosyanızın .env doğru dizinde olduğunu doğrulayın
• Tüm gerekli ortam değişkenlerinin ayarlandığını denetleyin
• API anahtarlarının ve uç noktalarının geçerli olduğundan emin olun
• Ortam değişkenlerini değiştirdikten sonra sunucuyu yeniden başlatın

Sonraki Adımlar

• Uygulama desenlerini görmek için örnek aracıları keşfetme
• Araç kullanıcı arayüzlerini özelleştirmek için Backend Araç Sunumu hakkında bilgi edinin

Ek Kaynaklar

• AG-UI Belgeleri

• AG-UI GitHub Deposu

• Dojo Uygulaması

• Microsoft Agent Framework Tümleştirme Örnekleri

Çok yakında.