# Awesome WebMCP A curated list of awesome WebMCP demos, libraries, and tools. ## Contents - [Demos](#demos) - [Libraries & Tools](#libraries--tools) - [Contributing](#contributing) ## Demos - [Explainer mini-site](https://googlechromelabs.github.io/webmcp-tools/demos/explainer/) - 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](https://googlechromelabs.github.io/webmcp-tools/demos/french-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](https://googlechromelabs.github.io/webmcp-tools/demos/react-flightsearch/) - 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!](https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/) - 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](https://googlechromelabs.github.io/webmcp-tools/demos/doors/) - A simple multi-page demo showcasing WebMCP capabilities using both declarative and imperative approaches. - **Example Prompt:** "Explore the rooms" - [WebMCP Maze](https://googlechromelabs.github.io/webmcp-tools/demos/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](https://googlechromelabs.github.io/webmcp-tools/demos/ticket-booking/) - 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](https://googlechromelabs.github.io/webmcp-tools/demos/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." - [L'Atelier Hotel Chain](https://googlechromelabs.github.io/webmcp-tools/demos/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](https://googlechromelabs.github.io/webmcp-tools/demos/sport-shop-angular/) - 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](https://andreinwald.github.io/webmcp-demo/) | [Code](https://github.com/andreinwald/webmcp-demo) - 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](https://webmcp-flight-demo.netlify.app/) / [Flight booking (declarative)](https://webmcp-flight-demo.netlify.app/declarative.html) - 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](https://65s6dw.csb.app/) - 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](https://matipojo.github.io/WebMCP-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 through `document.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 tokens - [Article](https://medium.com/data-science-collective/moving-beyond-screen-scraping-creating-an-agent-native-web-app-with-webmcp-4818552e1e11) | [Code](https://github.com/hugozanini/air-bird-booking-web-mcp) - [AI Audit](https://audit.wordlift.io/) - Audit any website's readiness for the agentic web. Exposes a `run-audit` tool via `document.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 on https://example.com" - [Blackjack Agents](https://webmcp-blackjack.heejae.dev/) - 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. - [Code](https://github.com/happyhj/webmcp-blackjack) - **Example Prompt:** "Play my turn" - [WebMCP Bridge](https://h3manth.com/ai/webmcp/) - 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](https://shidh.in/demo/webmcp-excalidraw/) - 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](https://webmcp-flow.vercel.app/) - 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. - [Code](https://github.com/ttimur-dev/webmcp-flow) - **Example 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)](https://googlechromelabs.github.io/webmcp-tools/demos/coffee-shop/) - 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](https://googlechromelabs.github.io/webmcp-tools/demos/real-estate-map/) - 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](https://googlechromelabs.github.io/webmcp-tools/demos/leather-bag/) - 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](https://googlechromelabs.github.io/webmcp-tools/demos/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](https://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 site `https://example.com` in the WebMCP directory." - [WebMCP Page Agent](https://googlechromelabs.github.io/webmcp-tools/demos/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](https://jsonstat.com/webmcp/) - 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 dataset https://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_PER and 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](https://stacktr.ee/) - Private hosting for the HTML that AI agents generate. Registers `stacktree_publish_html` via `document.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." - [**Wordup**](https://github.com/GoogleChromeLabs/web-ai-demos/tree/main/wordup) ([live](https://snugug.github.io/demos/wordup/)): 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." ## Libraries & Tools - [Latch](https://github.com/r0bertini/latch) - A one-line `