sdras/webmcp-demo

This repository is a small explainer site for WebMCP, a proposal that lets a web page tell an AI agent which tools it offers, in a structured way, instead of forcing the agent to read the rendered HTML or the accessibility tree. The demo, written by sdras, is meant as a teaching aid for people who have read about MCP for AI tools and want to see what the same idea looks like in a browser. The page itself is a side-by-side comparison. On one side, a calendar booking button behaves the way today's agents see it, by scraping the document model. On the other side, the same button is exposed through a WebMCP shim, so an agent connected through the WebMCP browser extension can call it as a declared tool. Around that demo, the page carries written explainer copy, links to the WebMCP specification and origin trial, and feedback channels for the proposal. There is no build step. The whole thing is three static files: index.html for the page structure and copy, styles.css for the visual design, and app.js for the booking widget, the WebMCP shim, the simulated agent, and the annotation overlay that points out which parts of the page are doing what. To run it locally, the README suggests serving the directory with any static file server. It shows two one-line options, npx serve . from Node, or python3 -m http.server 8000, then opening the served URL in a browser. The author invites readers to fork the demo as a learning tool and to follow the links on the site for the WebMCP spec, related docs, and the origin trial signup. No license is mentioned in the README, and there are no tests or external dependencies beyond a static web server and the WebMCP browser extension for the interactive side of the comparison.