google/adk-web

Agent Development Kit Web UI (ADK WEB)

소개 – Google의 Agent Development Kit (ADK)와 함께 제공되는 브라우저 기반 개발자 콘솔입니다. ADK는 AI 에이전트(챗봇, 자율형 어시스턴트, 워크플로우 오케스트레이션 에이전트 등)를 구축, 배포 및 오케스트레이션하기 위한 모듈식 프레임워크입니다. 이 Web UI는 에이전트 생성, 이벤트 검사, 실행 추적, 아티팩트 및 평가 결과 확인, 그리고 기본 ADK 런타임 디버깅을 위한 시각적 프론트엔드를 제공합니다.

주요 구성 요소

• 프론트엔드 – Angular 단일 페이지 애플리케이션(npm run serve로 실행). 프록시를 통해 ADK 백엔드와 통신하므로 UI를 로컬 http://localhost:4200에서 실행할 수 있습니다.
• 백엔드 – ADK 런타임 자체로, adk web 명령(google-adk Python 또는 Java 패키지에서 설치)을 통해 실행합니다. UI는 API 호출을 이 프로세스로 전달합니다.
• 통합 – Gemini 모델 스택과 즉시 연동되지만 모델에 구애받지 않습니다. ADK 호환 에이전트 구현이라면 무엇이든 연결할 수 있습니다.

시작하기

1. Node, npm 및 Angular CLI를 설치합니다.
2. ADK Python 또는 Java SDK(google-adk)를 설치합니다.
3. 이 저장소를 복제하고 npm install을 실행한 다음 npm run serve를 실행합니다.
4. 다른 터미널에서 adk web을 실행하여 백엔드를 시작합니다.
5. http://localhost:4200을 열면 이벤트, 추적, 아티팩트, 평가 및 에이전트 빌더 탭이 있는 UI가 표시됩니다.

UI에서 할 수 있는 작업

• 이벤트 – 에이전트가 생성한 이벤트의 타임라인을 탐색합니다.
• 추적 – 에이전트 실행의 호출 그래프와 실행 흐름을 시각화합니다.
• 아티팩트 – 에이전트가 생성한 파일, 로그 또는 기타 출력을 검사합니다.
• 평가 – 에이전트의 지표와 테스트 결과를 확인합니다.
• 에이전트 빌더 및 어시스턴트 – 에이전트 구성 요소를 조립하고 라이브 어시스턴트와 상호 작용하기 위한 드래그 앤 드롭 방식의 인터페이스입니다.

대상 사용자 – 원시 로그보다 더 풍부한 디버깅 경험을 원하는 AI 에이전트 개발자. ADK 생태계의 일부이므로 Google 중심 워크플로우에 자연스럽게 맞지만, 모든 ADK 호환 모델과 함께 사용할 수 있습니다.

기여 – Google의 ADK 기여 가이드를 따르십시오. 테스트에는 Google 내부 CI를 위한 특별한 initTestBed 호출이 필요합니다.

라이선스 – Apache 2.0.

---

Happy Agent Building!