Chrome 146+ WebMCP 解説：如何透過 document.modelContext 向 AI 智能體開放 Next.js 與 HTML 表單

If you have been following the Chromium and W3C agent standards recently, you may have noticed a quiet architectural shift in how browser-side AI agents interact with web apps: WebMCP (Web Model Context Protocol).

Instead of forcing browser agents (like Google Gemini in Chrome or autonomous browser assistants) to rely on fragile DOM scraping or slow pixel-coordinate clicking, Chrome 146+ (Chromium 146.0.7672.0+ Early Preview) introduces native tool registration via document.modelContext and zero-JS declarative HTML <form toolname="..."> attributes.

Here is a practical engineering breakdown of how WebMCP works, the exact errors you will hit during migration, and a free client-side generator I built to convert existing forms in 60 seconds.

1. Declarative HTML vs. Imperative JavaScript

WebMCP gives web developers two distinct ways to expose actions to an AI agent:

Pattern A: Zero-JS Declarative HTML Forms (<form toolname="...">)

If you have standard SSR pages or forms, you can expose them to browser agents without writing a single line of JavaScript by adding three attributes:

• toolname: The unique snake_case identifier for the tool.
• tooldescription: Plain-English guidance telling the agent planner when and why to invoke this form.
• toolparamdescription: Placed on each <input>, <select>, or <textarea> so the agent understands the expected parameter format.

<form
  action="/api/generate-video"
  method="POST"
  toolname="generate_ai_video"
  tooldescription="Generate an animated video transition between two keyframe images."
  tooluntrustedcontent="true"
>
  <label for="image_a_url">Starting Frame URL *</label>
  <input
    type="url"
    id="image_a_url"
    name="image_a_url"
    toolparamdescription="Starting keyframe image URL (PNG, JPG, WebP)"
    required
  />

  <label for="duration_seconds">Duration (Seconds) *</label>
  <input
    type="number"
    id="duration_seconds"
    name="duration_seconds"
    toolparamdescription="Target video duration in seconds (5 or 10)"
    required
  />

  <button type="submit">Generate Video</button>
</form>

Pattern B: Imperative API (document.modelContext.registerTool)

For Next.js App Router or React SPAs where you need client-side state, custom auth headers, or async JSON handling, use the imperative registration API.

Important Spec Change: Early drafts used navigator.modelContext, whereas current Chromium 136+ builds standardize on document.modelContext so tool lifecycles bind directly to the active DOM document. Always feature-detect both:

"use client";

import { useEffect } from "react";

export function useWebMCPCheckoutTool() {
  useEffect(() => {
    if (typeof window === "undefined") return;

    const win = window as any;
    const mc = win.document?.modelContext || win.navigator?.modelContext;
    if (!mc || typeof mc.registerTool !== "function") return;

    (async () => {
      await mc.registerTool({
      name: "checkout_credit_pack",
      description: "\"Initiate a checkout session to purchase compute credits.\","
      readOnlyHint: false,
      consequentialHint: true, // Forces human confirmation before charging!
      untrustedContentHint: false,
      parameters: {
        type: "object",
        properties: {
          pack_id: {
            type: "string",
            description: "Credit pack SKU ID, e.g. pack_500_credits"
          }
        },
        required: ["pack_id"]
      },
      execute: async (args: Record<string, unknown>) => {
        const res = await fetch("/api/checkout", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(args)
        });
        return await res.json();
      }
    });

    return () => {
      mc.unregisterTool?.("checkout_credit_pack");
    };
  }, []);
}

2. Why Safety Hints (readOnlyHint & consequentialHint) Matter

When an autonomous agent plans a multi-step workflow, it checks three behavioral hints:

1. readOnlyHint: true: Tells the agent the tool has zero side effects (e.g. searching a directory or filtering docs). The agent can call it freely during reasoning.
2. consequentialHint: true: Warns the browser that this action triggers permanent state mutation or financial charges (like Stripe checkout or deleting a project). The browser halts autonomous execution and prompts explicit human confirmation.
3. untrustedContentHint: true: Flags that the tool output includes unverified user content or 3rd-party data, activating prompt-injection safeguards.

3. Common Troubleshooting Matrix in Chrome 146+ (Chromium 146.0.7672.0+ Early Preview)

4. Free Client-Side WebMCP Schema & Code Generator

To save time writing JSON schemas and boilerplate hooks by hand, I built a free, 100% client-side WebMCP Schema & Code Generator:

👉 Launch the Free WebMCP Schema Generator

What it includes:

• HTML <form> Paste Auto-Parser: Paste any existing HTML form and it extracts all <input>, <select>, and <textarea> fields into a WebMCP schema using native browser DOMParser.
• 4 One-Click Indie Hacker Presets: AI Video Generator (Dual-Image), SaaS Directory Search (readOnlyHint: true), and SaaS Checkout (consequentialHint: true).
• 3-in-1 Output: Switch between Next.js App Router React Hooks, Vanilla JS, Declarative HTML, and a ready-to-paste Chrome DevTools Console test script.
• Live Dogfooding: The generator page itself registers generate_webmcp_schema on document.modelContext—if you visit with chrome://flags/#enable-webmcp-testing enabled, you can inspect it live in DevTools.

We also added a WebMCP Ready filter across our AI Indie Hacker Tools Directory so solo founders can track which dev tools and workflows are adopting agent-ready protocols.

Have you started testing document.modelContext in Chrome Canary yet, or are you sticking with server-side MCP for now? Let me know in the comments!