에이전트 실행 시각화 도구 공개

개발자 Simon Patole이 Claude Code와 Codex의 에이전트 실행 과정을 실시간으로 시각화하는 오픈소스 도구 Agent Flow를 공개했다. 기존 로그 기반 디버깅의 한계를 극복하기 위해, 에이전트의 도구 호출, 분기, 반환 흐름을 상호작용 가능한 노드 그래프로 표현한다.

주요 기능 및 특징

• 실시간 시각화: 실행 중인 에이전트와 하위 에이전트를 노드로 배치하고, 각 노드에 누적 토큰 사용량과 비용을 표시한다. 오른쪽 패널에서는 에이전트별, 도구별 비용 분포를 확인할 수 있다.
• 다중 런타임 지원: Claude Code와 Codex 세션을 동시에 자동 감지하여 나란히 보여준다. Claude Code는 HTTP 훅을 통해 이벤트를 직접 수신하고, Codex는 롤아웃 파일을 감시하여 이벤트를 수집한다.
• 정확한 토큰 집계: Codex의 경우 런타임이 집계한 토큰 수를 그대로 사용하므로, 시각화 도구가 별도로 추정하지 않아도 정확한 비용을 파악할 수 있다.

설치 및 활용

• 빠른 실행: npx agent-flow-app 명령어로 브라우저에서 즉시 실행 가능하며, VS Code 확장을 통해 작업 공간 내에서 자동으로 감지 및 시각화할 수 있다.
• 환경 요구 사항: Node.js 20 이상, pnpm, Claude Code CLI가 필요하며 VS Code 확장은 1.85 이상 버전에서 지원된다.
• 라이선스: Apache License 2.0으로 공개되어 상업적 사용이 가능하지만, 'Agent Flow' 이름과 로고는 상표로 보호된다.

이 도구는 복잡한 워크플로우에서 병목 현상이나 불필요한 분기를 진단하고, 프롬프트 해석 과정을 관찰하려는 개발자에게 특히 유용하다.