### Run WebMCP Examples Locally

Source: https://github.com/webmcp-org/npm-packages/blob/main/examples/README.md

Navigate to a framework's example directory, install dependencies, and start the development server. Verify tool registration in the browser console.

```bash
cd examples/frameworks/<name>
pnpm install
pnpm dev
```

--------------------------------

### Install and Start Angular App

Source: https://github.com/webmcp-org/npm-packages/blob/main/examples/frameworks/angular/README.md

Use these commands to install dependencies and start the Angular development server.

```bash
pnpm install
pnpm start
```

--------------------------------

### Install and Run React App

Source: https://github.com/webmcp-org/npm-packages/blob/main/examples/frameworks/react/README.md

Use these commands to install dependencies and start the development server for the React application.

```bash
pnpm install
pnpm dev
```

--------------------------------

### SKILL.md Setup Section Example

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/plans/WEBMCP_USERSCRIPT_SKILL.md

Demonstrates the 'Setup' section within SKILL.md, which instructs the agent on how to navigate to the target site and inject the necessary WEBMCP tools.

```markdown
## Setup

Before using these tools, ensure they're injected:

1. Navigate to Gmail: `navigate_page({ url: "https://mail.google.com" })`
2. Inject tools: `inject_webmcp_script({ file_path: "./tools/src/gmail.ts" })`
3. Verify: `diff_webmcp_tools` should show gmail tools

The tools source is bundled at `tools/src/gmail.ts`.
```

--------------------------------

### Start HTTP Server with Python

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/TESTING_GUIDE.md

Starts a simple HTTP server in the 'examples' directory to serve demo files. Access the demo via http://localhost:8080/navigation-demo.html.

```bash
cd examples
python3 -m http.server 8080
```

--------------------------------

### Install WebMCP Skill via Plugin Marketplace

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp-setup/README.md

Install the WebMCP setup skill using the plugin marketplace commands. This option is coming soon.

```bash
/plugin marketplace add mcp-b/skills
/plugin install webmcp-setup
```

--------------------------------

### Install and Run Development Server

Source: https://github.com/webmcp-org/npm-packages/blob/main/e2e/web-standards-showcase/README.md

Installs project dependencies using pnpm and starts the development server. Requires Node.js and pnpm.

```bash
pnpm install

pnpm dev
```

--------------------------------

### Quick Start: Counter Tool Example

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/usewebmcp/README.md

Example of initializing the WebMCP polyfill and using the useWebMCP hook to create a simple counter tool. This demonstrates tool registration, schema definition, and local execution.

```tsx
import { initializeWebMCPPolyfill } from '@mcp-b/webmcp-polyfill';
import { useWebMCP } from 'usewebmcp';

initializeWebMCPPolyfill();

const COUNTER_INPUT_SCHEMA = {
  type: 'object',
  properties: {},
} as const;

const COUNTER_OUTPUT_SCHEMA = {
  type: 'object',
  properties: {
    count: { type: 'integer' },
  },
  required: ['count'],
  additionalProperties: false,
} as const;

export function CounterTool() {
  const counterTool = useWebMCP({
    name: 'counter_get',
    description: 'Get current count',
    inputSchema: COUNTER_INPUT_SCHEMA,
    outputSchema: COUNTER_OUTPUT_SCHEMA,
    execute: async () => ({ count: 42 }),
  });

  return (
    <div>
      <p>Executions: {counterTool.state.executionCount}</p>
      <p>Last count: {counterTool.state.lastResult?.count ?? 'none'}</p>
      {counterTool.state.error && <p>Error: {counterTool.state.error.message}</p>}
      <button
        onClick={async () => {
          await counterTool.execute({});
        }}
      >
        Run Tool Locally
      </button>
    </div>
  );
}
```

--------------------------------

### Full WebMCP Setup with Tool Registration

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/webmcp-local-relay/README.md

This example shows the complete setup for a website owner, including registering a custom tool (`get_page_title`) using `@mcp-b/global` and then embedding the WebMCP local relay script.

```html
<script src="https://cdn.jsdelivr.net/npm/@mcp-b/global@latest/dist/index.iife.js"></script>
<script>
  navigator.modelContext.registerTool({
    name: 'get_page_title',
    description: 'Get the current page title',
    inputSchema: { type: 'object', properties: {} },
    execute: async () => ({ content: [{ type: 'text', text: document.title }] }),
  });
</script>
<script src="https://cdn.jsdelivr.net/npm/@mcp-b/webmcp-local-relay@latest/dist/browser/embed.js"></script>
```

--------------------------------

### NPM Setup for Build Systems

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp/references/VANILLA_JS.md

For projects using build systems, install the package via npm and import the polyfill. Then, register your tools.

```bash
npm install @mcp-b/global
```

```javascript
// main.js
import '@mcp-b/global';

navigator.modelContext.registerTool({
  name: 'my_tool',
  // ...
});
```

--------------------------------

### Install Playwright Browsers

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/TESTING.md

Installs the necessary Playwright browsers, specifically Chromium in this example.

