WebMCP Gen

Erstellen Sie websitespezifische WebMCP-Tools, indem Sie ein Manifest schreiben, es zu einem Init-Skript kompilieren und überprüfen, ob Chrome die Tools registriert und aufruft.

Diese Funktion ruft keinen verschachtelten Agenten auf. Sie sind dafür verantwortlich, die Seite zu erkunden, die Datei „manifest.json“ zu erstellen und basierend auf den Validierungsergebnissen iterativ vorzugehen.

Einrichtungsprüfung

Installieren Sie im Skill-Verzeichnis die Abhängigkeiten, falls diese noch nicht installiert sind:

cd skills/webmcp-gen
pnpm install

Dadurch werden das angeheftete Stagehand-Paket sowie die TypeScript-Toolchain (tsx, typescript, @types/node) installiert, die zur Ausführung der generierten Datei „stagehand-example.ts“ benötigt wird.

Arbeitsablauf

1. Wählen Sie einen Artefakt-Slug mit genau einem Schrägstrich aus:

/

Beispiel:

example.com/page-context

2. Erstellen Sie das Scaffold für das Artefakt:

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

3. Die Zielseite mit der „browse “-CLI erkunden:

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

Verwenden Sie „browse snapshot“, „page text“ und die DOM-Inspektion statt Screenshots, es sei denn, das visuelle Layout ist entscheidend. Verwenden Sie „browse stop“, wenn die Erkundung abgeschlossen ist.

4. Bearbeiten Sie die Dateien „artifacts/ “ und „/manifest.json“. Das Manifest ist die maßgebliche Quelle.

5. Kompilieren:

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

6. Erstellen Sie ein ausführbares Stagehand-Beispiel (stagehand-example.ts) und führen Sie es mit tsx aus:

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

7. Validieren:

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

8. Falls die Validierung fehlschlägt, überprüfen Sie „eval.json“ und „eval-report.md“, passen Sie „manifest.json“ an und führen Sie anschließend erneut eine Kompilierung und Validierung durch.

Manifest-Vertrag

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

Regeln für die Erstellung

• `implementation.source` wird innerhalb von `async (input) => { ... };` eingefügt; schreiben Sie JavaScript-Anweisungen, keinen vollständigen Funktions-Wrapper.
• Geben Sie ein JSON-serialisierbares Objekt zurück.
• WebMCP-Code wird innerhalb der Browserseite ausgeführt. Verwenden Sie browser-native APIs: `document`, `location`, `navigator` und `same-origin fetch`.
• Verwenden Sie innerhalb von ` implementation.source` keine Playwright-, Puppeteer-, Stagehand- oder XPath-Helfer sowie keine Agent-/Browser-Befehle.
• „document.querySelector“ und „querySelectorAll“ dürfen nur gültige Browser-CSS-Selektoren als Argumente erhalten.
• Um sichtbaren Text zu finden, verwende `Array.from(document.querySelectorAll(...)).find((el) => (el.textContent || "").includes("...")).
• Fügen Sie keine API-Schlüssel, Bearer-Token, Cookies, „localStorage“-Geheimnisse oder Benutzeranmeldedaten ein.
• Verwenden Sie weder ` eval ` noch ` new Function`.
• Vermeiden Sie destruktive Aktionen, es sei denn, der Benutzer hat ausdrücklich darum gebeten.
• Gestalten Sie die Implementierungen defensiv: Prüfen Sie auf fehlende Elemente und geben Sie strukturierte Antworten vom Typ { success: false, error: "..." } zurück.
• Generierte Init-Skripte registrieren WebMCP-Tools nur im obersten Frame.

Ausgabe-Layout

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

Um das Beispiel in ein eigenständiges Projekt umzuwandeln, erstellen Sie mit npx create-browser-app das Grundgerüst einer Stagehand-App und fügen Sie die generierte Datei webmcp.init.js dort ein (laden Sie sie mit page.addInitScript({ path: "webmcp.init.js" })).