<form> is instantly callable by AI agents.
auto-webmcp uses the WebMCP imperative API (navigator.modelContext.registerTool()) to auto-register every form on your page — inferred from your existing HTML. Zero manual coding. Gracefully degrades when WebMCP is unavailable.
<script src="https://unpkg.com/auto-webmcp"></script>npm install auto-webmcpauto-webmcp runs entirely in the browser — no server changes, no build pipeline required.
Discovers all <form> elements on page load and watches for new ones via MutationObserver. Forms with an existing toolname attribute are skipped — the browser handles those natively.
Maps each HTML input type to a JSON Schema property. Text → string, number → number, checkbox → boolean, radio groups → enum. Labels, placeholders, and required attributes become schema metadata.
Calls navigator.modelContext.registerTool() per form with the inferred name, description, and input schema. Fills fields and triggers submission when an AI agent invokes the tool.
When navigator.modelContext is absent — any browser other than Chrome 146+ with the flag enabled — auto-webmcp silently no-ops. Your page is unaffected for regular users.
WebMCP offers two paths. auto-webmcp makes the imperative path automatic.
toolname to each individual <form>toolname attribute and skips them automatically — no conflicts, no duplicates.
Override the auto-inferred values with data-webmcp-* attributes or the JavaScript API.
import { autoWebMCP } from 'auto-webmcp';
autoWebMCP({
// Override tool name globally
toolName: (form) => form.id || 'my-form',
// Custom description
description: (form) => form.title || 'Submit this form',
// Auto-submit after agent fills fields
autoSubmit: true,
});<!-- Custom name + description per form -->
<form
data-webmcp-name="search-products"
data-webmcp-description="Search the product catalog"
data-webmcp-autosubmit="true"
>
<input type="search" name="q" placeholder="Search...">
</form>
<!-- Exclude a form entirely -->
<form data-no-webmcp>
<input type="password" name="token">
</form>
Enable chrome://flags/#enable-webmcp-testing in Chrome 146+ and install the
Model Context Tool Inspector Chrome Extension to inspect and invoke your
registered tools in real time. auto-webmcp registers your forms as first-class tools
visible directly in the inspector.