Awesome WebMCP

Awesome WebMCP Chrome 146+ r/WebMCP_Developers

The browser standard that lets any website expose structured JavaScript tools directly to in-browser AI agents via navigator.modelContext.

📋 Contents

📜 Official Specs & Documentation

The authoritative sources. Read these first.

🚀 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

📖 Tutorials & Hands-On Guides

Step-by-step walkthroughs covering both the Declarative API (HTML attributes) and the Imperative API (navigator.modelContext.registerTool).

📦 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

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

Community Demos

🔧 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.
  • webmcpify - Agent skill for Claude Code, Codex, Cursor, and 70+ other coding agents that makes an existing app agent-ready end to end: inventory → approved tool manifest → integrate → verify every tool in a real browser → heal. Vendored zero-dependency runtime, resumable runs.

🎬 Videos & Talks

👥 Community & Contributing

Join the conversation on r/WebMCP_Developers - show your projects, ask questions, and stay on top of the latest.

🔗 Related: MCP Ecosystem

WebMCP pairs with full MCP clients (Claude Desktop, Cursor, etc.) via relays for end-to-end agent workflows.

⬆ Back to Contents