Most AI agents touching a React app today do it the crude way, scrape the DOM, guess at selectors, simulate clicks and hope. WebMCP proposes something different: defining explicit tools, backed by JSON schemas, that give an agent a real contract instead of a markup tree to reverse-engineer. I built a small two-agent setup to actually test that contract against real React state, not just read the explainer. Some of it worked cleanly, plain state, simple mutations expose well as tools. Some of it didn't: derived state, Suspense boundaries, and effect-driven updates don't map onto a clean tool definition the way the spec makes it look like they should, and each one needed a different workaround. I'll walk through the real component code, the exact points a tool-based approach broke down, and what I changed to make it work — a grounded account of where WebMCP's tool model holds up under real React state, and where the spec still has real gaps, from someone who's actually built against it rather than just read the explainer.
This talk has been presented at React Summit US 2026, check out the latest edition of this React Conference.
