WebMCP Gen

Créez des outils WebMCP spécifiques à un site web en rédigeant un manifeste, en le compilant en un script d'initialisation, puis en vérifiant que Chrome enregistre et lance ces outils.

Cette compétence n'appelle pas d'agent imbriqué. Il vous appartient d'explorer la page, de rédiger le fichier manifest.json et de procéder à des itérations en fonction du résultat de la validation.

Vérification de la configuration

Depuis le répertoire de la compétence, installez les dépendances si elles ne le sont pas déjà :

cd skills/webmcp-gen
pnpm install

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

Workflow

1. Choisissez un slug d’artefact comportant exactement une barre oblique :

/

Exemple :

example.com/page-context

2. Générer le squelette de l'artefact :

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

3. Explorer la page cible à l'aide de 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

Privilégiez les commandes « browse snapshot », « page text » et l’inspection du DOM plutôt que les captures d’écran, sauf si la mise en page visuelle est importante. Utilisez la commande « browse stop » lorsque l’exploration est terminée.

4. Modifiez les fichiers artifacts///manifest.json. Le manifeste est la source de référence.

5. Compiler :

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

6. 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

7. Valider :

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

8. Si la validation échoue, examinez les fichiers eval.json et eval-report.md, corrigez le fichier manifest.json, puis recompilez et validez à nouveau.

Contrat du manifeste

{
  "domain": "example.com",
  "task": "page-context",
  "url": "https://example.com",
  "generatedAt": "2026-06-04T00:00:00.000Z",
  "tools": [
    {
      "name": "example_com_page_context",
      "description": "Renvoie le contexte de la page.",
      "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, et non une fonction wrapper complète.
• Renvoyez un objet sérialisable au format JSON.
• Le code WebMCP s’exécute au sein de la page du navigateur. Utilisez les API natives du navigateur : document, location, navigator et fetch de 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 valides pour le navigateur.
• Pour rechercher du texte visible, utilisez Array.from(document.querySelectorAll(...)).find((el) => (el.textContent || "").includes("...")).
• N'incluez pas de clés API, de jetons « bearer », de cookies, de secrets localStorage ni d'identifiants utilisateur.
• N’utilisez pas eval ni new Function.
• Évitez les actions destructrices, sauf si l’utilisateur les a explicitement demandées.
• Concevez des implémentations défensives : vérifiez s’il manque des éléments et renvoyez des réponses structurées de type { success: false, error: "..." }.
• Les scripts d'initialisation générés n'enregistrent les outils WebMCP que dans le cadre supérieur.

Structure de sortie

artifacts///
  manifest.json
  webmcp.init.js
  stagehand-example.ts
  eval.json
  eval-report.md

Pour transformer cet exemple en projet autonome, créez une application Stagehand à l’aide de npx create-browser-app et placez-y le fichier webmcp.init.js généré (chargez-le avec page.addInitScript({ path: "webmcp.init.js" })).