Turning Websites into Toolboxes with WebMCP

The web is being redefined. For years, we’ve built websites for human eyes—focusing on pixels, layouts, and accessibility. But a new “user” has arrived: the AI Agent.

Until now, these agents have been like tourists in a foreign country. They don’t speak the local language, they wander around taking screenshots, and they hope that clicking a “Submit” button does what they think it does.

At MakerLabs, we believe the “Agentic Web” requires a fundamental shift. That’s where WebMCP (Model Context Protocol for the Web) comes in.

From Scraping to Tool-Calling

Currently, if you want an LLM (like Claude or GPT) to interact with your site, it usually has to “scrape” it. It reads the DOM, tries to find CSS selectors, and often breaks when you change a single class name. It’s fragile, slow, and burns through tokens.

WebMCP flips the script. Instead of the agent trying to guess how to use your site, your site explicitly hands it a toolbox.

How it works:

WebMCP—initially proposed by Google and Microsoft—introduces a way for websites to expose structured tools directly to the browser. The browser then acts as the bridge between the LLM and your application:

• Declarative API: Perform standard actions defined directly in HTML (like forms).
• Imperative API: The real power for builders. You can define JavaScript functions that the agent can call directly with structured data.

Imagine an agent saying, “I see this site has a check_inventory tool,” and calling it with exact JSON parameters, rather than clicking through multiple pages to find a status.

Why this is a Game Changer for Makers

WebMCP isn’t just another protocol—it’s a way to build more robust, “agent-ready” applications.

1. Rock-Solid Reliability: Since agents call tools rather than clicking pixels, your UI updates won’t break your agent integrations. As long as the tool schema stays the same, the agent keeps working.
2. Speed & Efficiency: No more sending massive DOM trees or thousands of screenshots to the model. You send a tool schema (the “what”), and the model sends back a function call (the “how”). It’s faster and significantly cheaper.
3. Controlled Access: You decide exactly what the agent can do. You aren’t giving it access to “the whole page” to click wildly; you’re giving it a set of specific, named capabilities.
4. Human-in-the-Loop: The browser acts as the ultimate gatekeeper. An agent can prepare an action (like filling out an invoice), but the human user is the one who sees a prompt and clicks “Approve” before the tool executes.

Real-World Scenarios

What does an “agent-ready” site look like in practice?

• Smart E-commerce: An agent could use a get_product_availability tool to find exactly what you need across multiple project variations, then use an add_to_cart_with_options tool to prepare your order for confirmation.
• Unified CRM/SaaS: Imagine a CRM site exposing an add_contact tool. You could tell your browser agent: “I just met this person, add them to my CRM,” and it would use the site’s native logic to do it perfectly, without needing a custom API integration for every single platform.
• Creative Workflows: Design tools could expose “Apply Style” or “Export Asset” tools. An agent could then perform complex multi-step edits through a structured interface rather than fighting with a complex GUI.

The Future is Agent-Ready

WebMCP is currently in early preview (starting with Chrome 146). It’s the first step toward a web that isn’t just readable for humans, but actionable for AI.

At MakerLabs, we’re already experimenting with these APIs. We believe the biggest builders of tomorrow won’t just build pages—they’ll build capabilities.

Ready to prototype?

WebMCP is available for early preview program participants. You can explore the official GitHub repository to see the spec or join the early preview program to start building the future of the agentic web.