WebMCP for Websites: Turn an HTML Form into an AI Agent Tool

WebMCP for websites lets you describe a web action—such as searching, filtering products, or submitting a support request—as a tool with a name, description, and structured parameters. With the Declarative API, you start with an HTML <form> element, add WebMCP attributes, and let the browser provide that form to a compatible agent.

The target outcome of this article is a search form that continues to work for ordinary users while a WebMCP-aware agent can identify the tool, fill in its fields query and submit it according to the policy you choose. WebMCP is still an experimental proposal, not a W3C Standard; the draft documentation was published on September 10, 2026 (according to webmachinelearning.github.io).

How Is WebMCP Different from an Agent Clicking Through the Interface?

WebMCP is a proposed web API that allows applications to expose selected functions as tools for AI agents. Without this descriptive layer, an agent typically has to inspect the interface, find buttons, fill in fields, and simulate user actions. With WebMCP, the website declares the action name, purpose, and input data in advance, so the agent can submit parameters in a clearer structured format (according to developer.chrome.com).

WebMCP does not automatically turn a website into a public API for every external server, nor does it replace the backend. Tools are registered in the browser context; their visibility and execution depend on the browser, agent, login session, and the website’s policies.

Interaction method	What must the agent do?	What does the website provide?
Interface simulation	Inspect the page, infer the button, fill in the fields, and click Submit	HTML, CSS, and visible state
WebMCP Declarative API	Call a tool with structured parameters	A tool name, description, and schema inferred from the form
Backend API or MCP	Call a server-side service	An endpoint, authentication, and backend logic

WebMCP is therefore a good fit when the action already exists on the website and you want an agent to go through that flow. Authentication, authorization, data validation, rate limiting, and transaction confirmation must still be handled independently.

Choose and Standardize a Form Before Exposing It to Agents

Start with an action that has a narrow scope, an easily verifiable result, and low risk. Search forms, product filters, and support requests are generally more suitable than payments, data deletion, or account-permission changes.

• The form has one clear purpose, such as “search for products by keyword.”
• Each field has a name stable name that can serve as a parameter name.
• Important fields have label, an appropriate input type, and required when needed.
• The server still validates the data, access permissions, login status, and rate limits.
• The traditional form-submission flow continues to work when the browser or agent does not support WebMCP.

This is a required step, not merely an accessibility improvement. Labels, input types, and option values help users, assistive technologies, and agents understand the meaning of the data correctly.

Add the Declarative API to the HTML Form

1. Declare the Name, Description, and Parameters

Open the interface source code or template containing the form in a development or staging environment, then add toolname and tooldescription. According to the Declarative API documentation, if either of these attributes is missing, the form is not registered through this mechanism (according to developer.chrome.com).

<form
  method="get"
  action="/search"
  toolname="searchProducts"
  tooldescription="Tìm sản phẩm theo từ khóa và mở trang kết quả tìm kiếm."
>
  <label for="query">Từ khóa sản phẩm</label>
  <input
    id="query"
    name="query"
    type="search"
    required
    toolparamdescription="Tên hoặc đặc điểm của sản phẩm cần tìm."
  >

  <button type="submit">Tìm kiếm</button>
</form>

Insert the code above into the page’s HTML/template; do not run it in the server console. If the actual path is not /search, replace it with your form-processing endpoint. The expected result is that the form can still be submitted using the Search button, while a compatible agent sees a tool named searchProducts with the parameter query.

• toolname is the identifier; use a stable, distinctive name without spaces.
• tooldescription describes the action and its result, not an advertising slogan.
• name="query" becomes the field name in the input data.
• toolparamdescription explains the parameter’s business meaning.
• action="/search" Retain the traditional HTML fallback.

If there is no toolparamdescription, the browser can use the contents of label to describe the field. For parameters with domain-specific meaning, write a separate description to reduce the chance of the agent making an incorrect assumption (according to developer.chrome.com).

