How to Integrate WebMCP into Your Forms

Imagine a user asking an AI assistant to “book an appointment with Hairdresser Hansen on Wednesday.” The AI visits your website, but it cannot “see” buttons and fields the same way we do.

WebMCP is a method used to help the AI quickly understand how to navigate and use your website.

This can be done via the Imperative API, which uses advanced JavaScript to make functions available directly to the AI without it interacting with your visible website elements. This typically requires assistance from a developer.

However, there is a simpler method perfect for standard forms—the Declarative API. This is the ideal approach for simple forms and for those without a developer background. This method works by placing invisible “explanatory notes” directly onto your form elements.

These notes tell the AI exactly:

  • Which form it is (e.g., “Book an appointment”).
  • Which fields need to be filled (e.g., “Date” and “Name”).
  • Whether the AI is allowed to click “Submit” on behalf of the user.

By adding this information into attributes within your HTML, you allow AI assistants to operate your website rapidly and flawlessly for the user.

Attributes are small content elements placed inside HTML tags. See this example:

<form>
  <input attribute="attribute_value">
  <button attribute="attribute_value">Send</button>
</form>

The 5 WebMCP Attributes You Need to Know

Attributes can be divided into two groups: those applied to the form itself and those applied to individual input fields.

1. Attributes for the Entire Form (<form>)

These attributes provide the AI with the “big picture” of what the tool does.

  • toolname
    • What it is: A unique, technical name without spaces.
    • Purpose: Gives the AI a “button” in its system that it can trigger.
    • Example: toolname="book_appointment" or toolname="contact_support"
  • tooldescription
    • What it is: A short, precise sentence describing the purpose.
    • Purpose: This is the most important field! The AI reads this to determine if the form can solve the user’s problem.
    • Example: tooldescription="Book a haircut appointment for a specific date and time."
  • toolautosubmit
    • What it is: Set to "true" or "false" (or omitted).
    • Purpose: Controls whether the AI is allowed to click the “Submit” button itself (true), or if it should only fill the fields and let the user review and click submit manually (false).

2. Attributes for Input Fields (<input>, <select>, <textarea>)

These attributes tell the AI exactly what to enter into each specific field.

  • toolparamtitle
    • What it is: A short header for the field.
    • Purpose: Provides the AI with a clear name for the information it needs to provide.
    • Example: toolparamtitle="Customer Name"
  • toolparamdescription
    • What it is: An elaboration on the required data format.
    • Purpose: Ensures the AI doesn’t make mistakes—for instance, entering “12:00” instead of “Afterwards.”
    • Example: toolparamdescription="The full name of the customer booking the appointment"

Example

Here is an example of a standard contact form—and how it looks once you’ve added the “invisible Post-it notes.”

HTML code WITHOUT WebMCP:

<form>
  <label>Your Name</label>
  <input type="text" name="name" />
  <button type="submit">Send Message</button>
</form>

HTML code WITH WebMCP:

<form 
  toolname="contact_us" 
  tooldescription="Send a message to our customer support team" 
  toolautosubmit="false"
>
  <label>Your Name</label>
  <input 
    type="text" 
    name="name" 
    toolparamtitle="User Name" 
    toolparamdescription="The full name of the user sending the message" 
  />
  <button type="submit">Send Message</button>
</form>

Humans still just see “Your Name” and “Send Message.” The AI sees the English manual.

Best Practices for WebMCP

  • Always write in English for the AI
    Regardless of the language of Your website, WebMCP attributes should be in English. AI models are primarily trained on English.
  • Using Autosubmit:
    • Only set toolautosubmit="true" for low-risk actions, such as searching for a product or filtering a list.
    • Never set toolautosubmit="true" for forms that send emails, transfer money, book binding appointments, or delete data. In these cases, a human should always oversee the AI and click “Approve” themselves.
  • Be Specific in Your Descriptions
    The better you describe the tool in the tooldescription, the smarter the AI becomes. Think of it as handing over a task to a very literal intern.