Skip to content

webmcpnet/awesome-webmcp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Awesome WebMCP

A curated list of resources for WebMCP — the W3C web standard that lets websites expose structured tools to AI agents via navigator.modelContext.

Awesome Chrome 146+ W3C Draft

Contents


Official Tooling

Polyfills & Core Libraries

  • @mcp-b/global - Polyfill implementing navigator.modelContext for browsers without native support. Drop-in replacement with the same API surface as the spec.
  • webmcp-core - Zero-dependency navigator.modelContext polyfill (2.94 KB IIFE). Drop-in @mcp-b/global replacement with payment metadata support, SSR compatibility, and feature detection for native API fallback. 70 tests, TypeScript strict.
  • MiguelsPizza/WebMCP (mcp-b.ai) - MCP-B reference implementation by @MiguelsPizza. Monorepo with Chrome extension, tab/extension transports, native-server bridge, and Zod validation. Now continued under WebMCP-org.
  • ripulio/web-mcp - Monorepo implementing WebMCP with MCP server CLI, Chrome extension, DevTools panel, and navigator.modelContext polyfill.
  • opentiny/next-sdk - Frontend AI SDK with WebMcpServer/WebMcpClient classes, transport adapters (MessageChannel, SSE, HTTP), Zod validation, and Vue 3 chat UI component.
  • jasonjmcghee/WebMCP - Early WebMCP prototype by @jasonjmcghee with client-side widget and localhost WebSocket bridge. NPM package and Docker support. Pre-dates the W3C spec; not spec-compliant.

Framework Libraries

  • @mcp-b/react-webmcp - React hooks (useWebMCP, useMcpTool) for registering and invoking WebMCP tools.

Browser Extensions

  • igrigorik/AgentBoard - AI switchboard extension by @igrigorik with multi-provider LLM sidebar (OpenAI, Anthropic, Google, Ollama), scriptable WebMCP tools running in page context, remote MCP server support, and command templates.
  • amedina/agentic-web-learning-tool - Chrome extension framework for agentic AI workflows, visual workflow composition, MCP server integration, and Chrome built-in AI playground.
  • WebMCP-org/char-plugin - Claude Code plugin that installs Char embeddable AI agent, configures WebMCP servers, registers tools, and provides /char:setup wizard.

Bridges & Adapters

  • nathan-gage/webmcp-bridge - CLI + Chrome extension that bridges navigator.modelContext tools to any MCP client (Claude, Cursor, Windsurf) via local WebSocket. Includes plugin marketplace for injecting bridge scripts on sites without native WebMCP.
  • three-water666/WebMCP - Universal bridge connecting web AI (Gemini, ChatGPT, DeepSeek) to local VS Code via MCP. VS Code extension + browser extension + Electron app with auto port discovery.
  • Juggernaath/WebMCP - Browser automation platform exposing 14+ MCP tools (navigate, click, type, screenshot, fill forms, manage tabs). Includes task recording, scraping, and playback.
  • victorzxj/webmcp-adapter - Universal adapter exposing frontend page actions as WebMCP tools with auto-discovery, schema generation, and Service Worker governance.
  • 6missedcalls/openclaw-webmcp-skill - OpenClaw skill enabling AI agents to discover and invoke navigator.modelContext tools without DOM scraping.

CMS & Platform Integrations

  • wmcp.dev - WordPress plugin adding WebMCP declarative attributes (toolname, tooldescription) to Contact Form 7, Gravity Forms, WPForms, and WooCommerce forms.
  • code-atlantic/webmcp-abilities - WordPress plugin bridging the Abilities API to navigator.modelContext.registerTool(), exposing any registered ability as a structured tool for AI agents in Chrome 146+.
  • chgold/wp-ai-connect - WordPress plugin exposing WebMCP REST API. AI agents authenticate via JWT and invoke tools like wordpress.searchPosts and wordpress.getPost.
  • tuvit/webmcp - Wix platform extension injecting WebMCP attributes into Wix Stores pages for AI agent access to e-commerce data.

Payment

  • webmcp-payments - x402 payment acceptance middleware for WebMCP tools. Enables websites to charge AI agents per tool invocation using the HTTP 402 payment protocol with inline pricing metadata.

Platforms

  • webmcp-platform - Unified WebMCP platform integrating polyfill, payments, and SDK into a single import. One-line setup for making websites agent-friendly with built-in monetization via x402.

Demo Applications

Starter Templates & Courses

