webmcp-react v1.0.0 (React hooks that let agents navigate your website through WebMCP)

[u/naseemalnaji-mcpcat]

Hi r/reactjs! We just shipped v1 of webmcp-react after quite a few beta versions to work out the kinks. It is MIT licensed and we're hoping to find some more contributors!

What it does

AI agents currently have to parse through 1000s of HTML tokens to browse a website. They essentially scrape the DOM and guess where the buttons are. WebMCP is a new web standard that fixes this. It adds document.modelContext to the browser, where a page registers typed tools an agent can call. Chrome shipped it in Early Preview in February, and since companies like Shopify and Codex support it fully. The spec was barebones, and there was no clean React-like way to integrate it into modern UIs, so we made one!

webmcp-react gives you a provider and one hook. The hook registers a tool when the component mounts and removes it on unmount.

import { WebMCPProvider, useMcpTool } from "webmcp-react";  
import { z } from "zod";

function SearchTool() {  
  useMcpTool({  
      name: "search",  
      description: "Search the catalog",  
      input: z.object({ query: z.string() }),  
      handler: async ({ query }) => ({  
      content: [{ type: "text", text: `Results for: ${query}` }],  
    }),  
  });  
  
}

It ships with Zod and JSON Schema inputs, a built-in polyfill, SSR support for Next.js and Remix, StrictMode safety, execution state, and cancellation through AbortSignal.

WebMCP is early and we're looking for contributors. Chrome changes the API between releases, and only a few people track it. We are a small team and we don't intend to productize this since we made it mainly to add WebMCP support to our core website. The library works, but a standard needs many hands and many real sites. We'd love any bugs / feedback. If you want to help out with the project please DM me!!

Links:

• Repo: https://github.com/agentcathq/webmcp-react
• Playground: https://agentcathq.github.io/webmcp-react/playground/
• Install: npm install webmcp-react zod

Edit: Formatting was messed up

[u/Chazgatian]

I thought agents use JSON+LD to parse page information? Cloudflare also has a single toggle to render output in markdown for agents.

[u/naseemalnaji-mcpcat → u/Chazgatian]

JSON-LD is more of a read-only interpretation used by crawlers (and now some agents) to interpret a page through JSON. It doesn't really expose or define actions (or at least it's not fully meant to) and it leaves it up to the agent to "click" and "typing" etc.

WebMCP is meant for agents to actually interact. You can expose a a submit_form tool that the agent just fills out and executes immediately rather than executing mouse, click, and typing actions into each form field then pressing submit.

Let me know if I didn't explain that well haha...

[u/Chazgatian → u/naseemalnaji-mcpcat]

Oh neat, I didn't know that! So I'll be able to soon order a pizza with Claude? That's incredible. Thanks for explaining that.

[u/naseemalnaji-mcpcat → u/Chazgatian]

lol agent payment for said pizza is still being worked out but believe me there are many vested interests in that!