```bash
pnpm --filter mcp-e2e-tests exec playwright install chromium
```

--------------------------------

### Start Development Server

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp-setup/references/INSTALLATION.md

Command to start the development server for your project.

```bash
npm run dev
# or
pnpm dev
```

--------------------------------

### Bundle and Start MCP Server

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/smart-dom-reader/README.md

Bundles the MCP server and then starts it using stdio.

```bash
pnpm --filter @mcp-b/smart-dom-reader bundle:mcp
pnpm --filter @mcp-b/smart-dom-reader-server run start
```

--------------------------------

### Install @mcp-b/global Runtime

Source: https://github.com/webmcp-org/npm-packages/blob/main/README.md

Install the full runtime package, which includes the polyfill and MCP bridge, for most users starting with WebMCP.

```bash
pnpm add @mcp-b/global
```

--------------------------------

### Install @webmcp/helpers

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp/references/HELPERS_API.md

Install the helper utilities package using npm.

```bash
npm install @webmcp/helpers
```

--------------------------------

### Install Client Functionality Packages

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/react-webmcp/README.md

For client-side functionality, you will also need to install these packages.

```bash
pnpm add @mcp-b/transports @modelcontextprotocol/sdk
```

--------------------------------

### Clone and Install WebMCP Packages

Source: https://github.com/webmcp-org/npm-packages/blob/main/README.md

Use these commands to clone the repository and install dependencies. Ensure Node.js >= 22.12 and pnpm >= 10 are installed.

```bash
git clone https://github.com/WebMCP-org/npm-packages.git
cd npm-packages
pnpm install
```

--------------------------------

### Install Dependencies with vp

Source: https://github.com/webmcp-org/npm-packages/blob/main/CLAUDE.md

Use this command to install all project dependencies. It is the primary method for setting up the development environment.

```bash
vp install            # Install dependencies
```

--------------------------------

### Install usewebmcp

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/usewebmcp/README.md

Install the usewebmcp package and react. Zod is optional for standard schema authoring.

```bash
pnpm add usewebmcp react
# or
npm install usewebmcp react
```

```bash
pnpm add zod
```

--------------------------------

### Complete MCP Server Setup for Chrome Extension

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/extension-tools/README.md

A full example of setting up an MCP server within a Chrome extension's background script, including importing and registering various API tools and connecting the transport.

```typescript
// background.js - Extension background script
import {
  BookmarksApiTools,
  HistoryApiTools,
  ScriptingApiTools,
  StorageApiTools,
  TabsApiTools,
} from '@mcp-b/extension-tools';
import { ExtensionServerTransport } from '@mcp-b/transports';
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';

async function setupMcpServer() {
  const server = new McpServer({
    name: 'my-chrome-extension',
    version: '1.0.0',
  });

  // Register multiple API tools
  const apis = [
    new TabsApiTools(server, {
      listActiveTabs: true,
      createTab: true,
      updateTab: true,
      closeTabs: true,
      getAllTabs: true,
    }),
    new BookmarksApiTools(server, {
      getBookmarks: true,
      createBookmark: true,
    }),
    new StorageApiTools(server, {
      getStorage: true,
      setStorage: true,
    }),
    new HistoryApiTools(server, {
      searchHistory: true,
    }),
    new ScriptingApiTools(server, {
      executeScript: true,
      insertCSS: true,
    }),
  ];

  // Register all tools
  apis.forEach((api) => api.register());

  // Connect transport
  const transport = new ExtensionServerTransport();
  await server.connect(transport);

  console.log('MCP server ready with Chrome extension tools');
}

setupMcpServer();
```

--------------------------------

### Install Dependencies and Build Packages Locally

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/TEST_RESULTS.md

Installs project dependencies and builds all packages. Navigate to the project root directory before running.

```bash
cd /path/to/npm-packages
pnpm install
pnpm build
```

--------------------------------

### Start Docker on Linux

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/TESTING-WITH-ACT.md

Use this command to start the Docker service on Linux systems.

```bash
sudo systemctl start docker
```

--------------------------------

### WebMCP Workflow: Start and Initial Navigation

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/chrome-devtools-mcp/docs/cli.md

Starts the daemon with specific configurations (headless, isolated, custom executable) and opens a new page.

```sh
# Start against native Chrome Beta on macOS.
chrome-devtools start \
  --headless \
  --isolated \
  --executablePath "/Applications/Google Chrome Beta.app/Contents/MacOS/Google Chrome Beta"

# Open or select the page you want to inspect.
chrome-devtools new_page "https://webmcp.sh"
chrome-devtools list_pages --output-format=json
```

--------------------------------

### Install @mcp-b/smart-dom-reader

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/smart-dom-reader/README.md

Install the package using npm.

```bash
npm install @mcp-b/smart-dom-reader
```

--------------------------------

### Install and Build chrome-devtools-mcp

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/chrome-devtools-mcp/CONTRIBUTING.md

Clone the repository, install dependencies, and build the project.

```sh
git clone https://github.com/ChromeDevTools/chrome-devtools-mcp.git
cd chrome-devtools-mcp
npm ci
npm run build
```

