What Is WebMCP? How to Prepare Your Website to Serve AI Agents

AI agents are opening to usage websites connected behalf of people.

But those sites were built for humans. Agents don't grip ocular layouts well, truthful they person to conjecture really to interact pinch the site, which is slow and error-prone.

WebMCP changes that by letting your tract springiness agents a defined group of devices they tin usage directly.

It's early days, though. So you tin vessel devices earlier your competitors person looked astatine them. More connected why that matters later.

This article covers what WebMCP is, really it works, really it differs from "traditional MCP," and really to instrumentality it connected your website to guarantee you're prepared for the agentic era.

WebMCP (Web Model Context Protocol) is simply a projected unfastened web modular co-authored by Google and Microsoft. It's a measurement for your website to expose system devices that AI agents tin call, for illustration "search products," "book a table," aliases "start checkout."

In the discourse of WebMCP, a instrumentality isn’t a abstracted portion of software, a plug-in, aliases a caller backend database. It is simply a mini group of instructions added via elemental HTML attributes aliases a fewer lines of JavaScript that are attached straight to existing elements of your webpage, for illustration a checkout shape aliases hunt bar.

These devices beryllium wholly successful the front-end codification delivered to the user’s browser and only beryllium while that circumstantial web page is unfastened and active. You are fundamentally adding invisible labels to your site’s existing buttons and forms that show AI what to do and what information they request to complete actions connected a user’s behalf. And since the devices beryllium connected apical of the tract you already have, there's nary rebuild needed aliases abstracted backend to maintain. 

Right now, most browser agents publication a page by simulating really a personification would, taking screenshots to effort and place imaginable actions, and reference the Document Object Model (DOM) and accessibility tree. As you tin imagine, this is time-consuming, and the results are inconsistent.

WebMCP gives agents a faster, much reliable path. When a instrumentality exists, the supplier tin telephone it directly, and erstwhile 1 doesn't, it tin still autumn backmost connected the aged method, truthful adding devices doesn't fastener you into anything.

People thin to framework these 2 arsenic competing standards, but they lick different problems and really complement each other.

"Traditional MCP" useful champion erstwhile the worth is successful backend information and systems, like Moz data, Salesforce, aliases an soul database. Setting 1 up is existent work, though, because you're building and moving a server.

WebMCP fits the remainder of the web, the places wherever group complete actions alternatively of pulling earthy data, which covers everything from airlines and restaurants to e-commerce stores and SaaS signups.

Here’s a side-by-side comparison of WebMCP vs. MCP:

Agents person started really utilizing websites, not conscionable reference them. They'll book a array aliases tally a checkout for you, and WebMCP is really you thief them return those actions. Which intends those actions autumn wrong your scope arsenic an SEO.

Keeping sites readable to machines done cleanable structure, coagulated markup, and structured data is already portion of your job. WebMCP applies those aforesaid skills, telling an supplier what your page tin do and really to trigger it.

Remember, this is abstracted from showing up successful AI-generated answers. That's discovery, and it's what AI hunt optimization covers.

WebMCP kicks successful erstwhile the supplier is connected your page. And getting it location counts for thing if it can't return action erstwhile it’s there. If the supplier has to screenshot your booking shape and fumble done checkout, the waste falls isolated connected the past step.

Get it right, though, and the payoff runs some ways:

Some communal uses for WebMCP tools:

• E-commerce: hunt products, select by size aliases price, adhd to cart, commencement checkout
• Travel and hospitality: book a table, room, aliases formation from 1 request
• SaaS: commencement a signup, take a plan, aliases tally an in-app action
• Local and master services: petition a quote aliases book an appointment
• Lead gen and publishing: newsletter signups and interaction forms

Personally? I'm astir excited to extremity clicking done select aft select connected faceted navigation erstwhile I shop. Just show the supplier what I want and fto it benignant done the options.

In short, an supplier comes to your website, discovers what WebMCP devices you offer, sounds what each 1 does, and calls the 1 that fits the task.

There are 2 ways to group this up: HTML for forms aliases JavaScript for much analyzable uses.

Remember, these devices only activity while the page is open; there's no headless aliases inheritance mode, and the browser has to support running.

