{"id":125954,"url":"https://github.com/webfuse-com/awesome-webmcp","name":"awesome-webmcp","description":"A curated list of awesome things related to the WebMCP W3C standard","projects_count":43,"last_synced_at":"2026-06-05T01:00:22.373Z","repository":{"id":344204115,"uuid":"1180917633","full_name":"webfuse-com/awesome-webmcp","owner":"webfuse-com","description":"A curated list of awesome things related to the WebMCP W3C standard","archived":false,"fork":false,"pushed_at":"2026-03-25T13:57:17.000Z","size":386,"stargazers_count":91,"open_issues_count":3,"forks_count":11,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-19T11:51:48.968Z","etag":null,"topics":["agents","ai","ai-agents","awesome","awesome-lists","awesome-readme","awesome-resources","awesome-web-dev","browser-automation","chrome","mcp","w3c","webmcp"],"latest_commit_sha":null,"homepage":"https://www.reddit.com/r/WebMCP_Developers/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webfuse-com.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-13T14:51:44.000Z","updated_at":"2026-05-04T09:30:11.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/webfuse-com/awesome-webmcp","commit_stats":null,"previous_names":["webfuse-com/awesome-webmcp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/webfuse-com/awesome-webmcp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfuse-com%2Fawesome-webmcp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfuse-com%2Fawesome-webmcp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfuse-com%2Fawesome-webmcp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfuse-com%2Fawesome-webmcp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webfuse-com","download_url":"https://codeload.github.com/webfuse-com/awesome-webmcp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfuse-com%2Fawesome-webmcp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33926275,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-04T02:00:06.755Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2026-04-01T21:01:40.699Z","updated_at":"2026-06-05T01:00:22.374Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["📜 Official Specs \u0026 Documentation","🔗 Related: MCP Ecosystem","🚀 Getting Started \u0026 Browser Setup","📖 Tutorials \u0026 Hands-On Guides","📦 Libraries, SDKs \u0026 Polyfills","🎮 Demos \u0026 Example Projects","🔧 Developer Tools \u0026 Utilities","🎬 Videos \u0026 Talks","👥 Community \u0026 Contributing"],"sub_categories":["Community Demos","Essential Extensions","MCP-B Ecosystem","Standalone Libraries","GoogleChromeLabs Official Demos"],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"assets/webmcp-deverlopers.png\" width=\"120\" alt=\"WebMCP Logo\" style=\"border-radius: 22px;\" /\u003e\n\n# Awesome WebMCP\n\n[![Awesome](https://awesome.re/badge.svg)](https://awesome.re)\n[![WebMCP](https://img.shields.io/badge/WebMCP-Agent_Native_Web-blueviolet?style=flat-square\u0026logo=google-chrome\u0026logoColor=white)](https://webmachinelearning.github.io/webmcp)\n[![Chrome 146+](https://img.shields.io/badge/Chrome-146%2B_Early_Preview-4285F4?style=flat-square\u0026logo=googlechrome\u0026logoColor=white)](https://developer.chrome.com/blog/webmcp-epp)\n[![r/WebMCP_Developers](https://img.shields.io/badge/Reddit-r%2FWebMCP__Developers-FF4500?style=flat-square\u0026logo=reddit\u0026logoColor=white)](https://www.reddit.com/r/WebMCP_Developers/)\n\n**The browser standard that lets any website expose structured JavaScript tools directly to in-browser AI agents via `navigator.modelContext`.**\n\n\u003c/div\u003e\n\n---\n\n## 📋 Contents\n\n- [📜 Official Specs \u0026 Documentation](#-official-specs--documentation)\n- [🚀 Getting Started \u0026 Browser Setup](#-getting-started--browser-setup)\n- [📖 Tutorials \u0026 Hands-On Guides](#-tutorials--hands-on-guides)\n- [📦 Libraries, SDKs \u0026 Polyfills](#-libraries-sdks--polyfills)\n- [🎮 Demos \u0026 Example Projects](#-demos--example-projects)\n- [🔧 Developer Tools \u0026 Utilities](#-developer-tools--utilities)\n- [🎬 Videos \u0026 Talks](#-videos--talks)\n- [📝 Articles \u0026 Best Practices](#-articles--best-practices)\n- [👥 Community \u0026 Contributing](#-community--contributing)\n- [🔗 Related: MCP Ecosystem](#-related-mcp-ecosystem)\n\n---\n\n## 📜 Official Specs \u0026 Documentation\n\n**The authoritative sources. Read these first.**\n\n- [WebMCP Spec (W3C Community Group Draft)](https://webmachinelearning.github.io/webmcp) - Full IDL, tool registration, schemas, and security model.\n- [WebMCP GitHub Repo](https://github.com/webmachinelearning/webmcp) - Spec source, issues, and the declarative explainer PR.\n- [Awesome WebMCP (Official)](https://github.com/webmachinelearning/awesome-webmcp) - Curated list maintained by the Web Machine Learning Community Group.\n- [Chrome Early Preview Announcement](https://developer.chrome.com/blog/webmcp-epp) - How WebMCP fits into Chrome 146+.\n- [Chrome WebMCP Usage Guide](https://developer.chrome.com/blog/webmcp-mcp-usage) - Agent integration details and practical usage patterns.\n- [Model Context Protocol (MCP) Core Spec](https://modelcontextprotocol.io/specification/latest) - The server-side counterpart that WebMCP brings to the browser.\n\n---\n\n## 🚀 Getting Started \u0026 Browser Setup\n\n**Enable WebMCP first to start experimenting.**\n\n### Browser Flags\n\n- **Chrome Canary / Beta 146+** - Navigate to `chrome://flags`, search **\"WebMCP for testing\"** (or \"Experimental Web Platform features\"), enable, and restart.\n\n### Essential Extensions\n\n- [Model Context Tool Inspector](https://chromewebstore.google.com/detail/model-context-tool-inspec/gbpdfapgefenggkahomfgkhfehlcenpd) - Official GoogleChromeLabs tool for debugging schemas, testing tool calls, and visualizing registered tools. Part of [GoogleChromeLabs/webmcp-tools](https://github.com/GoogleChromeLabs/webmcp-tools).\n- [MCP-B Chrome Extension](https://chromewebstore.google.com/detail/mcp-b-extension/daohopfhkdelnpemnhlekblhnikhdhfa) - Bridges desktop MCP agents with in-browser WebMCP tools + polyfill support.\n\n---\n\n## 📖 Tutorials \u0026 Hands-On Guides\n\n**Step-by-step walkthroughs covering both the Declarative API (HTML attributes) and the Imperative API (`navigator.modelContext.registerTool`).**\n\n- [MCP-B Tutorials](https://docs.mcp-b.ai/tutorials) - Best practical series: vanilla HTML, React (`useWebMCP` hook), native Chrome preview, desktop agent relay.\n- [Codely: What is WebMCP and How to Use It](https://codely.com/en/blog/what-is-webmcp-and-how-to-use-it) - Excellent declarative + imperative breakdown with real-site examples.\n- [BetterStack Complete Guide](https://betterstack.com/community/guides/ai/webmcp-ai-web/) - Deep dive with a flight-booking example app.\n- [MCP-B How-To Guides](https://docs.mcp-b.ai/how-to) - Adoption strategies, existing app integration, runtimes (native vs polyfill vs global).\n\n---\n\n## 📦 Libraries, SDKs \u0026 Polyfills\n\n**Production-ready helpers so you don't reinvent the wheel.**\n\n### MCP-B Ecosystem\n\nThe official companion library suite for WebMCP.\n\n- [MCP-B Documentation](https://docs.mcp-b.ai/) - Polyfill, types, React hooks, transports, and iframe bridging.\n- [MCP-B npm Packages](https://github.com/WebMCP-org/npm-packages) - Source for all packages: `@mcp-b/webmcp-polyfill`, `@mcp-b/webmcp-types`, `usewebmcp`, `@mcp-b/global`.\n\n### Standalone Libraries\n\n- [webmcp-react](https://github.com/MCPCat/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.\n- [webmcp-kit](https://github.com/victorhuangwq/webmcp-kit) - Zod-typed tool definitions, ideal for modern TypeScript/React apps.\n- [webmcp-next](https://github.com/dankelleher/next-webmcp) - 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 `\u003cWebMCPScript /\u003e` component for instant `navigator.modelContext` registration.\n- [WebMCP Widget Library](https://webmcp.dev) - One-line `\u003cscript\u003e` tag for quick demos and prototyping. [GitHub](https://github.com/jasonjmcghee/WebMCP).\n\n---\n\n## 🎮 Demos \u0026 Example Projects\n\n**Live sites you can test with the inspector + agent. All from GoogleChromeLabs or high-quality community implementations.**\n\n### GoogleChromeLabs Official Demos\n\nFrom the [webmcp-tools](https://github.com/GoogleChromeLabs/webmcp-tools) repo:\n\n- [Le Petit Bistro](https://googlechromelabs.github.io/webmcp-tools/demos/french-bistro/) - Restaurant booking demo using the declarative API.\n- [React Flight Search](https://googlechromelabs.github.io/webmcp-tools/demos/react-flightsearch/) - Flight search with imperative tool registration.\n- [ZaMaker Pizza Builder](https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/) - Custom pizza ordering via imperative API.\n- [WebMCP Maze](https://googlechromelabs.github.io/webmcp-tools/demos/webmcp-maze/) - Full agent-driven maze navigation game.\n- [Mystery Doors](https://googlechromelabs.github.io/webmcp-tools/demos/doors/) - Interactive puzzle with AI agent collaboration.\n\n### Community Demos\n\n- [Air Bird Booking](https://github.com/hugozanini/air-bird-booking-web-mcp) - Agent-native flight + accommodation booking. 10x fewer tokens than DOM scraping.\n- [Shoe Store](https://andreinwald.github.io/webmcp-demo) - React e-commerce storefront with full WebMCP integration.\n- [WebMCP Blackjack](https://webmcp-blackjack.heejae.dev) - Multi-agent blackjack game.\n- [Excalidraw + WebMCP](https://shidh.in/demo/webmcp-excalidraw) - Diagram generation driven by AI agents.\n- [Architecture Flow Builder](https://webmcp-flow.vercel.app) - Visual architecture diagramming with agent assistance.\n\n---\n\n## 🔧 Developer Tools \u0026 Utilities\n\n- [GoogleChromeLabs/webmcp-tools](https://github.com/GoogleChromeLabs/webmcp-tools) - Official toolkit: Model Context Tool Inspector extension, CLI utilities, and demo suite.\n- [WebMCP Inspector](https://webmcpinspector.com/) - Online inspector for testing and debugging WebMCP tool registrations.\n- [WordLift AI Readiness Audit](https://audit.wordlift.io/) - Scan your site for WebMCP / agent readiness.\n- [WebMCP Cheat Sheet](https://www.webfuse.com/webmcp-cheat-sheet) - Quick-reference cheat sheet for declarative and imperative APIs, schemas, and common patterns.\n\n---\n\n## 🎬 Videos \u0026 Talks\n\n- [Don't let AI agents push your buttons - use WebMCP instead!](https://www.youtube.com/watch?v=p1l8nkQAoUw) - Khushal Sagar (Chrome Staff Engineer) on why WebMCP replaces button-clicking agents.\n- [WebMCP - Why it's awesome \u0026 How to use it](https://www.youtube.com/watch?v=xQAYZBDV5jg) - Full setup walkthrough with inspector and React integration.\n- [Syntax.fm WebMCP Deep Dive](https://www.youtube.com/watch?v=sOPhVSeimtI) - In-depth discussion + live demo.\n- [Alex Nahas (MCP-B creator) Interview](https://www.youtube.com/watch?v=6Po39iD6Pfs) - Origin story and vision for the MCP-B ecosystem.\n\n---\n\n## 👥 Community \u0026 Contributing\n\n\u003cdiv align=\"center\"\u003e\n\n\u003ca href=\"https://www.reddit.com/r/WebMCP_Developers/\"\u003e\n  \u003cimg src=\"assets/banner.png\" alt=\"r/WebMCP_Developers\" width=\"100%\" /\u003e\n\u003c/a\u003e\n\n**Join the conversation on [r/WebMCP_Developers](https://www.reddit.com/r/WebMCP_Developers/) - show your projects, ask questions, and stay on top of the latest.**\n\n\u003c/div\u003e\n\n- [Web Machine Learning Community Group](https://www.w3.org/community/webmachinelearning/) - Join to shape the spec.\n- [WebMCP GitHub Issues \u0026 Discussions](https://github.com/webmachinelearning/webmcp/issues) - Report bugs, request features, discuss the spec.\n- [r/WebMCP_Developers](https://www.reddit.com/r/WebMCP_Developers/) - Dedicated subreddit for WebMCP developers.\n\n---\n\n## 🔗 Related: MCP Ecosystem\n\n**WebMCP pairs with full MCP clients (Claude Desktop, Cursor, etc.) via relays for end-to-end agent workflows.**\n\n- [Model Context Protocol](https://modelcontextprotocol.io/) - Official MCP spec, SDKs, and quickstart guides.\n- [MCP-B Desktop Agent Relay](https://docs.mcp-b.ai/tutorials) - Connect desktop MCP agents to in-browser WebMCP tools.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**[⬆ Back to Contents](#-contents)**\n\n\u003c/div\u003e\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/webfuse-com%2Fawesome-webmcp/projects"}