Chrome WebMCP · Early Preview

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.3.24"></script>
npm install auto-webmcp@0.3.24
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 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.

04

Degrades gracefully

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.

Why auto-webmcp?

Native Chrome API vs. auto-webmcp

Chrome 146+ ships WebMCP with two paths. auto-webmcp is a polyfill + enhancement layer that works with 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
  • Requires Chrome 146+ with #enable-webmcp-testing flag
  • 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.
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';

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,
});

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 with Chrome 146+

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.

FAQ

Common questions

Does this require a special Chrome flag?
Yes, for now. WebMCP is in Early Preview and requires enabling chrome://flags/#enable-webmcp-testing in Chrome 146+. For regular users without the flag, auto-webmcp silently does nothing. Your page is completely unaffected. Once Chrome ships WebMCP to stable, it will activate automatically for all users.
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. password, file, and hidden inputs are never included in the tool schema exposed to agents. You can also add data-no-webmcp to any form to exclude it entirely from agent access.
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 Early Preview

Official documentation from the Chrome team on the WebMCP APIs and early preview program.