--- title: WebMCP: letting web pages tell AI agents what they can do description: WebMCP is an emerging web standard and browser API that lets websites expose their functionality as structured tools for AI agents, instead of forcing agents... canonical: https://daily.dev/posts/webmcp-letting-web-pages-tell-ai-agents-what-they-can-do-opvrypbug twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: WebMCP: letting web pages tell AI agents what they can do | daily.dev og:description: WebMCP is an emerging web standard and browser API that lets websites expose their functionality as structured tools for AI agents, instead of forcing agents... og:url: https://daily.dev/posts/webmcp-letting-web-pages-tell-ai-agents-what-they-can-do-opvrypbug og:image: https://api.daily.dev/og/posts/OpvrYpbug.png og:image:alt: WebMCP: letting web pages tell AI agents what they can do og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # WebMCP: letting web pages tell AI agents what they can do **[Collections](https://daily.dev/sources/collections)** · 4 min read · 1 upvotes · 1 comments ## Summary WebMCP is an emerging web standard and browser API that lets websites expose their functionality as structured tools for AI agents, instead of forcing agents to parse the DOM or take screenshots. The spec is still evolving (the API recently changed from navigator.modelContext to document.modelContext) and is available via a Chrome origin trial. Shopify has added WebMCP tools to its checkout flow so browser agents can navigate storefronts, read checkout state, update fields, and submit orders, handing control back to the buyer for steps like 3D Secure. A developer who added WebMCP to his personal site showed an agent could answer questions about his talks and workshop pricing using only four defined tools, no scraping. Practical lessons include writing one shared tool description for both browser and server validation, returning errors as readable messages rather than throwing, keeping descriptions and responses short (Chrome suggests under 500 characters for descriptions, ~1,500 for returned content), and only loading the script where WebMCP is supported. OpenAI has also run a WebMCP Challenge highlighting community projects built on the emerging standard. ## Content WebMCP is a proposed web standard that lets a page tell an AI agent in the browser what it can do there. Instead of screenshotting the page, scrolling, screenshotting again and clicking the wrong button, the agent finds a list of tools and calls them. Each tool has a name, a description, the inputs it takes and a function to run. It isn't a shipped standard yet. Chrome has it in an origin trial, and the syntax is still moving: it recently changed from `navigator.modelContext` to `document.modelContext`. ## How it differs from MCP In traditional MCP, an AI app connects to an MCP server that exposes tools. WebMCP puts the tools in the browser, inside the web app itself. The flow is AI agent, then browser, then web app, then the app's logic or API. The page is the server. There's a side benefit worth noting. Standardizing this kind of context about what a page can do could help accessibility and assistive technology too, not just agents. It echoes the curb cut effect: a fix built for one group ends up useful to many. ## Who is using it **Shopify** added WebMCP tools for checkout, building on its earlier storefront and cart tools. A browser agent can navigate to the storefront, read checkout state and order details, update supported fields, and submit the checkout once the buyer confirms. When the buyer has to act directly, for example 3D Secure authentication or a blocking UI extension, control goes back to them. The tools run inside checkout-web on the existing checkout state, so there's no new API and no merchant configuration. **Telerik and Kendo UI** has a preview package, `@progress/kendo-angular-webmcp`. In an Angular dashboard, adding a `kendoWebMcp` directive to a Grid generates tools for sorting, filtering and highlighting rows, with no hand-written JSON schemas. Using the Telerik & Kendo UI WebMCP browser extension, which needs a Chromium dev flag and an LLM API key, an agent ran multi-condition filter, sort and highlight commands from plain-language prompts. The vendor flags both the standard and the tooling as early-stage, with trade-offs. **@TejasKumar_** put four tools on every page of his site. He asked an agent that knew nothing else about him where he's speaking this month and what a workshop costs. It made two calls and returned all four October conferences and every workshop price, straight from the site's own data with no scraping. @sarah_edo described the contrast well: the screenshot-and-guess loop versus a page that says "here are the 4 things you can do here." The OpenAI Devs account also announced winners of a WebMCP Challenge, ten projects built around agents working with websites. His lessons: 1. Write each tool's description once. The browser shows it to the agent, and his server validates every call against the same input description, so the two can't drift apart. 2. Return mistakes as a sentence instead of throwing. A thrown error gives the model only a generic unknown error. "source must be one of talks, podcast, book, blog" is something it can fix on the next try. 3. Keep it small. Chrome suggests roughly 500 characters for a tool description and about 1,500 for what it returns, so his search tool returns a short passage per result. 4. Load it only where it works. A browser without WebMCP pays for one quick check. ## Testing it with Playwright 1.64 Playwright 1.64 adds a `page.webmcp` API for testing pages that expose tools. The workflow: - Launch Chromium with the `--enable-features=WebMCP` flag. - Build an HTML fixture that registers tools with `document.modelContext.registerTool()`. - Discover tools with `page.webmcp.tools()`. - Run them with `page.webmcp.callTool()` and assert on results and errors. - Run the suite in CI with a pinned Playwright Docker image. Two practical notes: file URLs need care across platforms, and browser support varies. Chromium is flag-gated, Firefox uses preferences, and WebKit doesn't implement it. ## Questions this post answers ### What is WebMCP and how is it different from MCP? WebMCP is a proposed web standard and browser API letting a web app expose its own functionality as structured tools directly to AI agents, without a separate MCP server. In traditional MCP, an AI app connects to a server exposing tools; in WebMCP the flow goes agent, browser, web app, then the app's own logic or API, skipping the server hop entirely. _Developers tracking emerging AI agent standards like this one can follow updates on daily.dev._ ### Did the WebMCP API syntax change from navigator.modelContext to document.modelContext? Yes, the WebMCP API recently changed its namespace from navigator.modelContext to document.modelContext, reflecting that the standard is still unfinished and actively moving. Chrome currently supports WebMCP through an origin trial rather than a stable release, so implementations should expect further syntax changes before it stabilizes. _Teams experimenting with WebMCP can track API changes like this on daily.dev before shipping integrations._ ### What tools has Shopify added for WebMCP checkout automation? Shopify added WebMCP tools letting a browser agent navigate to the storefront, read checkout state and order details, update supported checkout fields, and submit the checkout once the buyer confirms. The tools run inside checkout-web against existing checkout state, requiring no new API and no merchant configuration, while control returns to the buyer for steps like 3D Secure authentication. _Developers evaluating agent-driven checkout flows can follow how Shopify's WebMCP tools evolve on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@bickov** · 0 upvotes > Chrome's cap of about 500 characters per tool description is tight. Has anyone measured how often an agent still falls back to screenshots on a page that has WebMCP tools? A lot of what agents get pointed at is a local dev build or an internal admin panel, and nobody will add tools there. For those pages Playwright MCP already reads the accessibility tree instead of pixels, which removes a good part of the screenshot and scroll loop. ## Similar posts on daily.dev - [WebMCP By Google, Clearly Explained\!](https://daily.dev/posts/webmcp-by-google-clearly-explained--qj3yrnemq) · Daily Dose of Data Science \| Avi Chawla \| Substack · 0 upvotes · 0 comments - [WebMCP: Optimize Your Website for AI Agents](https://daily.dev/posts/webmcp-optimize-your-website-for-ai-agents-3ewweawaw) · DebugBear · 1 upvotes · 0 comments - [WebMCP turns any Chrome web page into an MCP server for AI agents](https://daily.dev/posts/webmcp-turns-any-chrome-web-page-into-an-mcp-server-for-ai-agents-t7se7hpwy) · The New Stack · 1 upvotes · 0 comments - [WebMCP Explained: How Developers Can Prepare Websites for AI Agents](https://daily.dev/posts/webmcp-explained-how-developers-can-prepare-websites-for-ai-agents-yyokz9lqj) · SitePoint · 2 upvotes · 0 comments --- Tags: [#ai-agents](https://daily.dev/tags/ai-agents), [#mcp](https://daily.dev/tags/mcp), [#google-chrome](https://daily.dev/tags/google-chrome), [#shopify](https://daily.dev/tags/shopify), [#webmcp](https://daily.dev/tags/webmcp) [View this post on daily.dev](https://daily.dev/posts/webmcp-letting-web-pages-tell-ai-agents-what-they-can-do-opvrypbug) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"WebMCP: letting web pages tell AI agents what they can do","url":"https://daily.dev/posts/webmcp-letting-web-pages-tell-ai-agents-what-they-can-do-opvrypbug","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/webmcp-letting-web-pages-tell-ai-agents-what-they-can-do-opvrypbug"},"datePublished":"2026-10-02T16:00:35.812Z","dateModified":"2026-10-08T23:30:07.084Z","description":"WebMCP is an emerging web standard and browser API that lets websites expose their functionality as structured tools for AI agents, instead of forcing agents...","isAccessibleForFree":true,"articleSection":"Collections","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Collections","logo":"https://media.daily.dev/image/upload/s--fk_6ycEi--/f_auto,q_auto/v1780996001/logos/collections?_a=BAMAMiWQ0","url":"https://daily.dev/sources/collections"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/webmcp-letting-web-pages-tell-ai-agents-what-they-can-do-opvrypbug","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"ai-agents,mcp,google-chrome,shopify,webmcp","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Collections","item":"https://daily.dev/sources/collections"},{"@type":"ListItem","position":3,"name":"WebMCP: letting web pages tell AI agents what they can do"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/webmcp-letting-web-pages-tell-ai-agents-what-they-can-do-opvrypbug","comment":[{"@type":"Comment","text":"Chrome’s cap of about 500 characters per tool description is tight. Has anyone measured how often an agent still falls back to screenshots on a page that has WebMCP tools? A lot of what agents get pointed at is a local dev build or an internal admin panel, and nobody will add tools there. For those pages Playwright MCP already reads the accessibility tree instead of pixels, which removes a good part of the screenshot and scroll loop.","datePublished":"2026-10-07T07:04:16.013Z","url":"https://daily.dev/posts/OpvrYpbug#c-HiK7lPSVl","author":{"@type":"Person","name":"ab","url":"https://daily.dev/bickov","image":"https://lh3.googleusercontent.com/a/ACg8ocKwOmJ31UWqM4ZXB5ms-yRdFR4BYzyb7FPBRpg1O6DV0MIAF2EP=s96-c"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/webmcp-letting-web-pages-tell-ai-agents-what-they-can-do-opvrypbug#faq","mainEntity":[{"@type":"Question","name":"What is WebMCP and how is it different from MCP?","acceptedAnswer":{"@type":"Answer","text":"WebMCP is a proposed web standard and browser API letting a web app expose its own functionality as structured tools directly to AI agents, without a separate MCP server. In traditional MCP, an AI app connects to a server exposing tools; in WebMCP the flow goes agent, browser, web app, then the app's own logic or API, skipping the server hop entirely. Developers tracking emerging AI agent standards like this one can follow updates on daily.dev."}},{"@type":"Question","name":"Did the WebMCP API syntax change from navigator.modelContext to document.modelContext?","acceptedAnswer":{"@type":"Answer","text":"Yes, the WebMCP API recently changed its namespace from navigator.modelContext to document.modelContext, reflecting that the standard is still unfinished and actively moving. Chrome currently supports WebMCP through an origin trial rather than a stable release, so implementations should expect further syntax changes before it stabilizes. Teams experimenting with WebMCP can track API changes like this on daily.dev before shipping integrations."}},{"@type":"Question","name":"What tools has Shopify added for WebMCP checkout automation?","acceptedAnswer":{"@type":"Answer","text":"Shopify added WebMCP tools letting a browser agent navigate to the storefront, read checkout state and order details, update supported checkout fields, and submit the checkout once the buyer confirms. The tools run inside checkout-web against existing checkout state, requiring no new API and no merchant configuration, while control returns to the buyer for steps like 3D Secure authentication. Developers evaluating agent-driven checkout flows can follow how Shopify's WebMCP tools evolve on daily.dev."}}]} ```