WebMCP Gen

Crea herramientas WebMCP específicas para tu sitio web escribiendo un manifiesto, compilándolo en un script de inicio y comprobando que Chrome registre y ejecute las herramientas.

Esta habilidad no llama a ningún agente anidado. Eres responsable de explorar la página, escribir el archivo manifest.json y realizar iteraciones en función del resultado de la validación.

Comprobación de la configuración

Desde el directorio de la habilidad, instala las dependencias si aún no están instaladas:

cd skills/webmcp-gen
pnpm install

Esto instala el paquete Stagehand fijado, además de la cadena de herramientas de TypeScript (tsx, typescript, @types/node) utilizada para ejecutar el archivo stagehand-example.ts generado.

Flujo de trabajo

1. Elige un slug de artefacto que contenga exactamente una barra:

/

Ejemplo:

example.com/page-context

2. Genera la estructura del artefacto:

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

3. Explora la página de destino con la CLI de navegación:

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

Es preferible utilizar «browse snapshot», el texto de la página y la inspección del DOM en lugar de capturas de pantalla, a menos que el diseño visual sea importante. Utiliza «browse stop» cuando hayas terminado la exploración.

4. Edita «artifacts///manifest.json». El manifiesto es la fuente de referencia.

5. Compilar:

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

6. Genera un ejemplo de Stagehand ejecutable (stagehand-example.ts) y ejecútalo con tsx:

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

7. Validar:

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

8. Si la validación falla, revisa eval.json y eval-report.md, corrige manifest.json y, a continuación, vuelve a compilar y validar.

Contrato del manifiesto

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

Normas de redacción

• implementation.source se inserta dentro de async (input) => { ... }; escribe sentencias de JavaScript, no una envoltura de función completa.
• Devuelve un objeto serializable en JSON.
• El código WebMCP se ejecuta dentro de la página del navegador. Utiliza las API nativas del navegador: document, location, navigator y fetch de mismo origen.
• No utilices Playwright, Puppeteer, Stagehand, ayudantes de XPath ni comandos de agente/navegador dentro de ` implementation.source`.
• document.querySelector y querySelectorAll solo deben recibir selectores CSS válidos del navegador.
• Para encontrar texto visible, utiliza Array.from(document.querySelectorAll(...)).find((el) => (el.textContent || "").includes("...")).
• No incluyas claves de API, tokens de portador, cookies, secretos de localStorage ni credenciales de usuario.
• No utilices eval ni new Function.
• Evita las acciones destructivas a menos que el usuario las haya solicitado explícitamente.
• Realiza implementaciones defensivas: comprueba si faltan elementos y devuelve respuestas estructuradas del tipo { success: false, error: "..." }.
• Los scripts de inicialización generados registran las herramientas de WebMCP únicamente en el marco superior.

Estructura de salida

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

Para convertir el ejemplo en un proyecto independiente, crea una aplicación Stagehand con npx create-browser-app e incorpora en ella el archivo webmcp.init.js generado (cárgalo con page.addInitScript({ path: "webmcp.init.js" })).