GoogleChromeLabs/webmcp-tools

What it is

• A collection of utilities, demos, and a polyfill that help web developers experiment with WebMCP, an emerging browser API that lets AI agents call “tools” exposed by a web page.
• The repo is organized into:
  1. Developer utilities – a Chrome extension, a CLI evaluator, a skill library, and a JavaScript polyfill.
  2. Demo applications – a dozen small‑to‑medium web apps (flight search, restaurant booking, pizza maker, maze game, e‑commerce stores, smart‑home dashboard, etc.) that showcase how to expose declarative or imperative tools to an LLM‑driven agent.

Why it matters

• WebMCP aims to replace the current “scrape‑the‑page” approach with a standardized, structured interface that an LLM can invoke directly, making web‑based automation safer and more reliable.
• These tools give developers a concrete way to prototype, test, and debug that workflow before the API lands in browsers.

Key pieces

Component	What it does
Model Context Tool Inspector (Chrome extension)	Lets you open any page, see which WebMCP tools are advertised, view their input schemas, and troubleshoot connection problems right in the browser.
WebMCP Evals (CLI)	Provides a test harness for checking whether an LLM correctly calls the declared tools. You write test cases and schemas, run the LLM, and get pass/fail reports.
WebMCP Skills	A curated set of “agent skills” (pre‑written tool definitions and test workflows) that can be dropped into a project to get a functional agent quickly.
WebMCP Polyfill	A small JavaScript file that mimics the WebMCP API in browsers that don’t yet support it, so the demos run everywhere.
Demos	Real‑world‑style web apps (React, Angular, vanilla JS) that expose tools both imperative (call‑and‑do) and declarative (describe‑what‑you‑want). Each demo includes a README showing how the tools are declared and how an LLM can interact with them.

How to get started

1. Clone the repo.
2. Install the polyfill (or use a Chromium‑based browser with the experimental WebMCP flag enabled).
3. Run one of the demo folders (npm install && npm start in most cases) to see an AI‑agent‑driven UI in action.
4. Use the Model Context Tool Inspector extension to inspect the live page and verify the tool schema.
5. If you have your own LLM, point it at the WebMCP Evals CLI to write test cases for your custom tools.

Who should use it

• Front‑end engineers curious about the next step in AI‑web integration.
• Researchers building LLM‑driven agents that need a reliable way to interact with web UIs.
• Product teams prototyping AI‑assistant features without building a full backend scraper.

Limitations / status

• Not an official Google product; the repository is community‑maintained.
• The API is still experimental; the polyfill is a best‑effort shim and may not cover every edge case.
• No security guarantees – it’s meant for development and demo purposes only.

Further reading

• The Awesome WebMCP List (AWESOME_WEBMCP.md) aggregates additional projects and resources around the same API.
• Each demo folder contains its own README with deeper technical details and usage instructions.