webmcpx 0.0.0-stage → 0.2.0

package/agent/page.js

@@ -0,0 +1,237 @@
+// One tab in the agent's browser. Before any page script runs, it installs the W3C WebMCP polyfill
+// (https://github.com/w3c-oss/webmcp-polyfill), so a site's own registerTool() calls work in any
+// Chromium, with no flag. Nothing else is injected, and the page's CSP stays on. Tools are listed and
+// called only through the spec's consumer methods, document.modelContext.getTools() and executeTool(),
+// on the very descriptors getTools() returned (they keep the owning frame).
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { READ_PAGE } from "./standard.js";
+
+const POLYFILL = readFileSync(fileURLToPath(new URL("polyfill.js", import.meta.resolve("@w3c/webmcp-polyfill"))), "utf8");
+const CHANGED = "__webmcpxToolsChanged";
+// Runs in every new document, before the page's scripts. An iframe's initial about:blank is special:
+// when it navigates to a same-origin page, Chrome keeps its Window and does not run this again, and a
+// polyfill installed in the blank document would talk to frames through state tied to that discarded
+// document (no discovery across frames). So there it installs on first use, from the real document.
+const BOOT = `(() => {
+  const install = () => {
+${POLYFILL}
+  };
+  if (window !== window.top && document.URL === "about:blank") {
+    const proto = Document.prototype;
+    Object.defineProperty(proto, "modelContext", {
+      configurable: true,
+      enumerable: true,
+      get() {
+        delete proto.modelContext;
+        install();
+        return this.modelContext;
+      },
+    });
+    return;
+  }
+  install();
+  const mc = document.modelContext;
+  if (window === window.top && typeof mc?.addEventListener === "function" && typeof ${CHANGED} === "function") {
+    mc.addEventListener("toolchange", () => ${CHANGED}(""));
+  }
+})();`;
+
+const GET_TOOLS = `(async () => {
+  const mc = document.modelContext;
+  return typeof mc?.getTools === "function" ? await mc.getTools() : null;
+})()`;
+
+// Called on the array getTools() returned: plain summaries, by index.
+function summarize() {
+  const parse = (s) => {
+    try {
+      return typeof s === "string" ? JSON.parse(s) : s;
+    } catch {
+      return undefined;
+    }
+  };
+  return this.map((t, index) => ({
+    index,
+    name: t.name,
+    description: t.description ?? "",
+    inputSchema: parse(t.inputSchema),
+    annotations: { ...(t.annotations ?? {}) },
+    origin: t.origin,
+  }));
+}
+
+// Called on the same array: runs one descriptor. executeTool() returns the result JSON-serialized; a tool
+// that returned a string (like the webmcpx envelope) comes back as a JSON string literal: unwrap it once.
+async function execute(index, input) {
+  const out = await document.modelContext.executeTool(this[index], input);
+  let value = out;
+  try {
+    value = typeof out === "string" ? JSON.parse(out) : out;
+  } catch {
+    // not JSON: keep the text
+  }
+  return typeof value === "string" ? value : JSON.stringify(value ?? null);
+}
+
+const GROUP = "webmcpx-tools";
+const LOAD_TIMEOUT = 30_000;
+const CALL_TIMEOUT = 60_000;
+const SETTLE = { min: 400, max: 3_000, every: 200 };
+// Unref'd: a pending timeout must never keep the CLI alive after its work is done.
+const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms).unref());
+const timeout = (ms, what) =>
+  new Promise((_, reject) => {
+    setTimeout(() => reject(new Error(`${what} took longer than ${ms / 1000} s`)), ms).unref();
+  });
+
+/** Whether an error means the page navigated or the tool list was replaced since it was read. */
+export const stale = (e) =>
+  /Could not find object|Cannot find context|context was destroyed|Inspected target navigated/i.test(e?.message);
+
+export class Page {
+  #cdp;
+  #session;
+  #onChange;
+  #loads = new Set();
+  #handles = [];
+  #debounce;
+
+  /** Opens a new tab. `onChange()` fires when the page's tools may have changed on their own. */
+  static async create(cdp, { onChange = () => {} } = {}) {
+    const { targetId } = await cdp.send("Target.createTarget", { url: "about:blank" });
+    const { sessionId } = await cdp.send("Target.attachToTarget", { targetId, flatten: true });
+    const page = new Page(cdp, sessionId, onChange);
+    await page.#init();
+    return page;
+  }
+
+  constructor(cdp, session, onChange) {
+    this.#cdp = cdp;
+    this.#session = session;
+    this.#onChange = onChange;
+    cdp.on((msg) => msg.sessionId === session && this.#event(msg));
+  }
+
+  #send(method, params) {
+    return this.#cdp.send(method, params, this.#session);
+  }
+
+  async #init() {
+    await Promise.all([this.#send("Page.enable"), this.#send("Runtime.enable")]);
+    await this.#send("Runtime.addBinding", { name: CHANGED });
+    await this.#send("Page.addScriptToEvaluateOnNewDocument", { source: BOOT });
+  }
+
+  #event({ method, params }) {
+    if (method === "Page.javascriptDialogOpening") {
+      // An alert() would block every later call: dismiss it, like a user closing it.
+      this.#send("Page.handleJavaScriptDialog", { accept: false }).catch(() => {});
+    } else if (method === "Page.loadEventFired") {
+      for (const resolve of this.#loads) resolve();
+      this.#loads.clear();
+      this.#changed(); // a new document: a new tool list
+    } else if (method === "Runtime.bindingCalled" && params.name === CHANGED) {
+      this.#changed();
+    }
+  }
+
+  #changed() {
+    clearTimeout(this.#debounce);
+    this.#debounce = setTimeout(() => this.#onChange(), 150);
+  }
+
+  async #evaluate(expression, ms = CALL_TIMEOUT) {
+    const run = this.#send("Runtime.evaluate", { expression, awaitPromise: true, returnByValue: true });
+    const { result, exceptionDetails } = await Promise.race([run, timeout(ms, "the page")]);
+    if (exceptionDetails) throw new Error(describeException(exceptionDetails));
+    return result.value;
+  }
+
+  /**
+   * Navigates and waits for the tool list to settle.
+   * @returns {Promise<{url: string, title: string, tools: PageTool[] | null}>} `tools` is null without WebMCP
+   * (outside a secure context).
+   */
+  async open(url) {
+    // The old document's tool lists die with it.
+    await this.#send("Runtime.releaseObjectGroup", { objectGroup: GROUP }).catch(() => {});
+    this.#handles = [];
+    const loaded = new Promise((resolve) => this.#loads.add(resolve));
+    const nav = await this.#send("Page.navigate", { url });
+    if (nav.errorText) throw new Error(`could not open ${url}: ${nav.errorText}`);
+    if (nav.loaderId) await Promise.race([loaded, wait(LOAD_TIMEOUT)]);
+    const tools = await this.#settle();
+    const { url: at, title } = await this.#evaluate("({ url: location.href, title: document.title })");
+    return { url: at, title, tools };
+  }
+
+  /** Polls until the tool list has been stable for a moment (sites often register after load). */
+  async #settle() {
+    const start = Date.now();
+    const names = (list) => JSON.stringify(list?.map((t) => t.name));
+    let last = await this.tools();
+    while (Date.now() - start < SETTLE.max) {
+      await wait(SETTLE.every);
+      const now = await this.tools();
+      const same = names(now) === names(last);
+      last = now;
+      if (same && Date.now() - start >= SETTLE.min) break;
+    }
+    return last;
+  }
+
+  /**
+   * Reads the page's tools. Each keeps the `index` of its descriptor in this list, which `call` runs:
+   * same-named tools in different frames stay distinct. Null without `document.modelContext`.
+   * @returns {Promise<PageTool[] | null>}
+   */
+  async tools() {
+    const run = this.#send("Runtime.evaluate", { expression: GET_TOOLS, awaitPromise: true, objectGroup: GROUP });
+    const { result, exceptionDetails } = await Promise.race([run, timeout(CALL_TIMEOUT, "the page")]);
+    if (exceptionDetails) throw new Error(describeException(exceptionDetails));
+    if (!result.objectId) return null;
+    const { result: list } = await this.#send("Runtime.callFunctionOn", {
+      objectId: result.objectId,
+      functionDeclaration: summarize.toString(),
+      returnByValue: true,
+    });
+    // Each tool keeps the very list it came from: a call runs on that descriptor, so it reaches the
+    // owning frame or fails if that owner unregistered it; it never shifts to another tool.
+    this.#handles.push(result.objectId);
+    if (this.#handles.length > 50) {
+      this.#send("Runtime.releaseObject", { objectId: this.#handles.shift() }).catch(() => {});
+    }
+    const count = new Map();
+    for (const t of list.value) count.set(`${t.origin} ${t.name}`, (count.get(`${t.origin} ${t.name}`) ?? 0) + 1);
+    return list.value.map((tool) => ({
+      ...tool,
+      list: result.objectId,
+      unique: count.get(`${tool.origin} ${tool.name}`) === 1,
+    }));
+  }
+
+  /** Runs a tool on the list it came from; resolves with its result text. */
+  async call(tool, input) {
+    const run = this.#send("Runtime.callFunctionOn", {
+      objectId: tool.list,
+      functionDeclaration: execute.toString(),
+      arguments: [{ value: tool.index }, { value: input ?? {} }],
+      awaitPromise: true,
+      returnByValue: true,
+      userGesture: true,
+    });
+    const { result, exceptionDetails } = await Promise.race([run, timeout(CALL_TIMEOUT, "the tool")]);
+    if (exceptionDetails) throw new Error(describeException(exceptionDetails));
+    return result.value;
+  }
+
+  /** The loader's `readPage(what)`, evaluated in the page (for the standard tools). */
+  read(what) {
+    return this.#evaluate(`${READ_PAGE}(${JSON.stringify(what)})`);
+  }
+}
+
+const describeException = (d) => d.exception?.description?.split("\n")[0] ?? d.text;
+
+/** @typedef {{index: number, list: string, unique: boolean, name: string, description: string, inputSchema?: object, annotations: Record<string, boolean>, origin?: string}} PageTool */

