What Is WebMCP? How My Website Gives AI Agents Tools

WebMCP, a proposed web standard from the W3C's Web Machine Learning Community Group that lets a web page register JavaScript-based tools for an AI agent to call, is running as an origin trial in Chrome 149, according to the draft spec and Chrome's explainer. The author's site has registered 4 read-only tools since 1 October 2026 — search published content, list talks, read the speaking schedule, and get fees and booking info — each defined by a name, description, JSON Schema input and function, with the browser registering the contract and the server validating every call against the same schema. Sarah Drasner, who leads AI and the web ecosystem for Chrome at Google, contrasted the approach on 16 September with agents that screenshot, scroll and click the wrong button, writing that a WebMCP page instead tells the agent "here are the 4 things you can do here, with descriptions.

What Is WebMCP? How My Website Gives AI Agents Tools So, WebMCP is a proposed web standard that lets a web page hand an AI agent using your browser a set of tools, each with a name, a description, a JSON Schema https://json-schema.org/ for its input and a function to run, so the agent calls the function instead of screenshotting and clicking its way around the page. Since 1 October 2026 every page on this site does it, with 4 tools, and this post is about what they are, how I built them and what WebMCP is actually good for. This morning I gave an AI agent that knew nothing about me except those 4 tools one question: “Where is Tejas speaking this month, and what would a workshop for my team cost?” It made 2 tool calls, get-speaking-schedule for the dates of October and get-booking-info for workshops, and came back with all 4 of my October conferences ticket links included and every workshop price, straight from the data my pages show. No scraping, no guessing, no squinting at a screenshot of a pricing table. Wild. Sarah Drasner https://sarah.dev , who leads AI and the web ecosystem for Chrome https://www.google.com/chrome/ at Google https://about.google/ , put the before and after better than I can in a post on 16 September https://x.com/sarah edo/status/2100224152841912686 : Agent: screenshots the page Agent: scrolls Agent: screenshots again Agent: clicks the wrong button Agent: screenshots again Page with WebMCP: hi, here are the 4 things you can do here, with descriptions My website is literally that page now lol. 4 things, with descriptions. TL;DR - WebMCP lets a page register tools that an AI agent using the browser can call: a name, a description, an input schema and a function. - It’s a draft web standard, and Chrome runs it as an origin trial from Chrome 149. - This site registers 4 read-only tools: search everything I’ve published, list my talks, read my speaking schedule, and get my fees and how to book me. - Each tool’s contract lives in one file: the browser registers it, the server checks every call against the same schema, and the two can’t drift apart. - A tool should hand a mistake back as a sentence and never throw, because a rejected call reaches the model as a bare UnknownError . - It’s good for anything people already do on your page that an agent could do with one function call: search, filter, book, check out. What is WebMCP? WebMCP is a proposed web standard that lets a web page offer an AI agent using the browser a set of tools to call. The spec is a draft report https://webmachinelearning.github.io/webmcp/ from the Web Machine Learning Community Group https://www.w3.org/community/webmachinelearning/ at the World Wide Web Consortium W3C https://www.w3.org/ , and its abstract is one sentence: “The WebMCP API enables web applications to provide JavaScript-based tools to AI agents.” The agent is whatever the browser hands those tools to, and the explainer from Chrome’s team https://googlechromelabs.github.io/webmcp-tools/demos/explainer/ puts it this way: “A WebMCP-aware extension or, eventually, the browser itself collects registered tools and presents them to the user’s agent.” So it can be an extension like the side panel Sarah built https://x.com/sarah edo/status/2102025642862600634 , the browser’s own assistant one day, or a program driving the browser from outside, like the demo at the top of this post, which reads the tools through Chrome DevTools https://developer.chrome.com/docs/devtools . What it doesn’t have to do anymore is steer the page by clicking around: it calls the functions. WebMCP is named after the Model Context Protocol MCP https://modelcontextprotocol.io/ , which I’ve explained on stage a bunch of times, and the way I put it at How to Web https://tej.as/talks/how-to-web-2025 is still how I think about it: it’s “just passing functions over the network… There’s a lot of people who will use big words to confuse and gatekeep you. Don’t listen to them. It’s all functions.” WebMCP is the same idea, with one change that makes it a whole different thing: the functions live in the web page you already have open. The 3 ways an agent can use a website, side by side: | | WebMCP | An MCP server | Screenshots and clicks | |---|---|---|---| | Where the tools are | In the web page itself | On a server somebody runs, which you connect to your AI app | Nowhere: the agent reads pixels and the page’s markup and guesses | | What the site has to build | A few functions in the site it already has | A second product next to the site | Nothing | | What breaks it | A tool whose contract changes | The server going down | A redesign, a popup, a slow load | | On tej.as | 4 tools since 1 October | Never built | How agents saw my site until 30 September | Which browsers support WebMCP? Chrome, as an origin trial https://developer.chrome.com/docs/web-platform/origin-trials from Chrome 149 Chrome’s WebMCP docs https://developer.chrome.com/docs/ai/webmcp . An origin trial is Chrome letting a site switch a feature on early for its own visitors, with a token that only works on that site’s origin think, its domain . My token goes in a <meta http-equiv="origin-trial" tag on every page and expires on 30 March 2027, so anybody visiting in Chrome gets the tools without flipping a flag. On localhost the token doesn’t match, so while I’m building I turn it on with chrome://flags/ enable-webmcp-testing instead. It’s a proposed standard, and it moves. When Chrome 149 shipped it, the API lived on navigator.modelContext , and later releases moved it to document.modelContext , which is where the spec has it now, so my code looks in both. The 4 tools on tej.as Every tool answers from the same module the pages read, so an agent quotes the sentence a visitor sees and never a copy of it that’s gone stale. | Tool | What an agent asks it | Where the answer comes from | |---|---|---| | search-content | What has Tejas said about React Server Components https://react.dev/reference/rsc/server-components ? | The search index behind the Ask boxes: my talk transcripts, the ConTejas Code https://tej.as/podcast podcast, Fluent React https://tej.as/react and this blog, with video links that open at the second the passage starts | | list-talks | Which talks has he given on AI? | My talk list, with the full transcript on this site where one exists | | get-speaking-schedule | Where is he speaking next? | The calendar behind /calendar https://tej.as/calendar | | get-booking-info | What does a keynote or a workshop cost? | The fees and terms on /speaking https://tej.as/speaking and /workshops https://tej.as/workshops | All 4 only read. Nothing here sends, books or submits anything on anyone’s behalf, and the spec has a hint for the day something does: consequentialHint , which Sarah announced in September https://x.com/sarah edo/status/2097318090979610803 and which Chrome’s guidance https://developer.chrome.com/docs/ai/webmcp/secure-tools says to set for high stakes actions like “booking travel or transferring money”, so the agent asks the person first. How I built it The whole thing is about 780 lines of TypeScript in 5 files, plus a component and an API route, and none of it holds data of its own: every answer comes from a module the pages already use. 1. One file holds every tool’s contract A tool is a name, a title for people, a description for the model, a JSON Schema for the input and some hints. Here’s search-content , trimmed: // src/util/webmcp/tools.ts trimmed { name: "search-content", title: "Search talks, podcast, book and blog", description: "Search everything Tejas Kumar has published: his conference talk transcripts, the ConTejas Code podcast, his O'Reilly book Fluent React and his blog. Returns the closest passages, each with a link...", inputSchema: { type: "object", properties: { query: { type: "string", minLength: 1, maxLength: 300, description: 'What to look for, in plain words, such as "agent harnesses" or "React Server Components".' }, source: { type: "string", enum: "all", "talks", "podcast", "book", "blog" , default: "all", description: "..." }, limit: { type: "integer", minimum: 1, maximum: 8, default: 4, description: "..." }, }, required: "query" , }, annotations: { readOnlyHint: true }, } Notice the description says “Tejas Kumar” and “his”, not “I” and “my”. Everything else on this site is first person, but a model reads a tool description with no page around it, and a “my talks” out of context has nobody attached to the “my”. 2. The browser registers them, and only if it can php < -- src/components/WebMCP.astro trimmed -- <script const context = document.modelContext ?? navigator.modelContext; if context && typeof context.registerTool === "function" { import "../util/webmcp/register" .then { register } = register context ; } </script A browser without WebMCP pays for one property lookup and nothing else, because the code that registers the tools only downloads after the feature test passes. Each tool’s execute then sends its input to /api/webmcp/<tool on my server, because the search index and the calendar live there, and shipping them to every page would make every page heavier for every visitor, agent or not. 3. The server checks every call against the same schema The API route imports the very same tools.ts and validates the input against the schema the agent was shown before it runs anything, so what the agent is told and what the server enforces can’t drift apart. A model is a sloppy caller though, so the validator forgives the mistakes that only have one obvious meaning and refuses the rest: - an integer sent as a string "5" is read as the integer, - an enum value in the wrong case "React" is read as its listed form, - strings are trimmed, and an empty string counts as not sent, - properties the schema doesn’t name are dropped instead of refused. 4. Hand back a mistake, never throw it This one’s the most useful thing in this post if you’re building your own tools. If a tool’s execute rejects, the model gets a bare UnknownError and no idea what went wrong. So every tool on this site returns its mistakes as a plain object with a sentence in it: js // src/util/webmcp/register.ts trimmed const body = await response.json .catch = null ; if body && body.ok === true return body.result; / A mistake goes back to the model as a sentence it can correct, not as a rejected promise, which the browser would flatten into UnknownError. / return { error: body?.error || tej.as answered ${response.status}. Try again in a moment. }; A model can fix "source" must be one of all, talks, podcast, book, blog, and got "videos". on its very next call, and it can’t do anything with UnknownError . 5. Stay inside Chrome’s budgets Chrome’s guidance https://developer.chrome.com/docs/ai/webmcp/secure-tools gives every tool a budget: 30 characters for a name, 500 for a description, 150 for each parameter’s description and about 1,500 for what a tool returns. A test in this repo fails if a name or a description goes over, and it runs every tool against the real data to measure the output. That’s why a search result is a passage of about 220 characters around the sentence that shares the most words with your query, and not the first 220 characters of a chunk, which on a podcast segment is usually the tail of the previous answer. 6. Count whether anybody uses it Every page reports a WebMCP Ready event when it registers the tools, and every call reports a WebMCP Tool event with the tool’s name, whether it worked and how long it took. That’s how I’ll know whether any agent in the wild actually calls these, or whether I built a really nice door nobody knocks on. What is WebMCP good for? WebMCP is good for anything people already do on your page that an agent could do with one function call instead of a dozen clicks. Sarah showed it on her own app https://x.com/sarah edo/status/2099489118182863280 : “I can batch process, change themes and dark mode, check on higher level goals that I’m keeping track of. All of this functionality exists already ” - Answering from your own data. My fees, my calendar and my talks were already on my pages. The tools just let an agent read them without guessing, which is the whole demo at the top of this post. - Checking out. On 28 September Shopify opened checkout to agents in the browser https://techcrunch.com/2026/09/28/shopify-opens-checkout-to-browser-based-ai-agents/ with WebMCP tools called get checkout , update checkout and complete checkout , which places the order after the buyer authorizes it. - Your app’s features, from a side panel. Sarah built a Chrome extension https://x.com/sarah edo/status/2102025642862600634 that drives any site’s WebMCP tools with Jev https://www.typesafe.ai/ from TypeSafe https://www.typesafe.ai/ : as you type, it picks the page’s tool, fills in the arguments and tells you how sure it is. I use Jev on this site to decide whether the Ask boxes can answer a question at all, so seeing it pick tools was a fun little crossover. How to try it on tej.as In a recent Chrome, open any page here, then open the console in DevTools and run document.modelContext.getTools : you’ll see the same 4 tools an agent sees. Sarah’s extension will drive them for you if you’d rather click than type. What I still don’t know I don’t know yet whether any agent will call these. The tools went live on 1 October, Chrome only offers them through an origin trial, and so far the only agent I’ve watched call them is my own demo. The WebMCP Tool events will tell me, and I’ll write down what they say. I also don’t know where the line is between a tool and a page. A tool that answers “what does a workshop cost” is great, but if the agent answers everything, nobody sees the page the answer came from, and I don’t know yet what that does to a personal website. Takeaways - WebMCP lets a page hand an AI agent real tools: a name, a description, an input schema and a function, in the page the visitor already has open. - Chrome runs it as an origin trial from Chrome 149, and the spec is still a draft that has already moved once. - Write each tool’s contract once, register it in the browser and check every call against it on the server. - Return mistakes as sentences, because a thrown error reaches the model as a bare UnknownError . - Stay inside Chrome’s budgets, and mark anything that books or pays with consequentialHint . - Start with what your page already does. If you want your team to build agents that call tools like these and don’t fall over, I teach a workshop on reliable AI agents in production https://tej.as/workshops ai-agents . If you’d like me to talk about AI and the web at your event, here’s how to book me https://tej.as/speaking . If this made WebMCP click for you, please share it with someone whose agent is still screenshotting things. ok bye Questions What is WebMCP? WebMCP is a proposed web standard that lets a web page hand an AI agent using the browser a set of tools, each with a name, a description, a JSON Schema for its input and a function to run, so the agent calls the function instead of reading screenshots and clicking around. The spec is a draft from the World Wide Web Consortium's W3C Web Machine Learning Community Group, and Chrome runs it as an origin trial from Chrome 149. What is the difference between WebMCP and MCP? The Model Context Protocol MCP connects an AI app to a server that somebody runs somewhere else, while WebMCP lets the web page you already have open offer tools to an agent working through your browser. A WebMCP tool lives in the page itself, so there is no extra server to run and nothing for the visitor to install or connect. How do I add WebMCP to my website? Call document.modelContext.registerTool with a name, a description, an input schema and an execute function, in a browser that supports WebMCP. On my site each execute sends its input to an API route that checks it against the same schema and answers from the same data the pages show. Which browsers support WebMCP? Chrome supports WebMCP as an origin trial from Chrome 149, so a site that registers for the trial gets it for ordinary Chrome visitors, and you can turn it on for any site you're building with chrome://flags/ enable-webmcp-testing . It's still a proposed standard, and the API has already moved once, from navigator to document . What is WebMCP good for? WebMCP is good for anything a person already does on a page that an agent could do with one function call instead of a dozen clicks: searching, filtering, checking a schedule, booking, checking out. Shopify uses it for checkout tools that place an order after the buyer authorizes it, and I use it so an agent can search everything I've published and read my speaking schedule and prices. Written by me, Tejas Kumar, an AI Engineer at IBM based in Berlin. Read everything else I have written https://tej.as/blog , or go to Fluent React, my O'Reilly book on how React works inside https://tej.as/react , the talks I give at conferences https://tej.as/speaking , and ConTejas Code, my podcast https://tej.as/podcast .