WebMCP guides
Try out MCPcatTest WebMCP Tools with Model Context Tool Inspector
Install and use Google's Model Context Tool Inspector extension to test, debug, and inspect your WebMCP tools in Chrome DevTools.
Register your first WebMCP tool with navigator.modelContext
How to use navigator.modelContext to register tools that AI agents can call directly from your website.
Dynamically register and unregister WebMCP tools
Control which WebMCP tools are available based on user roles, routes, or feature flags using conditional rendering and lifecycle hooks.
Build declarative WebMCP tools with HTML form attributes
Turn existing HTML forms into MCP tools using declarative attributes — no JavaScript required.
Connect WebMCP browser tools to Cursor
Configure Cursor to discover and call WebMCP tools from your browser tabs using the bridge extension and webmcp-server.
Connect WebMCP Tools to Claude Code via Bridge Extension
Set up the WebMCP bridge extension and webmcp-server to expose browser tools to Claude Code over stdio.
Build WebMCP tools with Vue.js using navigator.modelContext
Create a Vue 3 composable that registers and unregisters WebMCP tools tied to component lifecycle.
Build a WebMCP confirmation flow with requestUserInteraction
Use the requestUserInteraction API to prompt users for confirmation before executing destructive WebMCP tool actions.
Add WebMCP tools to a WordPress site without JavaScript
Use WebMCP's declarative HTML form attributes to expose tools from a WordPress site — no JavaScript or build step required.
Add WebMCP tools to a React app with webmcp-react
How to use the webmcp-react library to register WebMCP tools in React with Zod schemas and connect them to desktop clients.
Add WebMCP tools to a Next.js App Router project
Set up webmcp-react in a Next.js 15 App Router project with proper client component boundaries and SSR handling.