WebMCP Gen

Author website-specific WebMCP tools by writing a manifest, compiling it to an init script, and validating that Chrome registers and invokes the tools.

This skill does not call a nested agent. You are responsible for exploring the page, writing manifest.json, and iterating based on validation output.

Setup check

From the skill directory, install dependencies if they are not already installed:

cd skills/webmcp-gen
pnpm install

This installs the pinned Stagehand package plus the TypeScript toolchain (tsx, typescript, @types/node) used to run the generated stagehand-example.ts.

Workflow

1. Pick an artifact slug with exactly one slash:

<domain>/<task>

Example:

example.com/page-context

2. Scaffold the artifact:

node scripts/scaffold.mjs example.com/page-context --url https://example.com

3. Explore the target page with the browse CLI:

browse open https://example.com --local
browse snapshot
browse get title
browse get url
browse get text body
browse get html body

Prefer browse snapshot, page text, and DOM inspection over screenshots unless visual layout matters. Use browse stop when exploration is complete.

4. Edit artifacts/<domain>/<task>/manifest.json. The manifest is the source of truth.

5. Compile:

node scripts/compile.mjs artifacts/example.com/page-context

6. Generate a runnable Stagehand example (stagehand-example.ts) and run it with tsx:

node scripts/generate-stagehand-example.mjs artifacts/example.com/page-context
npx tsx artifacts/example.com/page-context/stagehand-example.ts

7. Validate:

node scripts/validate.mjs artifacts/example.com/page-context

8. If validation fails, inspect eval.json and eval-report.md, patch manifest.json, then compile and validate again.

Manifest contract