--------------------------------

### Install webmcp-polyfill

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/webmcp-polyfill/README.md

Install the webmcp-polyfill package using pnpm or npm.

```bash
pnpm add @mcp-b/webmcp-polyfill
# or
npm install @mcp-b/webmcp-polyfill
```

--------------------------------

### Install Web MCP TS SDK

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/webmcp-ts-sdk/README.md

Install the SDK using npm or pnpm.

```bash
npm install @mcp-b/webmcp-ts-sdk
# or
pnpm add @mcp-b/webmcp-ts-sdk
```

--------------------------------

### Install Dependencies

Source: https://github.com/webmcp-org/npm-packages/blob/main/examples/frameworks/vue/README.md

Install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Start Test App for Manual Testing

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/TEST_RESULTS.md

Starts the test application for manual verification through its interactive UI. Ensure you are in the 'e2e' directory.

```bash
cd e2e
pnpm --filter mcp-tab-transport-test-app dev
# Open http://localhost:5173 in your browser
# Click the "Chromium Native API Tests" buttons
```

--------------------------------

### Test WebMCP Setup Skill

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp-setup/CONTRIBUTING.md

Use this prompt to test the WebMCP setup skill after it has been symlinked and Claude Code has been restarted.

```text
"Set up WebMCP in my app"
```

--------------------------------

### initializeWebMCPPolyfill

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/webmcp-polyfill/README.md

Installs the strict core polyfill on `navigator.modelContext`. It can be configured with various options to control its behavior, such as auto-initialization and the installation of a testing shim.

```APIDOC
## initializeWebMCPPolyfill(options?)

### Description
Installs the strict core polyfill on `navigator.modelContext`.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Options
- `autoInitialize` (boolean) - Optional - Default: `true`. Used by auto-init flows (IIFE/import side effect). Set `false` to disable auto-init and initialize manually.
- `installTestingShim` (boolean | 'always' | 'if-missing') - Optional - Default: `'if-missing'`. Controls whether `navigator.modelContextTesting` is installed.
- `disableIframeTransportByDefault` (boolean) - Optional - Deprecated no-op, kept for compatibility.

### Behavior
- No-op in non-browser environments.
- Non-destructive by default: if `navigator.modelContext` already exists, initialization is skipped.
- Safe to call repeatedly.

### Request Example
```javascript
// Basic initialization
initializeWebMCPPolyfill();

// With options
initializeWebMCPPolyfill({
  autoInitialize: false,
  installTestingShim: 'always'
});
```

### Response
None (modifies global state)
```

--------------------------------

### Install @mcp-b/mcp-iframe and SDK

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/mcp-iframe/README.md

Install the necessary packages for using the mcp-iframe component and the Model Context Protocol SDK.

```bash
pnpm add @mcp-b/mcp-iframe @modelcontextprotocol/sdk
```

--------------------------------

### Complete Example: Provider and Client

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/react-webmcp-guide.md

This example demonstrates setting up both the McpClientProvider and registering a tool using useWebMCP, along with a client component that consumes the tool. Ensure '@mcp-b/global' is imported.

```tsx
import '@mcp-b/global';
import { McpClientProvider, useWebMCP, useMcpClient } from '@mcp-b/react-webmcp';
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { TabClientTransport } from '@mcp-b/transports';
import { z } from 'zod';

const client = new Client({ name: 'MyApp', version: '1.0.0' });
const transport = new TabClientTransport('mcp', { clientInstanceId: 'my-app' });

function App() {
  return (
    <McpClientProvider client={client} transport={transport}>
      <ToolProvider />
      <ToolConsumer />
    </McpClientProvider>
  );
}

function ToolProvider() {
  const [count, setCount] = useState(0);

  useWebMCP({
    name: 'increment_counter',
    description: 'Increment the counter',
    inputSchema: { amount: z.number().default(1) },
    handler: async ({ amount }) => {
      setCount((prev) => prev + amount);
      return { newValue: count + amount };
    },
  });

  return <div>Counter: {count}</div>;
}

function ToolConsumer() {
  const { client, tools, isConnected } = useMcpClient();
  const [result, setResult] = useState('');

  const callIncrementTool = async () => {
    const res = await client.callTool({ name: 'increment_counter', arguments: { amount: 5 } });
    setResult(res.content[0].text);
  };

  return (
    <div>
      <p>Available Tools: {tools.map((t) => t.name).join(', ')}</p>
      <button onClick={callIncrementTool} disabled={!isConnected}>
        Call increment_counter
      </button>
      {result && <p>Result: {result}</p>}
    </div>
  );
}

```

--------------------------------

### Install Act using Homebrew

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/TESTING-WITH-ACT.md

Install the act tool on macOS using Homebrew. Alternatively, refer to the official installation guide for other systems.

```bash
brew install act
```

--------------------------------

### Example Workflow: Creating a Search Tool

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp-setup/SKILL.md

Demonstrates a practical example of the dogfooding workflow, from agent intent to successful tool execution and verification using Chrome DevTools MCP commands.

