WebMCP origin trial · Chrome 149+ · Edge 150+

Drop in one script tag.
Every <form> is instantly callable by AI agents.

Add one script tag to any page (ServiceNow, HubSpot, Zendesk, React apps, plain HTML) and every form on that page becomes invocable by an AI agent. No modifications to your existing forms, no backend changes, no build pipeline. Invisible to regular users until an agent is present. 

<script src="https://unpkg.com/auto-webmcp@0.7.0"></script>
npm install auto-webmcp@0.7.0
Try It Now → Live Demo → View on GitHub View on npm
GitHub stars npm version MIT License

Works with any web platform

ServiceNow HubSpot Zendesk + any HTML site →
How it works

From HTML to AI-callable tools in four steps

auto-webmcp runs entirely in the browser. No server changes, no build pipeline required.

01

Scans forms

Discovers all <form> elements on page load and watches for new ones via MutationObserver. Reads native toolname and tooldescription attributes when present, and enhances forms that are missing descriptions.

02

Infers schema

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.

03

Registers tools

Calls document.modelContext.registerTool() per form with the inferred name, description, and input schema. Fills fields and triggers submission when an AI agent invokes the tool.

04

Degrades gracefully

When document.modelContext is absent (browsers without WebMCP, or Chrome 149+ outside the origin trial and without the flag), auto-webmcp silently no-ops. Your page is unaffected for regular users.

Why auto-webmcp?

Native Chrome API vs. auto-webmcp

WebMCP has two paths: a declarative API (form attributes) and an imperative API (JavaScript). auto-webmcp builds on both.

Native Declarative API

  • Add toolname to each <form> manually
  • Full manual control over name and schema
  • Best for new sites built with WebMCP in mind
  • Available in Chrome 149+ and Edge 150+ through the origin trial
  • Each form requires explicit annotation

auto-webmcp

  • Drop in one script tag. Done.
  • Reads native toolname/tooldescription when present
  • Infers names and schemas from existing HTML for all other forms
  • Best for existing sites, CMSs, and SPAs with zero code changes
  • MutationObserver handles dynamic forms automatically
  • Gracefully degrades when WebMCP is unavailable
Already using the declarative API? auto-webmcp detects forms with an existing toolname attribute and skips them automatically. No conflicts, no duplicates.
Safety

Sensitive fields stay with the user

Credentials, card data and restricted national IDs are never exposed to agents, with no setup. Country packs add format hints so agents fill IDs correctly, and mask personal IDs in tool results.

India packs/in

Masks PAN, UPI ID, bank account, passport, voter ID and ABHA. Formats GSTIN (with checksum), IFSC, PIN code and mobile.

United States packs/us

Masks ITIN, bank account, date of birth, driver's license and Medicare number. Formats ABA routing, EIN and NPI (with checksums), ZIP and phone.

Singapore packs/sg

Masks passport and date of birth. Formats UEN, postal code and phone. NRIC/FIN is always blocked.

United Kingdom packs/gb

Masks National Insurance number, NHS number, UTR and bank account. Formats sort code, company number, VAT (with checksum) and postcode.

Limits: Packs control what auto-webmcp puts into the agent's context and logs. An agent that reads the page directly can still see the values, so also send Permissions-Policy: tools=() on KYC and payment pages.
Payments

Razorpay Checkout for agents

Checkout is a button and a hosted modal, so form scanning cannot see it. The Razorpay adapter registers checkout tools directly. The agent starts checkout, the user pays in Razorpay's modal with their UPI PIN or card OTP, and your webhook confirms the payment. The agent never sees payment details.

import { razorpay } from 'auto-webmcp/adapters/razorpay';

razorpay({
  merchant: 'Acme',
  plans: async () => [{ id: 'inr-monthly', name: 'Pro', amount: 49900, currency: 'INR' }],
  createSubscription: async (planId) => (await fetch('/billing/subscribe', { method: 'POST', body: planId })).json(),
  subscriptionStatus: async () => (await fetch('/billing/status')).json(),
});
Tools registered: get_plans, start_subscription, get_subscription_status and cancel_subscription (asks the user to confirm), plus start_payment and related tools for one-time Razorpay Orders.
Configuration

Zero config required. Customize when you need to.

Override the auto-inferred values with data-webmcp-* attributes or the JavaScript API.

JavaScript API

import { autoWebMCP } from 'auto-webmcp';
import { india } from 'auto-webmcp/packs/in';

autoWebMCP({
  // Skip forms by CSS selector
  exclude: ['#login-form'],
  // Name and describe specific forms
  overrides: {
    '#search': { name: 'search_products', description: 'Search the product catalog' },
  },
  // Submit after the agent fills fields (default: false, the user submits)
  autoSubmit: false,
  // Country packs: format hints and redaction for Indian fields
  packs: [india],
});

HTML Attributes

<!-- 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>
Testing

Test in Chrome 149+

Enable chrome://flags/#enable-webmcp-testing and install the Model Context Tool Inspector extension to inspect and invoke your registered tools. Tools from auto-webmcp appear there like any hand-written WebMCP tool.

FAQ

Common questions

Does this require a special Chrome flag?
Only for local testing. For real visitors, register your site for the WebMCP origin trial (Chrome 149+, Edge 150+) and add the trial token to your pages, either as a <meta http-equiv="origin-trial"> tag or an Origin-Trial HTTP header. Visitors on other browsers, or outside the trial, see no difference, because auto-webmcp does nothing when WebMCP is absent.
Is auto-webmcp free?
Yes, completely. It's MIT licensed, requires no API key, and runs entirely in the browser. Nothing is sent to any server. There are no usage limits, no sign-up, and no cost.
Do I need to modify my existing forms?
No. auto-webmcp reads your forms as-is and infers names, descriptions, and schemas from your existing HTML (labels, placeholders, input types, and required attributes). Optionally, add data-webmcp-name and data-webmcp-description attributes to any form to sharpen the descriptions visible to agents.
Does it work with React, Vue, Angular?
Yes. auto-webmcp uses a MutationObserver to watch for forms that are dynamically added to the DOM. Forms rendered by any frontend framework (React, Vue, Angular, Svelte) are picked up automatically after they mount.
Will AI agents see passwords or sensitive data?
No. auto-webmcp never exposes passwords, one-time codes, PINs, card numbers, CVVs, card expiry dates, or restricted national IDs (Aadhaar, US SSN, Singapore NRIC/FIN, Dutch BSN, Irish PPSN, Belgian national register number). The agent is told the user must fill those fields. Tool results only include fields the agent can see, so hidden inputs such as CSRF tokens never leave the page. Override a field with data-webmcp-sensitive="allow|redact|block", or exclude a whole form with data-no-webmcp.
Can I use it on ServiceNow, HubSpot, or Zendesk?
Yes. See the platform install guides for step-by-step instructions on adding auto-webmcp to ServiceNow, HubSpot, and Zendesk, including where to paste the script tag in each platform's admin UI.
Resources

Everything you need

GitHub

Source code, issues, and contributions. MIT licensed and open to PRs.

npm

Install via npm, yarn, or pnpm. ESM and IIFE builds included.

Chrome WebMCP docs

Official Chrome documentation: the APIs, best practices, security guidance and the origin trial.