---

📋 Contents

• 📜 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

---

📜 Official Specs & Documentation

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.

---

🚀 Getting Started & Browser Setup

Enable WebMCP first to start experimenting.

Browser Flags

• Chrome Canary / Beta 146+ - Navigate to chrome://flags, search "WebMCP for testing" (or "Experimental Web Platform features"), enable, and restart.

Essential Extensions

• 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.

---

📖 Tutorials & Hands-On Guides

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 (useWebMCP hook), 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).

---

📦 Libraries, SDKs & Polyfills

Production-ready helpers so you don't reinvent the wheel.

MCP-B Ecosystem

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.

Standalone Libraries

• 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-next - Next.js plugin that auto-exposes API routes and server actions as WebMCP tools and resources. Zero-config withWebMCP() wrapper, source-level scanner with Zod schema support, and a <WebMCPScript /> component for instant navigator.modelContext registration.
• WebMCP Widget Library - One-line <script> tag for quick demos and prototyping. GitHub.

---

🎮 Demos & Example Projects

Live sites you can test with the inspector + agent. All from GoogleChromeLabs or high-quality community implementations.

GoogleChromeLabs Official Demos

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.

Community Demos

• 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.

---

🔧 Developer Tools & Utilities

• 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.

---

🎬 Videos & Talks

• 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.

---

👥 Community & Contributing

• 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.

---

🔗 Related: MCP Ecosystem

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.

---