@mcp-b/chrome-devtools-mcp 0.12.0-beta.0 → 1.0.1

package/README.md

@@ -1,12 +1,122 @@
 # Chrome DevTools MCP
 
-[![npm chrome-devtools-mcp package](https://img.shields.io/npm/v/chrome-devtools-mcp.svg)](https://npmjs.org/package/chrome-devtools-mcp)
+[![npm @mcp-b/chrome-devtools-mcp package](https://img.shields.io/npm/v/@mcp-b/chrome-devtools-mcp.svg)](https://www.npmjs.com/package/@mcp-b/chrome-devtools-mcp)
 
-`chrome-devtools-mcp` lets your coding agent (such as Gemini, Claude, Cursor or Copilot)
+> **Note:** This is a fork of [ChromeDevTools/chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp)
+> published under the `@mcp-b` scope. It includes WebMCP integration for connecting to MCP tools
+> registered on webpages. The original project is developed by Google LLC and the ChromeDevTools team.
+> See [NOTICE](./NOTICE) for attribution details.
+
+`@mcp-b/chrome-devtools-mcp` lets your coding agent (such as Gemini, Claude, Cursor or Copilot)
 control and inspect a live Chrome browser. It acts as a Model-Context-Protocol
 (MCP) server, giving your AI coding assistant access to the full power of
 Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.
 
+## What's Different from Chrome DevTools MCP?
+
+This fork adds **WebMCP integration** - the ability to call MCP tools that are registered directly on webpages. This unlocks a powerful new workflow:
+
+| Feature | Chrome DevTools MCP | @mcp-b/chrome-devtools-mcp |
+|---------|--------------------|-----------------------------|
+| Browser automation | ✅ | ✅ |
+| Performance analysis | ✅ | ✅ |
+| Network inspection | ✅ | ✅ |
+| Screenshot/snapshot | ✅ | ✅ |
+| **Call website MCP tools** | ❌ | ✅ |
+| **List website MCP tools** | ❌ | ✅ |
+| **AI-driven tool development** | ❌ | ✅ |
+
+The key addition is the `list_webmcp_tools` and `call_webmcp_tool` tools that let your AI agent interact with MCP tools that websites expose via [@mcp-b/global](https://www.npmjs.com/package/@mcp-b/global).
+
+## AI-Driven Development Workflow
+
+One of the most powerful use cases for this package is **AI-driven tool development** - essentially test-driven development for AI agents. Here's how it works:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│                    AI Development Feedback Loop                     │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│   1. AI writes WebMCP tool code ──────────────────────────┐        │
+│                                                            │        │
+│   2. Dev server hot-reloads ◄─────────────────────────────┘        │
+│                                                                     │
+│   3. AI opens browser via Chrome DevTools MCP                       │
+│            │                                                        │
+│            ▼                                                        │
+│   4. AI calls list_webmcp_tools to see the new tool                 │
+│            │                                                        │
+│            ▼                                                        │
+│   5. AI calls call_webmcp_tool to test it                           │
+│            │                                                        │
+│            ▼                                                        │
+│   6. AI sees results, iterates if needed ───────► Back to step 1    │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### Example: Building a Search Tool
+
+Imagine you're building a web app and want to add a search feature exposed as an MCP tool:
+
+**Step 1: Ask your AI agent to create the tool**
+```
+Create a WebMCP tool called "search_products" that searches our product catalog
+```
+
+**Step 2: The AI writes the code in your app**
+```typescript
+// Your AI agent writes this code
+import { registerTools } from '@mcp-b/global';
+
+registerTools([{
+  name: 'search_products',
+  description: 'Search for products by name or category',
+  inputSchema: {
+    type: 'object',
+    properties: {
+      query: { type: 'string' },
+      category: { type: 'string' }
+    },
+    required: ['query']
+  },
+  handler: async ({ query, category }) => {
+    const results = await searchProducts(query, category);
+    return { results };
+  }
+}]);
+```
+
+**Step 3: Your dev server hot-reloads**
+
+**Step 4: The AI tests it via Chrome DevTools MCP**
+```
+Navigate to http://localhost:3000 and list the available tools
+```
+
+The AI sees the new `search_products` tool appear.
+
+**Step 5: The AI calls the tool to verify it works**
+```
+Use the search_products tool to search for "headphones"
+```
+
+**Step 6: If something is wrong, the AI iterates**
+
+The AI can see the actual response, fix any bugs, and repeat until it works perfectly.
+
+### Why This Matters
+
+This creates a tight feedback loop where your AI assistant can:
+- **Write** WebMCP tools in your codebase
+- **Deploy** them automatically via hot-reload
+- **Discover** them through `list_webmcp_tools`
+- **Test** them through `call_webmcp_tool`
+- **Debug** issues using console messages and snapshots
+- **Iterate** until the tool works correctly
+
+This is like **TDD for AI** - the AI can build and verify its own tools in real-time.
+
 ## [Tool reference](./docs/tool-reference.md) | [Changelog](./CHANGELOG.md) | [Contributing](./CONTRIBUTING.md) | [Troubleshooting](./docs/troubleshooting.md) | [Design Principles](./docs/design-principles.md)
 
 ## Key features
@@ -19,10 +129,13 @@ Chrome DevTools for reliable automation, in-depth debugging, and performance ana
 - **Reliable automation**. Uses
   [puppeteer](https://github.com/puppeteer/puppeteer) to automate actions in
   Chrome and automatically wait for action results.
+- **WebMCP integration**: Connect to MCP tools registered on webpages via
+  [@mcp-b/global](https://www.npmjs.com/package/@mcp-b/global), enabling AI
+  agents to use website-specific functionality.
 
 ## Disclaimers
 
-`chrome-devtools-mcp` exposes content of the browser instance to the MCP clients
+`@mcp-b/chrome-devtools-mcp` exposes content of the browser instance to the MCP clients
 allowing them to inspect, debug, and modify any data in the browser or DevTools.
 Avoid sharing sensitive or personal information that you don't want to share with
 MCP clients.
@@ -42,14 +155,14 @@ Add the following config to your MCP client:
   "mcpServers": {
     "chrome-devtools": {
       "command": "npx",
-      "args": ["-y", "chrome-devtools-mcp@latest"]
+      "args": ["-y", "@mcp-b/chrome-devtools-mcp@latest"]
     }
   }
 }
 ```
 
-> [!NOTE]  
-> Using `chrome-devtools-mcp@latest` ensures that your MCP client will always use the latest version of the Chrome DevTools MCP server.
+> [!NOTE]
+> Using `@mcp-b/chrome-devtools-mcp@latest` ensures that your MCP client will always use the latest version of this Chrome DevTools MCP server with WebMCP integration.
 
 ### MCP Client configuration
 
@@ -58,7 +171,7 @@ Add the following config to your MCP client:
   Follow https://ampcode.com/manual#mcp and use the config provided above. You can also install the Chrome DevTools MCP server using the CLI:
 
 ```bash
-amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
+amp mcp add chrome-devtools -- npx @mcp-b/chrome-devtools-mcp@latest
 ```
 
 </details>
@@ -74,7 +187,7 @@ To use the Chrome DevTools MCP server follow the instructions from <a href="http
     "chrome-devtools": {
       "command": "npx",
       "args": [
-        "chrome-devtools-mcp@latest",
+        "@mcp-b/chrome-devtools-mcp@latest",
         "--browser-url=http://127.0.0.1:9222",
         "-y"
       ]
@@ -94,7 +207,7 @@ Chrome DevTools MCP will not start the browser instance automatically using this
     Use the Claude Code CLI to add the Chrome DevTools MCP server (<a href="https://docs.anthropic.com/en/docs/claude-code/mcp">guide</a>):
 
 ```bash
-claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
+claude mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest
 ```
 
 </details>
@@ -110,7 +223,7 @@ claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
   using the standard config from above. You can also install the Chrome DevTools MCP server using the Codex CLI:
 
 ```bash
-codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
+codex mcp add chrome-devtools -- npx @mcp-b/chrome-devtools-mcp@latest
 ```
 
 **On Windows 11**
@@ -124,7 +237,7 @@ args = [
     "/c",
     "npx",
     "-y",
-    "chrome-devtools-mcp@latest",
+    "@mcp-b/chrome-devtools-mcp@latest",
 ]
 env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
 startup_timeout_ms = 20_000
@@ -151,7 +264,7 @@ Configure the following fields and press `CTRL+S` to save the configuration:
 
 - **Server name:** `chrome-devtools`
 - **Server Type:** `[1] Local`
-- **Command:** `npx -y chrome-devtools-mcp@latest`
+- **Command:** `npx -y @mcp-b/chrome-devtools-mcp@latest`
 
 </details>
 
@@ -160,9 +273,9 @@ Configure the following fields and press `CTRL+S` to save the configuration:
 
 **Click the button to install:**
 
-[<img src="https://mcpbadge.dev/badge-install-in-vs-code-stable-dark" alt="Install in VS Code">](https://vscode.dev/redirect/mcp/install?name=io.github.ChromeDevTools%2Fchrome-devtools-mcp&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22chrome-devtools-mcp%22%5D%2C%22env%22%3A%7B%7D%7D)
+[<img src="https://mcpbadge.dev/badge-install-in-vs-code-stable-dark" alt="Install in VS Code">](https://vscode.dev/redirect/mcp/install?name=%40mcp-b%2Fchrome-devtools-mcp&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40mcp-b%2Fchrome-devtools-mcp%40latest%22%5D%2C%22env%22%3A%7B%7D%7D)
 
-[<img src="https://mcpbadge.dev/badge-install-in-vs-code-insiders-dark" alt="Install in VS Code Insiders">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522io.github.ChromeDevTools%252Fchrome-devtools-mcp%2522%252C%2522config%2522%253A%257B%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522-y%2522%252C%2522chrome-devtools-mcp%2522%255D%252C%2522env%2522%253A%257B%257D%257D%257D)
+[<img src="https://mcpbadge.dev/badge-install-in-vs-code-insiders-dark" alt="Install in VS Code Insiders">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522%2540mcp-b%252Fchrome-devtools-mcp%2522%252C%2522config%2522%253A%257B%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522-y%2522%252C%2522%2540mcp-b%252Fchrome-devtools-mcp%2540latest%2522%255D%252C%2522env%2522%253A%257B%257D%257D%257D)
 
 **Or install manually:**
 
@@ -170,7 +283,7 @@ Follow the MCP install <a href="https://code.visualstudio.com/docs/copilot/chat/
 with the standard config from above. You can also install the Chrome DevTools MCP server using the VS Code CLI:
 
 ```bash
-code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'
+code --add-mcp '{"name":"@mcp-b/chrome-devtools-mcp","command":"npx","args":["-y","@mcp-b/chrome-devtools-mcp@latest"],"env":{}}'
 ```
 
 </details>
@@ -180,7 +293,7 @@ code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command"
 
 **Click the button to install:**
 
-[<img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="Install in Cursor">](https://cursor.com/en/install-mcp?name=chrome-devtools&config=eyJjb21tYW5kIjoibnB4IC15IGNocm9tZS1kZXZ0b29scy1tY3BAbGF0ZXN0In0%3D)
+[<img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="Install in Cursor">](https://cursor.com/en/install-mcp?name=chrome-devtools&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBtY3AtYi9jaHJvbWUtZGV2dG9vbHMtbWNwQGxhdGVzdCJdfQ%3D%3D)
 
 **Or install manually:**
 
@@ -193,7 +306,7 @@ Go to `Cursor Settings` -> `MCP` -> `New MCP Server`. Use the config provided ab
 Use the Factory CLI to add the Chrome DevTools MCP server (<a href="https://docs.factory.ai/cli/configuration/mcp">guide</a>):
 
 ```bash
-droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"
+droid mcp add chrome-devtools "npx -y @mcp-b/chrome-devtools-mcp@latest"
 ```
 
 </details>
@@ -205,13 +318,13 @@ Install the Chrome DevTools MCP server using the Gemini CLI.
 **Project wide:**
 
 ```bash
-gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
+gemini mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest
 ```
 
 **Globally:**
 
 ```bash
-gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest
+gemini mcp add -s user chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest
 ```
 
 Alternatively, follow the <a href="https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#how-to-set-up-your-mcp-server">MCP guide</a> and use the standard config from above.
@@ -228,7 +341,7 @@ Alternatively, follow the <a href="https://github.com/google-gemini/gemini-cli/b
   <summary>JetBrains AI Assistant & Junie</summary>
 
 Go to `Settings | Tools | AI Assistant | Model Context Protocol (MCP)` -> `Add`. Use the config provided above.
-The same way chrome-devtools-mcp can be configured for JetBrains Junie in `Settings | Tools | Junie | MCP Settings` -> `Add`. Use the config provided above.
+The same way `@mcp-b/chrome-devtools-mcp` can be configured for JetBrains Junie in `Settings | Tools | Junie | MCP Settings` -> `Add`. Use the config provided above.
 
 </details>
 
@@ -258,23 +371,23 @@ Install the Chrome DevTools MCP server using the Qoder CLI (<a href="https://doc
 **Project wide:**
 
 ```bash
-qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
+qodercli mcp add chrome-devtools -- npx @mcp-b/chrome-devtools-mcp@latest
 ```
 
 **Globally:**
 
 ```bash
-qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest
+qodercli mcp add -s user chrome-devtools -- npx @mcp-b/chrome-devtools-mcp@latest
 ```
 
 </details>
 
 <details>
   <summary>Visual Studio</summary>
-  
+
   **Click the button to install:**
-  
-  [<img src="https://img.shields.io/badge/Visual_Studio-Install-C16FDE?logo=visualstudio&logoColor=white" alt="Install in Visual Studio">](https://vs-open.link/mcp-install?%7B%22name%22%3A%22chrome-devtools%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22chrome-devtools-mcp%40latest%22%5D%7D)
+
+  [<img src="https://img.shields.io/badge/Visual_Studio-Install-C16FDE?logo=visualstudio&logoColor=white" alt="Install in Visual Studio">](https://vs-open.link/mcp-install?%7B%22name%22%3A%22%40mcp-b%2Fchrome-devtools-mcp%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40mcp-b%2Fchrome-devtools-mcp%40latest%22%5D%7D)
 </details>
 
 <details>
@@ -341,9 +454,72 @@ If you run into any issues, checkout our [troubleshooting guide](./docs/troubles
   - [`list_console_messages`](docs/tool-reference.md#list_console_messages)
   - [`take_screenshot`](docs/tool-reference.md#take_screenshot)
   - [`take_snapshot`](docs/tool-reference.md#take_snapshot)
+- **Website MCP Tools** (2 tools)
+  - [`list_webmcp_tools`](docs/tool-reference.md#list_webmcp_tools) - List available website tools (auto-connects)
+  - [`call_webmcp_tool`](docs/tool-reference.md#call_webmcp_tool) - Call a website tool (auto-connects)
 
 <!-- END AUTO GENERATED TOOLS -->
 
+## Prompts
+
+The server includes built-in prompts to help with WebMCP development workflows. Prompts are reusable message templates that guide AI agents through common tasks.
+
+| Prompt | Description |
+|--------|-------------|
+| `webmcp-dev-workflow` | Step-by-step guide for building WebMCP tools with AI |
+| `test-webmcp-tool` | Systematically test tools with edge cases and validation |
+| `debug-webmcp` | Diagnose WebMCP connection and registration issues |
+
+### webmcp-dev-workflow
+
+Guides you through the AI-driven development workflow for building and testing WebMCP tools.
+
+**When to use:** Starting a new WebMCP tool and want step-by-step guidance through the write → hot-reload → discover → test → iterate cycle.
+
+**Arguments:** None
+
+**Example:**
+```
+Use the webmcp-dev-workflow prompt to help me build a search tool
+```
+
+### test-webmcp-tool
+
+Systematically test a WebMCP tool with various inputs including valid data, edge cases, and invalid inputs.
+
+**When to use:** You have a tool ready and want to verify it handles all input scenarios correctly.
+
+**Arguments:**
+
+| Argument | Type | Required | Description |
+|----------|------|----------|-------------|
+| `toolName` | string | No | Focus testing on a specific tool |
+| `devServerUrl` | string | No | Dev server URL (default: `http://localhost:3000`) |
+
+**Examples:**
+```
+Use the test-webmcp-tool prompt
+Use the test-webmcp-tool prompt with toolName=search_products
+Use the test-webmcp-tool prompt with devServerUrl=http://localhost:5173 toolName=add_to_cart
+```
+
+### debug-webmcp
+
+Troubleshoot WebMCP connection issues and diagnose why tools aren't appearing or working.
+
+**When to use:** Tools aren't being discovered, connections are failing, or you see "WebMCP not detected" errors.
+
+**Arguments:**
+
+| Argument | Type | Required | Description |
+|----------|------|----------|-------------|
+| `url` | string | No | Page URL to debug (default: current page) |
+
+**Example:**
+```
+Use the debug-webmcp prompt with url=http://localhost:3000
+```
+
 ## Configuration
 
 The Chrome DevTools MCP server supports the following configuration option:
@@ -401,7 +577,7 @@ The Chrome DevTools MCP server supports the following configuration option:
   - **Type:** boolean
 
 - **`--chromeArg`**
-  Additional arguments for Chrome. Only applies when Chrome is launched by chrome-devtools-mcp.
+  Additional arguments for Chrome. Only applies when Chrome is launched by `@mcp-b/chrome-devtools-mcp`.
   - **Type:** array
 
 - **`--categoryEmulation`**
@@ -429,7 +605,7 @@ Pass them via the `args` property in the JSON configuration. For example:
     "chrome-devtools": {
       "command": "npx",
       "args": [
-        "chrome-devtools-mcp@latest",
+        "@mcp-b/chrome-devtools-mcp@latest",
         "--channel=canary",
         "--headless=true",
         "--isolated=true"
@@ -449,7 +625,7 @@ You can connect directly to a Chrome WebSocket endpoint and include custom heade
     "chrome-devtools": {
       "command": "npx",
       "args": [
-        "chrome-devtools-mcp@latest",
+        "@mcp-b/chrome-devtools-mcp@latest",
         "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
         "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
       ]
@@ -460,20 +636,20 @@ You can connect directly to a Chrome WebSocket endpoint and include custom heade
 
 To get the WebSocket endpoint from a running Chrome instance, visit `http://127.0.0.1:9222/json/version` and look for the `webSocketDebuggerUrl` field.
 
-You can also run `npx chrome-devtools-mcp@latest --help` to see all available configuration options.
+You can also run `npx @mcp-b/chrome-devtools-mcp@latest --help` to see all available configuration options.
 
 ## Concepts
 
 ### User data directory
 
-`chrome-devtools-mcp` starts a Chrome's stable channel instance using the following user
+`@mcp-b/chrome-devtools-mcp` starts a Chrome's stable channel instance using the following user
 data directory:
 
 - Linux / macOS: `$HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL`
 - Windows: `%HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL`
 
 The user data directory is not cleared between runs and shared across
-all instances of `chrome-devtools-mcp`. Set the `isolated` option to `true`
+all instances of `@mcp-b/chrome-devtools-mcp`. Set the `isolated` option to `true`
 to use a temporary user data dir instead which will be cleared automatically after
 the browser is closed.
 
@@ -493,7 +669,7 @@ Add the `--browser-url` option to your MCP client configuration. The value of th
     "chrome-devtools": {
       "command": "npx",
       "args": [
-        "chrome-devtools-mcp@latest",
+        "@mcp-b/chrome-devtools-mcp@latest",
         "--browser-url=http://127.0.0.1:9222"
       ]
     }
@@ -547,8 +723,105 @@ For more details on remote debugging, see the [Chrome DevTools documentation](ht
 ### Operating system sandboxes
 
 Some MCP clients allow sandboxing the MCP server using macOS Seatbelt or Linux
-containers. If sandboxes are enabled, `chrome-devtools-mcp` is not able to start
+containers. If sandboxes are enabled, `@mcp-b/chrome-devtools-mcp` is not able to start
 Chrome that requires permissions to create its own sandboxes. As a workaround,
-either disable sandboxing for `chrome-devtools-mcp` in your MCP client or use
+either disable sandboxing for `@mcp-b/chrome-devtools-mcp` in your MCP client or use
 `--browser-url` to connect to a Chrome instance that you start manually outside
 of the MCP client sandbox.
+
+## WebMCP Integration
+
+WebMCP enables AI agents to interact with website-specific MCP tools that are
+registered directly in webpages. This allows websites to expose custom
+functionality to AI agents via the Model Context Protocol.
+
+### How it works
+
+When a webpage uses [@mcp-b/global](https://www.npmjs.com/package/@mcp-b/global)
+to register MCP tools, `@mcp-b/chrome-devtools-mcp` can connect to those tools using
+the Chrome DevTools Protocol. This creates a bridge between your MCP client
+(like Claude Desktop, Cursor, or VS Code Copilot) and the website's tools.
+
+### Prerequisites
+
+The webpage must have WebMCP tools registered. Websites do this by using the
+`@mcp-b/global` package:
+
+```javascript
+// Example of how a website registers tools (done by the website developer)
+import { registerTools } from '@mcp-b/global';
+
+registerTools([
+  {
+    name: 'search_products',
+    description: 'Search for products on this website',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        query: { type: 'string', description: 'Search query' }
+      },
+      required: ['query']
+    },
+    handler: async ({ query }) => {
+      // Implementation
+      return { results: [...] };
+    }
+  }
+]);
+```
+
+### Using WebMCP tools
+
+Once you're on a webpage with WebMCP tools, you can use the following workflow:
+
+**1. Navigate to the webpage**
+
+```
+Navigate to https://example.com/app
+```
+
+**2. List available tools**
+
+```
+What tools are available on this website?
+```
+
+The AI agent will use `list_webmcp_tools` to show you what functionality the
+website exposes. This automatically connects to the page's WebMCP server.
+
+**3. Use the tools**
+
+```
+Search for "wireless headphones" using the website's search tool
+```
+
+The AI agent will use `call_webmcp_tool` to invoke the website's functionality.
+
+That's it! No explicit connect or disconnect steps needed - WebMCP tools
+auto-connect when called and automatically reconnect when you navigate to
+a different page.
+
+### Example prompts
+
+Here are some example prompts you can use with WebMCP-enabled websites:
+
+```
+What tools does this website have?
+```
+
+```
+Use the website's search tool to find wireless headphones
+```
+
+```
+Call the website's form submission tool to fill out the contact form
+```
+
+### Troubleshooting WebMCP
+
+- **"WebMCP not detected"**: The current webpage doesn't have `@mcp-b/global`
+  installed or no tools are registered. The page needs the WebMCP polyfill loaded.
+- **Tool call fails**: Check the tool's input schema matches your parameters.
+  Use `list_webmcp_tools` to see the expected input format.
+- **Tools not appearing after navigation**: WebMCP auto-reconnects when you
+  navigate. If the new page has different tools, call `list_webmcp_tools` again.

package/build/node_modules/chrome-devtools-frontend/LICENSE

@@ -0,0 +1,27 @@
+// Copyright 2014 The Chromium Authors
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/build/node_modules/chrome-devtools-frontend/front_end/core/common/App.js

@@ -0,0 +1,4 @@
+// Copyright 2019 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+export {};

package/build/node_modules/chrome-devtools-frontend/front_end/core/common/AppProvider.js

@@ -0,0 +1,17 @@
+// Copyright 2019 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as Root from '../root/root.js';
+const registeredAppProvider = [];
+export function registerAppProvider(registration) {
+    registeredAppProvider.push(registration);
+}
+export function getRegisteredAppProviders() {
+    return registeredAppProvider
+        .filter(provider => Root.Runtime.Runtime.isDescriptorEnabled({ experiment: undefined, condition: provider.condition }))
+        .sort((firstProvider, secondProvider) => {
+        const order1 = firstProvider.order || 0;
+        const order2 = secondProvider.order || 0;
+        return order1 - order2;
+    });
+}

package/build/node_modules/chrome-devtools-frontend/front_end/core/common/Base64.js

@@ -0,0 +1,43 @@
+// Copyright 2020 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+export const BASE64_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+export const BASE64_CODES = new Uint8Array(123);
+for (let index = 0; index < BASE64_CHARS.length; ++index) {
+    BASE64_CODES[BASE64_CHARS.charCodeAt(index)] = index;
+}
+/**
+ * Decodes Base64-encoded data from a string without performing any kind of checking.
+ */
+export function decode(input) {
+    let bytesLength = ((input.length * 3) / 4) >>> 0;
+    if (input.charCodeAt(input.length - 2) === 0x3d /* '=' */) {
+        bytesLength -= 2;
+    }
+    else if (input.charCodeAt(input.length - 1) === 0x3d /* '=' */) {
+        bytesLength -= 1;
+    }
+    const bytes = new Uint8Array(bytesLength);
+    for (let index = 0, offset = 0; index < input.length; index += 4) {
+        const a = BASE64_CODES[input.charCodeAt(index + 0)];
+        const b = BASE64_CODES[input.charCodeAt(index + 1)];
+        const c = BASE64_CODES[input.charCodeAt(index + 2)];
+        const d = BASE64_CODES[input.charCodeAt(index + 3)];
+        bytes[offset++] = (a << 2) | (b >> 4);
+        bytes[offset++] = ((b & 0x0f) << 4) | (c >> 2);
+        bytes[offset++] = ((c & 0x03) << 6) | (d & 0x3f);
+    }
+    return bytes;
+}
+export function encode(input) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onerror = () => reject(new Error('failed to convert to base64'));
+        reader.onload = () => {
+            const blobAsUrl = reader.result;
+            const [, base64] = blobAsUrl.split(',', 2);
+            resolve(base64);
+        };
+        reader.readAsDataURL(new Blob([input]));
+    });
+}

package/build/node_modules/chrome-devtools-frontend/front_end/core/common/CharacterIdMap.js

@@ -0,0 +1,27 @@
+// Copyright 2016 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+export class CharacterIdMap {
+    #elementToCharacter = new Map();
+    #characterToElement = new Map();
+    #charCode = 33;
+    toChar(object) {
+        let character = this.#elementToCharacter.get(object);
+        if (!character) {
+            if (this.#charCode >= 0xFFFF) {
+                throw new Error('CharacterIdMap ran out of capacity!');
+            }
+            character = String.fromCharCode(this.#charCode++);
+            this.#elementToCharacter.set(object, character);
+            this.#characterToElement.set(character, object);
+        }
+        return character;
+    }
+    fromChar(character) {
+        const object = this.#characterToElement.get(character);
+        if (object === undefined) {
+            return null;
+        }
+        return object;
+    }
+}