WebMCP Gen

Créez des outils WebMCP spécifiques à des sites web en écrivant un manifest, en le compilant en script d'initialisation, et en validant que Chrome enregistre et invoque les outils.

Cette skill n'appelle pas d'agent imbriqué. Vous êtes responsable de l'exploration de la page, de la rédaction de manifest.json, et de l'itération en fonction de la sortie de validation.

Vérification de la configuration

À partir du répertoire de la skill, installez les dépendances s'ils ne sont pas déjà installés :

cd skills/webmcp-gen
pnpm install

Cela installe le package Stagehand épinglé plus la chaîne d'outils TypeScript (tsx, typescript, @types/node) utilisée pour exécuter le stagehand-example.ts généré.

Flux de travail

Choisissez un slug d'artefact avec exactement une barre oblique :

<domain>/<task>

Exemple :

example.com/page-context

Générez l'artefact :

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

Explorez la page cible avec la CLI browse :

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

Préférez browse snapshot, le texte de la page et l'inspection du DOM aux captures d'écran, sauf si la mise en page visuelle est importante. Utilisez browse stop quand l'exploration est terminée.

Modifiez artifacts/<domain>/<task>/manifest.json. Le manifest est la source de vérité.
Compilez :

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

Générez un exemple Stagehand exécutable (stagehand-example.ts) et exécutez-le avec tsx :

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

Validez :

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

Si la validation échoue, inspectez eval.json et eval-report.md, corrigez manifest.json, puis compilez et validez à nouveau.

Contrat du manifest

{
  "domain": "example.com",
  "task": "page-context",
  "url": "https://example.com",
  "generatedAt": "2026-06-04T00:00:00.000Z",
  "tools": [
    {
      "name": "example_com_page_context",
      "description": "Returns page context.",
      "inputSchema": {
        "type": "object",
        "properties": {},
        "required": []
      },
      "implementation": {
        "kind": "dom",
        "source": "return { success: true, title: document.title, url: location.href };"
      },
      "fixtureInput": {}
    }
  ]
}

Règles de rédaction

implementation.source est inséré à l'intérieur de async (input) => { ... } ; écrivez des instructions JavaScript, pas un wrapper de fonction complet.
Retournez un objet sérialisable en JSON.
Le code WebMCP s'exécute dans la page du navigateur. Utilisez les API natives du navigateur : document, location, navigator, et fetch du même origine.
N'utilisez pas Playwright, Puppeteer, Stagehand, les aides XPath, ou les commandes d'agent/navigateur à l'intérieur de implementation.source.
document.querySelector et querySelectorAll ne doivent recevoir que des sélecteurs CSS de navigateur valides.
Pour trouver du texte visible, utilisez Array.from(document.querySelectorAll(...)).find((el) => (el.textContent || "").includes("...")).
N'incluez pas de clés API, jetons bearer, cookies, secrets localStorage ou identifiants d'utilisateur.
N'utilisez pas eval ou new Function.
Évitez les actions destructrices sauf si l'utilisateur les a explicitement demandées.
Rendez les implémentations défensives : vérifiez les éléments manquants et retournez des réponses structurées { success: false, error: "..." }.
Les scripts d'initialisation générés enregistrent les outils WebMCP uniquement dans le cadre supérieur.

Disposition de la sortie

artifacts/<domain>/<task>/
  manifest.json
  webmcp.init.js
  stagehand-example.ts
  eval.json
  eval-report.md

Pour transformer l'exemple en projet autonome, générez une application Stagehand avec npx create-browser-app et déposez le webmcp.init.js généré dedans (chargez-le avec page.addInitScript({ path: "webmcp.init.js" })).