WebMCP

Procedures

Step 1: Identify the browser integration surface

1. Inspect the workspace for browser entry points, UI handlers, and any existing app state or form handling layer.
2. Execute node scripts/find-webmcp-targets.mjs . to inventory likely frontend files and existing WebMCP markers when a Node runtime is available.
3. 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.
4. If the workspace contains multiple frontend apps, prefer the app that contains the active route, component, or user-requested feature surface.
5. If the inventory still leaves multiple plausible frontend targets, stop and ask the user which app should receive the WebMCP integration.
6. If the project is not a browser web app, stop and explain that this skill does not apply.

Step 2: Choose the WebMCP shape

1. Read references/webmcp-reference.md before writing code.
2. Read references/declarative-api.md when the feature can be expressed as an HTML form flow or needs agent-invoked submit handling.
3. Read references/compatibility.md when native availability, Chrome preview setup, or draft-versus-preview behavior matters.
4. Read references/troubleshooting.md when registration, schema serialization, or agent-driven form execution fails.
5. Verify that the integration runs in a secure window browsing context.
6. If the feature must run on the server, in a worker, or headlessly without a visible browsing context, stop and explain the platform limitation.