A curated list of awesome WebMCP demos, libraries, and tools.
Explainer mini-site- A side-by-side demo of how AI agents interact with a web page today (site scraping) and a future where the page declares WebMCP structured tools.Le Petit Bistro- A restaurant reservation system that demonstrates how an AI agent can interact with a web-based booking form using declarative tool definitions.Example Prompt:"Can you book a table for John Doe for 2 people at Le Petit Bistro next Friday, at 7 PM on the Terrace? His number is 123-456-7890. It's for a birthday celebration."
React Flight Search- A React-based flight search application that showcases how a web application can expose structured tools to an AI agent, allowing it to programmatically interact with the UI.Example Prompt:"Search flights from LON to NYC leaving next Monday and returning after a week for 2 passengers."
WebMCP zaMaker!- An interactive pizza builder demonstrating imperative tool registration, allowing AI models to make custom pizzas.Example Prompt:"Make me a large BBQ pizza with sauce, pineapple and extra bacon."
Mystery Doors- A simple multi-page demo showcasing WebMCP capabilities using both declarative and imperative approaches.Example Prompt:"Explore the rooms"
WebMCP Maze- A maze escape game where the player navigates entirely by prompting an AI agent in the browser — no keyboard or mouse input.Example Prompts:"Start a new game", then "Solve the maze"
CineFlow- A movie ticket purchase flow where AI agents can update location, query movies by genre, and select showtimes to start a checkout process.Example Prompt:"Find two tickets for a horror movie in Montpelier tonight"
Order Tracking- A simulated e-commerce order tracking and returns system allowing an AI agent to query order history and initiate returns via declarative tools.Example Prompt:"Where is my order from last week? If it’s delivered, I need to start a return."
Open for Agents Storefront- A live WordPress and WooCommerce demonstration of owner-reviewed product-discovery tools, alongside an optional site Assistant that uses reviewed capabilities.WordPress.org plugin|Project explanationExample Prompt:"Find an in-stock mug."
L'Atelier Hotel Chain- A high-fidelity hotel booking application designed to showcase the power of WebMCP. This demo illustrates how AI agents can interact with a modern web application through both imperative and declarative tools.Example Prompt:"Find a hotel in Paris with a Spa."
WebMCP Sports- A modern e-commerce storefront for high-performance sports equipment, built with Angular and Vanilla CSS.Example Prompt:"Find training balls and add them to cart."
Shoe store|Code- online store built with React, with all core functionality MCP-ready.Example Prompt:"Suggest the 3 best pairs of soccer shoes (foot size 45) available on this site. Add (one of suggestions) to cart and complete purchase."
Flight booking/Flight booking (declarative)- Find the best flights for your journey.Example Prompt:"I want to book a flight from New York to Los Angeles for two people on next Thursday."
Animal Viewer- A simple codesandbox demo page that shows either a dog or a cat image.Example Prompt:"Show me a dog on this page"
React Chess- A chess game that exposes WebMCP tools (get-board-state
,make-move
,get-possible-moves
,restart-game
,promote-pawn
) so an AI agent can play chess throughdocument.modelContext
.Example Prompt:"Let's play chess. You play white. Make your opening move."
Moving Beyond Screen Scraping: A hands-on example of using WebMCP to create an agentic first experience with 10x fewer tokensAI Audit- Audit any website's readiness for the agentic web. Exposes arun-audit
tool viadocument.modelContext
that lets an AI agent programmatically trigger a full AI readiness analysis (score 0–100) covering site files, SEO, structured data, content, and more.Example Prompt:"Run an AI readiness audit onhttps://example.com"
Blackjack Agents- Blackjack game with multiple AI agents (player, opponent, dealer) all using WebMCP tools. Each agent autonomously observes its hand, decides to hit or stand, and repeats until done — driven by tool descriptions alone.CodeExample Prompt:"Play my turn"
WebMCP Bridge- A bridge that connects any remote MCP server to Chrome's WebMCP API (document.modelContext
), letting browser-based AI agents discover and invoke tools from existing MCP servers.Example Prompt:"Search for TC39 proposals related to decorators"
WebMCP × Excalidraw x WebAI- A Web app that converts natural language descriptions into Excalidraw diagrams through a 3-tool WebMCP pipeline (generate_mermaid → validate_mermaid → render_excalidraw), with optional on-device generation using Chrome's built-in AI.Example Prompt: "Create a flowchart showing the user login flow with error handling"
WebMCP Flow- An AI-controllable architecture diagram builder that lets an AI agent create nodes, connect them with edges, and apply auto-layout in real time via WebMCP tools.CodeExample Prompt:"Draw a typical web application architecture with authentication: browser client, API Gateway, Auth Service, User Service, PostgreSQL, Redis. Connect them with edges labeled by protocol and apply auto layout."
The Morning Ritual (Imperative)- A premium coffee boutique demo showcasing agentic reordering, technical spec analysis, and catalog navigation.Example Prompt:"Will the espresso machine fit under a 15-inch cabinet?"
UrbanEstates- A real-estate map application that demonstrates imperative tool registration, allowing an AI agent to interact with property filters and map views.Example Prompt:"Find me an apartment in Austin", then "Find me an apartment with AC under $1,000,000."
Luxe Leather- A premium e-commerce site for hand-crafted leather goods built with Angular and WebMCP. This demo showcases how an AI agent can interact with a web application to search products, check policies, and manage a shopping cart using declarative tools.Example Prompt:"Find a handmade leather bag, check if they have a 30-day return policy, and if yes, add the brown one to my cart"
WebMCP Smart Home- A sleek, interactive dashboard where an AI agent can dynamically reconfigure home control components (e.g., front door cameras, thermostats, smart lights, energy distribution) based on user intents.Example Prompt:"Someone is at the door. Show me."
webmcp.cool- A live, curated directory of WebMCP-enabled websites with a JSON API for agent-side discovery. Also registers its own WebMCP tools so agents can interact with the registry directly.Example Prompt:"List my sitehttps://example.com
in the WebMCP directory."
WebMCP Page Agent- A Gemini-powered meta-demo that lets you control any WebMCP-enabled website using simple natural language commands.Example Prompt:"Make me a large BBQ pizza with sauce, pineapple and extra bacon."
JSON-stat WebMCP Explorer- A JSON-stat viewer that lets you fetch a dataset from an official statistical office (like Eurostat), view and filter its data as a list or a cross-tabulation and download them as CSV using a web interface or natural language.Example Prompt:"Load datasethttps://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/lfsi_emp_a?lang=en&lastTimePeriod=3&indic_em=ACT&age=Y15-64&unit=THS_PERand select the data for Germany and Ireland and the last period available. Display a cross-tabulation with sex as rows and countries as columns and download a CSV file with this info."
Stacktree- Private hosting for the HTML that AI agents generate. Registersstacktree_publish_html
viadocument.modelContext
, so a browser agent can hand over a complete HTML document and get back a live, shareable URL with no account or sign-in. Anonymous sites are unlisted and the response includes a claim URL to keep the page permanently in a free account.Example Prompt:"Build a simple one-page site for a coffee shop called Crema and publish it so I can share the link."
(Worduplive): A casual word guessing game using the Prompt API to generate words and can be driven entirely through WebMCP.Example Prompt:"Start a new game."
Latch- A one-line<script>
that detects a page's existing search, cart, and form handlers and registers them as WebMCP tools, with feature detection and no framework dependency. MIT licensed; running live atlatch.tools.use-webmcp-tool- React hook for registering WebMCP tools (document.modelContext
) with lifecycle-managed registration.webmcp-types- TypeScript type definitions for WebMCP.WebMCP - Model Context Tool Inspector- A Chrome Extension to let web developers inspect web pages to verify if WebMCP tools are correctly exposed, visualize the input schema, and debug connection issues directly within the browser.webmcpify- An agent skill that integrates WebMCP into an existing web app end to end: it inventories the app, proposes a tool manifest for approval, integrates the tools, then verifies each one in a real browser and heals failures.MCP Webcomic Site Server- A template and tutorial for making a webcomic archive visible to AI agents across three surfaces: a static 11ty website, an MCP server, and WebMCP browser tools. Registers tools likeget_current_page
,get_transcript
,prev_page
/next_page
, andsearch_comics
vianavigator.modelContext.registerTool()
.WebMCP Kit- A plugin for coding agents with an interactive visual Explorer that maps a site's user journeys to proposed WebMCP tools for review and approval, then implements and verifies them in a real browser.WindTunnel- An open-source benchmark comparing WebMCP with other browser-agent interfaces across task success, execution time, token usage, and cost.
Contributions are welcome! Please read the contribution guidelines first.