GenAI PMChrome DevTools Protocol
A browser automation protocol used here to let a Claude Code agent control Chrome programmatically.
Key Highlights
- Chrome DevTools Protocol is the low-level control layer that lets AI agents operate Chrome programmatically.
- Recent examples show CDP enabling AWS Console automation, browser command execution, and iterative drawing in JS Paint.
- For AI PMs, CDP is valuable for prototyping browser agents and measuring task reliability on real interfaces.
- CDP-based workflows help teams assess when raw UI automation is enough and when structured browser tools are needed.
Chrome DevTools Protocol
Overview
Chrome DevTools Protocol (CDP) is a low-level browser automation and debugging protocol that lets software control Chrome programmatically. It exposes capabilities such as opening pages, inspecting elements, injecting JavaScript, simulating clicks and mouse movement, capturing screenshots, and interacting with browser internals over a remote debugging connection. In the examples referenced here, CDP is used as the control layer that enables AI coding agents like Claude Code and Cloud Code to operate Chrome directly.For AI Product Managers, CDP matters because it sits underneath many practical browser-agent workflows. It enables teams to prototype browser automation quickly, validate agent behavior in real web environments, and build tool-use systems that go beyond chat into action. It is especially useful when testing agent reliability on real interfaces like AWS Console, JS Paint, or custom web apps, and when evaluating where raw UI automation is sufficient versus where more structured browser tools are needed.
Key Developments
- 2026-02-19: A `browser.js` setup used Chrome DevTools Protocol on port 9222 to let a Claude Code Sonnet 4.6 agent execute browser commands such as open, list, elements, and click in Chrome.
- 2026-02-23: Simon Willison demonstrated WebMCP with Chrome DevTools Protocol, showing how structured browser tools could be registered and called from a Python client over CDP, with the goal of reducing brittle UI automation.
- 2026-03-09: Cloud Code used the Chrome automation CLI via Chrome DevTools Protocol to control Chrome for AWS Console workflows, including S3 static site setup, Ubuntu VM provisioning, and deployment of a video upload and playback app.
- 2026-03-17: Claude Code used Chrome DevTools Protocol automation plus screenshot-based comparison in JS Paint to iteratively reproduce drawings, improving outputs through redraw loops until reaching 95% pixel similarity.
Relevance to AI PMs
- Prototype real browser agents faster: CDP gives teams a direct way to test whether an AI agent can complete end-to-end tasks in live web products without waiting for formal APIs or deeper integrations.
- Measure reliability on actual interfaces: PMs can use CDP-based workflows to benchmark task completion, latency, error recovery, screenshot comparison, and UI fragility across important journeys like admin consoles or internal tools.
- Decide when to move beyond raw UI automation: CDP is useful for early validation, but its brittleness on changing interfaces can help PMs identify when to invest in structured tool layers, MCP-style abstractions, or first-party product APIs.
Related
- claude-code: A coding agent that used CDP to control Chrome and perform browser tasks.
- cloud-code: Browser-agent setup that leveraged CDP through a Chrome automation CLI for AWS Console automation.
- chrome-automation-cli: Command-line layer used to drive Chrome via CDP.
- webmcp: Proposed browser tool interface demonstrated over CDP to make agent interactions more structured and less brittle.
- browserjs: A lightweight setup using CDP on port 9222 to expose browser commands to an agent.
- js-paint: Example environment where Claude Code used CDP for drawing automation and screenshot feedback loops.
- simon-willison: Highlighted a WebMCP + CDP demo showing a path from raw automation to callable browser tools.
- claude-code-sonnet-46: Model variant referenced in an early CDP-based browser control setup.
- chrome: The browser that CDP controls and inspects through its remote debugging interface.
Newsletter Mentions (4)
“#10 ▶️ Can Claude Code Learn To Draw In MS PAINT? All About AI Claude Code leverages Chrome DevTools Protocol automation and screenshot‐based comparison to iteratively replicate user drawings in JS Paint until reaching 95% pixel similarity.”
Today's top 25 insights for PM Builders, ranked by relevance from Blogs, X, YouTube, and LinkedIn. #10 ▶️ Can Claude Code Learn To Draw In MS PAINT? All About AI Claude Code leverages Chrome DevTools Protocol automation and screenshot‐based comparison to iteratively replicate user drawings in JS Paint until reaching 95% pixel similarity. Claude Code injects JavaScript via Chrome CDP to control mouse movements and select tools directly in JS Paint with no preloaded skills. Each canvas state is captured and compared against a baseline image (e.g. fisherman.png) using a custom screenshot tool, triggering redraw loops until 95% similarity is achieved. In the “AI agent 2” text replication test, the similarity score improved from 78.1% to 92% and finally 95% after automated flips and shape refinements of the letters.
“Cloud Code setup leverages the Chrome automation CLI and Chrome DevTools Protocol to control Chrome for AWS console interactions.”
#2 ▶️ 3 AI Agent Browser Automation Challenges That Keep Getting Harder All About AI Uses a Cloud Code AI browser agent with the Chrome automation CLI (via Chrome DevTools Protocol) to navigate the AWS console and complete three challenges: S3 static web hosting, Ubuntu VM provisioning with graphical remote desktop and YouTube playback, and deploying a video upload/playback web app. Cloud Code setup leverages the Chrome automation CLI and Chrome DevTools Protocol to control Chrome for AWS console interactions. Level one took 40 minutes: created S3 bucket named "EJ Oslo site 2026", uploaded "me.png" and "index.html", enabled static website hosting, unblocked public access, and applied a bucket policy via AWS CloudShell CLI. Level three deployed a video upload application via the AWS console and CloudShell, implemented HTML/CSS front end, uploaded a 200 MB video file, and generated a public playback URL that successfully streamed the uploaded video.
“#5 📝 Simon Willison Research WebMCP + Chrome DevTools Protocol Demo - Demo of WebMCP, a proposed browser API for exposing structured, callable tools to AI agents, showing how to register and interact with WebMCP tools from a Python client over the Chrome DevTools Protocol.”
#5 📝 Simon Willison Research WebMCP + Chrome DevTools Protocol Demo - Demo of WebMCP, a proposed browser API for exposing structured, callable tools to AI agents, showing how to register and interact with WebMCP tools from a Python client over the Chrome DevTools Protocol. The project aims to reduce reliance on brittle UI automation.
“Setting up a browser.js file that uses Chrome DevTools Protocol on port 9222 to enable a Claude Code Sonnet 4.6 AI agent to execute open, list, elements, and click commands in Chrome.”
The article explains how CDP is used to automate browser navigation and page interaction for an agent.
Related
Anthropic's coding assistant used for programming and automation tasks. The newsletter references it for building a custom approval device and for writing and research workflows inside AI agents.
Independent AI commentator and developer known for practical analysis of LLM products. Here he argues Anthropic and OpenAI have found product-market fit.
A cloud-based coding environment used to build a personal AI assistant or ‘second brain.’ It is described as managing briefs, tracking initiatives, and suggesting actions.
A W3C-backed browser extension that exposes website functionality to MCP-capable agents. It lets developers register site functions as structured tools in the browser.
Stay updated on Chrome DevTools Protocol
Get curated AI PM insights delivered daily — covering this and 1,000+ other sources.
Subscribe Free