About mcp-cdp
mcp-cdp is an MCP server for controlling Electron or Chrome/Chromium apps through the Chrome DevTools Protocol. It is intended for agents inspecting or interacting with app pages, offering DOM, console, and network data with read-only defaults and gated actions.
Key features
- 01Read DOM and element HTML
- 02Inspect console and network requests
- 03Capture viewport screenshots
- 04Click, type, and navigate
- 05Gated page JavaScript evaluation
Use cases
- 01Inspect an app's page structure
- 02Trace console errors and failed requests
- 03Automate interactions with a page
- 04Keep parallel agents on separate debugging targets
MCP support
As an MCP server, it provides clients with CDP-based tools for inspecting app targets, DOM, console output, network requests, and input actions. It defaults to read-only; higher-privilege tools depend on the configured mode, and JavaScript evaluation also requires an enable flag and confirmation.
Configuration
Local server config is the same for every client. Copy it into your client’s MCP config file.
npx -y @dockndevai/mcp-cdpCDP_PORTThe --remote-debugging-port your app/browser exposes (default 9222).CDP_HOSTHost serving the DevTools endpoint (default 127.0.0.1; non-loopback needs CDP_ALLOW_REMOTE).CDP_MODEAccess mode: read-only | read-write | admin. Starts read-only; interactions need read-write.CDP_ALLOW_EVALSet true to allow the evaluate tool (arbitrary JS) — admin mode only. Default false.CDP_TARGET_ALLOWLISTComma-separated URL patterns; interactions are confined to matching targets. Empty = all.CDP_DRY_RUNSet true to log interactions without dispatching them to the browser.Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.
Tools
6Saved tool list · updated 2d ago
This tool takes no parameters.
Details
From the project READMEmcp-cdp
A safe-by-default Model Context Protocol server that drives an Electron or Chrome/Chromium app over the Chrome DevTools Protocol (CDP) — instead of pixel-level GUI automation. Point it at the app's --remote-debugging-port and an agent gets the DOM, console, network requests, real input (click / type / navigate), and — gated — JavaScript evaluation.
Why this beats computer-use for a desktop/web app:
- The DOM, not a screenshot. The agent reads exact rendered HTML and can query any element — far more information, and it sees things that aren't on screen.
- Console + network. When a test fails, the uncaught exception or the failed request is right there — no guessing from an image.
- No collisions. Each agent attaches to its own debugging port, so parallel agents (e.g. one per git worktree) never fight over one desktop.
- Cross-OS. CDP works identically on macOS, Linux and Windows — the same flow runs on a headless VPS.
Part of the dockndevai MCP server suite — one governance model across all of them.
What it gives an agent
Starts read-only (see Safe by default); higher-capability tools are only registered when you raise the mode.
| Tool | For | Needs mode |
|---|---|---|
list_targets | list pages / webviews / Electron windows (id, type, title, url) | read-only |
dom_snapshot | rendered HTML of the page or a selector's subtree | read-only |
query_dom | outer HTML of every element matching a CSS selector | read-only |
console_logs | recent console output + uncaught exceptions | read-only |
network_requests | recent requests (method, url, status, mime; headers never captured) | read-only |
screenshot | a PNG of the viewport | read-only |
click | click the first element matching a selector | read-write |
type_text | type into the page (focus a selector first) | read-write |
press_key | Enter / Tab / Escape / Backspace / Delete / Arrows | read-write |
navigate | navigate a target to a URL (confirmed) | read-write |
evaluate | run a JavaScript expression in the page | admin + CDP_ALLOW_EVAL |
Install
npx -y @dockndevai/mcp-cdp
Expose a debugging port
Start your app (or a worktree's dev build) with an explicit port — one per agent:
- Electron app:
your-app --remote-debugging-port=9222, or in main-process codeapp.commandLine.appendSwitch('remote-debugging-port', '9222')beforeapp.whenReady(). - Plain Chrome/Chromium:
chrome --headless=new --remote-debugging-port=9222 --user-data-dir=/tmp/p1 <url>.
Check it's up: curl http://127.0.0.1:9222/json/version.
Configure
{
"mcpServers": {
"cdp": {
"command": "npx",
"args": ["-y", "@dockndevai/mcp-cdp"],
"env": {
"CDP_PORT": "9222",
"CDP_MODE": "read-only"
}
}
}
}
See docs/CLIENTS.md for Claude Code / Cursor / Codex / VS Code / Windsurf, and .env.example for every variable.
Safe by default
Enforced by src/security.ts. The browser process is the real boundary — this keeps an agent inside the targets and actions you intend:
CDP_MODE—read-only(default) →read-write→admin. Tools above the mode aren't registered, so in read-only the agent cannot click, type or navigate at all.CDP_TARGET_ALLOWLIST— confine interactions to targets whose URL matches your patterns (empty = all). Reads (inspection) are always allowed.CDP_PROTECTED_TARGETS— targets that can be inspected but never interacted with. Defaults protect sign-in pages (accounts.google.com,login.microsoftonline.com, …) and browser internals (chrome://,devtools://, extensions).CDP_ALLOW_EVAL—evaluateis arbitrary code execution in the renderer: admin mode plus this flag, refused on protected targets, with a human confirmation.CDP_DRY_RUN— interactions log their intent and return without dispatching.- Secrets — request/response headers are never captured (cookies/auth), and sensitive URL query values are redacted.
evaluateandnavigatealso prompt a human via MCP elicitation. - Loopback only — the endpoint must be
127.0.0.1unlessCDP_ALLOW_REMOTE=true.
Optional AI risk guard. Set CDP_GUARD_MODE=monitor|enforce to have the evaluate tool consult a local laya-guard daemon (pipx install laya-guard && laya-guard) that classifies the JS expression allow/confirm/block before it runs. It runs after the eval gate and can only tighten, never grant; fails closed.
There is a bundled skill, cdp-safe-operations, that teaches an agent how to expose a port, read the DOM/console/network instead of screenshots, the safety rules, and the "why did this fail?" workflow. See also SECURITY.md.
Developing
npm install
npm run build
# list the tools:
echo '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}' | CDP_PORT=9222 node dist/index.js
npm test
Licence
MIT
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.