WebMCP Documentation

Fork of Google’s official Chrome DevTools MCP that adds WebMCP integration for calling tools registered on webpages.

NPM Package

@mcp-b/chrome-devtools-mcp

Upstream Repository

Original by Google Chrome team

Key features

28 browser automation tools - navigation, input, screenshots, performance, debugging (from upstream)
WebMCP integration - call tools registered via @mcp-b/global (added in this fork)
AI-driven development - build and test WebMCP tools in a tight feedback loop
Works with all MCP clients - Claude Code, Cursor, VS Code, Gemini CLI, Windsurf

Prerequisite: Website polyfill

For list_webmcp_tools and call_webmcp_tool to work, your website must have the @mcp-b/global polyfill installed:

<script src="https://unpkg.com/@mcp-b/global@latest/dist/index.iife.js"></script>

Or via NPM:

npm install @mcp-b/global

import '@mcp-b/global';

Without the polyfill, list_webmcp_tools returns an empty list. The polyfill adds navigator.modelContext which the DevTools MCP server queries.

AI-driven development workflow

The build-test loop lets AI agents write, deploy, discover, test, and iterate on WebMCP tools in real-time: Example workflow:

Ask AI: “Create a WebMCP tool called search_products”
AI writes tool using registerTool()
Dev server hot-reloads
AI navigates to http://localhost:3000, discovers and tests the tool
AI iterates until it works

This is TDD for AI - agents build and verify their own tools in real-time.

Installation

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "@mcp-b/chrome-devtools-mcp@latest"]
    }
  }
}

Claude Code

claude mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest

Cursor

Install in Cursor

VS Code / Copilot

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["-y","@mcp-b/chrome-devtools-mcp@latest"]}'

Gemini CLI

gemini mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest

Test: Ask your AI to “Check the performance of https://developers.chrome.com”

Tools

WebMCP
Input
Navigation
Debugging
Performance

Tool	Description
`list_webmcp_tools`	Discover tools registered on the current page
`call_webmcp_tool`	Call a website’s MCP tool

click, drag, fill, fill_form, handle_dialog, hover, press_key, upload_file

take_screenshot, take_snapshot, evaluate_script, list_console_messages, get_console_message

performance_start_trace, performance_stop_trace, performance_analyze_insight, list_network_requests, get_network_request

Built-in prompts

Prompt	Use case
`webmcp-dev-workflow`	Guide through building WebMCP tools
`test-webmcp-tool`	Test tools with edge cases
`debug-webmcp`	Diagnose connection issues

Configuration

Option	Description
`--browserUrl`	Connect to running Chrome (e.g., `http://127.0.0.1:9222`)
`--headless`	Run without UI
`--isolated`	Use temporary profile, cleaned up on close
`--channel`	Chrome channel: `stable`, `canary`, `beta`, `dev`

Run npx @mcp-b/chrome-devtools-mcp@latest --help for all options.

Troubleshooting

Issue	Solution
WebMCP not detected	Page needs @mcp-b/global loaded
Tool call fails	Check input matches schema via `list_webmcp_tools`
Browser won’t start	Disable client sandboxing or use `--browserUrl`

This server exposes browser content to MCP clients. Avoid sensitive data.

@mcp-b/global

Tool Registration

How to write WebMCP tools

Chrome DevTools MCP (Upstream)

Original project by Google Chrome team

Quick Start Guide

Step-by-step setup guide

NPM Package

Upstream Repository

​Key features

​Prerequisite: Website polyfill

​AI-driven development workflow

​Installation

​Tools

​Built-in prompts

​Configuration

​Troubleshooting

​Related

@mcp-b/global

Tool Registration

Chrome DevTools MCP (Upstream)

Quick Start Guide

Key features

Prerequisite: Website polyfill

AI-driven development workflow

Installation

Tools

Built-in prompts

Configuration

Troubleshooting

Related