mcpField
M
mcp-cdp

mcp-cdp

Local
github.com/dockndevaiBrowser Automation1Updated 3d ago

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

  1. 01Read DOM and element HTML
  2. 02Inspect console and network requests
  3. 03Capture viewport screenshots
  4. 04Click, type, and navigate
  5. 05Gated page JavaScript evaluation

Use cases

  1. 01Inspect an app's page structure
  2. 02Trace console errors and failed requests
  3. 03Automate interactions with a page
  4. 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.

mcp.json · Universal config
{
"mcpServers": {
"dockndevai-mcp-cdp": {
"command": "npx",
"args": [
"-y",
"@dockndevai/mcp-cdp"
],
"env": {
"CDP_PORT": "<CDP_PORT>",
"CDP_HOST": "<CDP_HOST>",
"CDP_MODE": "<CDP_MODE>",
"CDP_ALLOW_EVAL": "<CDP_ALLOW_EVAL>",
"CDP_TARGET_ALLOWLIST": "<CDP_TARGET_ALLOWLIST>",
"CDP_DRY_RUN": "<CDP_DRY_RUN>"
}
}
}
}
Run commandnpx -y @dockndevai/mcp-cdp
Environment variables to set
CDP_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.

Packages
npm@dockndevai/mcp-cdp0.2.3

Tools

6

Saved tool list · updated 2d ago

This tool takes no parameters.

Details

From the project README

mcp-cdp

npm CI licence

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.

ToolForNeeds mode
list_targetslist pages / webviews / Electron windows (id, type, title, url)read-only
dom_snapshotrendered HTML of the page or a selector's subtreeread-only
query_domouter HTML of every element matching a CSS selectorread-only
console_logsrecent console output + uncaught exceptionsread-only
network_requestsrecent requests (method, url, status, mime; headers never captured)read-only
screenshota PNG of the viewportread-only
clickclick the first element matching a selectorread-write
type_texttype into the page (focus a selector first)read-write
press_keyEnter / Tab / Escape / Backspace / Delete / Arrowsread-write
navigatenavigate a target to a URL (confirmed)read-write
evaluaterun a JavaScript expression in the pageadmin + 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 code app.commandLine.appendSwitch('remote-debugging-port', '9222') before app.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 — evaluate is 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. evaluate and navigate also prompt a human via MCP elicitation.
  • Loopback only — the endpoint must be 127.0.0.1 unless CDP_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

Markdown supported

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.