Provides browser automation tools with special support for Angular applications, including form submission and reactive input handling that works with Angular's framework-specific patterns.
Enables browser automation using CSS selectors for element discovery and interaction, with auto-generated selectors for all interactive elements on a page.
Allows execution of arbitrary JavaScript code in the browser context through the cdp_execute tool, providing an escape hatch for custom browser automation scenarios.
Implements a Chrome DevTools Protocol server for browser automation, requiring Node.js 18+ to run.
Provides browser automation capabilities as an alternative to Puppeteer, using direct Chrome DevTools Protocol communication instead of the Puppeteer framework wrapper.
Provides browser automation tools with special support for React applications, including form submission and controlled input handling that works with React's state management patterns.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g.,@CDP MCP fill out the login form on example.com with my credentials
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
You can also use deployed servers via HTTP endpoints. For instructions, see How to Test MCP Streamable HTTP Endpoints Using cURL.
CDP MCP
A Chrome DevTools Protocol MCP server for browser automation. Built for agents that need to fill forms, navigate sites, and remember what they learn.
Why This Exists
Most browser automation MCPs are either:
Wrappers around heavyweight frameworks (Playwright, Puppeteer)
Locked to specific sites
Missing element discovery (you have to guess selectors)
CDP MCP talks directly to Chrome via the DevTools Protocol. It auto-discovers interactive elements, generates selectors for you, and verifies that interactions actually worked.
Installation
Usage
Add to your Claude Code MCP config (~/.claude.json):
Then either:
Launch Chrome with CDP enabled:
cdp_launchOr connect to an existing Chrome with
--remote-debugging-port=9222:cdp_connect
Tools
Tool | Purpose |
| Launch Chrome with CDP enabled, isolated profile |
| Connect to existing Chrome instance |
| List all open tabs |
| Go to URL, back, forward, refresh |
| Discover all interactive elements with auto-generated selectors |
| Click, type, check, select, upload - with built-in verification |
| Read page text, element text, input values |
| Capture viewport or full page |
| Wait for element, text, navigation |
| Run arbitrary JavaScript (escape hatch) |
| List all frames (main + iframes) |
| Interact with elements inside iframes |
| Type at cursor position (for React/Vue/Angular) |
| Click at x,y coordinates |
| Set input value with proper event dispatch |
| Interact with Monaco/VS Code editors |
| Upload files to shadow DOM file inputs |
| Submit forms reliably (React/Vue/Angular compatible) |
Site Memory Tools
Tool | Purpose |
| Scan page structure (iframes, shadow DOM, forms) - auto-caches per epoch |
| Get stored site info for current page or domain |
| Add notes or selector patterns you learn |
| List all remembered sites |
| Forget a site (force fresh scan) |
| Debug epoch tracking |
Bug Tracking Tools
Tool | Purpose |
| Track a bug in CDP-MCP (writes to BUGS.md) |
| List all tracked bugs |
| Mark a bug as fixed and remove it |
Key Features
Auto-Discovery
cdp_find_elements returns every interactive element on the page with:
Tag, type, id, name, class
Associated label (from
<label>,aria-label, etc.)Auto-generated CSS selector
Visibility and position
No more guessing selectors or inspecting the DOM manually.
Built-in Verification
cdp_interact verifies that actions actually worked:
If a React controlled input silently rejects your value, you'll know immediately.
Site Memory
The MCP remembers what it learns about sites:
Iframe locations - Which sites use iframes and where
Shadow DOM elements - Components that need special handling
Selector patterns - CSS selectors that work for common actions
Notes - Context you add while working
Stored in ~/.claude/site-memory.json, persists across sessions.
Epoch Tracking
Site memory integrates with Claude Code's conversation compaction:
First visit to a site → full scan, cache results
Same site later in conversation → skip scan, use cache
After conversation compaction → allow one fresh scan (you lost context)
Back to caching until next compaction
This prevents redundant scanning while ensuring you re-orient after context loss.
Minimal Dependencies
ws- WebSocket client for CDPThat's it
No Playwright. No Puppeteer. Just raw CDP over WebSocket.
Example Workflow
Design Philosophy
Focused tool set - Everything an agent needs for browser automation
CSS selectors - Universal, inspectable, copy-pasteable
Verification by default - Know if it worked without extra calls
cdp_execute- When you need raw JS, it's there
Requirements
Node.js 18+
Chrome/Chromium with
--remote-debugging-portflag
License
MIT