withreactWebMCP · document.modelContext

WebMCP · document.modelContext

WebMCP for React.

react-model-context puts a React page’s tools, authored from hooks or derived from what the page renders, under document.modelContext, as WebMCP tools, shared in the tab by every caller of its tools: the browser’s agent, a coding agent’s terminal through DevTools, and the person at the keyboard.

BriefTools.tsxone hook · one entry per tool
import { useWebMCPTools } from "react-model-context";
import { defineTool } from "@/kickoff/lib/surface";

useWebMCPTools([
  defineTool({
    name: "brief.insert",
    description: "Adds markdown at the end or under a heading.",
    inputSchema: insertSchema,
    annotations: { readOnlyHint: false },
    execute: async ({ content, after_heading }) => { /* … */ },
  }),
], { owner: "BriefTools" });

For a page with no tools of its own: one import and one wrapper, no other app code; the deriver reads what it renders. Install from the repository.

Handoff · what the agent can see

14 tools with the sample
  • tracker.snapshotread-only
  • item.claimasks you
  • item.progress
  • item.request_review
  • review.approveasks you
  • tracker.archive_doneasks you · destructive

Coding agentcalleditem.claimjust now

Youare asked in the page before anything destructive. A decline goes back as the tool’s result.

Open the demoRead the code

How it works

  1. 01

    Hooks register the page’s tools.

    useWebMCPTools registers a list of tools, diffed by name; useSnapshotTool registers the read-only “what is on screen” tool. A tool lives as long as its component, and on the ChatGPT desktop shim a scoped tool stays registered and answers SCOPE_INACTIVE.

  2. 02

    The registry registers the tools.

    Reference-counted holders, calls in flight drain before a tool is withdrawn, a change budget per page, and an activity feed of every call.

  3. 03

    The person stays in charge.

    “What the agent can see” lists every tool in the page; anything destructive asks in the page first, and a decline hands the agent the person’s own words as the tool’s result.

For a page with no tools of its own:

the deriver builds a floor of tools from what the page renders: <AutoTools> in React, or, for a page you cannot edit, a script tag or a bookmarklet (/auto.js) with a status HUD.

What the library gives you

model-context

The framework-free core: a registry that owns every browser registration, the client facts it adapts to, a change budget, an activity feed and a behavioural test double.

model-context · model-context/testing

In the repository →

react-model-context

React 19 bindings: the provider, useWebMCPTools and useSnapshotTool, <Tool> and <ToolScope>, the collaboration layer, and every export of the core.

react-model-context · react-model-context/jsx (declarative forms) · react-model-context/panel (the agent panel) · react-model-context/auto (the wrapper)

In the repository →

model-context-auto

The deriver: a WebMCP tool set from what a React page renders, registered through the same registry; the engine, the status HUD and the standalone script-tag bundle.

model-context-auto · /auto.js (the bundle on this site)

In the repository →

model-context-drive

Private, not published: drives a page’s tools from outside the tab through DevTools, for a coding agent in a terminal; the mcd command and its JSON transcript.

mcd (the command)

In the repository →

The demo

Handoff

A tracker for people and agents, shared in the tab by every caller of its tools. 10 tools on an empty queue, 14 with the sample; taking an item off the person’s desk, changing a priority, approving and archiving ask in the page first.

Open Handoff →

Kickoff

A launch room whose four editors are real open-source apps, each on a tab of its own with its own tools: Brief (Tiptap), Plan (react-big-calendar), Diagram (Excalidraw), Page (Puck). One instruction writes into all four while the person keeps editing.

Open Kickoff →BriefPlanDiagramPage

Who calls the tools

The browser’s agent

Chrome 152 or later on this origin (WebMCP origin trial), or the ChatGPT desktop app’s in-app browser with site tools on.

A coding agent

From a terminal, through DevTools: chrome-devtools-mcp or Puppeteer’s page.webmcp; it signs its calls with a name and gets its own chip in the page.

The person

The UI; asked in the page before anything destructive; their typed reason goes back to the agent as the tool’s result.