> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usechar.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add Custom Tools

> Register WebMCP tools to let the AI agent fill forms, click buttons, and interact with your UI

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

```typescript theme={null}
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.

<Card title="WebMCP Docs" icon="book" href="https://docs.mcp-b.ai">
  Full API reference, React hooks, and live examples
</Card>

## 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](/explanation/ai-tested-tools) for why this matters.

## See also

* [Install MCP Servers](/guides/mcp-servers) — Set up Chrome DevTools MCP
* [AI-Tested Tools](/explanation/ai-tested-tools) — Why this workflow is powerful

<Snippet file="support-cta.mdx" />