GitHub - WebMCP-org/chrome-devtools-quickstart: Quickstart demo for using Chrome DevTools MCP with WebMCP tools - AI-driven browser automation

Chrome DevTools MCP Quickstart

Give AI agents direct access to your website's functionality—no screenshots, no DOM scraping, just structured tool calls.

Why This Matters

Up to 89% fewer tokens compared to screenshot-based workflows.

How It Works

flowchart LR
    A[AI Client] --> B[Chrome DevTools MCP]
    B -->|CDP| C[Your Website]
    C -->|mcp-b/global| D[navigator.modelContext]

    B -.->|list_webmcp_tools| E[Discovers tools]
    B -.->|call_webmcp_tool| F[Executes tools]

1. Your website loads @mcp-b/global which adds navigator.modelContext
2. You register tools using navigator.modelContext.registerTool()
3. Chrome DevTools MCP connects to Chrome and exposes list_webmcp_tools + call_webmcp_tool
4. AI agents discover and call your tools

Quick Start (3 Steps)

1. Clone & Run

git clone https://github.com/WebMCP-org/chrome-devtools-quickstart.git
cd chrome-devtools-quickstart
npm install && npm run dev

2. Add MCP Server to Your AI Client

Claude Code:

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

Optional: Add the WebMCP docs server so your AI knows how to build tools:

claude mcp add --transport http webmcp-docs https://docs.mcp-b.ai/mcp

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@mcp-b/chrome-devtools-mcp@latest"]
    },
    "webmcp-docs": {
      "url": "https://docs.mcp-b.ai/mcp"
    }
  }
}

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@mcp-b/chrome-devtools-mcp@latest"]
    },
    "webmcp-docs": {
      "url": "https://docs.mcp-b.ai/mcp"
    }
  }
}

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@mcp-b/chrome-devtools-mcp@latest"]
    },
    "webmcp-docs": {
      "command": "npx",
      "args": ["mcp-remote", "https://docs.mcp-b.ai/mcp"]
    }
  }
}

3. Test It

Ask your AI:

"Navigate to http://localhost:5173, list available WebMCP tools, and set the counter to 42"

The AI will navigate to your page, discover the tools, and execute them:

Background

Chrome DevTools MCP is an MCP server that gives AI agents full browser automation capabilities—navigation, clicking, typing, screenshots, console access, network inspection, and performance profiling.

WebMCP takes this further: instead of AI parsing screenshots or scraping DOM, your website exposes JavaScript functions as structured tools that AI can call directly. The result is faster, cheaper, and more reliable agent interactions.

Example Tools

This quickstart includes 3 example tools in counter.js:

Registering a Tool

import '@mcp-b/global';  // Must be first!

navigator.modelContext.registerTool({
  name: "get_counter",
  description: "Returns the current counter value",
  inputSchema: { type: "object", properties: {} },
  async execute() {
    return {
      content: [{ type: "text", text: `Counter is ${counter}` }]
    };
  }
});

Tool with Parameters

navigator.modelContext.registerTool({
  name: "set_counter",
  description: "Sets the counter to the desired value",
  inputSchema: {
    type: "object",
    properties: {
      newCounterValue: {
        type: "number",
        description: "The number to set the counter to"
      }
    },
    required: ["newCounterValue"]
  },
  async execute(args) {
    setCounter(args.newCounterValue);
    return {
      content: [{ type: "text", text: `Counter is now ${args.newCounterValue}` }]
    };
  }
});

To use in your own project:

npm install @mcp-b/global

Then import it before registering tools.

AI Development Loop

The real power: AI writes code, hot-reloads, tests in the browser, and iterates—all without leaving your editor.

flowchart TD
    A[AI writes tool] --> B[Vite hot-reloads]
    B --> C[AI navigates to page]
    C --> D[AI tests tool]
    D --> E{Works?}
    E -->|No| A
    E -->|Yes| F[Done!]

Try it:

"Create a WebMCP tool called 'toggle_theme' that switches between light and dark mode. Add it to counter.js, then test it."

Available Tools

Chrome DevTools MCP provides 26 browser automation tools across 6 categories:

Other Ways to Call WebMCP Tools

Chrome DevTools MCP isn't the only way to invoke WebMCP tools:

Token Usage Benchmarks

Real measurements from Claude API—structured tool calls vs. screenshot-based automation:

Simple Task: Set Counter to 42

Complex Task: Create Calendar Event (Multi-step)

Why WebMCP is More Efficient

• Screenshots are expensive: Each image costs ~2,000 tokens at 1512x982 viewport (calculated as width × height / 750)
• Tool responses are compact: JSON responses typically use 20-100 tokens
• No verification screenshots needed: Tool responses confirm success directly
• Simple tasks benefit most: Direct tool access eliminates visual parsing overhead

Run the Benchmarks Yourself

# Add your API key to .env
echo "ANTHROPIC_API_KEY=your-key" > .env

# Install dependencies
npm install

# Run simple benchmark (counter app - starts dev server automatically)
npm run benchmark:simple:direct

# Run complex benchmark (calendar app - uses live deployment)
npm run benchmark:complex:direct

Troubleshooting

Resources

Credits

Built on @mcp-b/chrome-devtools-mcp, a fork of Google's chrome-devtools-mcp that adds WebMCP tool discovery and execution.

Source: WebMCP-org/npm-packages

License

MIT