다음을 통해 공유

AG-UI Dojo를 사용한 테스트

AG-UI Dojo 애플리케이션은 AG-UI 프로토콜을 구현하는 Microsoft Agent Framework 에이전트를 테스트하고 탐색하는 대화형 환경을 제공합니다. Dojo는 에이전트에 연결하고 7개의 AG-UI 기능과 상호 작용하는 시각적 인터페이스를 제공합니다.

필수 조건

시작하기 전에 다음이 있는지 확인합니다.

  • Python 3.10 이상
  • uv 의존성 관리를 위한
  • OpenAI API 키 또는 Azure OpenAI 엔드포인트
  • Node.js 및 pnpm(Dojo 프런트 엔드 실행용)

설치

1. AG-UI 리포지토리 복제

먼저 Dojo 애플리케이션 및 Microsoft Agent Framework 통합 예제를 포함하는 AG-UI 리포지토리를 복제합니다.

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

2. 예제 디렉터리로 이동합니다.

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

3. Python 종속성 설치

필요한 종속성을 설치하려면 uv를 사용하십시오.

uv sync

4. 환경 변수 구성

제공된 .env 템플릿에서 파일을 만듭니다.

cp .env.example .env

.env 파일을 편집하고 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

비고

DefaultAzureCredential을 사용하여 api_key를 인증에 사용할 때, az login를 통해 Azure에 인증되었는지 확인하십시오. 자세한 내용은 Azure ID 설명서를 참조하세요.

Dojo 애플리케이션 실행

1. 백 엔드 서버 시작

예제 디렉터리에서 예제 에이전트를 사용하여 백 엔드 서버를 시작합니다.

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

기본적으로 서버는 http://localhost:8888에서 시작됩니다.

2. Dojo 프런트 엔드 시작

새 터미널 창을 열고 AG-UI 리포지토리의 루트로 이동한 다음 Dojo 애플리케이션 디렉터리로 이동합니다.

cd apps/dojo
pnpm install
pnpm dev

Dojo 프런트 엔드를 http://localhost:3000에서 사용할 수 있습니다.

3. 에이전트에 연결

  1. 브라우저에서 열기 http://localhost:3000

  2. 서버 URL을 http://localhost:8888로 설정하십시오.

  3. 드롭다운에서 "Microsoft 에이전트 프레임워크(Python)"를 선택합니다.

  4. 예제 에이전트 탐색 시작

사용 가능한 예제 에이전트

통합 예제에서는 다양한 에이전트 엔드포인트를 통해 7개의 AG-UI 기능을 모두 보여 줍니다.

엔드포인트 특징 Description
/agentic_chat 기능 1: 에이전트 채팅 도구 호출을 사용하는 기본 대화형 에이전트
/backend_tool_rendering 기능 2: 백 엔드 도구 렌더링 사용자 지정 도구 UI 렌더링이 있는 에이전트
/human_in_the_loop 기능 3: 휴먼 인 더 루프 승인 워크플로가 있는 에이전트
/agentic_generative_ui 기능 4: 에이전트 생성 UI 스트리밍 업데이트를 사용하여 작업을 단계로 나누는 에이전트
/tool_based_generative_ui 기능 5: 도구 기반 생성 UI 사용자 지정 UI 구성 요소를 생성하는 에이전트
/shared_state 기능 6: 공유 상태 양방향 상태 동기화가 있는 에이전트
/predictive_state_updates 기능 7: 예측 상태 업데이트 도구 실행 중 예측 상태 업데이트가 있는 에이전트

사용자 고유의 에이전트 테스트

Dojo에서 사용자 고유의 에이전트를 테스트하려면 다음을 수행합니다.

1. 에이전트 만들기

시작 가이드에 따라 새 에이전트 를 만듭니다 .

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. 서버에 에이전트 추가

FastAPI 애플리케이션에서 에이전트 엔드포인트를 등록합니다.

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. 도조에서 테스트

  1. 서버 시작
  2. 에서 Dojo 열기 http://localhost:3000
  3. 서버 URL을 http://localhost:8888로 설정하십시오.
  4. 에이전트가 엔드포인트 드롭다운에 "my_agent"로 표시됩니다.
  5. 이를 선택하고 테스트를 시작합니다.

프로젝트 구조

AG-UI 리포지토리의 통합 예제는 다음 구조를 따릅니다.

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

서버 연결 문제

Dojo가 서버에 연결할 수 없는 경우:

  • 서버가 올바른 포트에서 실행 중인지 확인합니다(기본값: 8888).
  • Dojo의 서버 URL이 서버 주소와 일치하는지 확인합니다.
  • 방화벽이 연결을 차단하지 않는지 확인합니다.
  • 브라우저 콘솔에서 CORS 오류 찾기

에이전트가 표시되지 않음

에이전트가 Dojo 드롭다운에 표시되지 않는 경우:

  • 에이전트 엔드포인트가 올바르게 등록되었는지 확인합니다.
  • 시작 오류에 대한 서버 로그 확인
  • 호출이 add_agent_framework_fastapi_endpoint 성공적으로 완료되었는지 확인

환경 변수 문제

인증 오류가 표시되는 경우:

  • .env 파일이 올바른 디렉터리에 있는지 확인합니다.
  • 필요한 모든 환경 변수가 설정되어 있는지 확인합니다.
  • API 키 및 엔드포인트가 유효한지 확인
  • 환경 변수를 변경한 후 서버 다시 시작

다음 단계

추가 리소스

곧 공개됩니다.

  • Last updated on