webmcpify.at ProcedureAblauf FAQ
GitHub ↗

Make your web app agent-ready. Mach deine Web-App agent-ready.

Browser agents are learning to call tools instead of clicking buttons. webmcpify wires your existing app into WebMCP the careful way: inventory, your approval, integration, then verification in a real browser. Browser-Agents lernen gerade, Tools aufzurufen statt Buttons zu klicken. webmcpify verdrahtet deine bestehende App sauber mit WebMCP: Inventur, deine Freigabe, Integration, dann Verifikation im echten Browser.

Install the skillSkill installieren Read the sourceQuellcode lesen

Open source · MIT · zero dependencies · Chrome origin trial · works with Claude Code Open Source · MIT · null Dependencies · Chrome Origin Trial · läuft mit Claude Code

Diagram: a browser app exposing typed tools to an AI agent your-app.example search_products() add_to_cart() track_order() agent tool calls VERIFIED ✓
Fig. 1 · Your app as agents see it: typed tools instead of DOM guesswork. · Deine App aus Agent-Sicht: typisierte Tools statt DOM-Raterei.

The procedureDer Ablauf

7 phases · 1 human gate · resumable at any point7 Phasen · 1 Human Gate · jederzeit fortsetzbar
  1. 01

    DETECT

    Identifies your stack, build commands, auth model, and how the app starts locally. Erkennt Stack, Build-Kommandos, Auth-Modell und wie die App lokal startet.

  2. 02

    INVENTORY

    Maps every user action area by area and drafts one candidate tool per action, with schema, examples, and expected outcome. Zero code changes. Erfasst jede User-Aktion Bereich für Bereich und entwirft pro Aktion ein Kandidaten-Tool mit Schema, Beispielen und erwartetem Ergebnis. Null Code-Änderungen.

  3. 03

    GATE YOUDU

    You review the manifest and approve or reject every tool. Server-mutating tools need individual sign-off. Nothing ships without this step. Du prüfst das Manifest und gibst jedes Tool frei oder lehnst es ab. Server-mutierende Tools brauchen einzelne Freigabe. Ohne diesen Schritt passiert nichts.

  4. 04

    INTEGRATE

    Registers approved tools via document.modelContext, fully feature-detected, using only code paths your UI already uses. Registriert freigegebene Tools via document.modelContext, vollständig feature-detected, nur über Code-Pfade, die deine UI ohnehin nutzt.

  5. 05

    VERIFY

    Runs every tool in real Chrome: schema check, valid and invalid calls, and the resulting UI state. Pass or fail, per tool. Führt jedes Tool im echten Chrome aus: Schema-Check, gültige und ungültige Calls, resultierender UI-State. Pass oder Fail, pro Tool.

  6. 06

    HEAL

    Fixes failed tools (implementation only, never the approved contract) and re-verifies everything. Three strikes and a tool is escalated to you, never silently dropped. Repariert fehlgeschlagene Tools (nur Implementierung, nie den freigegebenen Vertrag) und re-verifiziert alles. Nach drei Versuchen wird eskaliert, nie still verworfen.

  7. 07

    AUDIT

    Maps every diff hunk to an approved tool or recorded setup and writes the final report. Unmapped changes get flagged, not hidden. Ordnet jeden Diff-Hunk einem freigegebenen Tool oder dokumentiertem Setup zu und schreibt den Abschlussreport. Nicht zuordenbare Änderungen werden geflaggt, nicht versteckt.

What ships in the boxWas in der Box steckt

parts listStückliste
PARTTEIL QTYMENGE PURPOSEZWECK
webmcpify.ts / .js 1 Vendored runtime: spec-shaped tool registration with AbortSignal lifecycle and legacy fallback. Zero dependencies, MIT header included. Vendorte Runtime: spec-konforme Tool-Registrierung mit AbortSignal-Lifecycle und Legacy-Fallback. Null Dependencies, MIT-Header inklusive.
.webmcpify/manifest.json 1 The single source of truth: every tool, its schema, mutation class, approval record, and verification status. Survives context wipes; any run resumes from it. Die Single Source of Truth: jedes Tool, sein Schema, seine Mutationsklasse, Freigabe und Verifikationsstatus. Übersteht Context-Wipes; jeder Run setzt daran an.
webmcp.spec.ts 1 The verification harness: drives headed Chrome against every integrated tool with valid and invalid inputs. Der Verifikations-Harness: fährt headed Chrome gegen jedes integrierte Tool, mit gültigen und ungültigen Inputs.
.webmcpify/report.md 1 The human-readable report: coverage per area, skipped tools with reasons, security notes, and how to test manually. Der menschenlesbare Report: Abdeckung pro Bereich, übersprungene Tools mit Begründung, Security-Notizen und manuelle Testanleitung.
.webmcpify/manifest.json — excerptAuszug 
{
  "id": "add_to_cart",
  "mutating": "server",
  "inputSchema": { /* JSON Schema */ },
  "source": ["src/cart/AddButton.tsx:31"],
  "approval": { "note": "ok — test data only" },
  "status": "verified"
}
COMPATIBILITY NOTICEKOMPATIBILITÄTSHINWEIS

