The window is closing. Chrome 146 Canary already ships WebMCP. Stable Chrome is expected mid-2026. Businesses that implement now will have 6-12 months of first-mover advantage before their competitors catch up.
Why This Matters More Than You Think
Right now, when an AI agent tries to use your website, it is essentially blind. It has to read the raw HTML, guess what your buttons do, simulate clicks, and hope it lands in the right place. This costs the agent 10x more in compute tokens, breaks constantly, and produces unreliable results.
The result: AI agents — and the users running them — will naturally gravitate toward websites that are easy to use programmatically. If your competitor implements WebMCP and you do not, their site becomes the default recommendation for any AI assistant helping a user in your market.
Step 1 — Audit Your Most Important Actions
Before writing a single line of WebMCP code, answer this question: What are the 5 things you most want a customer to do on your website?
These are your WebMCP tool candidates. Common examples by industry:
E-commerce
- search_products()
- add_to_cart()
- checkout()
- track_order()
Travel
- search_flights()
- search_hotels()
- book_trip()
- check_availability()
SaaS
- start_trial()
- schedule_demo()
- get_pricing()
- contact_sales()
Local Business
- check_availability()
- book_appointment()
- get_directions()
- view_menu()
Step 2 — Choose Your Implementation Mode
WebMCP offers two modes. Start with declarative — it is faster to implement and covers 80% of use cases.
Declarative Mode — HTML Attributes
Add webmcp-* attributes to your existing HTML forms. No JavaScript changes required. Your developer can implement this in hours, not days.
<!-- Before: standard HTML form -->
<form action="/search">
<input name="q" placeholder="Search products">
<button type="submit">Search</button>
</form>
<!-- After: WebMCP-enabled form (add 2 attributes) -->
<form action="/search"
webmcp-action="search_products"
webmcp-param-query="q">
<input name="q" placeholder="Search products">
<button type="submit">Search</button>
</form>Imperative Mode — JavaScript API
Use navigator.modelContext to expose complex, multi-step functions. Best for checkout flows, booking systems, and anything that requires business logic.
if ('modelContext' in navigator) {
navigator.modelContext.registerTool({
name: "book_appointment",
description: "Books a service appointment",
parameters: {
service: { type: "string" },
date: { type: "string", format: "date" },
time: { type: "string" }
},
handler: async ({ service, date, time }) => {
const result = await bookingAPI.create({ service, date, time });
return { success: true, confirmationId: result.id };
}
});
}The AX Implementation Checklist
Discovery
- Add a /.well-known/mcp.json manifest listing your WebMCP tools
- Include descriptive tool names and descriptions that AI agents can understand
- Submit your site to the MCPHubz WebMCP Verified directory
Core Actions
- Identify your 5 most important user actions (search, buy, book, sign up, contact)
- Implement WebMCP declarative attributes on your key forms
- Add imperative JS API for complex multi-step actions
Security
- Ensure all WebMCP tools operate within user session scope only
- Implement rate limiting on WebMCP tool calls
- Log all agent interactions for audit purposes
Testing
- Test with Chrome 146 Canary (available now)
- Verify tools return structured, machine-readable responses
- Test edge cases — empty results, errors, timeouts
Step 3 — Get Listed in the MCPHubz Directory
Once your WebMCP implementation is live, submit your site to the MCPHubz WebMCP Verified registry. This is how AI agents and their developers discover which websites are agent-ready.
Think of it as the equivalent of submitting your sitemap to Google Search Console — except instead of telling Google's crawler about your pages, you are telling AI agents about your tools.