The browser standard that lets any website expose structured JavaScript tools directly to in-browser AI agents via navigator.modelContext.
- 📜 Official Specs & Documentation
- 🚀 Getting Started & Browser Setup
- 📖 Tutorials & Hands-On Guides
- 📦 Libraries, SDKs & Polyfills
- 🎮 Demos & Example Projects
- 🔧 Developer Tools & Utilities
- 🎬 Videos & Talks
- 📝 Articles & Best Practices
- 👥 Community & Contributing
- 🔗 Related: MCP Ecosystem
The authoritative sources. Read these first.
- WebMCP Spec (W3C Community Group Draft) - Full IDL, tool registration, schemas, and security model.
- WebMCP GitHub Repo - Spec source, issues, and the declarative explainer PR.
- Awesome WebMCP (Official) - Curated list maintained by the Web Machine Learning Community Group.
- Chrome Early Preview Announcement - How WebMCP fits into Chrome 146+.
- Chrome WebMCP Usage Guide - Agent integration details and practical usage patterns.
- Model Context Protocol (MCP) Core Spec - The server-side counterpart that WebMCP brings to the browser.
Enable WebMCP first to start experimenting.
- Chrome Canary / Beta 146+ - Navigate to
chrome://flags, search "WebMCP for testing" (or "Experimental Web Platform features"), enable, and restart.
- Model Context Tool Inspector - Official GoogleChromeLabs tool for debugging schemas, testing tool calls, and visualizing registered tools. Part of GoogleChromeLabs/webmcp-tools.
- MCP-B Chrome Extension - Bridges desktop MCP agents with in-browser WebMCP tools + polyfill support.
Step-by-step walkthroughs covering both the Declarative API (HTML attributes) and the Imperative API (navigator.modelContext.registerTool).
- MCP-B Tutorials - Best practical series: vanilla HTML, React (
useWebMCPhook), native Chrome preview, desktop agent relay. - Codely: What is WebMCP and How to Use It - Excellent declarative + imperative breakdown with real-site examples.
- BetterStack Complete Guide - Deep dive with a flight-booking example app.
- MCP-B How-To Guides - Adoption strategies, existing app integration, runtimes (native vs polyfill vs global).
Production-ready helpers so you don't reinvent the wheel.
The official companion library suite for WebMCP.
- MCP-B Documentation - Polyfill, types, React hooks, transports, and iframe bridging.
- MCP-B npm Packages - Source for all packages:
@mcp-b/webmcp-polyfill,@mcp-b/webmcp-types,usewebmcp,@mcp-b/global.
- webmcp-react - React hooks for exposing typed tools via
navigator.modelContext. Zod-first schemas, built-in polyfill, SSR-compatible (Next.js/Remix), and StrictMode-safe with reactive execution state tracking. - webmcp-kit - Zod-typed tool definitions, ideal for modern TypeScript/React apps.
- WebMCP Widget Library - One-line
<script>tag for quick demos and prototyping. GitHub.
Live sites you can test with the inspector + agent. All from GoogleChromeLabs or high-quality community implementations.
From the webmcp-tools repo:
- Le Petit Bistro - Restaurant booking demo using the declarative API.
- React Flight Search - Flight search with imperative tool registration.
- ZaMaker Pizza Builder - Custom pizza ordering via imperative API.
- WebMCP Maze - Full agent-driven maze navigation game.
- Mystery Doors - Interactive puzzle with AI agent collaboration.
- Air Bird Booking - Agent-native flight + accommodation booking. 10x fewer tokens than DOM scraping.
- Shoe Store - React e-commerce storefront with full WebMCP integration.
- WebMCP Blackjack - Multi-agent blackjack game.
- Excalidraw + WebMCP - Diagram generation driven by AI agents.
- Architecture Flow Builder - Visual architecture diagramming with agent assistance.
- GoogleChromeLabs/webmcp-tools - Official toolkit: Model Context Tool Inspector extension, CLI utilities, and demo suite.
- WebMCP Inspector - Online inspector for testing and debugging WebMCP tool registrations.
- WordLift AI Readiness Audit - Scan your site for WebMCP / agent readiness.
- WebMCP Cheat Sheet - Quick-reference cheat sheet for declarative and imperative APIs, schemas, and common patterns.
- Don't let AI agents push your buttons - use WebMCP instead! - Khushal Sagar (Chrome Staff Engineer) on why WebMCP replaces button-clicking agents.
- WebMCP - Why it's awesome & How to use it - Full setup walkthrough with inspector and React integration.
- Syntax.fm WebMCP Deep Dive - In-depth discussion + live demo.
- Alex Nahas (MCP-B creator) Interview - Origin story and vision for the MCP-B ecosystem.
Join the conversation on r/WebMCP_Developers - show your projects, ask questions, and stay on top of the latest.
- Web Machine Learning Community Group - Join to shape the spec.
- WebMCP GitHub Issues & Discussions - Report bugs, request features, discuss the spec.
- r/WebMCP_Developers - Dedicated subreddit for WebMCP developers.
WebMCP pairs with full MCP clients (Claude Desktop, Cursor, etc.) via relays for end-to-end agent workflows.
- Model Context Protocol - Official MCP spec, SDKs, and quickstart guides.
- MCP-B Desktop Agent Relay - Connect desktop MCP agents to in-browser WebMCP tools.