```bash
Agent: "I'll create a search_products tool"
1. Agent writes tool code using useWebMCP
2. Vite dev server hot-reloads (< 1 second)
3. Agent: mcp__chrome-devtools__navigate("http://localhost:3000")
4. Agent: mcp__chrome-devtools__list_webmcp_tools
   → Sees "search_products" in the list ✓
5. Agent: mcp__chrome-devtools__call_webmcp_tool("search_products", { query: "laptop" })
   → Returns: { products: [...], count: 5 } ✓
6. Agent verifies results match expectation
7. Tool works! Move on.
```

--------------------------------

### Register Tool: Get Items

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp/references/HELPERS_API.md

Example of registering a tool that fetches items from a list. It uses `waitForElement`, `getAllElements`, `getText`, and `jsonResponse`.

```typescript
import {
  waitForElement,
  getText,
  getAllElements,
  clickElement,
  textResponse,
  jsonResponse,
  errorResponse,
} from '@webmcp/helpers';

navigator.modelContext.registerTool({
  name: 'get_items',
  description: 'Get all items from the list',
  inputSchema: {
    type: 'object',
    properties: {
      limit: { type: 'number', description: 'Max items' },
    },
  },
  execute: async ({ limit = 10 }) => {
    try {
      // Wait for content to load
      await waitForElement('.item-list');

      // Get items
      const elements = getAllElements('.item').slice(0, limit);
      const items = elements.map((el) => ({
        title: getText(el.querySelector('.title')),
        price: getText(el.querySelector('.price')),
      }));

      return jsonResponse(items);
    } catch (error) {
      return errorResponse(`Failed to get items: ${error}`);
    }
  },
});
```

--------------------------------

### Run Development Server

Source: https://github.com/webmcp-org/npm-packages/blob/main/examples/frameworks/vue/README.md

Start the development server using pnpm.

```bash
pnpm dev
```

--------------------------------

### Tool Description Best Practices

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp/references/TOOL_DESIGN.md

Provides examples of effective tool descriptions, emphasizing starting with a verb, being specific about functionality, and including caveats or related tool information.

```javascript
// Good
description: 'Get the top posts from the current subreddit. Returns title, score, and author.';

// Better (mentions flow)
description: 'Fill order form fields. Call submit_order to place the order.';

// For destructive actions
description: 'DELETE the selected item. WARNING: This cannot be undone!';

```

--------------------------------

### Example Dogfooding Session: Todo App

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp-setup/SKILL.md

Walks through a concrete dogfooding session for a 'create_todo' tool, including calling the tool, verifying UI changes, checking return values, and testing edge cases.

```bash
# You've just added the 'create_todo' tool
# Now test it:

1. Start dev server: npm run dev
2. Chrome DevTools MCP is already connected to localhost:3000
3. Call the tool:
   mcp__chrome-devtools__* → call tool 'create_todo'
   Input: { "text": "Test todo", "priority": "high" }

4. Look at browser → New todo appears on screen ✅
5. Check return value → { success: true, id: "abc123" } ✅
6. Call list_todos → New todo is in the list ✅

7. Try edge case: { "text": "", "priority": "invalid" }
8. Check error handling → Got clear error message ✅

9. Todo works! Move to next tool.
```

--------------------------------

### Next.js Pages Router Integration

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp-setup/references/REACT_SETUP.md

Example of integrating WebMCP tools into a Next.js application using the Pages Router. Includes setup in `_document.tsx` and usage in a page component.

```APIDOC
## set_message

### Description
Sets a message that will be displayed on the page.

### Input Schema
An object with:
- `message`: A string representing the message to set.

### Handler
Asynchronous function that takes a `message` string and updates the component's state with it, returning a success status.
```

--------------------------------

### Call navigate_to_docs Tool

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/TESTING_GUIDE.md

Executes the 'navigate_to_docs' tool with a 'getting-started' section argument. This tests the pre-navigation response pattern.

```json
{
  "section": "getting-started"
}
```

--------------------------------

### SKILL.md Template for Agent

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/plans/WEBMCP_USERSCRIPT_SKILL.md

Provides a comprehensive template for the SKILL.md file, including sections for metadata, setup instructions, available tools, workflows, site-specific tips, and examples.

```markdown
---
name: {{site}}-mcp
description: |
  {{Site}} automation tools. Use when user wants to [actions].
  Triggers: {{site}}, [related keywords]
---

# {{Site}} MCP

## Setup

Before using these tools, ensure they're injected:

1. Navigate to {{Site}}: `navigate_page({ url: "{{site_url}}" })`
2. Inject tools: `inject_webmcp_script({ file_path: "./tools/src/{{site}}.ts" })`
3. Verify: `diff_webmcp_tools` should show {{site}} tools

The tools source is bundled at `tools/src/{{site}}.ts`.

## Available Tools

| Tool        | Description  |
| ----------- | ------------ |
| `tool_name` | What it does |

## Workflows

### [Common Task 1]

1. First tool call
2. Second tool call
3. Expected result

### [Common Task 2]

...

## {{Site}}-Specific Tips

- Quirk 1
- Quirk 2

## Examples

See [reference/examples.md](reference/examples.md)
```

