use-webmcp-toolSAFE

A hook that registers a WebMCP tool with the browser and ties its lifecycle to a React component.

This is maintained by Chrome, and will be updated with any spec changes. The spec is 🧪 experimental, so the hook feature-detects and degrades to a no-op everywhere the API is absent.

Status / accuracy note (2026-06-05): Built against the current WebMCP spec, which exposes the imperative API on `document.modelContext` (registerTool + an AbortSignal for unregistration).

Install

npm install use-webmcp-tool

Requires React 18+ as a peer dependency. Ships as ESM with TypeScript types included — no runtime dependencies.

What it does

WebMCP lets a page expose JavaScript functions as "tools" that an AI agent (browser-built-in, iframe-hosted, or extension) can discover and call. The site author can expose functionality, and the agent uses this instead of scraping the DOM, a11y tree, or using screenshots.

The raw imperative API looks like this:

const controller = new AbortController();

document.modelContext.registerTool({
name: "add-todo",
description: "Add a new item to the user's active todo list",
inputSchema: {
type: "object",
properties: {
text: { type: "string", description: "The text content of the todo item" },
},
required: ["text"],
},
async execute({ text }) {
await addTodoItemToCollection(text);
return { content: [{ type: "text", text: `Added todo item: "${text}" successfully.` }] };
},
}, { signal: controller.signal });

// Unregister later:
controller.abort();

useWebMCP wraps that imperative, lifecycle-bound API in the declarative, lifecycle-managed model React developers already use for everything else:

import { useWebMCP } from "use-webmcp-tool";

function TodoTools({ addTodo }) {
const { supported, registered } = useWebMCP({
name: "add-todo",
description: "Add a new item to