How do you get started with WebMCP?
WebMCP is a newly proposed standard offering a way for websites to communicate more clearly with AI agents. The main goal is to make it easier for AI agents to understand how to use a website on behalf of users, instead of the agent having to do their best to figure things out.
With WebMCP, you can define how AI agents should interact with your website’s functionality (forms, features, etc.). This is especially useful for common actions like searching, submitting forms, or completing workflows that traditionally rely on user interaction.
There are two implementation approaches:
- Imperative API (JavaScript-based): This approach requires registering tools through JavaScript. It offers more flexibility, but requires more development work to explicitly define and structure tool behavior in code. This is better for more complex or custom applications. I wouldn’t recommend starting here.
- Declarative API (HTML-based): The declarative approach is much simpler and faster to implement. You add a small set of attributes directly to existing HTML forms and inputs. In many cases, this can be implemented in just a few minutes.
So, let’s walk through the Declarative API and the attributes we have available.
Form-Level Attributes
There are three attributes are added to the <form> element:
- toolname: A clear, descriptive name for the form. This helps the AI agent understand what the tool is meant to do. For example, “contact-form” or “search-products”.
- tooldescription: A short explanation of what the form does. This should provide more context than the name alone. For example, “Search products available on this website” or “Submit a request to contact customer support”.
- toolautosubmit: A boolean value (true or false) that controls whether the AI agent should automatically submit the form after filling it out. Be careful with this one and only use it where AI agents should submit something on a user’s behalf. Search forms are probably okay for agents to submit automatically but contact forms or anything involving personal or sensitive information probably shouldn’t be auto-submitted.
Input-Level Attributes
There are two attributes added to individual input fields:
- toolparamtitle: A human-readable title for the input field. This helps the AI agent understand what the field represents. For example, “Full Name”.
- toolparamdescription: A more detailed explanation of what should be entered into the field. For example, “Enter your full legal name”.
If these attributes are not provided, AI agents may fall back to existing signals such as <label> elements or ARIA attributes. However, explicitly defining them removes ambiguity and improves reliability.
WebMCP Example Form
Once you have all the fields added, your form will look something like this (WebMCP attributes are bolded):
<form id="contactForm"
toolname="contact-form"
tooldescription="Submit a request to contact customer support"
toolautosubmit>
<label for="name">Name</label>
<input
type="text"
id="name"
name="name"
toolparamtitle="Full Name"
toolparamdescription="Enter your full legal name">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
toolparamtitle="Email Address"
toolparamdescription="Enter an email so we can reply">
</form>How to Get Started
Okay, but should you actually implement WebMCP? So long as it is an easy addition, I think it makes sense to add attributes to <form> fields (the declarative API). Keep in mind that these attributes won’t break existing functionality either. By adding these fields, you can likely improve agentic interaction so that agents don’t have to make their best guess about how forms work and instead you can more explicitly shape how agents are using your website.