> ## Documentation Index > Fetch the complete documentation index at: https://mcp-b-sync-npm-packages-docs-bf03420.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Chrome DevTools MCP > Build and test WebMCP websites with AI-driven development using Chrome DevTools Protocol. `@mcp-b/chrome-devtools-mcp` is a fork of Google's official [Chrome DevTools MCP](https://github.com/ChromeDevTools/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 MCP** This package extends the [official Chrome DevTools MCP](https://github.com/ChromeDevTools/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 ``: ```html theme={null} ``` That's it! The polyfill auto-initializes and is ready immediately. ```javascript theme={null} import 'https://unpkg.com/@mcp-b/global@latest/dist/index.esm.js'; ``` ```bash theme={null} npm install @mcp-b/global ``` ```javascript theme={null} import '@mcp-b/global'; ``` Without the polyfill, `list_webmcp_tools` will return an empty list and `call_webmcp_tool` will fail. ## Quick Setup Add to your HTML ``: ```html theme={null} ``` ```javascript theme={null} navigator.modelContext.registerTool({ name: "hello", description: "Say hello", inputSchema: { type: "object", properties: {} }, async execute() { return { content: [{ type: "text", text: "Hello from WebMCP!" }] }; } }); ``` ```bash theme={null} claude mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest ``` 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: | Tool | Description | | ------------------- | ------------------------------------------------- | | `list_webmcp_tools` | Discover all tools registered on the current page | | `call_webmcp_tool` | Execute a WebMCP tool with arguments | ### Example Workflow ```mermaid theme={null} flowchart LR A[AI writes tool] --> B[Dev server hot-reloads] B --> C[AI navigates to page] C --> D[list_webmcp_tools] D --> E[call_webmcp_tool] E --> F{Works?} F -->|No| A F -->|Yes| G[Done] ``` 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: * `navigate` - Go to URL * `go_back` / `go_forward` - Browser history * `refresh` - Reload page * `click` - Click elements * `type` - Enter text * `scroll` - Scroll page * `hover` - Mouse hover * `screenshot` - Capture page * `get_page_content` - Get HTML/text * `evaluate` - Run JavaScript * `list_tabs` - See open tabs * `switch_tab` - Change active tab * `new_tab` / `close_tab` - Manage tabs ## 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 ```bash theme={null} # 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 * Production tool consumption (use [Embedded Agent](/calling-tools/embedded-agent)) * End-user interactions (use [MCP-B Extension](/calling-tools/extension)) Complete API reference and configuration options