2. Restrict choices with select

If a parameter accepts only a fixed set of values, use <select> instead of allowing the agent to generate an arbitrary string. The value values are sent to the server; the text displayed between the <option> tags may be different.

<label for="category">Danh mục</label>
<select
  id="category"
  name="category"
  required
  toolparamdescription="Danh mục sản phẩm cần tìm."
>
  <option value="laptop">Laptop</option>
  <option value="monitor">Màn hình</option>
  <option value="keyboard">Bàn phím</option>
</select>

The backend must verify again that category is laptop, monitor or keyboard. HTML validation and the schema generated by the browser are not security boundaries.

3. Enable automatic submission only for low-risk actions

Do not add toolautosubmit at the initial stage if you want users to review the data before submission. When this Boolean attribute is enabled, a tool call can trigger form submission and continue through the form’s workflow (according to developer.chrome.com).

<form
  method="get"
  action="/search"
  toolname="searchProducts"
  tooldescription="Tìm sản phẩm theo từ khóa."
  toolautosubmit
>
  <label for="query">Từ khóa</label>
  <input id="query" name="query" type="search" required>
  <button type="submit">Tìm kiếm</button>
</form>

The example above is appropriate only when the search does not create, modify or delete data. Do not enable automatic submission for payments, orders, email delivery, data deletion, permission changes or actions that create a financial obligation. For these workflows, retain a user review step and require explicit confirmation.

If you need to return structured results to the agent

A conventional GET form can navigate to a results page without requiring separate JavaScript. If you want to process the request through an API and return a short result to the agent, register the processing promise as soon as the event is received; do not wait until after await fetch() before calling respondWith().

Place the following code in the JavaScript for the page containing the form, after the DOM includes the form. Replace /api/search with the actual endpoint, and ensure that the endpoint verifies the login session, access permissions and input data, and includes protection against duplicate submissions.

const form = document.querySelector('form[toolname="searchProducts"]');

if (form) {
  form.addEventListener('submit', (event) => {
    if (!event.agentInvoked) {
      return;
    }

    event.preventDefault();
    event.respondWith(handleAgentSearch(form));
  });
}

async function handleAgentSearch(form) {
  const data = new FormData(form);
  const query = String(data.get('query') || '').trim();

  if (query.length < 2) {
    return {
      ok: false,
      error: 'Từ khóa phải có ít nhất 2 ký tự.'
    };
  }

  try {
    const response = await fetch('/api/search', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ query })
    });

    if (!response.ok) {
      return {
        ok: false,
        error: 'Không thể hoàn tất tìm kiếm lúc này.'
      };
    }

    const result = await response.json();

    return {
      ok: true,
      resultUrl: result.resultUrl,
      count: result.count
    };
  } catch (error) {
    return {
      ok: false,
      error: 'Không thể kết nối đến dịch vụ tìm kiếm.'
    };
  }
}

This is an illustrative example, not code that can be deployed unchanged with every backend. Check the response structure before reading resultUrl and count; do not include tokens, internal error details, personal data or sensitive data in the result returned to the agent. If the website uses a CSRF token, session cookie or required custom header, retain those mechanisms in the existing backend flow.

Show status and allow cancellation

An agent should not make an action invisible. The Declarative API documentation describes the events toolactivated, toolcancel and pseudo-classes such as :tool-form-active, :tool-submit-active so that the interface can indicate the corresponding state (according to developer.chrome.com).

form:tool-form-active {
  outline: 2px dashed #2563eb;
  outline-offset: 4px;
}

form:tool-form-active::before {
  content: "AI agent đang chuẩn bị biểu mẫu — hãy kiểm tra trước khi gửi";
  display: block;
  margin-bottom: 0.75rem;
  color: #1d4ed8;
  font-size: 0.9rem;
}

This CSS snippet is only a visual indicator. Check contrast, do not obscure input fields, and do not use color as the sole signal. For consequential actions, provide clear text, a confirmation button and an obvious way to cancel.

