Webmcp

Teaches Claude to wire up WebMCP tools in browser apps, either by registering imperative tools through document.modelContext or annotating HTML forms for declarative flows. It walks through choosing the right API shape, implementing registration with proper schemas and lifecycle cleanup, handling agent-invoked form submissions safely, and validating behavior in the Chrome preview. The procedures are thorough, covering everything from detecting the frontend surface to dealing with stale tool cleanup and permission policy errors. Solid choice when you need to expose app functionality to AI agents without building a separate server-side MCP implementation, though you're locked into the browser context and the current Chrome preview surface.

skills.sh installs: 157
GitHub stars: 31
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add webmaxru/agent-skills --skill webmcp --agent claude-code

Installs into .claude/skills of the current project.

Files

WebMCP

Procedures

Step 1: Identify the browser integration surface

Inspect the workspace for browser entry points, UI handlers, and any existing app state or form handling layer.
Execute node scripts/find-webmcp-targets.mjs . to inventory likely frontend files and existing WebMCP markers when a Node runtime is available.
If a Node runtime is unavailable, inspect the nearest package.json, HTML entry point, and framework bootstrap files manually to identify the browser app boundary.
If the workspace contains multiple frontend apps, prefer the app that contains the active route, component, or user-requested feature surface.
If the inventory still leaves multiple plausible frontend targets, stop and ask the user which app should receive the WebMCP integration.
If the project is not a browser web app, stop and explain that this skill does not apply.

SKILL.md on GitHub