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 interface enabling AI agents to control Chrome programmatically.
- Recent examples show CDP powering everything from AWS console automation to iterative drawing in JS Paint.
- For AI PMs, CDP is valuable for rapid prototyping of browser agents before native APIs are available.
- CDP-based automation is powerful but can be brittle, which is why structured alternatives like WebMCP matter.
- The tool has been closely associated with Claude Code, Cloud Code, browser.js setups, and Chrome automation CLI workflows.
Chrome DevTools Protocol
Overview
Chrome DevTools Protocol (CDP) is a browser automation and instrumentation protocol that lets software control Chrome programmatically. In the context of AI agents, it is often used as the low-level interface for opening pages, inspecting elements, injecting JavaScript, taking screenshots, clicking UI controls, and navigating complex web workflows. In the newsletter mentions here, CDP appears as the core mechanism that allowed Claude Code and related agent setups to operate Chrome directly rather than relying only on manual browser use.For AI Product Managers, CDP matters because it sits at the foundation of many browser-based agent experiences. It enables teams to prototype and ship AI systems that can interact with web apps, enterprise consoles, and visual tools like JS Paint. It also highlights an important product tradeoff: CDP can unlock powerful automation quickly, but workflows built on UI control can still be brittle unless paired with more structured APIs such as WebMCP.
Key Developments
- 2026-02-19 — A `browser.js` setup used Chrome DevTools Protocol on port 9222 so a Claude Code Sonnet 4.6 agent could execute browser commands such as open, list, elements, and click in Chrome.
- 2026-02-23 — Simon Willison demonstrated WebMCP together 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 hosting, VM provisioning, and deployment of a video upload and playback app.
- 2026-03-17 — Claude Code used Chrome DevTools Protocol to automate JS Paint, inject JavaScript, control mouse movements and tools, and iteratively compare screenshots until a target drawing reached 95% pixel similarity.
Relevance to AI PMs
- Prototype browser agents faster: CDP gives product teams a practical way to test AI agents on real web interfaces before native integrations or official APIs exist.
- Evaluate automation reliability: AI PMs can use CDP-based workflows to understand where agent UX breaks down, especially in dynamic UIs, login-heavy flows, and visual tasks that require screenshot validation.
- Design better tool strategies: CDP is useful as a fallback or experimentation layer, but PMs should compare it against structured approaches like WebMCP or first-party APIs when prioritizing scalability, maintainability, and security.
Related
- claude-code — Frequently paired with CDP to let an AI coding agent control Chrome and perform browser tasks.
- js-paint — A visual web app used in a notable CDP demo where Claude Code recreated drawings through automated browser control.
- cloud-code — Referenced as an agent setup that used CDP and a Chrome automation CLI for AWS console automation.
- chrome-automation-cli — A CLI layer that appears to expose browser control workflows built on top of CDP.
- webmcp — A proposed structured browser tool model demonstrated over CDP to reduce brittle UI automation.
- simon-willison — Highlighted CDP in a WebMCP research demo, helping frame the shift from raw browser automation to structured tool access.
- claude-code-sonnet-46 — Mentioned in connection with a CDP-powered `browser.js` setup for browser commands.
- browserjs — An example script used to connect to Chrome over CDP and expose simple browser actions.
- chrome — The browser that CDP controls, making it the runtime environment for these automation workflows.
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-focused assistant/tool used for building and automating engineering workflows. The newsletter references it in both security and product-usage contexts.
Developer and writer known for his AI tooling commentary and the `llm` project. He is credited here with the 0.32a2 release note.
A vibe-coding tool mentioned as part of Notion’s terminal-based prototyping workflow. It is used by designers and PMs to prototype AI features directly in code.
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