awesome-webmcp
A curated list of awesome things related to the WebMCP W3C standard
https://github.com/webfuse-com/awesome-webmcp
Last synced: 8 days ago
JSON representation
-
👥 Community & Contributing
-
Community Demos
- 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.
-
-
🎮 Demos & Example Projects
-
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.
- 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 Official Demos
- webmcp-tools
- 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.
-
-
🔧 Developer Tools & Utilities
-
Community Demos
- 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.
-
-
🚀 Getting Started & Browser Setup
-
Essential Extensions
- Model Context Tool Inspector - Official GoogleChromeLabs tool for debugging schemas, testing tool calls, and visualizing registered tools. Part of [GoogleChromeLabs/webmcp-tools](https://github.com/GoogleChromeLabs/webmcp-tools).
- MCP-B Chrome Extension - Bridges desktop MCP agents with in-browser WebMCP tools + polyfill support.
- Model Context Tool Inspector - Official GoogleChromeLabs tool for debugging schemas, testing tool calls, and visualizing registered tools. Part of [GoogleChromeLabs/webmcp-tools](https://github.com/GoogleChromeLabs/webmcp-tools).
- MCP-B Chrome Extension - Bridges desktop MCP agents with in-browser WebMCP tools + polyfill support.
-
-
📦 Libraries, SDKs & Polyfills
-
MCP-B Ecosystem
- 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 Widget Library - One-line `<script>` tag for quick demos and prototyping. [GitHub](https://github.com/jasonjmcghee/WebMCP).
- 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](https://github.com/jasonjmcghee/WebMCP).
-
-
📜 Official Specs & Documentation
- 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.
- WebMCP Spec (W3C Community Group Draft) - Full IDL, tool registration, schemas, and security model.
- Model Context Protocol (MCP) Core Spec - The server-side counterpart that WebMCP brings to the browser.
-
🔗 Related: MCP Ecosystem
-
Community Demos
- Model Context Protocol - Official MCP spec, SDKs, and quickstart guides.
-
-
📖 Tutorials & Hands-On Guides
-
Essential Extensions
- 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).
-
-
🎬 Videos & Talks
-
Community Demos
- 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.
-
Programming Languages
Categories
Sub Categories
Keywords