WebMCP (document.modelContext) is a proposed W3C standard, currently available as a Chrome origin trial. webmcpify integrates it fully feature-detected: browsers without WebMCP see your app behave exactly as before, and the whole integration stays a small, auditable, revertable set of diffs. You lose nothing by being early. You gain being ready when agents arrive. WebMCP (document.modelContext) ist ein vorgeschlagener W3C-Standard, derzeit als Chrome Origin Trial verfügbar. webmcpify integriert ihn vollständig feature-detected: Browser ohne WebMCP sehen deine App exakt wie bisher, und die gesamte Integration bleibt ein kleines, auditierbares, revertierbares Set an Diffs. Früh dran zu sein kostet nichts. Bereit zu sein, wenn die Agents kommen, ist der Gewinn.

InstallationInstallation

est. time: one coffeeDauer: ein Kaffee
TERMINALTERMINAL 
$ npx skills add TueJon/webmcpify
# or: git clone https://github.com/TueJon/webmcpify ~/.claude/skills/webmcpify
$ claude
> /webmcpify
  1. 1.

    Clone the skill. Self-contained, MIT, nothing else to configure. Skill klonen. Self-contained, MIT, sonst nichts zu konfigurieren.

  2. 2.

    Run /webmcpify in your app's repo. It maps your app and drafts the tool manifest. /webmcpify ausführen im Repo deiner App. Es erfasst deine App und entwirft das Tool-Manifest.

  3. 3.

    Approve the manifest. Integration, verification, healing, and the audit run from there. Manifest freigeben. Integration, Verifikation, Healing und Audit laufen ab da automatisch.

FAQ

troubleshooting, sort ofTroubleshooting, quasi
What is WebMCP?Was ist WebMCP?

A proposed web standard (W3C Web Machine Learning CG) that lets a page register typed tools browser AI agents can call instead of screen-scraping your DOM. It’s currently running as a Chrome origin trial. Ein vorgeschlagener Webstandard (W3C Web Machine Learning CG), mit dem eine Seite typisierte Tools registriert, die Browser-KI-Agents aufrufen können, statt dein DOM zu scrapen. Läuft aktuell als Chrome Origin Trial.

Will it touch code I didn’t approve?Fasst es Code an, den ich nicht freigegeben habe?

No. Every diff hunk must map to an approved tool or recorded setup; the audit phase flags anything else in the report. Files that were dirty before the run are never modified. Nein. Jeder Diff-Hunk muss einem freigegebenen Tool oder dokumentiertem Setup zuordenbar sein; alles andere flaggt die Audit-Phase im Report. Dateien, die vor dem Run dirty waren, werden nie angefasst.

Is this a security risk for my app?Ist das ein Sicherheitsrisiko für meine App?

Tools may only call code paths your UI already uses: same endpoints, same validation, same auth. Your server remains the only trust boundary. Mutating tools additionally require explicit per-tool human approval, and destructive or payment actions are never exposed in a first integration. Tools dürfen nur Code-Pfade aufrufen, die deine UI ohnehin nutzt: gleiche Endpoints, gleiche Validierung, gleiche Auth. Dein Server bleibt die einzige Trust Boundary. Mutierende Tools brauchen zusätzlich explizite Freigabe pro Tool; destruktive oder Zahlungs-Aktionen werden in einer Erstintegration nie exponiert.

Which agents can run it, and which can use the result?Welche Agents führen es aus, und welche nutzen das Ergebnis?

The pipeline runs as a Claude Code skill. The result is plain, dependency-free WebMCP integration: any browser agent that speaks WebMCP can call your tools, regardless of vendor. Die Pipeline läuft als Claude-Code-Skill. Das Ergebnis ist reine, dependency-freie WebMCP-Integration: jeder Browser-Agent, der WebMCP spricht, kann deine Tools aufrufen, egal von welchem Anbieter.

Copied ✓Kopiert ✓