kunchenguid/chrome-devtools-axi

chrome-devtools-axi – 에이전트 친화적인 Chrome 자동화

이것이 무엇인가

• chrome-devtools-mcp (헤드리스 Chrome 컨트롤러)와 통신하고, 대규모 언어 모델 에이전트를 위해 설계된 간결하고 토큰 효율적인 표현인 AXI 형식으로 결과를 제시하는 명령줄 인터페이스입니다.
• CLI는 의도적으로 에이전트 친화적으로 설계되었습니다. 단일 명령으로 탐색, 페이지 스냅샷 캡처, 다음 단계에 대한 실행 가능한 힌트 반환을 모두 수행하면서 데이터 크기를 낮게 유지합니다 (TOON 인코딩 출력은 원시 JSON 대비 약 40%의 토큰을 절약).

AI 에이전트에게 중요한 이유

• 많은 LLM 기반 에이전트는 단순한 HTTP fetch로 처리할 수 없는 작업(다단계 흐름 클릭, 대화상자 처리, JavaScript 실행, 동적 콘텐츠 추출 등)을 수행하기 위해 실제 브라우저가 필요합니다. chrome-devtools-axi는 이러한 에이전트에게 안정적이고 오버헤드가 낮은 Chrome 브리지를 제공합니다.
• 이 도구는 AXI 생태계(https://axi.md 참조)와 통합되며, npx skills를 통해 Agent Skill로 설치할 수 있어 에이전트가 수동으로 npm install하지 않고도 필요 시 로드할 수 있습니다.

작동 방식

1. 브리지 서버 – 분리된 프로세스가 CLI 호출 사이에 영구 MCP 세션을 유지하므로 명령마다 Chrome이 다시 시작되지 않습니다.
2. CLI – 인수를 파싱하고, HTTP(기본 localhost:9224)를 통해 브리지에 요청을 보내고, TOON 인코딩 스냅샷을 수신하고, 사람이 읽을 수 있는 요약과 다음 작업에 대한 help 힌트를 출력합니다.
3. 영속성 옵션 –
   • 독립형: 브리지가 로컬 chrome-devtools-mcp 자식 프로세스를 생성합니다(기본값).
   • 공유 서비스: CHROME_DEVTOOLS_AXI_MCP_SERVER_URL을 이미 실행 중인 MCP 서버로 지정하여 많은 에이전트가 단일 Chrome 인스턴스를 재사용할 수 있습니다.
4. 출력 – 접근성 트리의 스냅샷이 TOON으로 인코딩되며, 대화형 요소에는 안정적인 @g<N>:<uid> 참조가 부여됩니다. 에이전트는 이러한 참조를 CLI에 다시 제공하여 클릭, 입력 등을 수행할 수 있습니다.

주요 명령(에이전트 지향)

명령	기능
open <url>	페이지를 로드하고, 접근성 스냅샷을 캡처하고, 짧은 요약과 help 제안(예: click link @g1:1)을 반환합니다.
click @<uid>	최신 스냅샷에서 참조로 식별된 요소를 클릭합니다.
fill @<uid> <text>	양식 필드에 텍스트를 입력합니다.
eval <js>	페이지 컨텍스트에서 임의의 JavaScript를 실행하고 결과(TOON 값으로 래핑)를 반환합니다.
snapshot	탐색 없이 현재 페이지의 접근성 트리를 캡처합니다.
screenshot …	뷰포트 또는 전체 페이지의 PNG/JPEG/WebP를 저장합니다.
lighthouse …	Lighthouse 감사를 실행하고 보고서를 디스크에 작성합니다.
perf-start / perf-stop	Chrome 성능 추적을 시작 및 중지합니다.
setup hooks	Claude Code, Codex, OpenCode용 세션 시작 후크를 설치하여 각 채팅 시작 시 에이전트가 현재 브라우저 컨텍스트를 자동으로 받도록 합니다.

설치 및 활성화

1. 에이전트 스킬 경로(권장)

   npx skills add kunchenguid/chrome-devtools-axi --skill chrome-devtools-axi -g
   

   이 스킬은 AXI 호환 에이전트에게 실제 브라우저가 필요할 때 npx -y chrome-devtools-axi …를 실행하도록 지시합니다.
2. 제로 설치 실행 – 에이전트는 사전 설치 없이 npx -y chrome-devtools-axi를 사용하여 CLI를 직접 호출할 수 있습니다.
3. 전역 설치(수동 사용 또는 후크 설정용)

   npm install -g chrome-devtools-axi
   chrome-devtools-axi setup hooks
   

4. 소스에서 – 클론, pnpm install --frozen-lockfile, pnpm run build, pnpm link.

성능 하이라이트(README의 벤치마크에서)

메트릭	chrome-devtools-axi	다음 최고
작업당 평균 입력 토큰	79,141	82,532 (dev-browser)
작업당 평균 비용	$0.074	$0.078
평균 지속 시간	21.5초	24.6초
평균 에이전트 턴 수	4.5	4.8
성공률	100%	99%
이 도구는 원시 chrome-devtools-mcp와 비교하여 토큰 사용량을 약 57% 줄이고, LLM 에이전트 턴 수를 약 27% 줄입니다.

LLM 에이전트의 일반적인 사용 사례

• 연구 워크플로 – Wikipedia 페이지를 열고, 관련 링크를 클릭하고, 표를 추출하고, 에이전트가 요약하도록 합니다.
• GitHub 탐색 – 저장소를 탐색하고, PR 페이지를 열고, "Files changed"를 클릭하고, diff를 가져옵니다.
• 다중 사이트 비교 – 병렬 탭에서 여러 제품 페이지를 로드하고, 가격 요소를 스크래핑하고, 차이점을 계산합니다.
• 성능 감사 – 에이전트가 SEO 또는 UX를 평가하는 페이지에서 Lighthouse 또는 Chrome 추적을 실행합니다.
• 양식 자동화 – 로그인 양식을 작성하고, 제출하고, 진행하기 전에 결과 페이지 상태를 확인합니다.

제한 사항/주의 사항

• 이 CLI는 사용자 지향 슬래시 명령이 아닙니다. 사람이 직접 입력하는 것이 아니라 에이전트가 호출하도록 설계되었습니다.
• 새 스냅샷 없이 페이지가 변경되면 참조(@g<N>:…)가 오래됩니다. CLI는 STALE_REF로 중단하므로 에이전트는 다시 스냅샷을 찍어야 합니다.
• 스냅샷 출력은 --full을 사용하지 않는 한 약 16KB로 잘립니다. 매우 큰 페이지에서는 --full이 필요할 수 있습니다.
• 브리지 프로세스는 ~/.chrome-devtools-axi/에 PID 파일을 작성합니다. 이 파일이 손상되면 브리지를 수동으로 정리해야 할 수 있습니다.
• 많은 에이전트에서 단일 Chrome 인스턴스를 공유하려면 호환되는 chrome-devtools-mcp 서비스를 실행하고 적절한 환경 변수를 설정해야 합니다.

결론 chrome-devtools-axi는 LLM 에이전트가 실제 Chrome 브라우저를 효율적으로 제어할 수 있도록 특별히 설계된 브리지입니다. 결과를 토큰 절약형 TOON 형식으로 인코딩하고 내장된 "다음 단계" 힌트를 제공함으로써 모델과 도구 간의 왕복을 줄여 더 저렴하고 빠르며 안정적인 에이전트 주도 웹 자동화를 가능하게 합니다.