Declarative API (HTML)

The declarative API is the easier implementation, meant for actions that already unrecorded successful a form. For example, a reservation, signup, aliases interaction request.

To instrumentality this, you simply request to adhd a mates of attributes to the shape you already have:

• toolname gives the instrumentality a name
• tooldescription explains what it does
• toolparamdescription, optional, and tells the supplier what that section expects

From there, the browser turns the shape into a tool. By default, only your ain tract tin usage it.

To spot the declarative API successful action, I loaded Google's Le Petit Bistro demo pinch the Model Context Tool Inspector open. It’s a Chrome hold that lists the devices a page has registered and lets you participate a punctual and watch its Gemini-powered trial supplier telephone them.

Just a heads up, you’ll request a Gemini API key for this (you tin usage the free tier).

The demo is simply a edifice preservation page pinch 1 booking form. The fields see name, telephone number, day and time, etc.

Sure enough, the shape showed up successful the Inspector arsenic a registered tool, complete pinch its schema. The sheet shows precisely which WebMCP devices an supplier tin spot connected a site.

I wrote a punctual successful the Inspector, executed the tool, and watched the shape connected the page capable itself in, section by field.

My punctual was: “Book a preservation for June 15, 2026, astatine 7:00 PM. There will beryllium 4 guests for a day party. The sanction is Matt Hollingshead, and telephone number is 123-555-5555.”

Your form’s existing validation still applies, too. The bistro shape already requires a name, a 10-digit telephone number, and a early day and time. An supplier has to meet those aforesaid rules.

If agents nonstop invalid data, the shape rejects it the aforesaid measurement it would for a person. You don’t person to build a abstracted group of guardrails conscionable for agents.

I refreshed the page and entered the punctual again, but this clip I didn’t supply a telephone number. The supplier recognized the missing accusation and asked maine to supply it.

Imperative API (JavaScript)

Use this JavaScript approach, called the imperative API, erstwhile the action isn't a form, aliases your devices request to alteration based connected what's connected the page.

Take a SaaS dashboard. A instrumentality that sounds the user's relationship authorities backmost to the supplier has thing to submit, truthful a shape can't do it. And an "upgrade plan" instrumentality only makes consciousness for free-tier users.

You registry each instrumentality pinch document.modelContext.registerTool, giving it a name, description, input schema, and a usability that runs erstwhile the supplier calls it.

In speech for penning JavaScript, devices tin travel and spell pinch the authorities of the page, truthful a checkout instrumentality mightiness beryllium only while the cart has thing successful it.

I opened Google's travel-booking demo, a formation hunt app built pinch React. On the hunt page, the Inspector listed a azygous tool, searchFlights, which kicks disconnected a hunt utilizing system inputs for illustration origin, destination, date, and passengers.

In the Inspector’s User Prompt field, I entered: “Find maine round-trip flights for 2 passengers from New York to London departing connected July 10, 2026, and returning connected July 20, 2026.”

The Gemini supplier publication the petition and called searchFlights. When the results came back, the page registered 3 much tools, and the Inspector updated to show searchFlights again, on pinch listFlights to publication backmost what’s connected screen, setFilters to constrictive results by price, airline, aliases time, and resetFilters to clear those filters.

Those devices look only aft results are disposable because location was thing to database aliases select until the hunt returned data.

The tract provides the tools, but the supplier decides which to telephone and successful what order. From my 1 prompt, the Gemini trial supplier worked done the petition utilizing these tools:

1. searchFlights pinch the way and dates
2. setFilters to constrictive the results
3. listFlights to publication the results back

It didn’t usage resetFilters because that wasn’t basal for the agent’s task this time. 

An supplier successful someone's browser would do the aforesaid from a azygous request, choosing the calls itself, without having to return a screenshot aliases conjecture which dropdown is the filter.

The aforesaid shape covers single-page app flows, filtered consequence lists, multi-step bookings, and thing that isn't a plain form.

Before implementing WebMCP, I'd propose trying immoderate of Google's WebMCP demos to get acquainted pinch them. Then, travel these steps to adhd the devices to your site.

