Your UI already knows how to fetch data, submit forms, and navigate - so why are AI agents still scraping your DOM? In this workshop you'll turn your React app into something AI agents can talk to directly - an MCP app.
WebMCP is an emerging browser API protocol that lets web applications expose structured MCP tools directly to AI agents via navigator.modelContext. Instead of agents reverse-engineering your UI, they discover typed, documented functions - complete with JSON Schema inputs and structured responses. Basically, an MCP server running inside your web page.
In this hands-on workshop, we'll take a real React application with GraphQL data fetching and progressively transform it into an agent-ready MCP app. You'll learn how to identify which parts of your UI to expose as tools, architect a clean WebMCP layer that doesn't pollute your existing codebase, and add imperative API calls that agents can invoke on demand. We'll cover the spec, the practical patterns, and the gotchas - and you'll leave with a working implementation you can apply to your own apps.
No AI background required. If you build web apps, this is for you.
This workshop has been presented at React Day Berlin 2026, check out the latest edition of this React Conference.