--------------------------------

### Self-Hosted Setup

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp/references/VANILLA_JS.md

Serve the IIFE bundle locally if you prefer self-hosting the WebMCP polyfill.

```html
<script src="/js/webmcp-global.iife.js"></script>
```

--------------------------------

### Quick Start: WebMCP Integration

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/codemode/README.md

Expose all WebMCP tools on the page as a single codemode tool using an IframeSandboxExecutor. This setup allows the LLM to interact with page tools seamlessly.

```ts
import { streamText } from 'ai';
import { IframeSandboxExecutor } from '@mcp-b/codemode';
import { createCodeToolFromModelContextTesting } from '@mcp-b/codemode/webmcp';

const testing = navigator.modelContextTesting;
if (!testing) throw new Error('modelContextTesting unavailable');

const executor = new IframeSandboxExecutor({
  timeout: 30_000,
  csp: "default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval';",
});

const codemode = createCodeToolFromModelContextTesting({
  modelContextTesting: testing,
  executor,
});

const result = streamText({
  model,
  system: 'You are a helpful assistant.',
  messages,
  tools: { codemode },
});
```

--------------------------------

### Configure chrome-devtools-mcp in MCP Client

Source: https://context7.com/webmcp-org/npm-packages/llms.txt

Add this configuration to your MCP client to automatically start the Chrome DevTools MCP server when a Chrome tool is first used. Ensure the package is installed.

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

--------------------------------

### Install Chrome DevTools MCP with Claude Code CLI

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/chrome-devtools-mcp/README.md

Use the Claude Code CLI to add the Chrome DevTools MCP server for user scope. Refer to the Claude Code guide for more details.

```bash
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
```

--------------------------------

### McpContext: Get WebMCP Client and Sync Tools

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/plans/WEBMCP_DYNAMIC_TOOLS_IMPLEMENTATION.md

Establishes a WebMCP client connection for a given page and synchronizes tools. Handles connection setup, event subscriptions for tool list changes, and initial tool synchronization. Uses `WebMCPClientTransport` and `Client` from the WebMCP library.

```typescript
import {
  ToolListChangedNotificationSchema,
} from './third_party/index.js';
import type { WebMCPToolHub } from './tools/WebMCPToolHub.js';

export class McpContext {
  // ... existing code ...

  #toolHub?: WebMCPToolHub;

  setToolHub(hub: WebMCPToolHub): void {
    this.#toolHub = hub;
  }

  async getWebMCPClient(page?: Page): Promise<WebMCPClientResult> {
    const targetPage = page ?? this.getSelectedPage();

    // ... existing connection check/cleanup code ...

    // Connect
    try {
      const transport = new WebMCPClientTransport({
        page: targetPage,
        readyTimeout: 10000,
        requireWebMCP: false,
      });

      const client = new Client(
        { name: 'chrome-devtools-mcp', version: '1.0.0' },
        { capabilities: {} }
      );

      // Set up onclose handler
      transport.onclose = () => {
        const currentConn = this.#webMCPConnections.get(targetPage);
        if (currentConn?.client === client) {
          this.#webMCPConnections.delete(targetPage);
        }

        // Remove tools for this page on transport close
        this.#toolHub?.removeToolsForPage(targetPage);
      };

      await client.connect(transport);

      // Store connection
      this.#webMCPConnections.set(targetPage, { client, transport, page: targetPage });

      // Subscribe to tool list changes
      const serverCapabilities = client.getServerCapabilities();
      if (serverCapabilities?.tools?.listChanged && this.#toolHub) {
        client.setNotificationHandler(ToolListChangedNotificationSchema, async () => {
          this.logger('WebMCP tools changed, re-syncing...');
          await this.#toolHub?.syncToolsForPage(targetPage, client);
        });
      }

      // Initial tool sync
      if (this.#toolHub) {
        await this.#toolHub.syncToolsForPage(targetPage, client);
      }

      return { connected: true, client };
    } catch (err) {
      return {
        connected: false,
        error: `Failed to connect: ${err instanceof Error ? err.message : String(err)}`,
      };
    }
  }
}
```

--------------------------------

### WebMCP Standalone HTML Example

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/global-guide.md

