Skip to main content
@mcp-b/chrome-devtools-mcp is a fork of Google’s official Chrome DevTools MCP server that adds WebMCP integration. It connects MCP clients (Claude Code, Cursor, etc.) directly to Chrome using the Chrome DevTools Protocol.
Fork of Official Chrome DevTools MCPThis package extends the official Chrome DevTools MCP by Google with two additional tools: list_webmcp_tools and call_webmcp_tool. All 28 browser automation tools from the original are included.

​
Prerequisite: Add the WebMCP Polyfill

For AI agents to call your WebMCP tools, your website must have the @mcp-b/global polyfill installed. This adds navigator.modelContext to your page.
Add to your HTML <head>:
<script src="https://unpkg.com/@mcp-b/global@latest/dist/index.iife.js"></script>
That’s it! The polyfill auto-initializes and is ready immediately.
Without the polyfill, list_webmcp_tools will return an empty list and call_webmcp_tool will fail.

​
Quick Setup

1

Add polyfill to your website

Add to your HTML <head>:
<script src="https://unpkg.com/@mcp-b/global@latest/dist/index.iife.js"></script>
2

Register a tool

navigator.modelContext.registerTool({
  name: "hello",
  description: "Say hello",
  inputSchema: { type: "object", properties: {} },
  async execute() {
    return { content: [{ type: "text", text: "Hello from WebMCP!" }] };
  }
});
3

Add MCP server to your AI client

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

Test the connection

Ask your AI:
Navigate to http://localhost:3000, list available WebMCP tools, and call the hello tool

​
WebMCP Integration

The server provides two key tools for WebMCP:
ToolDescription
list_webmcp_toolsDiscover all tools registered on the current page
call_webmcp_toolExecute a WebMCP tool with arguments

​
Example Workflow

This creates a tight feedback loop for AI-driven development:
  1. AI writes tool code
  2. Your dev server hot-reloads
  3. AI navigates to the page
  4. AI discovers tools with list_webmcp_tools
  5. AI tests with call_webmcp_tool
  6. AI iterates until working
This is TDD for AI - agents build and verify their own tools in real-time.

​
Browser Automation Tools

Beyond WebMCP, you get 28 browser automation tools:

​
Development Workflow

Use Chrome DevTools MCP during development to let your AI:
  1. Build tools - Write WebMCP tool code
  2. Test immediately - Navigate and call tools
  3. Debug issues - Inspect results, check console
  4. Iterate quickly - Fix and re-test in seconds
# Start your dev server
pnpm dev

# AI can now navigate, discover tools, and test them

​
Best For

  • AI-driven tool development
  • Automated testing of WebMCP tools
  • Browser automation scripts
  • Development and debugging

​
Not Ideal For

Chrome DevTools MCP Package

Complete API reference and configuration options