Community Tooling for WebMCP: MCP Server Bridge, CDP Library, React Bindings & DevTools Extension #1

Hi WebMCP authors 👋

I've been building a set of open-source tools around the WebMCP proposal and wanted to share them here for visibility and feedback. These projects aim to make it easier for developers to adopt, test, and build on top of WebMCP today (Chrome 146+ with the WebMCPTesting flag).

Projects

1. @tech-sumit/mcp-webmcp — MCP Server Bridge

MCP server that bridges browser WebMCP tools to desktop AI apps like Cursor and Claude Desktop. Connects to Chrome via Playwright and exposes 26 browser automation tools + 2 WebMCP meta-tools (webmcp_list_tools, webmcp_call_tool) over the Model Context Protocol.

• Two connection modes: --launch (auto-launches Chrome Beta) or agent-controlled via browser_launch tool
• Two transports: stdio (for mcp.json / npx) and Streamable HTTP (for hosted/manual usage)
• Zero-config setup: npx -y @tech-sumit/mcp-webmcp --launch

Source: github.com/tech-sumit/mcp-webmcp

2. @tech-sumit/webmcp-cdp — CDP Library for WebMCP

Standalone Node.js library for discovering and executing WebMCP tools via Chrome DevTools Protocol — no Playwright dependency. Uses chrome-remote-interface directly.

• Multi-tab support: discovers tools across all open tabs
• Change detection via Runtime.addBinding + bindingCalled events
• Lightweight foundation that mcp-webmcp builds on top of

Source: github.com/tech-sumit/webmcp-cdp

3. react-webmcp — React Hooks & Components

Idiomatic React library for both the Imperative and Declarative WebMCP APIs:

• useWebMCPTool — register a single tool with automatic lifecycle (mount/unmount)
• useWebMCPContext — register multiple tools via provideContext()
• useToolEvent — listen for toolactivated / toolcancel events
• <WebMCPForm>, <WebMCPInput>, <WebMCPSelect>, <WebMCPTextarea> — declarative form components with toolname / tooldescription / toolparam* attributes
• <WebMCPProvider> — context provider for availability detection
• Full TypeScript support with navigator.modelContext type augmentation

Includes demo apps replicating the official react-flightsearch and french-bistro examples.

Source: github.com/tech-sumit/react-webmcp

4. webmcp-debugger-chrome-extension — Chrome DevTools Extension

Chrome DevTools panel for introspecting navigator.modelContext (WebMCP) and window.ai (Prompt API) on any page:

• Tools Tab: list registered WebMCP tools, view schemas, execute manually with a JSON editor
• Timeline Tab: chronological log of all AI events (tool registrations, prompts, tool calls) with filtering
• AI Sessions Tab: view LanguageModel sessions, prompt/response threads, streaming visualization

Uses MAIN-world content script injection to monkey-patch and observe all WebMCP + Prompt API activity.

Source: github.com/AIdevelopment-blog/webmcp-debugger-chrome-extension

5. @tech-sumit/ai-inspector-types — Shared TypeScript Types

Pure TypeScript types package (zero runtime dependencies) providing shared interfaces and protocol schemas used across the ecosystem: ToolSource, DiscoveredTool, InspectorEvent, WebSocket/extension message types, and JSON Schema types aligned with the WebMCP spec.

Source: github.com/tech-sumit/ai-inspector-types

How they fit together

Website (React)                    AI Agent (Cursor / Claude)
    │                                     │
    ├─ react-webmcp                       │
    │   useWebMCPTool() ──►               │
    │   <WebMCPForm>   ──►                │
    │   navigator.modelContext            │
    │                                     │
    ▼                                     ▼
Chrome 146+ (WebMCPTesting)         mcp-webmcp (MCP Server)
    │                                     │
    ├─ webmcp-debugger (DevTools)    webmcp-cdp (CDP lib)
    │   Inspect / debug tools             │
    │                                     │
    └──────── CDP connection ─────────────┘

Feedback I'm looking for

1. API alignment: Are there any upcoming changes to the WebMCP API shape (e.g. navigator.modelContext vs navigator.modelContextTesting, registerTool signatures, declarative form attributes) that would affect these libraries?
2. Spec coverage: Are there parts of the proposal (resources, prompts, progressive web app integration, background model context providers) that would be useful to support early?
3. Developer experience: Any thoughts on the React bindings API design (useWebMCPTool, <WebMCPForm>, etc.)?
4. Debugging story: Does the DevTools extension approach align with how you envision developer tooling for WebMCP?
5. MCP bridge approach: The mcp-webmcp server bridges WebMCP tools to external MCP clients — this is briefly mentioned as a useful scenario in the proposal. Any guidance on how this should work long-term?

Happy to contribute upstream or adjust these tools based on your feedback. Excited about the direction of this proposal!

— Sumit (@tech-sumit)