Test in a compatible environment

Test on staging before deploying to production. Because WebMCP is still under development, the fact that an agent or browser works in this environment does not mean that every environment supports it (according to webmachinelearning.github.io).

1. Fallback: without an agent, submit the form as a regular user and confirm that the page or response remains correct.
2. Recognition: confirm that the agent sees the correct searchProducts and that no tools have duplicate names.
3. Schema: test a required field, an overly short string, an invalid data type and each value of select.
4. Confirmation: for data-writing actions, verify that the user can review, edit and cancel before submission.
5. Errors: simulate an expired login session, network errors, 4xx responses and 5xx responses; messages returned to the agent must be brief and contain no secrets.
6. Repeated calls: call the same tool multiple times to verify that it does not create duplicate records or transactions.
7. Logging: Log the tool name, timestamp, session or user, and outcome to the extent necessary; do not record all sensitive data.

How WebMCP is enabled and the level of support may vary by environment. OpenAI describes testing WebMCP in ChatGPT’s integrated browser and in Chrome through experimental features or an origin trial; read the documentation for the environment you intend to support rather than hard-coding a browser flag into your product documentation (according to openai.com).

Risks that must be handled in the backend

A tool description is not a security mechanism

tooldescription It only helps the agent understand the tool’s purpose. The server must still authenticate the session, enforce authorization for each user and record, validate data types and ranges, and apply rate limits.

Do not trust data submitted by the agent

Limit string lengths, item counts, and request sizes. Reject values outside the allowed set, normalize data on the server, and recheck the business state immediately before execution.

Control prompt injection and untrusted data

Product content, comments, or API responses may contain instructions intended to mislead the agent. The WebMCP draft identifies prompt injection, unintended action execution, and privacy leakage caused by overly broad parameters as risk categories that require consideration (according to webmachinelearning.github.io).

Distinguish read actions from write actions

Searching or filtering is generally easier to control than placing an order, submitting a legal form, or deleting an account. Require confirmation at the final step, use an idempotency key when necessary, and design for cancellation or undo where the business process allows it.

When should you use WebMCP, and when should you use a backend API?

Need	More suitable option	Reason
Let an agent use an existing form or browser flow	WebMCP Declarative API	Requires fewer interface changes while preserving the HTML fallback.
Provide functionality to multiple external applications	Backend API or MCP server	Provides more centralized control over authentication, versioning, limits, and monitoring.
Perform transactions involving significant value or elevated privileges	Backend with an explicit confirmation step	Do not hand over full control to the form description or automatic submission.
Allow an agent to read public content only	Structured HTML, semantic data, or a read-only API	Not every read-only task requires registering an executable tool.

Minimum implementation path

1. Choose a low-risk action such as searching or filtering.
2. Stabilize name, label, field types, and valid values.
3. Add toolname, tooldescription and descriptions of the required parameters.
4. Keep the manual confirmation step; do not enable toolautosubmit.
5. Test the fallback, schema, access permissions, errors, logging, and repeated calls in staging.
6. Expand to data-writing actions only after adding confirmation, idempotency protection, and a recovery plan.

In short, the safe way to begin with WebMCP for websites is to choose an HTML form with a clearly defined purpose, describe it with the Declarative API, and keep all important checks in the backend. Treat WebMCP as an agent-facing interaction layer, not a security layer or a replacement for an API. If the form has a fallback, clear parameters, an appropriate confirmation step, and realistic testing, the website will be easier for agents to use without excluding ordinary users.

Reference source

• WebMCP— Web Machine Learning Community Group, Draft Community Group Report, 10 September 2026.
• WebMCP and AI agents— Chrome for Developers.
• Declarative API— Chrome for Developers.
• WebMCP— webmachinelearning/webmcp GitHub repository.
• The WebMCP Challenge— OpenAI.