mcpField
B
Browser MCP over CDP

Browser MCP over CDP

Local
github.com/dumitrubogdanmihaiBrowser Automation4Updated 65w ago
Repository

About Browser MCP over CDP

Browser MCP over CDP is an MCP server for controlling Chrome through the Chrome DevTools Protocol. It gives browser automation clients page structure and interaction tools, including full-page screenshots and enriched DOM details.

Key features

  1. 01Full-page screenshots
  2. 02Accessibility tree access
  3. 03Enriched DOM inspection
  4. 04Click, key, and input interaction
  5. 05URL navigation and history controls

Use cases

  1. 01Inspecting full pages beyond the viewport
  2. 02Examining iframe and shadow DOM content
  3. 03Automating browser clicks and form input

MCP support

Exposes Chrome navigation, inspection, and interaction tools to MCP clients. It connects to local Chrome or a remote browser through Selenium Hub.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

No install method listed yet

We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.

Repository

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

Browser MCP over CDP

MCP Server that manages a Chrome browser using the Chrome DevTools Protocol (CDP)

This project exposes tools to navigate, interact and access a browser tab. The browser is controller using CDP and because of this:

  1. the page is exported as full height screenshoot, accessibility tree and enriched deep DOM
    1. the screenshoot captures whole page, not just the visible scrolled are
    2. the accessibility tree contains most relevand parts
    3. the enriched deep DOM contains
      1. nested iframes, shadow DOM, pseudo-elements, etc.
      2. per element attached listeners (for e.g. onClick, onKeyDown, etc), including the callback function code (for better or for worse)
      3. per element relevant resolved styles
  2. the page is interactable via click, keys and input value update functions
  3. the page is navigable with basic open URL, back, forward and reload functions

Page visual snapshot enhanced with boxes for interactible elemenents Page text snapshot enhanced with event listeners for interactible elemenents Page text snapshot footer that contains page links

Prereq

  1. NodeJS

Use with local Chrome

  1. npm install
  2. put config-example.json configuration inside Cloude, VS Code, Cursor, wherever you want.
    1. for Cloude see https://modelcontextprotocol.io/quickstart/user
    2. for Cursor see https://docs.cursor.com/context/model-context-protocol#configuring-mcp-servers

Use with remote Chrome

  1. run Selenoid Selenium Hub by running the below command inside "selenoid" dir: 
    docker pull selenoid/vnc_chrome:128.0
docker pull selenoid/hub
docker pull aerokube/selenoid-ui
docker-compose up -d
  2. specify the Selenium HUB address via SELENIUM_HUB_URL env var by adding inside config-example.json/mcpServers/browser the following: 
    "env": {
    "SELENIUM_HUB_URL": "http://localhost:4444/wd/hub"
}
  3. to see the live browser go to http://localhost:8080/

Warnings

The Selenoid Selenium Hub configuration uses docker.sock from the host, so it has full control over Docker.

Troubleshoot

npx @modelcontextprotocol/inspector npx tsx /Users/bogdan/devel/browser-mcp-over-cdp/src/MCP.ts

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.