This HTML file sets up a basic web page with a notes application and a tool call log. It includes the WebMCP global script and defines JavaScript functions to manage notes and interact with the WebMCP context. Use this as a starting point for integrating WebMCP into your web projects.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebMCP Demo</title>
    <script src="https://unpkg.com/@mcp-b/global@latest/dist/index.iife.js"></script>
    <style>
      body {
        font-family: system-ui;
        max-width: 600px;
        margin: 2rem auto;
        padding: 0 1rem;
      }
      .card {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem 0;
      }
      button {
        padding: 0.5rem 1rem;
        margin: 0.25rem;
        cursor: pointer;
      }
      #log {
        font-family: monospace;
        font-size: 0.85rem;
        background: #f5f5f5;
        padding: 1rem;
        max-height: 200px;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <h1>WebMCP Demo</h1>

    <div class="card">
      <h2>Notes App</h2>
      <input
        type="text"
        id="noteInput"
        placeholder="Enter a note..."
        style="width: 100%; padding: 0.5rem; box-sizing: border-box;"
      />
      <button id="addNote">Add Note</button>
      <ul id="notesList"></ul>
    </div>

    <div class="card">
      <h3>Tool Call Log</h3>
      <div id="log">Waiting for AI tool calls...</div>
    </div>

    <script>
      const notes = [];
      const noteInput = document.getElementById('noteInput');
      const addNoteBtn = document.getElementById('addNote');
      const notesList = document.getElementById('notesList');
      const logEl = document.getElementById('log');

      function renderNotes() {
        notesList.innerHTML = notes
          .map((note, i) => `<li>${note} <button onclick="deleteNote(${i})">x</button></li>`)
          .join('');
      }

      function log(message) {
        const time = new Date().toLocaleTimeString();
        logEl.innerHTML = `[${time}] ${message}\n` + logEl.innerHTML;
      }

      addNoteBtn.addEventListener('click', () => {
        if (noteInput.value.trim()) {
          notes.push(noteInput.value.trim());
          noteInput.value = '';
          renderNotes();
        }
      });

      window.deleteNote = (index) => {
        notes.splice(index, 1);
        renderNotes();
      };

      if ('modelContext' in navigator) {
        navigator.modelContext.provideContext({
          tools: [
            {
              name: 'notes_list',
              description: 'Get all notes',
              inputSchema: { type: 'object', properties: {} },
              execute: async () => {
                log('notes_list called');
                return {
                  content: [
                    {
                      type: 'text',
                      text: notes.length
                        ? notes.map((n, i) => `${i + 1}. ${n}`).join('\n')
                        : 'No notes yet',
                    },
                  ],
                };
              },
            },
            {
              name: 'notes_add',
              description: 'Add a new note',
              inputSchema: {
                type: 'object',
                properties: { text: { type: 'string', description: 'The note text' } },
                required: ['text'],
              },
              execute: async ({ text }) => {
                log(`notes_add called: "${text}"`);
                notes.push(text);
                renderNotes();
                return { content: [{ type: 'text', text: `Added note: "${text}"` }] };
              },
            },
            {
              name: 'notes_delete',
              description: 'Delete a note by index (1-based)',
              inputSchema: {
                type: 'object',
                properties: { index: { type: 'number', description: 'Note index (1-based)' } },
                required: ['index'],
              },
              execute: async ({ index }) => {
                log(`notes_delete called: index ${index}`);
                if (index < 1 || index > notes.length) {
                  return { content: [{ type: 'text', text: 'Invalid index' }], isError: true };
                }
                const deleted = notes.splice(index - 1, 1)[0];
                renderNotes();
                return { content: [{ type: 'text', text: `Deleted: "${deleted}"` }] };
              },
            },
            {
              name: 'notes_clear',
              description: 'Delete all notes',
              inputSchema: { type: 'object', properties: {} },
              execute: async () => {
                log('notes_clear called');
                const count = notes.length;
                notes.length = 0;
                renderNotes();
                return { content: [{ type: 'text', text: `Cleared ${count} notes` }] };
              },
            },
          ],
        });

        log('Web Model Context API initialized');
      }
    </script>
  </body>
</html>
```

--------------------------------

### New Page and Navigation Examples

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/chrome-devtools-mcp/docs/cli.md

Demonstrates how to open a new page and navigate to a specific URL with a type flag.

```sh
chrome-devtools new_page "https://example.com"
chrome-devtools navigate_page "https://web.dev" --type url
```

--------------------------------

### Install and Check Chrome DevTools CLI

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/chrome-devtools-mcp/docs/cli.md

Install the package globally and verify the installation by checking the status of the daemon.

```sh
npm i chrome-devtools-mcp@latest -g
chrome-devtools status # check if install worked.
```

--------------------------------

### Launch Chromium with Experimental Features

Source: https://github.com/webmcp-org/npm-packages/blob/main/e2e/web-standards-showcase/README.md

Launches Chromium with the necessary experimental web platform features enabled to run the showcase. This is the recommended method.

```bash
# Linux/Mac
chromium --enable-experimental-web-platform-features http://localhost:5174

# Or using Chrome
google-chrome --enable-experimental-web-platform-features http://localhost:5174

# Windows
chrome.exe --enable-experimental-web-platform-features http://localhost:5174
```

--------------------------------

### Install Specific WebMCP Version

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp-setup/references/TROUBLESHOOTING.md

Use this command to install a specific version of the react-webmcp package if you encounter installation issues.

```bash
npm install @mcp-b/react-webmcp@0.3.0
```

--------------------------------

### CDN Setup for Vanilla JS

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp/references/VANILLA_JS.md

Use this method for simple websites and prototyping. Include the polyfill script and register your tools within a script tag.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
  </head>
  <body>
    <h1>Hello World</h1>

    <!-- Add WebMCP polyfill -->
    <script src="https://unpkg.com/@mcp-b/global"></script>

    <!-- Register your tools -->
    <script>
      navigator.modelContext.registerTool({
        name: 'get_page_title',
        description: 'Get the page title',
        inputSchema: { type: 'object', properties: {} },
        execute: async () => ({
          content: [{ type: 'text', text: document.title }],
        }),
      });
    </script>
  </body>
</html>
```

