chrome-devtools-axi

chrome-devtools-axi wraps chrome-devtools-mcp with an AXI-compliant CLI.

• Token-efficient — TOON-encoded output cuts token usage ~40% vs raw JSON
• Combined operations — one command navigates, captures, and suggests next steps
• Contextual suggestions — every response includes actionable next-step hints

Benchmarks

Agent ergonomics is measurable. The axi benchmark runs the same 14 real-world browsing tasks (Wikipedia research, GitHub navigation, multi-site comparison, and more) through 7 browser automation setups - 5 repeats each, with claude-sonnet-4-6 as the agent and an LLM judge scoring task success.

chrome-devtools-axi posts the lowest input tokens, cost, duration, and turn count of all 7 conditions, with 100% task success:

Against raw chrome-devtools-mcp - the very server this CLI wraps - that is 57% fewer input tokens, 26% lower cost, and 27% fewer agent turns.

Quick Start

Install the chrome-devtools-axi skill in the Agent Skills format with npx skills:

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

That is the entire setup - no npm install needed. The skill teaches your agent to run chrome-devtools-axi through npx -y chrome-devtools-axi, so the CLI comes along on demand.

The skill is not a user-facing slash command (user-invocable: false). Just ask for anything that needs a real browser - opening a page, clicking through a flow, extracting page content, debugging console or network, auditing performance - and the agent loads the skill on its own when it recognizes the task. For ordinary web search, curl-able pages, or static extraction, the skill tells agents to skip Chrome and use simpler fetch/curl-style tooling. The skill frontmatter also includes Hermes Agent metadata (author plus metadata.hermes tags/category) so Hermes can list it as a first-class browser automation skill; other harnesses ignore those extra fields.

-g installs the skill for all projects (~/.claude/skills/, for example); drop it to install for the current project only (.claude/skills/).

What Agent Sees

$ 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
page: {title: "IANA — IANA-Managed Reserved Domains", refs: 12}
snapshot:
...

Refs in snapshot output carry a g<N>: generation prefix that bumps every time a new accessibility tree is captured. Pass refs back exactly as printed. UID actions also verify that the tracked page has not mutated since that snapshot; if freshness cannot be confirmed (including for a legacy untagged ref), they fail loudly with STALE_REF instead of silently no-op'ing, so the agent re-snapshots and retries. The skill also instructs agents to verify state-changing actions with a fresh snapshot, eval, or screenshot before reporting success, because a current ref can still produce no visible page change.

Other Ways to Install

The skill is the recommended path, but it is not the only one.

Zero setup

chrome-devtools-axi is an AXI, so any capable agent can run the CLI directly with nothing installed at all. Just tell your agent:

Execute `npx -y chrome-devtools-axi` to get browser automation tools.

Session hook

Want ambient browser context - including the live page state of an active session - fed into every agent session instead of loading on demand? Install the CLI globally and opt into the hook:

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

This installs a SessionStart hook for Claude Code, Codex, and OpenCode that surfaces the current browser session and usage guidance at the start of each session. Restart your agent session after running this so the new hook takes effect.

Development entrypoints such as pnpm run dev and bin/chrome-devtools-axi.ts are guarded from accidental hook installation.

From source

git clone https://github.com/kunchenguid/chrome-devtools-axi.git
cd chrome-devtools-axi
pnpm install --frozen-lockfile
pnpm run build
pnpm link

How It Works

The bridge keeps one persistent MCP session across CLI invocations. With no shared URL (or a blank one), standalone mode uses the local stdio process chain below. See Configuration for the two shared-service choices.

┌───────────────────────┐
│  chrome-devtools-axi  │  CLI — parse args, format output
└──────────┬────────────┘
           │ HTTP (localhost:9224)
           ▼
┌───────────────────────┐
│     Bridge Server     │  Persistent process, manages MCP session
└──────────┬────────────┘
           │ stdio
           ▼
┌───────────────────────┐
│  chrome-devtools-mcp  │  Headless Chrome via DevTools Protocol
└───────────────────────┘

In URL-only shared mode, the bridge uses Streamable HTTP directly instead:

┌───────────────────────┐
│  chrome-devtools-axi  │  CLI — parse args, format output
└──────────┬────────────┘
           │ HTTP (localhost:9224)
           ▼
┌───────────────────────┐
│     Bridge Server     │  Persistent per-session MCP client
└──────────┬────────────┘
           │ Streamable HTTP
           ▼
┌───────────────────────┐
│ Shared MCP service     │  One remote MCP process + Chrome
└───────────────────────┘

• Persistent bridge — a detached process keeps the selected MCP session alive across commands, so Chrome doesn't restart every invocation
• Auto-lifecycle — the bridge starts on first command, writes a PID file to ~/.chrome-devtools-axi/bridge.pid, recycles stale CDP targets after a deep health check, and reaps child processes on stop
• Snapshot parsing — accessibility tree snapshots are extracted and analyzed for interactive elements (uid= refs)
• TOON encoding — structured metadata uses TOON format for compact, token-efficient output

CLI Reference

Navigation

eval wraps plain input as () => (<expr>) before sending it to DevTools. For multi-statement logic, pass an arrow function or function. No-arg IIFE form (...)() is accepted too and unwrapped automatically.

chrome-devtools-axi eval "document.title"
chrome-devtools-axi eval "() => { const rows = [...document.querySelectorAll('tr')]; return rows.map((row) => row.textContent) }"

Interaction

Page Management

Emulation

DevTools Debugging

For large request or response bodies, prefer network-get <id> --response-file <path> or --request-file <path> so the body goes to disk instead of flooding agent context.

Performance