Skip to content

Commit b2196a7

Browse files
authored
Let Claude drive real Chrome via chrome-devtools-mcp (#519)
Prototype for #518. Wires the official [chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp) server so **Claude (and any other MCP client) can drive a real headless Chrome** against Kolu's own dev server — `evaluate_script`, `list_console_messages`, `take_screenshot`, network inspection, performance traces, all 29 tools. Solves the recurring "I'm guessing at CSS cascade / computed styles" round-trip that inspired the issue. The wiring lives in three places. `.mcp.json` at the repo root is the bit Claude Code actually reads — Claude starts _outside_ the nix devshell, so the `nix develop --command just ai::mcp-chrome-devtools` wrapper bridges into a shell where `npx`/`node` and the Playwright-provided Chrome-for-Testing are on `PATH`. The launcher recipe sits in `agents/ai.just` alongside the rest of the APM/agent dev tooling, and resolves Chrome's binary inline by globbing `$PLAYWRIGHT_BROWSERS_PATH/chromium-*/chrome-linux64/chrome` so there's no shell.nix surface area to maintain. _Reuses Playwright's Chrome-for-Testing 143, which chrome-devtools-mcp officially supports — no new browser dependency, just the Node package fetched by `npx`._ End-to-end smoke verified: JSON-RPC `initialize` returns `chrome_devtools` v0.21.0 with `tools.listChanged` capability advertised. Navigated to `http://localhost:7681`, took an a11y snapshot, evaluated `document.querySelectorAll('[data-terminal-id]')` to probe live sidebar state — all 29 tools work as expected. Warm `nix develop` eval stays at ~0.25s. > **Follow-up encapsulation is gated on [microsoft/apm#655](microsoft/apm#655 Once that PR (Claude Code MCP adapter) merges and lands in juspay's fork, the `chrome-devtools` entry folds into `agents/apm.yml`'s `dependencies.mcp` and `.mcp.json` becomes a generated artifact of `just ai::apm`. The TODO is captured in the `mcp-chrome-devtools` recipe's doc comment. > **Telemetry note.** `chrome-devtools-mcp` sends usage statistics to Google by default, and performance traces send URLs to the Chrome CrUX API. Left default-on for this prototype — if unwanted, add `--no-usage-statistics --no-performance-crux` to the recipe before merge. Refs #518.
1 parent 547cd9e commit b2196a7

File tree

2 files changed

+23
-0
lines changed

2 files changed

+23
-0
lines changed

.mcp.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"mcpServers": {
3+
"chrome-devtools": {
4+
"command": "nix",
5+
"args": ["develop", "--command", "just", "ai::mcp-chrome-devtools"]
6+
}
7+
}
8+
}

agents/ai.just

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,18 @@ apm-sync: apm-audit
6161
agent *args: apm
6262
just prepare
6363
{{ env('AI_AGENT', 'claude --dangerously-skip-permissions') }} {{ args }}
64+
65+
# Launch chrome-devtools-mcp server over stdio — wired up via the root
66+
# `.mcp.json`, which shells out via `nix develop --command just
67+
# ai::mcp-chrome-devtools` (Claude Code starts outside the nix devshell).
68+
# Chrome binary resolved from Playwright's nix-provided Chrome-for-Testing
69+
# across platforms: `chrome-linux64/chrome` on Linux and
70+
# `chrome-mac-*/Google Chrome for Testing.app/.../Google Chrome for Testing`
71+
# on macOS. `find` picks either layout; a miss fails loud downstream
72+
# (empty --executable-path → MCP server errors out visibly).
73+
#
74+
# TODO: fold .mcp.json's entry into `dependencies.mcp` above once
75+
# microsoft/apm#655 (Claude Code MCP adapter) merges and lands in juspay's
76+
# fork — `.mcp.json` then becomes a generated artifact of `just ai::apm`.
77+
mcp-chrome-devtools:
78+
sh -c 'chrome="$(find "$PLAYWRIGHT_BROWSERS_PATH"/chromium-* \( -name chrome -o -name "Google Chrome for Testing" \) -type f -perm -u+x 2>/dev/null | head -1)"; exec npx -y chrome-devtools-mcp@latest --headless=true --isolated=true --executable-path="$chrome"'

0 commit comments

Comments
 (0)