Add WebMCP

Turn capabilities already implemented by a web app into maintained, first-party WebMCP tools. Modify the target codebase and its tests; do not introduce a hosted proxy or third-party runtime.

Compatibility: the bundled Stagehand validator requires Node.js 22.18 or newer. Validation needs Chrome/Chromium locally or BROWSERBASE_API_KEY for a publicly reachable preview.

Be verbose as you work: report what each step found as you go, not only in the final report.

Use webmcp-gen instead when the requested output is a standalone init script derived from a live URL. This skill starts from source code and integrates tools into the application.

1. Establish the application boundary

Read the target repository's instructions, package manifests, framework configuration, and current git status. Preserve unrelated changes.

Set ADD_WEBMCP_SKILL_DIR to the directory containing this file and run the bounded scanner:

node "$ADD_WEBMCP_SKILL_DIR/scripts/scan-codebase.mjs" "$TARGET_REPO"

Treat scanner results as leads, not conclusions. In a monorepo, identify the actual browser app and the server packages it calls before editing.

2. Build a capability inventory

Trace each candidate from its user-visible entry point through the client handler, validation schema, server boundary, authorization checks, side effect, and returned state. Look at:

• routes and screens;
• forms and their submit handlers;
• server actions, API handlers, RPC procedures, and service clients;
• Zod, Valibot, Yup, Joi, JSON Schema, or equivalent validators;
• authentication, authorization, CSRF, idempotency, rate limits, and audit hooks.

Prefer complete user tasks such as search_catalog or save_draft, not a mechanical tool per endpoint. Exclude internal/admin-only operations, authentication bypasses, raw database access, secret-bearing operations, and capabilities the UI does not grant the current user.