kunchenguid/chrome-devtools-axi

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

무엇인가요 – chrome-devtools-axi 는 chrome‑devtools‑mcp 라이브러리(Chrome DevTools Protocol 기반의 헤드리스 Chrome 컨트롤러)를 래핑하는 명령줄 도구이며, 출력을 AXI 호환 형식으로 제공합니다. AXI(Agent eXecution Interface)는 대규모 언어 모델 에이전트를 위한 가벼운 스키마로, 이 CLI 는 토큰 효율성 을 최적화하고 에이전트가 명확하고 실행 가능한 힌트를 얻을 수 있도록 조정되어 있습니다.

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

저토큰 비용 – 스냅샷은 TOON 형식으로 인코딩되어 원시 JSON 대비 약 40%의 토큰 수를 절감(원시 chrome‑devtools‑mcp 출력 대비 입력 토큰 수 약 57% 감소).
적은 상호작용 턴 수 – 하나의 명령어로 탐색, 페이지 캡처, 다음 단계 제안이 가능하여 LLM 이 수행해야 하는 왕복 호출 횟수를 줄입니다.
내장된 사용자 친화성 – 모든 응답에 다음 명령어를 실행할 수 있도록 안내하는 짧은 "도움" 라인이 포함되어 있습니다(예: click @g1:1).
벤치마크 검증 – 공개된 AXI 벤치마크(14개의 실제 웹 브라우징 작업, Claude‑Sonnet‑4‑6를 에이전트로 사용)에서 성공률 100%를 유지하면서 평균 입력 토큰 수, 비용, 실행 시간, 턴 수가 최저 수준을 기록했습니다.

작동 방식

chrome‑devtools‑axi  (CLI) → HTTP (localhost:9224) → 브리지 서버(지속적인 MCP 세션) → chrome‑devtools‑mcp → 헤드리스 Chrome

브리지 프로세스는 CLI 호출 간에 지속적으로 실행되므로 Chrome 을 매번 재시작할 필요가 없습니다.
브리지가 접근성 트리를 캡처하고, 상호작용 가능한 요소 ID(uid= 참조)를 추출하여 TOON 으로 인코딩합니다.
명령어(open, click, fill, eval, screenshot, lighthouse 등)는 DevTools Protocol 메시지로 변환되며, 결과는 컴팩트하고 에이전트용으로 최적화된 JSON 형식으로 반환됩니다.

설치 및 빠른 시작

에이전트 스킬 경로(권장) – npm install 없이 단일 명령어로 Claude/Hermes 스타일 에이전트에 스킬 추가:
```
npx skills add kunchenguid/chrome-devtools-axi --skill chrome-devtools-axi -g
```
이 스킬은 실제 브라우저가 필요한 작업 시 에이전트가 npx -y chrome-devtools-axi 를 통해 CLI 를 호출하도록 지시합니다.

직접 CLI – 전역 설치 또는 즉시 실행:

npm i -g chrome-devtools-axi   # 또는
npx -y chrome-devtools-axi open https://example.com

소스에서 – 복제 후 pnpm install --frozen-lockfile, pnpm run build, 이후 pnpm link.

에이전트의 일반적인 상호작용

$ chrome-devtools-axi open https://example.com
page: {title:"Example Domain",url:"https://example.com",refs:1}
snapshot:
RootWebArea "Example Domain"
  heading "Example Domain"
  paragraph "This domain is for use in illustrative examples..."
  uid=g1:1 link "More information..."
help[1]: Run `chrome-devtools-axi click @g1:1` to click the "More information..." link

에이전트는 이후 chrome-devtools-axi click @g1:1 을 실행하고 새로운 스냅샷을 수신한 후 워크플로우를 계속할 수 있습니다.

주요 명령어 그룹

탐색 – open <url>, back, scroll, wait, eval.
인터랙션 – click @uid, fill @uid <text>, type, press, hover, drag.
페이지 관리 – pages, newpage, selectpage, closepage, resize.
DevTools 데이터 – console, network, lighthouse, perf‑start/stop, heap.
브리지 제어 – start, stop, setup hooks (Claude Code, Codex, OpenCode용 세션 시작 훅 설치).

구성 옵션

CHROME_DEVTOOLS_AXI_PORT – 사용자 정의 브리지 포트.
CHROME_DEVTOOLS_AXI_BROWSER_URL – 기존 Chrome 인스턴스에 연결(HTTP 또는 WS 엔드포인트).
CHROME_DEVTOOLS_AXI_CHANNEL – Chrome 릴리스 채널 선택(stable, beta, canary, dev).
CHROME_DEVTOOLS_AXI_SESSION – 별도의 격리된 브리지 세션을 병렬로 실행.
격리 플래그(--use-mock-keychain, --password-store=basic)는 시작된 브라우저가 OS 키체인에 접근하지 않도록 보장합니다.

누가 사용해야 할까

신뢰할 수 있고 토큰 효율적인 브라우저 자동화가 필요한 LLM 기반 에이전트 를 개발하는 개발자.
Claude, Hermes, 또는 어떤 AXI 호환 에이전트 플랫폼에도 즉시 사용 가능한 스킬 을 원하는 팀.
프로그래머블 Chrome 인터페이스가 필요하고, 프롬프트 인젝션에 적합한 간결하고 구조화된 데이터를 반환해야 하는 모든 사람.

위의 모든 세부 정보는 리포지토리의 README에서 직접 인용되었으며, 추가 기능은 추측되지 않았습니다.

kunchenguid/chrome-devtools-axi

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

관련