package/agent/session.js

@@ -0,0 +1,114 @@
+// What the CLI and the MCP server share: one browser (started on first use), one tab, and the tool list
+// the agent sees: the page's own tools plus the standard ones the page does not already have.
+import { attach, launch } from "./browser.js";
+import { Page, stale } from "./page.js";
+import { runStandard, standardTools } from "./standard.js";
+
+export class Session {
+  #options;
+  #browser;
+  #page;
+  #ready;
+  #queue = Promise.resolve();
+
+  /** @param {{headed?: boolean, browser?: string, cdp?: string, onChange?: () => void}} options */
+  constructor(options = {}) {
+    this.#options = options;
+  }
+
+  #start() {
+    this.#ready ??= (async () => {
+      const { cdp, headed, browser, onChange } = this.#options;
+      this.#browser = cdp ? await attach(cdp) : await launch({ headed, executable: browser });
+      return Page.create(this.#browser.cdp, { onChange });
+    })().catch((e) => {
+      this.#ready = undefined;
+      throw e;
+    });
+    return this.#ready;
+  }
+
+  /** Runs page work one at a time: there is one tab, so a navigation must not interleave with a call. */
+  #serial(work) {
+    const run = this.#queue.then(work);
+    this.#queue = run.catch(() => {});
+    return run;
+  }
+
+  /** @returns {Promise<{url: string, title: string, tools: Tool[] | null}>} */
+  goto(url) {
+    return this.#serial(async () => {
+      this.#page = await this.#start();
+      const page = await this.#page.open(normalize(url));
+      return { ...page, tools: page.tools && withStandard(page.tools) };
+    });
+  }
+
+  /** The current tool list (empty before a page is open, or without WebMCP). */
+  tools() {
+    return this.#serial(async () => (this.#page ? withStandard((await this.#page.tools()) ?? []) : []));
+  }
+
+  /** Calls a tool from the latest list; a page tool whose list went stale is found again by name and origin. */
+  call(tool, input) {
+    return this.#serial(async () => {
+      if (!this.#page) throw new Error("no page is open yet: call open_page first");
+      const page = this.#page;
+      if (tool.standard) return runStandard(tool.name, input, (what) => page.read(what));
+      try {
+        return await page.call(tool, input);
+      } catch (e) {
+        if (!stale(e)) throw e;
+        // The document the tool was listed in is gone: run the same tool in the new one only when no
+        // other tool shares its name and origin there or then; otherwise refuse rather than guess.
+        const now = ((await page.tools()) ?? []).filter((t) => t.name === tool.name && t.origin === tool.origin);
+        const again = tool.unique && now.length === 1 ? now[0] : undefined;
+        if (!again) throw new Error(`the page changed and no longer has the tool "${tool.name}": call open_page again`);
+        return page.call(again, input);
+      }
+    });
+  }
+
+  close() {
+    this.#browser?.close();
+  }
+}
+
+/** The page's tools, then each standard tool the page does not already register. */
+function withStandard(tools) {
+  const names = new Set(tools.map((t) => t.name));
+  return [...tools, ...standardTools().filter((t) => !names.has(t.name))];
+}
+
+/** `example.com` → `https://example.com`; `localhost:3000` → `http://localhost:3000`. */
+export function normalize(url) {
+  const raw = String(url ?? "").trim();
+  if (!raw) throw new Error("give a URL, e.g. https://example.com or http://localhost:3000");
+  if (/^[a-z][a-z0-9+.-]*:\/\//i.test(raw) || raw.startsWith("about:") || raw.startsWith("file:")) return raw;
+  const local = /^(localhost|127\.|\[::1\]|0\.0\.0\.0)/.test(raw);
+  return `${local ? "http" : "https"}://${raw}`;
+}
+
+/** Whether a tool result reports failure: a webmcpx envelope (`"ok": false`) or an MCP result (`"isError": true`). */
+export function failed(text) {
+  try {
+    const value = JSON.parse(text);
+    return value?.ok === false || value?.isError === true;
+  } catch {
+    return false;
+  }
+}
+
+/** A result some sites already shape like MCP (`{content: [...]}`, e.g. Shopify), or undefined. */
+export function mcpResult(text) {
+  try {
+    const value = JSON.parse(text);
+    if (!Array.isArray(value?.content)) return undefined;
+    const { content, structuredContent, isError } = value;
+    return { content, ...(structuredContent && { structuredContent }), ...(isError === true && { isError }) };
+  } catch {
+    return undefined;
+  }
+}
+
+/** @typedef {import("./page.js").PageTool & {standard?: boolean}} Tool */

package/agent/standard.js

@@ -0,0 +1,57 @@
+// The webmcpx standard tools, run by the agent bridge itself: the page is only read (through the
+// loader's own `readPage`, evaluated by DevTools, which the page's CSP does not apply to) and the text
+// engine runs here in Node. Nothing is injected into the page besides the W3C polyfill.
+import { readFileSync } from "node:fs";
+import { CODES, TOOLS } from "../src/generated.js";
+import { readPage } from "../src/loader.js";
+
+export const STANDARD = ["get_page_context", "search_page", "fetch_as_markdown"];
+
+/** Source of a page expression: `${READ_PAGE}("blocks")`. */
+export const READ_PAGE = `(${readPage})`;
+
+let engine;
+const load = () =>
+  (engine ??= import("../wasm/webmcpx_wasm.js")
+    .then(async (m) => {
+      await m.default({ module_or_path: readFileSync(new URL("../wasm/webmcpx_wasm_bg.wasm", import.meta.url)) });
+      return m;
+    })
+    .catch((e) => {
+      engine = undefined;
+      throw e;
+    }));
+
+const envelope = (body) => JSON.stringify(body);
+const err = (code, message) => envelope({ ok: false, error: { code, message, retryable: CODES[code] } });
+
+/** The standard tools as page-tool descriptors (`standard: true`), for listing next to the site's. */
+export const standardTools = () =>
+  STANDARD.map((name) => {
+    const { description, inputSchema, annotations } = TOOLS[name];
+    return { name, description, inputSchema, annotations: { ...annotations }, standard: true };
+  });
+
+/**
+ * Runs a standard tool. `read(what)` returns `readPage(what)` evaluated in the page.
+ * Like the in-page tools, it never rejects: any input and any failure yield an envelope.
+ */
+export async function runStandard(name, input, read) {
+  const args = input && typeof input === "object" && !Array.isArray(input) ? input : {};
+  try {
+    if (name === "get_page_context") return envelope({ ok: true, data: await read("context") });
+    if (name === "search_page" && typeof args.query !== "string") return err("INVALID_INPUT", "`query` must be a string");
+    const page = await read("blocks");
+    let m;
+    try {
+      m = await load();
+    } catch (e) {
+      return err("UNAVAILABLE", `the text engine could not load: ${e?.message ?? e}`);
+    }
+    if (name === "search_page") return m.search(page, args.query, args.limit ?? 0);
+    if (name === "fetch_as_markdown") return m.markdown(page, String(args.cursor ?? ""), args.max_chars ?? 0);
+    return err("NOT_FOUND", `no standard tool named ${name}`);
+  } catch (e) {
+    return err("UNAVAILABLE", String(e?.message ?? e));
+  }
+}

package/bin/webmcpx.js

@@ -0,0 +1,152 @@
+#!/usr/bin/env node
+// npx webmcpx: WebMCP for any agent, in any Chromium, today.
+//   webmcpx mcp                      MCP server: your agent calls the tools of any page it opens
+//   webmcpx tools <url>              list a page's WebMCP tools (great on localhost)
+//   webmcpx call <url> <tool> [json] call one and print the result
+import { parseArgs } from "node:util";
+import { describe, named, serve } from "../agent/mcp.js";
+import { Session, failed, mcpResult } from "../agent/session.js";
+
+const tty = process.stdout.isTTY && !process.env.NO_COLOR;
+const paint = (code) => (s) => (tty ? `\x1b[${code}m${s}\x1b[0m` : s);
+const bold = paint(1);
+const dim = paint(2);
+const green = paint(32);
+const yellow = paint(33);
+
+const HELP = `${bold("webmcpx")}: WebMCP for any agent, in any Chromium, today.
+
+${bold("Give your agent the tools of every page it opens")}
+  Claude Code   claude mcp add webmcpx -- npx -y webmcpx mcp
+  Codex         codex mcp add webmcpx -- npx -y webmcpx mcp
+  Cursor, VS Code, Windsurf (mcp.json):
+                { "mcpServers": { "webmcpx": { "command": "npx", "args": ["-y", "webmcpx", "mcp"] } } }
+
+${bold("Check your own site's tools")} ${dim("(no Chrome flags)")}
+  npx webmcpx tools localhost:3000
+  npx webmcpx call localhost:3000 search_page '{"query": "pricing"}'
+
+${bold("Commands")}
+  mcp                         MCP server over stdio
+  tools <url>                 list the page's WebMCP tools
+  call <url> <tool> [json]    call one tool and print its result
+
+${bold("Options")}
+  --headed                    show the browser window
+  --browser <path>            Chrome, Chromium, Edge or Brave to use (or WEBMCPX_CHROME)
+  --cdp <url>                 use a browser you started with --remote-debugging-port
+
+Every page gets search_page, fetch_as_markdown and get_page_context, plus the site's own tools.
+The linter is the Rust CLI: cargo install webmcpx. Docs: https://webmcpx.dev`;
+
+const usage = (message) => {
+  console.error(`${message}\n\nRun "npx webmcpx --help" for usage.`);
+  process.exit(2);
+};
+
+function parse(argv) {
+  try {
+    return parseArgs({
+      args: argv,
+      allowPositionals: true,
+      options: {
+        headed: { type: "boolean" },
+        browser: { type: "string" },
+        cdp: { type: "string" },
+        help: { type: "boolean", short: "h" },
+        version: { type: "boolean", short: "v" },
+      },
+    });
+  } catch (e) {
+    return usage(e.message);
+  }
+}
+
+const firstLine = (s, max = 72) => {
+  const line = String(s ?? "").split("\n")[0];
+  return line.length > max ? `${line.slice(0, max - 1)}…` : line;
+};
+
+function printTools(page) {
+  if (page.tools === null) return console.log(describe(page));
+  const own = page.tools.filter((t) => !t.standard);
+  const standard = page.tools.filter((t) => t.standard);
+  const width = Math.max(0, ...page.tools.map((t) => t.name.length)) + 2;
+  const row = (t) => {
+    const a = t.annotations ?? {};
+    const tag = a.readOnlyHint ? dim("read-only ") : a.consequentialHint ? yellow("acts      ") : "          ";
+    return `  ${bold(t.name.padEnd(width))}${tag}${dim(firstLine(t.description))}`;
+  };
+  console.log(`${bold(page.title || page.url)} ${dim(page.url)}\n`);
+  if (own.length) {
+    console.log(green(`✓ ${own.length} WebMCP tool${own.length === 1 ? "" : "s"} registered by the site`));
+    for (const t of own) console.log(row(t));
+  } else {
+    console.log(yellow("○ The site registers no WebMCP tools of its own.") + dim(" Add them: https://webmcpx.dev/#fix"));
+  }
+  if (standard.length) {
+    console.log(`\n${dim("+ standard tools webmcpx adds to every page")}`);
+    for (const t of standard) console.log(row(t));
+  }
+  console.log(dim(`\nTry one: npx webmcpx call ${page.url} search_page '{"query": "..."}'`));
+}
+
+async function main() {
+  const { values, positionals } = parse(process.argv.slice(2));
+  const [command, ...rest] = positionals;
+  if (values.version) {
+    const { readFileSync } = await import("node:fs");
+    return console.log(JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8")).version);
+  }
+  if (values.help || !command || command === "help") return console.log(HELP);
+  const options = { headed: values.headed, browser: values.browser, cdp: values.cdp };
+
+  if (command === "mcp") return serve(options);
+  if (command === "lint") usage("The linter is the Rust CLI: cargo install webmcpx, then webmcpx lint <dir>.");
+  if (command !== "tools" && command !== "call") usage(`Unknown command "${command}".`);
+
+  const [url, name, json] = rest;
+  if (!url) usage(`Give a URL: npx webmcpx ${command} localhost:3000`);
+  if (command === "call" && !name) usage("Give a tool name: npx webmcpx call <url> <tool> [json]");
+  let input = {};
+  if (json) {
+    try {
+      input = JSON.parse(json);
+    } catch {
+      usage(`The input is not JSON: ${json}`);
+    }
+    if (!input || typeof input !== "object" || Array.isArray(input)) usage(`The input must be a JSON object, like '{"query": "pricing"}'.`);
+  }
+
+  const session = new Session(options);
+  try {
+    const page = await session.goto(url);
+    if (command === "tools") return printTools(page);
+    const entries = named(page.tools ?? []);
+    const tool = (entries.find((e) => e.tool.name === name) ?? entries.find((e) => e.name === name))?.tool;
+    if (!tool) {
+      console.error(`webmcpx: ${page.url} has no tool named "${name}". Run: npx webmcpx tools ${url}`);
+      process.exitCode = 2;
+      return;
+    }
+    const out = await session.call(tool, input);
+    const mcp = mcpResult(out);
+    let pretty = out;
+    try {
+      pretty = mcp
+        ? mcp.content.map((c) => (c.type === "text" ? c.text : JSON.stringify(c))).join("\n")
+        : JSON.stringify(JSON.parse(out), null, 2);
+    } catch {
+      // not JSON: print as is
+    }
+    console.log(pretty);
+    if (failed(out)) process.exitCode = 1;
+  } finally {
+    session.close();
+  }
+}
+
+main().catch((e) => {
+  console.error(`webmcpx: ${e.message}`);
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,95 @@
 {
   "name": "webmcpx",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Standard WebMCP tools for any website, and an MCP server that gives any agent the WebMCP tools of the pages it opens.",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://webmcpx.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webmcpx/webmcpx.git",
+    "directory": "packages/webmcpx"
+  },
+  "keywords": [
+    "agent",
+    "ai-agents",
+    "mcp",
+    "mcp-server",
+    "model-context",
+    "polyfill",
+    "react",
+    "svelte",
+    "vue",
+    "wasm",
+    "webmcp"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    },
+    "./auto": "./src/auto.js",
+    "./react": {
+      "types": "./src/react.d.ts",
+      "default": "./src/react.js"
+    },
+    "./vue": {
+      "types": "./src/vue.d.ts",
+      "default": "./src/vue.js"
+    },
+    "./svelte": {
+      "types": "./src/svelte.d.ts",
+      "default": "./src/svelte.js"
+    }
+  },
+  "types": "./src/index.d.ts",
+  "bin": {
+    "webmcpx": "bin/webmcpx.js"
+  },
+  "files": [
+    "src",
+    "agent",
+    "bin",
+    "wasm/webmcpx_wasm.js",
+    "wasm/webmcpx_wasm_bg.wasm",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./src/auto.js"
+  ],
+  "scripts": {
+    "test": "node --test --experimental-test-module-mocks"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "dependencies": {
+    "@w3c/webmcp-polyfill": "0.1.0"
+  },
+  "devDependencies": {
+    "linkedom": "0.18.15",
+    "react": "19.3.1",
+    "svelte": "5.57.3",
+    "vue": "3.5.45"
+  },
+  "bugs": {
+    "url": "https://github.com/webmcpx/webmcpx/issues"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "vue": ">=2.7",
+    "svelte": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    }
+  }
+}

package/src/auto.js

@@ -0,0 +1,13 @@
+// Drop-in: <script type="module" src="https://cdn.jsdelivr.net/npm/webmcpx@0.2/src/auto.js"></script>
+// Registers the standard tools, and turns every <form toolname> into a tool (that code loads only
+// on pages that have one).
+import { register } from "./loader.js";
+
+register();
+const doc = globalThis.document;
+const forms = () => import("./tool.js").then((m) => m.forms());
+if (doc?.querySelector("form[toolname]")) forms();
+else if (doc) {
+  const watch = new MutationObserver(() => doc.querySelector("form[toolname]") && (watch.disconnect(), forms()));
+  watch.observe(doc.documentElement, { subtree: true, childList: true, attributes: true, attributeFilter: ["toolname"] });
+}