awesome-webmcp
A curated list of awesome things related to the WebMCP W3C standard
https://github.com/webfuse-com/awesome-webmcp
Last synced: 10 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).
- Persona - The world's first WebMCP-native AI chat UI. A framework-agnostic (vanilla JS), MIT-licensed chat widget you drop into any existing site — React, Vue, a legacy CMS, or static HTML — that discovers and executes WebMCP tools on the parent page, so you can build "copilot" experiences by hooking into your app's existing functionality instead of standing up bespoke agent APIs. Config-driven theming, built-in polyfills. npm `@runtypelabs/persona`, [live demo](https://www.persona-chat.dev/webmcp-slides.html).
- 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