WebMCP Documentation - AI-Powered Web Tools

This guide teaches you three approaches to adding tools to your site, starting with the simplest method and advancing to more powerful patterns. By the end, you’ll understand which installation method fits your project.

Try It Now

Build and test your first WebMCP tool right here - no setup required:

Prerequisites

Before you begin, ensure you have:

Modern browser: Chrome, Edge, or Brave (latest version)
MCP-B Extension installed from Chrome Web Store
Node.js 18+ (for NPM installation) or basic HTML knowledge (for script tag method)
Package manager: npm, pnpm, or yarn (optional for NPM method)

Early Incubation: WebMCP is being incubated by the W3C Web Machine Learning Community Group. Not all MCP-B features may be included in the final WebMCP specification. See the introduction for details.

Installation

Script Tag
Vanilla JS
React

<script src="https://unpkg.com/@mcp-b/global@latest/dist/index.iife.js"></script>
<script>
  // Register tools using the standard API
  navigator.modelContext.registerTool({
    name: "get_page_title",
    description: "Get current page title",
    inputSchema: { type: "object", properties: {} },
    async execute() {
      return { content: [{ type: "text", text: document.title }] };
    }
  });
</script>

pnpm add @mcp-b/global

import '@mcp-b/global';

// Register individual tools
const registration = navigator.modelContext.registerTool({
  name: "get_page_title",
  description: "Get current page title",
  inputSchema: { type: "object", properties: {} },
  async execute() {
    return {
      content: [{ type: "text", text: document.title }]
    };
  }
});

// Later, unregister if needed
// registration.unregister();

pnpm add @mcp-b/react-webmcp @mcp-b/global zod

import '@mcp-b/global';
import { useWebMCP } from '@mcp-b/react-webmcp';
import { z } from 'zod';

function MyComponent() {
  useWebMCP({
    name: 'get_page_info',
    description: 'Get current page information',
    inputSchema: {
      includeUrl: z.boolean().optional()
    },
    handler: async ({ includeUrl }) => {
      return {
        title: document.title,
        ...(includeUrl && { url: window.location.href })
      };
    }
  });

  return <div>My Component</div>;
}

Real-World Example

Wrap your existing application logic as tools:

Vanilla JS
React

navigator.modelContext.registerTool({
  name: "add_to_cart",
  description: "Add item to shopping cart",
  inputSchema: {
    type: "object",
    properties: {
      productId: { type: "string" },
      quantity: { type: "number", minimum: 1 }
    },
    required: ["productId", "quantity"]
  },
  async execute({ productId, quantity }) {
    await fetch('/api/cart/add', {
      method: 'POST',
      credentials: 'same-origin',
      body: JSON.stringify({ productId, quantity })
    });
    return {
      content: [{ type: "text", text: `Added ${quantity} items` }]
    };
  }
});

import { useWebMCP } from '@mcp-b/react-webmcp';
import { z } from 'zod';

function ProductPage() {
  useWebMCP({
    name: "add_to_cart",
    description: "Add item to shopping cart",
    inputSchema: {
      productId: z.string(),
      quantity: z.number().min(1)
    },
    handler: async ({ productId, quantity }) => {
      await fetch('/api/cart/add', {
        method: 'POST',
        credentials: 'same-origin',
        body: JSON.stringify({ productId, quantity })
      });
      return { success: true, quantity };
    }
  });

  return <div>Product Page</div>;
}

Testing

Run dev server: pnpm dev
Open in Chrome with MCP-B extension
Click extension icon → Tools tab
Test tools via chat or inspector

Examples

webmcp.sh

Production-ready React app with database, navigation, and graph tools

Vanilla TypeScript

Shopping cart app with dynamic tool registration

React Task Manager

Task management app demonstrating useWebMCP() hook

More Examples

Vue, Nuxt, React Flow, and community examples

Quick Tips

Security: Only expose tools users can already access via your UI. Tools inherit user authentication.
Naming: Use descriptive names like add_to_cart, search_products, update_profile
Validation: Always define input schemas - use Zod (React) or JSON Schema (vanilla)
Feedback: Update UI state in handlers so users see what’s happening

See Best Practices for comprehensive guidance on tool design and security.

Next Steps

Core Concepts

Understand WebMCP architecture

Examples

Complete working examples and patterns

React Hooks

@mcp-b/react-webmcp package documentation

Security Guide

Security best practices

NPM Packages

All available packages and APIs

Advanced Patterns

Chrome extensions, transports, and more

Getting Started

Guides

Framework Guides

NPM Packages

Reference

Quick Start

Try It Now

Prerequisites

Installation

Real-World Example

Testing

Examples

webmcp.sh

Vanilla TypeScript

React Task Manager

More Examples

Quick Tips

Next Steps

Core Concepts

Examples

React Hooks

Security Guide

NPM Packages

Advanced Patterns

Getting Started

Guides

Framework Guides

NPM Packages

Reference

​Try It Now

​Prerequisites

​Installation

​Real-World Example

​Testing

​Examples

webmcp.sh

Vanilla TypeScript

React Task Manager

More Examples

​Quick Tips

​Next Steps

Core Concepts

Examples

React Hooks

Security Guide

NPM Packages

Advanced Patterns

Try It Now

Prerequisites

Installation

Real-World Example

Testing

Examples

Quick Tips

Next Steps