--------------------------------

### Install Missing Peer Dependencies

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp-setup/references/TROUBLESHOOTING.md

Install required peer dependencies like React and ReactDOM to resolve warnings during package installation.

```bash
npm install react react-dom
```

--------------------------------

### Run Development Server

Source: https://github.com/webmcp-org/npm-packages/blob/main/e2e/react-webmcp-test-app/README.md

Starts the development server for the React WebMCP test app.

```bash
pnpm --filter react-webmcp-test-app dev
```

--------------------------------

### Userscript Tool Registration Example

Source: https://github.com/webmcp-org/npm-packages/blob/main/docs/plans/WEBMCP_USERSCRIPT_SKILL.md

An example of a userscript's main entry point, registering a tool with WebMCP. It demonstrates using helper functions for DOM manipulation and tool registration.

```typescript
// Clean, readable source - dependencies bundled at build time
import { waitForElement, getText } from '@webmcp/helpers';

navigator.modelContext.registerTool({
  name: 'example_tool',
  description: 'An example tool',
  inputSchema: {
    type: 'object',
    properties: {
      query: { type: 'string', description: 'Search query' },
    },
    required: ['query'],
  },
  handler: async ({ query }) => {
    const element = await waitForElement('.result');
    const text = getText(element);
    return {
      content: [{ type: 'text', text: `Found: ${text}` }],
    };
  },
});
```

--------------------------------

### Example Workflow with Multiple Tools

Source: https://github.com/webmcp-org/npm-packages/blob/main/templates/site-package/SKILL.md

Illustrates a common task workflow by sequentially calling two different {{Site}} tools. Ensure each tool call is appropriate for the step in the workflow.

```javascript
// Step 1: Do something
webmcp_{{site}}_page0_tool_name({ param: "value" })

// Step 2: Do something else
webmcp_{{site}}_page0_another_tool({ param: "value" })
```

--------------------------------

### Install @mcp-b/transports

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/transports/README.md

Install the package using npm.

```bash
npm install @mcp-b/transports
```

--------------------------------

### Global Runtime Initialization and Tool Registration (CDN)

Source: https://context7.com/webmcp-org/npm-packages/llms.txt

Demonstrates how to initialize the MCP-B global runtime using a CDN script tag and register tools using `provideContext` for atomic tool list updates.

```APIDOC
## Global Runtime Initialization and Tool Registration (CDN)

### Description
This example shows how to include the `@mcp-b/global` package via a CDN and then use `navigator.modelContext.provideContext` to register a set of tools. `provideContext` replaces any existing tools with the new atomic list.

### Method
`navigator.modelContext.provideContext(context)`

### Parameters
#### Request Body
- **context** (object) - Required - An object containing the tools to be registered.
  - **tools** (array) - Required - An array of tool definitions.
    - **name** (string) - Required - The unique name of the tool.
    - **description** (string) - Required - A description of what the tool does.
    - **inputSchema** (object) - Required - The JSON schema defining the tool's input.
    - **execute** (function) - Required - The function to execute when the tool is called.

### Request Example
```html
<script src="https://unpkg.com/@mcp-b/global@latest/dist/index.iife.js"></script>
<script>
  navigator.modelContext.provideContext({
    tools: [
      {
        name: 'counter_get',
        description: 'Get the current counter value',
        inputSchema: { type: 'object', properties: {} },
        execute: async () => ({
          content: [{ type: 'text', text: String(counter) }],
        }),
      },
      {
        name: 'counter_set',
        description: 'Set counter to a specific value',
        inputSchema: {
          type: 'object',
          properties: { value: { type: 'number' } },
          required: ['value'],
        },
        execute: async ({ value }) => {
          counter = value;
          renderUI();
          return { content: [{ type: 'text', text: `Counter set to ${counter}` }] };
        },
      },
    ],
  });
</script>
```
```

--------------------------------

### Basic CLI Command Structure

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/chrome-devtools-mcp/docs/cli.md

Illustrates the general syntax for using the CLI, including tools, arguments, and flags.

```sh
chrome-devtools <tool> [arguments] [flags]
```

--------------------------------

### Install @mcp-b/webmcp-types

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/webmcp-types/README.md

Install the package as a development dependency for compile-time type checking.

```bash
pnpm add -D @mcp-b/webmcp-types
# or
npm install --save-dev @mcp-b/webmcp-types
```

--------------------------------

### Create and Configure Site Package

Source: https://github.com/webmcp-org/npm-packages/blob/main/skills/webmcp/SKILL.md

Use this bash script to copy the site package template, update essential placeholders, and install necessary dependencies for tool development.