Analysis & Readiness Tools

  • AI Agent Readiness Scanner (source) - Free tool to score any website's AI agent readiness across 6 categories: WebMCP support, semantic HTML, structured data, llms.txt, crawlability, and content quality. Returns a grade (A–F), a 5-level readiness label (Invisible → AI-Native), per-check fix instructions with code examples, and supports side-by-side competitor comparison.

Articles & Tutorials

Overviews

Technical Deep-Dives

Interviews

Quick Starts

Agentic Web Context

Videos & Talks

Security Resources

Official Threat Model

The Security and Privacy Considerations covers (PR #55, PR #59):

  1. Prompt Injection — Tool poisoning (malicious descriptions), output injection (tainted return values), tool-as-target (exploiting high-value tools).
  2. Misrepresentation — Tools whose behavior doesn't match their description.
  3. Privacy Leakage — Over-parameterized tools extracting unnecessary personal data.

External Security Guides

Developer Checklist

  • Validate all input in execute() — don't rely on schema alone.
  • Use agent.requestUserInteraction() for destructive/financial actions.
  • Check event.agentInvoked to differentiate agent vs human.
  • Set readOnlyHint: true on read-only tools.
  • Never return raw PII in tool responses (privacy leakage).
  • Implement rate limiting in tool handlers.
  • Keep descriptions positive ("Search flights") not negative ("Don't use for hotels").
  • Log all tool invocations for audit.
  • Update UI after execution — agents verify state via DOM.
  • Use toolautosubmit only for idempotent operations.

Community


Specification

Browser Support

Browser Status Version How to Enable
Chrome Early Preview 146.0.7672.0+ (Canary) chrome://flags → "WebMCP for testing"
Edge Expected TBD Same Chromium flag
Firefox Not yet
Safari Not yet
if ("modelContext" in navigator) {
  // WebMCP is supported
}

Spec Documents

Document Link Description
Normative Spec webmachinelearning.github.io/webmcp Full spec: navigator.modelContext, registerTool(), provideContext(), events, CSS pseudo-classes
Source Repo webmachinelearning/webmcp Bikeshed spec, explainers, security/privacy docs, issue tracker
Chrome Early Preview developer.chrome.com Setup instructions, API overview, demo walkthrough
Declarative API Explainer PR #76 HTML form-based tools: toolname, tooldescription, toolautosubmit
Service Workers service-workers.md Background tool execution without a visible tab
Security & Privacy security-privacy.md Prompt injection, misrepresentation, over-parameterization
Deep Discussion Analysis docs/spec-discussions/ All 55 issues + 20 PRs analyzed by theme

Key Spec Issues

Topic Issue Author Status
Accessibility via agentic interfaces #65 @anssiko Open
In-page agent API (executeTool vs createClient) #51 @khushalsagar Open
Elicitation / requestUserInteraction #21 @bwalderman Resolved
Tool annotations & side-effect hints #53 @victorhuangwq Open
Agent identity #54 @EmLauber Deferred
WebExtensions API #74 @reillyeon Open
Iframe tool registration #57 @khushalsagar Open
User gesture activation #62 @beaufortfrancois Open
File attachments #81 @markafoltz Open
Streaming arguments #82 @MiguelsPizza Open
Scope clarification #43 Open

Key Resolutions

Formal decisions from W3C CG meetings (minutes archive):

Date Resolution Issue
Sep 2025 Human-in-the-loop first. Automation deferred until security model matures. #27
Sep 2025 SDK abstraction. Browser translates between page and MCP client; decoupled from MCP version. #32
Oct 2025 navigator.modelContext is the root object name. #24
Oct 2025 Tools as discovery. Declarative API enables crawling/indexing without JS. #8
Oct 2025 Both provideContext() and registerTool() supported. #15
Oct 2025 No JS injection by external agents. Extension API / CDP preferred. #16
Oct 2025 requestUserInteraction() for elicitation. Block abusive sites permanently. #21
Oct 2025 No user-takeover notification needed. Elicitation handles it. #20
Nov 2025 TAG endorsement. Continue as high-level API. Coordinate with AI Agent Protocol CG. #35
Nov 2025 Cross-origin scoped out of v1. Same-origin tool registration only. #52
Nov 2025 Agent identity deferred. No clear v1 need. #54
Jan 2026 Declarative complements imperative. HTML form attributes + JS API. PR #26
Jan 2026 AbortSignal for cancellation. Tool callbacks receive abort signal. #48
Jan 2026 Concurrent execution punted. Depends on in-page agent API design. #47
Feb 2026 outputSchema added. Structured output definitions for tools. #9

API Quick Reference

// Register a tool (#15)
navigator.modelContext.registerTool({
  name: "searchFlights",
  description: "Search for available flights between two airports",
  inputSchema: {
    type: "object",
    properties: {
      origin:      { type: "string", description: "IATA code (e.g. LHR)" },
      destination: { type: "string", description: "IATA code (e.g. JFK)" },
      date:        { type: "string", format: "date" }
    },
    required: ["origin", "destination", "date"]
  },
  annotations: { readOnlyHint: true },  // #53
  execute: async ({ origin, destination, date }) => {
    const results = await searchFlightsAPI(origin, destination, date);
    return { content: [{ type: "text", text: JSON.stringify(results) }] };
  }
});

// Replace all tools (#15)
navigator.modelContext.provideContext({ tools: [/* ... */] });

// Remove tools
navigator.modelContext.unregisterTool("searchFlights");
navigator.modelContext.clearContext();
<form toolname="book_table"
      tooldescription="Reserve a table at this restaurant"
      toolautosubmit action="/api/reserve">
  <input type="date" name="date" required toolparamdescription="Reservation date">
  <input type="time" name="time" required toolparamdescription="Reservation time">
  <input type="number" name="guests" min="1" max="20" required>
  <button type="submit">Reserve</button>
</form>
form.addEventListener("submit", (e) => {
  if (e.agentInvoked) {
    e.preventDefault();
    e.respondWith(handleAgentSubmission(e));
  }
});

window.addEventListener('toolactivated', ({ toolName }) => { /* ... */ });
window.addEventListener('toolcancel', ({ toolName }) => { /* ... */ });
form:tool-form-active { outline: 2px solid #4CAF50; }
button:tool-submit-active { background: #FFD700; }
execute: async ({ productId }, agent) => {
  const ok = await agent.requestUserInteraction(async () => {
    return confirm(`Purchase ${productId}?`);
  });
  if (!ok) throw new Error("Canceled");
  return { content: [{ type: "text", text: "Purchased" }] };
}

Key People

Person Affiliation Role Links
Anssi Kostiainen W3C / Intel CG Chair, coordinates with TAG and AAIF (#35), spec draft (PR #64), WebIDL (PR #75) GitHub
Brandon Walderman Microsoft Spec co-author, initial explainer (PR #1), service workers (PR #4), elicitation (#21), naming (#24), API design (#15) GitHub · LinkedIn
David Bokan Google Spec co-author, discovery (#8), output schema (#9), external agents (#16) GitHub
Khushal Sagar Google Spec co-author, Chrome lead, SDK (#32), createClient (#51), iframes (#57), annotations (#53), scope (#52), concurrency (#47, #49) GitHub · LinkedIn
Dominic Farolino Google Spec editor, declarative explainer (PR #76), iframe policy (#57) GitHub · LinkedIn · X
Victor Huang Google Security & Privacy (PR #55, PR #59), threat model (#45), annotations (#53), identity (#54) GitHub
Mark Foltz Google Spec editor, file attachments (#81), streaming (#82), build system (PR #77#80) GitHub
Reilly Grant Google WebExtensions API (#74), navigator placement (#24), component coordination (#15) GitHub
Anders Ruud Google Declarative deep dive — forms, radio buttons, labels (#66#69, #71) GitHub
Francois Beaufort Google Chrome Early Preview, user gesture activation (#62), modelContextTesting (#74), JS examples (PR #61) GitHub
Andre Bandarra Google Chrome Early Preview, travel demo GitHub · X · Blog
Alex Nahas Amazon (prev.) Original WebMCP concept, MCP-B creator, declarative proposal (PR #26), async registration (#30) GitHub · LinkedIn
Jason McGhee Independent Early WebMCP implementation, external MCP client API (#23) GitHub · X
Ilya Grigorik Shopify Commerce perspective, agent-to-agent (#31) GitHub
Leonie Watson TPGi Accessibility expert, screen readers (#65) GitHub

Contributing

See contributing.md for guidelines. Only submit resources directly about the WebMCP browser standard (navigator.modelContext API or toolname/tooldescription HTML attributes). Do not submit general server-side MCP resources. (Follow awesome-list standards for entry quality.)

Maintainers

License

CC0

To the extent possible under law, the maintainers have waived all copyright and related or neighboring rights to this work.

About

A curated list of WebMCP resources – the new web standard that lets websites expose structured tools for AI agents. Replace screen-scraping with reliable, schema-driven interaction. Includes specs, SDKs, demos, tutorials, and platform integrations for Chrome 146+. Learn how to make your site AI-agent ready.

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors