Skip to main content
This page demonstrates live WebMCP tools that register themselves with the browser and can be called by AI agents in real-time.
These tools are live and ready! The WebMCP polyfill is included with this documentation site. Install the MCP-B browser extension to enable AI agents (like Claude) to discover and call these tools directly.

Build Your Own

Learn how to create custom tools

Tool Registration

Understanding tool registration

WebMCP SDK

SDK reference documentation

​
WebMCP Status

Check if the WebMCP polyfill is loaded and ready:

​
Calculator Tool

Try it with your AI assistant: Ask: “Use the calculator tool to compute 42 * 1.5 + 10”
export const CalculatorTool = () => {
  const [isRegistered, setIsRegistered] = useState(false);
  const [toolCalls, setToolCalls] = useState([]);

  useEffect(() => {
    const registerTool = async () => {
      if (!window.navigator?.modelContext) return;

      await window.navigator.modelContext.registerTool({
        name: 'calculator',
        description: 'Performs mathematical calculations',
        inputSchema: {
          type: 'object',
          properties: {
            expression: {
              type: 'string',
              description: 'Mathematical expression to evaluate',
            },
          },
          required: ['expression'],
        },
        handler: async ({ expression }) => {
          const result = Function(`"use strict"; return (${expression})`)();

          return {
            content: [{
              type: 'text',
              text: `The result of ${expression} is ${result}`,
            }],
          };
        },
      });

      setIsRegistered(true);
    };

    registerTool();
  }, []);

  // ... UI implementation
};

​
Color Converter Tool

Try it with your AI assistant: Ask Claude or your AI: “Convert the color #FF5733 to RGB and HSL”
// Converts HEX colors to RGB and HSL formats
export const ColorConverterTool = () => {
  useEffect(() => {
    const registerTool = async () => {
      if (!window.navigator?.modelContext) return;

      await window.navigator.modelContext.registerTool({
        name: 'color_converter',
        description: 'Converts HEX colors to RGB and HSL formats. Input must be in HEX format.',
        inputSchema: {
          type: 'object',
          properties: {
            color: {
              type: 'string',
              description: 'Color in HEX format (e.g., "#3b82f6" or "3b82f6"). Must be a valid HEX color code.'
            },
            outputFormat: {
              type: 'string',
              enum: ['rgb', 'hsl', 'all'],
              description: 'Desired output format (rgb, hsl, or all)',
              default: 'all'
            }
          },
          required: ['color']
        },
        handler: async ({ color, outputFormat = 'all' }) => {
          // Conversion logic here
        }
      });
    };
    registerTool();
  }, []);
};

​
Storage Management Tool

Try it with your AI assistant: Ask: “Store ‘Hello World’ under the key ‘greeting’ using storage”
// Manages browser localStorage with set, get, and list operations
export const StorageTool = () => {
  useEffect(() => {
    const registerTools = async () => {
      if (!window.navigator?.modelContext) return;

      // Registers multiple tools: storage_set, storage_get, storage_list
      await Promise.all([
        window.navigator.modelContext.registerTool({
          name: 'storage_set',
          description: 'Store a key-value pair in localStorage',
          // ... implementation
        }),
        window.navigator.modelContext.registerTool({
          name: 'storage_get',
          description: 'Retrieve a value from localStorage',
          // ... implementation
        }),
        window.navigator.modelContext.registerTool({
          name: 'storage_list',
          description: 'List all items in localStorage',
          // ... implementation
        })
      ]);
    };
    registerTools();
  }, []);
};

​
DOM Query Tool

Try it with your AI assistant: Ask: “How many navigation links are on this page?” or “Query for all h2 headings”
// Queries page elements using CSS selectors
export const DOMQueryTool = () => {
  useEffect(() => {
    const registerTool = async () => {
      if (!window.navigator?.modelContext) return;

      await window.navigator.modelContext.registerTool({
        name: 'dom_query',
        description: 'Query page elements using CSS selectors',
        inputSchema: {
          type: 'object',
          properties: {
            selector: { type: 'string', description: 'CSS selector (e.g., "h1", ".class", "#id")' }
          },
          required: ['selector']
        },
        handler: async ({ selector }) => {
          const elements = document.querySelectorAll(selector);
          return {
            content: [{
              type: 'text',
              text: `Found ${elements.length} elements matching "${selector}"`
            }]
          };
        }
      });
    };
    registerTool();
  }, []);
};