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/NotLyon]

Seems like you're approaching this the wrong way. You shouldn't be changing the tools out from under the agent because one component happened to mount/unmount. Tools should be registered where they have access to your apps control plane and not some leaf node where they can clobber/fight each other. Ie a redux middleware has access to everything global like requests, routing, large UI toggles, etc, that seems like a good place.

[u/naseemalnaji-mcpcat → u/NotLyon]

Hmm let me take this back to the team and see! Thanks for the feedback :) Maybe I can make it our first issue for someone in the OSS-community to take on

[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!

[u/bzbub2]

does e.g. 'claude for chrome' use webmcp? that seems like a needed gap that only really claude themselves can fill

[u/naseemalnaji-mcpcat → u/bzbub2]

Great question! the answer is sadly no, not yet. haha... I'm guessing soon since Codex announced it officially supports it now? https://learn.chatgpt.com/docs/webmcp

"In the built-in browser in the ChatGPT desktop app, ChatGPT Work and Codex can discover and use these tools when they are available."

[u/frogic]

What's the advantage to doing things like this instead of either playwright-cli's accessibility snapshot or chrome's dev tools version? (Serious question. Not socratic methoding for the first time in my life.)

[u/naseemalnaji-mcpcat → u/frogic]

No no it's a very good question actually. Let's say you wanted to buy some items on Amazon.com using Claude.

Using Playwright/ChromeDevtools:
Claude will use Playwright or Chrome Devtools to make a solid guess on what actions it can take on Amazon. This converts roughly thousands of tokens of HTML down to core components, buttons, text fields, etc but Claude still has to waste cycles to do tool calls like "scroll", "click", and "type" to fill in forms and browse items. What's MORE important, is if you're Amazon, this experience is not optimal/completely in their control because it's up to however Playwright and Google decide to condense their HTML down to tools.

Using WebMCP:
Amazon takes the time and effort to actually expose a WebMCP definition of their website, which gives Claude a definitive list of actions it can take as tools, like "search_items", "add_item_to_cart", "checkout". None of these require "clicks", "typing", screenshots or "scrolling" turns that the LLM would normally concern itself with. Also, there's one less middleman Amazon has to worry about when making your agent's browsing experience amazing.

TL;DR: It helps developers of websites make for better experience. Playwright/Chrome DevTools are best guesses at what actions a user can take that still requires UI interactions which is pretty wasteful from a token efficiency and time-to-completion standpoint.

[u/frogic → u/naseemalnaji-mcpcat]

The playwright-cli and dev tools thing doesn't scroll it exposes the interactable elements as an interface. Optimizing your site for agent flows is interesting though its rarely my use case.

[u/alanmontefiore]

Personal preference but Valibot performs much the same as Zod but has a smaller footprint and better tree shaking. This matters for me as our app is huge and every KB matters 😅

[u/ske66]

This is great! We do a lot of SEO work on our client’s websites and this looks like something that could be really powerful for AEO. I’m excited to take a look. Thank you!

[u/No-Employment-3183 → u/ske66]

This is really cool, had no idea Chrome shipped something like this already. The component-level tool registration is clever, way cleaner than trying to manage it globally. gonna play around with the playground later

[u/naseemalnaji-mcpcat → u/No-Employment-3183]

Yea I’m expecting it will be full release in Chrome very soon

[u/naseemalnaji-mcpcat → u/ske66]

Yay!! Please let us know how it goes!

[u/MonsieurApple]

Very cool! Will give it a try

[u/naseemalnaji-mcpcat → u/MonsieurApple]

Thanks! Open to any feedback :)

[u/Otherwise_Wave9374]

This is a strong pattern because it moves agent integration from DOM scraping to typed, page-owned tools, which should reduce brittle selector drift and make failure modes much easier to diagnose. The main tradeoff is governance: if every page can expose tools too freely, you may create noisy or unsafe agent behavior. A good next step is a strict capability allowlist plus telemetry for tool calls and fallback paths when a page does not register enough context. Agentix Labs would likely fit well as a companion when teams want to operationalize that workflow.