```bash
cp -r templates/site-package ./mysite-mcp

# Update placeholders: {{site}}, {{Site}}, {{site_url}}
# Edit: SKILL.md, tools/src/{{site}}.ts, etc.

# Install dependencies
cd mysite-mcp/tools && npm install

# Develop tools
inject_webmcp_script({ file_path: "./mysite-mcp/tools/src/mysite.ts" })
```

--------------------------------

### Build and Test Commands

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/webmcp-local-relay/README.md

Commands to install dependencies, build the project, and run tests from the repository root.

```bash
pnpm install
pnpm --filter @mcp-b/webmcp-local-relay build
pnpm --filter @mcp-b/webmcp-local-relay test
pnpm --filter @mcp-b/webmcp-local-relay test:e2e
```

--------------------------------

### useWebMCP Configuration and Usage

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/usewebmcp/README.md

Demonstrates how to configure and use the useWebMCP hook with input and output schemas, and manual execute calls.

```APIDOC
## Output Schema Inference

When `outputSchema` is provided as a literal JSON object schema:

- implementation return type is inferred from `outputSchema`
- `state.lastResult` is inferred to the same type
- MCP response includes `structuredContent`

```tsx
const OUTPUT_SCHEMA = {
  type: 'object',
  properties: {
    total: { type: 'integer' },
  },
  required: ['total'],
  additionalProperties: false,
} as const;

const tool = useWebMCP({
  name: 'count_items',
  description: 'Count items',
  outputSchema: OUTPUT_SCHEMA,
  execute: () => ({ total: 3 }),
});

// tool.state.lastResult is inferred as { total: number } | null
```

## Manual `execute(...)` Calls

You can call the returned `execute(...)` function directly from your component.

```tsx
function SearchToolPanel() {
  const searchTool = useWebMCP({
    name: 'search_local',
    description: 'Run local search',
    inputSchema: {
      type: 'object',
      properties: { query: { type: 'string' } },
      required: ['query'],
      additionalProperties: false,
    } as const,
    execute: async ({ query }) => ({ query, total: query.length }),
  });

  return (
    <button
      onClick={async () => {
        await searchTool.execute({ query: 'webmcp' });
      }}
    >
      Run Search
    </button>
  );
}
```

## Output Schema Contract

If `outputSchema` is defined, your tool implementation must return a JSON-serializable object result.

Returning a non-object value (`string`, `null`, array, etc.) causes an error response from the registered MCP tool.
```

--------------------------------

### Install Chrome DevTools MCP as a Plugin in Claude Code

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/chrome-devtools-mcp/README.md

Install the Chrome DevTools MCP server and skills by adding the marketplace registry and then installing the plugin. Restart Claude Code for changes to take effect.

```bash
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
```

```bash
/plugin install chrome-devtools-mcp
```

--------------------------------

### Clone a Single WebMCP Example (Sparse Checkout)

Source: https://github.com/webmcp-org/npm-packages/blob/main/examples/README.md

Clone the repository without checking out all files, then enable sparse checkout for a specific example directory. Replace '<name>' with the desired framework.

```bash
git clone --filter=blob:none --no-checkout https://github.com/WebMCP-org/npm-packages.git
cd npm-packages
git sparse-checkout set examples/frameworks/react
git checkout main
```

--------------------------------

### Server Extension Setup (Extension 1)

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/transports/README.md

Sets up an MCP server in Extension 1 to be accessible by other extensions. It registers tools and listens for external connections, with optional validation for allowed extension IDs.

```typescript
import { ExtensionExternalServerTransport } from '@mcp-b/transports';
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { z } from 'zod';

// Create MCP server with tools
const server = new McpServer(
  {
    name: 'MyExtensionAPI',
    version: '1.0.0',
  },
  {
    instructions: 'Extension API for cross-extension communication',
  }
);

// Register tools
server.tool('getBookmarks', 'Retrieves user bookmarks', {}, async () => {
  const bookmarks = await chrome.bookmarks.getTree();
  return {
    content: [
      {
        type: 'text',
        text: JSON.stringify(bookmarks, null, 2),
      },
    ],
  };
});

// Set up external connection listener in background script
chrome.runtime.onConnectExternal.addListener(async (port) => {
  if (port.name === 'mcp') {
    // Optional: Add connection validation here
    if (port.sender?.id !== 'allowed-extension-id') {
      port.disconnect();
      return;
    }

    const transport = new ExtensionServerTransport(port);
    await server.connect(transport);
  }
});
```

--------------------------------

### Local Testing Setup

Source: https://github.com/webmcp-org/npm-packages/blob/main/packages/smart-dom-reader/README.md

Bundles the MCP server and initiates local testing against local HTML files using Playwright.

```bash
pnpm --filter @mcp-b/smart-dom-reader bundle:mcp
pnpm --filter @mcp-b/smart-dom-reader test:local
```

--------------------------------

### Install Transport Layer Package

Source: https://github.com/webmcp-org/npm-packages/blob/main/README.md

Install the transport layer package for custom integrations with WebMCP.

```bash
pnpm add @mcp-b/transports
```