Skip to main content
Expose UI actions as tools the embedded agent can call. Register a tool, and the agent can fill forms, click buttons, read data—whatever you expose.

​
Quick Example

import '@mcp-b/global';

navigator.modelContext.registerTool({
  name: 'add_to_cart',
  description: 'Add a product to the cart',
  inputSchema: {
    type: 'object',
    properties: {
      productId: { type: 'string' },
    },
    required: ['productId'],
  },
  execute: async ({ productId }) => {
    document.querySelector(`[data-product="${productId}"] .add-btn`).click();
    return { content: [{ type: 'text', text: 'Added to cart' }] };
  },
});

​
Full Documentation

WebMCP has its own documentation site with complete API references, React hooks, live examples, and more.

WebMCP Docs

Full API reference, React hooks, and live examples

​
Testing Your Tools

The same tools you register are callable by Claude Code via Chrome DevTools MCP. This means the AI that writes your tools also tests them—Claude can navigate to your page, discover your tools, and call them directly. See AI-Tested Tools for why this matters.

​
See also