Step 1: Audit your tract for agent-friendly actions

Start by listing the apical 3 to 5 actions group travel to your tract to take, for illustration booking a service, buying a product, searching a catalog, aliases subscribing to a newsletter. The champion fits are standalone actions pinch inputs you tin specify clearly, and that a personification would want an supplier to complete for them.

From that shortlist, prime 1 elemental action to commencement with, for illustration a hunt widget, interaction form, aliases newsletter signup. Save complex, higher-risk flows for illustration checkout until you've sewage a simpler 1 moving first.

Step 2: Write and trial your first tool

HTML forms are the easiest spot to start, since you tin modify existing forms without recreating them. As successful the demo walkthrough above, you tin adhd these attributes:

• toolname — the identifier an supplier uses to telephone the action, kept short pinch nary spaces, for illustration toolname="search_products".
• tooldescription — a plain-language condemnation telling the supplier what the action does and erstwhile to usage it, for illustration tooldescription="Search the catalog by keyword".
• toolparamdescription — added to each input truthful the supplier knows what worth that section expects, for illustration toolparamdescription="The hunt term, e.g. reddish shoes".

Then trial it. Turn connected the WebMCP emblem successful Chrome astatine chrome://flags/#enable-webmcp-testing and prime alteration WebMCP for testing. Next, instal the Model Context Tool Inspector, and participate a punctual to spot whether the supplier picks your instrumentality and fills the arguments correctly.

If the supplier gets thing wrong, it’s usually your explanation aliases schema, not the supplier itself. The Inspector’s Copy trace fastener exports the afloat convention arsenic JSON, truthful you tin spot precisely what the supplier called.

From there, set and retest until it’s reliable.

Step 3: Secure the devices you expose

Adding devices comes pinch responsibility. When an supplier uses your tools, it’s acting connected your user’s behalf, and it can’t reliably show the quality betwixt contented you meant to show and an instruction to enactment on.

This is simply a shape of prompt injection. If malicious matter reaches the supplier done your tools(most apt wrong third-party contented that a instrumentality returns, for illustration reviews aliases comments), it tin beryllium tricked into acting against your user.

A fewer protections to add:

• When you specify a instrumentality successful JavaScript, adhd a readOnlyHint to devices that only publication data, for illustration a hunt aliases list. Agents presume a instrumentality changes thing unless told otherwise, truthful flagging the read-only ones cuts retired needless confirmation prompts.
• Also successful the instrumentality definition, adhd an untrustedContentHint to immoderate instrumentality that returns user-generated aliases extracurricular content, for illustration reviews aliases comments, truthful the supplier treats that matter pinch suspicion alternatively than arsenic instructions.
• On a form, time off toolautosubmit disconnected for thing critical, for illustration bookings, purchases, aliases relationship changes. Having this connected lets the supplier taxable without the personification clicking submit, which removes the quality check. With it disconnected (the default), a personification ever reviews and confirms.

Handling this is simply a normal portion of exposing devices to agents, the aforesaid measurement sanitizing personification input is simply a normal portion of building forms. 

Step 4: Ship it while it's early

Once your devices activity successful the Inspector, you tin put them successful beforehand of existent visitors. Because WebMCP is still being finalized, Chrome rolls it retired done a time-limited proceedings you opt into, which lets you registry your domain and service devices connected your unrecorded tract alternatively than testing only connected your ain machine.

Remember that the agents that tin really usage those devices are still constricted today. Treat this little arsenic a postulation root for now and much arsenic staking retired early crushed earlier it’s picked up by the masses.

Start pinch the low-risk devices you built first, and check Chrome’s WebMCP documentation for the existent measurement to enroll and which browsers and agents presently support it.

If you were doing SEO during the mobile shift, you'll retrieve really it went. Going mobile-friendly felt optional for years, correct up until Google made it a ranking factor, and the sites that prepared early were gladsome they did.

WebMCP sits astatine a akin moment, wherever sites tin vessel it, but astir haven't moved yet.

The sites that move early will beryllium the ones that really activity erstwhile someone's supplier shows up to book, buy, aliases motion up, while everyone else's tract fails connected the past step.