← AI Catalyst C3All programsHomeSearch
AI Catalyst C3·Core Session - Week 17·1:40:23

Make Websites Agent-Ready with WebMCP: Front-End Tools for Browser Agents, the Tool Menu, MCP vs WebMCP, and a New Service Offer

Harshit Tyagi Outskill programme director - teaches the session live with a self-built demo site ('Field Notes') and Codex · Shivani Outskill community manager - opens the call, launches the CSAT poll, confirms LMS uploads

The short version

  1. WebMCP is a web standard that lets a website publish a menu of its own on-page operations (search, date pickers, filters, compare) to visiting browser agents as named tools with JSON schemas - so the agent calls 'search stays' once instead of clicking and screenshotting its way through widgets (0:06-0:26).
  2. It is front-end and in-tab: no backend, no API endpoints, no login persistence. Ordinary MCP runs server-side from the vendor's engineers; WebMCP runs client-side in an open browser tab with a human in the loop. Close the tab and it is gone (0:42-0:57).
  3. Live demo on a fictional stay-booking site in three git branches: plain site driven by clicks and screenshots; then a webmcp.js exposing search_stays; then a full journey with search, compare and get-code tools, tracked in an on-page inspector (0:30-1:20).
  4. Two APIs: imperative (tools registered in JavaScript with a JSON schema - the one to use) and declarative (annotate HTML forms directly). The tools attach to application logic, not design, so a redesign does not break the agent (1:07-1:13, 0:57).
  5. The commercial angle: do not sell 'WebMCP' - sell traffic and bookings from AI agents to marketplaces, travel, jobs, e-commerce and support-heavy sites; give the coding agent the Chrome/WebMCP docs URLs and have it refactor the site; idea of a Shopify app; audits as a lead-in (1:01-1:24).

At a glance, three clicks deep

Skim here first: the closed row is the glance, open is the study card with the key points and timestamps, and the ↓ link drops to that concept's full write-up below.

01Why sites need to be built for agents - and the new service offerAgents replace clicking humans on form-heavy sites;0:06:51›

Agents replace clicking humans on form-heavy sites; WebMCP makes the site legible to them; the sellable offer is agent-driven business.

Browser agents are slow: snapshots, guessing, widgets (0:08-0:11)

Owners will not build MCP servers but want agent traffic (0:11-0:15)

A new service, like SEO (0:13-0:17)

'Agents should not replace interfaces, they should unlock them' - Stripe, Vercel CEO comments (0:17-0:19)

↓ Full write-up of this concept

02What WebMCP is: a web standard, like ARIA labels and alt text, for the tools on a pageA client-side web standard for a page to register named, schema-described tools that browser agents can call.0:22:00›

A client-side web standard for a page to register named, schema-described tools that browser agents can call.

Each field or operation is a tool (0:22-0:26)

Analogy to accessibility standards (0:24-0:27)

Actuation vs structured calls (0:26-0:29)

Description text is the context the agent uses (0:32-0:36)

↓ Full write-up of this concept

03MCP vs WebMCP: backend vs front end, no browser vs browser tab, no human vs human in the loopMCP = backend, headless, vendor-owned.0:42:54›

MCP = backend, headless, vendor-owned. WebMCP = front end, in a browser tab, site-owner-owned, human in the loop.

Backend vs front end; who has access to what (0:44-0:47)

MCP needs API endpoints wrapped as tools (0:47-0:49)

Token savings and the Amazon vs own-SaaS example (0:49-0:51)

Sessions: WebMCP lives only while the tab is open (0:57-0:59)

↓ Full write-up of this concept

04The live demo: plain site, then one tool, then a full journeyA three-branch before/after demo of agent operation on a booking site.0:30:15›

A three-branch before/after demo of agent operation on a booking site.

Branch 1: click-driven (0:30-0:32)

Branch 2: webmcp.js (0:32-0:38)

Branch 3: journey inspector (1:16-1:20)

↓ Full write-up of this concept

05The tool schema: what 'annotated' means and how the site tells the agentA JSON schema per tool: name, description, input types, enums, ranges.0:59:28›

A JSON schema per tool: name, description, input types, enums, ranges.

Types, enums and ranges (0:59-1:03)

Delivered on page load, invisible to users (1:01-1:03)

Let the coding agent write it from the docs (1:03-1:05, 1:20-1:22)

↓ Full write-up of this concept

06Imperative vs declarative APIs, and what the standard supportsImperative = JS-registered tools;1:05:36›

Imperative = JS-registered tools; declarative = annotated forms.

Discovery, schemas, state (1:05-1:06)

Imperative vs declarative (1:09-1:11)

↓ Full write-up of this concept

07Where to apply it: marketplaces, travel, jobs, support flows, e-commerce, ShopifyBest fit: many filters, agent-driven purchase or booking, no vendor MCP.0:38:51›

Best fit: many filters, agent-driven purchase or booking, no vendor MCP.

Marketplaces and portals (0:38-0:42)

Support-flow routing; GoDaddy story (1:05-1:09)

Official shopping-journey scenario (1:11-1:14)

Shopify app idea; e-commerce; apps out of scope (1:20-1:24)

↓ Full write-up of this concept

08Benefits, browser support, and honest limitsFast, reliable, design-proof, beta, browser-only, tab-bound.0:51:10›

Fast, reliable, design-proof, beta, browser-only, tab-bound.

Speed, reliability, control (0:51-0:53)

Chrome flags; beta; ChatGPT browser (0:53-0:55)

Design-independence (0:55-0:58)

Session and app limits (0:57-0:59, 1:20-1:22)

↓ Full write-up of this concept

09Q&A and close: app-building weekend, AI filmmaking, no slowdown, and the ask for tractionAnnouncements, filmmaking pointer, opinion on AI pace, traction ask.1:24:40›

Announcements, filmmaking pointer, opinion on AI pace, traction ask.

App development weekend and animation poll (1:24-1:27)

AI filmmaking pointer (1:27-1:31)

Not-interested websites, Chrome extension ideas (1:30-1:33)

Opinion: no slowdown (1:33-1:36)

The ask for action at office hours; CSAT (1:36-1:39)

↓ Full write-up of this concept

The concepts in full

01

Why sites need to be built for agents - and the new service offer

0:06:51

People are about to send agents to your website instead of visiting it. A site the agent cannot operate loses that business.

Every website has forms - search bars, date ranges, filters, sort - and browser agents handle them slowly: they snapshot the page, guess where to click, fumble drop-downs and date-pickers, and sometimes get stuck. As more people delegate booking and buying to agents, the site that lets the agent act reliably gets the traffic. Harshit frames this as a new service like SEO: an owner of a small hotel chain or shop does not know or care what an MCP is, but wants agent-driven customers. The pitch is not 'I will enable WebMCP' - it is 'your site is not ready for AI agents, and I can fix it or build a new one with this built in'.

Worked example · from the session

A traveller tells an agent: long weekend, four people, under a budget, in a location. Today the agent grinds through Airbnb or Booking.com filters; on a WebMCP-enabled site it calls one search tool.

Why it matters

A concrete, sellable variant of 'build for agents' - and the same reachable-market logic as the distribution sessions.

Agents should not replace interfaces, they should unlock them.0:17:24
The offer is not, I will enable WebMCP for your website. You have to tell them that I'm going to get you traffic and business from AI agents.1:03:29
02

What WebMCP is: a web standard, like ARIA labels and alt text, for the tools on a page

0:22:00

Publishing a menu of what your website can do, in a form an agent can read.

WebMCP is a standard for exposing structured tools from a web page. Each operation on the page - the search field, the date picker, the guest counter, a filter - becomes a tool with a name, a description and a JSON schema of its inputs. Harshit likens it to accessibility standards: ARIA labels and image alt text exist so a screen reader can describe a page; WebMCP exists so an agent can operate one. Everything an agent needs is context, so clearly described fields are the whole game. A typical form-heavy site has 10-20 such tools; a marketplace like a directory or classifieds site could have around 100. The old term for what browser agents do today is 'actuation' - simulating mouse clicks and typing as though they were the human user; WebMCP turns that into a single structured call.

Worked example · from the session

In the demo, the search-stays tool's description reads like a spec: searches the stay inventory for a trip, filters by destination, dates, guests, bedrooms, total price including fees and tax, amenities and free cancellation, updates the visible results and returns IDs for later tools.

Why it matters

Understanding it as 'annotation for agents' removes the intimidation - it is labelling, not a new backend.

It's basically like publishing a menu of all the tools, all the operations available on my website.0:13:00
03

MCP vs WebMCP: backend vs front end, no browser vs browser tab, no human vs human in the loop

0:42:54

Your Gmail MCP never opens your inbox in a tab. WebMCP only exists inside one.

Ordinary MCP is provided from the vendor's backend by its engineers: you connect Gmail or a project-management tool to your coding agent and the data flows from the servers, no tab opened, available any time, running in the cloud if you like. WebMCP is client-side and UI-oriented: it exists only on the website in an open browser tab, built for browser agents, with a human in the loop (you still look at the product before buying). It reduces token use because the agent does not spend turns discovering where to click. Which to choose depends on ownership: Harshit's own marketing-metrics SaaS already has an MCP, so it is a poor WebMCP example; Amazon has no MCP for shoppers and huge filters, so it is a strong one. He also stresses you still need to be the site's front-end engineer - WebMCP does not let you add tools to someone else's site.

Worked example · from the session

Glued (his tool that pulls Google Ads, TikTok and Meta metrics into a coding agent) is MCP-shaped. A marketplace search page is WebMCP-shaped.

Why it matters

The distinction decides which product to build or offer.

People get this wrong

I can add WebMCP to Amazon (or any site I visit) to make my agent better.

WebMCP is added by whoever controls the site's front-end code; it is not something a user or third-party can bolt on - a Chrome extension route was only mentioned as a possibility.

MCP is run on backend, WebMCP is frontend.0:42:54
04

The live demo: plain site, then one tool, then a full journey

how-to0:30:15

Same prompt, same agent - the only thing that changed is the site publishing its tools.

The demo isolates one variable. On branch 1 the site is plain HTML and the agent operates it like a person. On branch 2 the site registers a tool, and the identical request resolves in one call. On branch 3 a small set of tools supports a whole journey - search, compare, then fetch the booking code - with an on-page console proving which calls came from WebMCP rather than clicking. Harshit says the tools were written by asking a coding agent, not by hand.

Do it in this order

Gotchas['The demo site is fictional and his own - the attendees cannot run the exact prompt; he offers to share the guide and prompt', 'The first run misread the budget as per-day vs total until he corrected it - agents ask clarifying questions rather than guess', 'Restarting the dev server was needed to pick up the latest branch code']

Why it matters

It is a reusable test rig: identical prompt, before/after branches, an inspector that logs tool calls.

05

The tool schema: what 'annotated' means and how the site tells the agent

0:59:28

Annotated just means labelled - with the type, the allowed values, the limits and a plain-English description.

Each field in the search tool gets a schema entry: destination is a string limited to three allowed values, described as the city to search; check-in and check-out are dates; guests is an integer with minimum 1 and maximum 12, described as total guests; further fields cover minimum bedrooms, maximum total price, amenities, free cancellation and sort order. The page loads this script with everything else; agents receive it behind the scenes as soon as the page loads, from the front end, and never see a visible change. The site owner does not hand-write it: the practical route is to tell a coding agent to add a JSON schema for the form fields and give it the WebMCP documentation. 'If it is a drop-down, it will be an enum with options'.

Worked example · from the session

guests: integer, minimum 1, maximum 12, description 'Total guests'. destination: string enum of Goa, Jaipur, Bangalore, description 'City to search'.

Why it matters

Quality of description text determines agent reliability - this is where the craft is.

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

What does a tool schema tell an agent that a plain HTML form does not?

The allowed values, types and limits of each input, plus a plain-English description of the operation

Who should write the schema?

A coding agent, given the WebMCP docs and the site's form fields - reviewed by the site owner

06

Imperative vs declarative APIs, and what the standard supports

1:05:36

Register tools in JavaScript (imperative) or annotate the form itself (declarative).

The standard supports discovery (a standard way for a page to register tools), JSON schemas for inputs, and state (a shared understanding of the current page context, so the agent knows what it can act on in real time). Two APIs: imperative - define tools with standard JavaScript for form inputs, navigation, state management or other functions; declarative - add annotations directly to standard HTML forms with no extra JavaScript. Harshit recommends the imperative API in most cases, calls the technical detail skippable for non-developers, and points people to the official WebMCP versus MCP and 'when to use WebMCP' guides. Both ChatGPT's browser and Chrome are implementing it.

Why it matters

Tells you which API to ask the coding agent to use, and which docs to hand it.

07

Where to apply it: marketplaces, travel, jobs, support flows, e-commerce, Shopify

0:38:51

Anywhere a human would otherwise scroll through a hundred filters.

Harshit's candidate list: marketplaces and classifieds (Craigslist, Zillow, Just Dial, eBay), job portals, Amazon-style catalogues, Booking.com-style travel, and support-heavy sites where finding the right form is the problem (he describes struggling to find the right GoDaddy support route for an expired domain). Official use cases: customer support (route the agent to the right form and fill the fields), travel booking, structured forms, support-agent interactions, and application debugging. The official 'shopping journey' example: a parent asks an agent to price a birthday shopping list across two or three stores and build a wishlist; the store's tools - product search, add to wishlist, refine search by price, repeat purchases - are what make that possible. Commercial ideas: a Shopify app that brand owners install to become WebMCP-enabled (Shopify may also do it natively); Instamart-style stores; a Chrome extension layer; audit reports as a sales lead-in. Native mobile apps are out of scope - WebMCP is browser-only; a follow-up on iOS/Android app building was announced.

Worked example · from the session

Just Dial-style directories: '100-odd operations' that make agents lose their way; tagging them properly is the deliverable.

Why it matters

Gives concrete target segments that pass the pain and reach tests from part 1.

08

Benefits, browser support, and honest limits

0:51:10

Faster, more reliable, design-independent - and still beta, still a human in a browser.

Benefits: speed (one call versus a snapshot loop), reliability (tools use the browser's own internal systems), fewer tokens, and control over how agents interact with your site. Because tools attach to application logic, the agent still finds the feature after a redesign; only renaming or removing parameters breaks it. Support: in recent Chrome you enable WebMCP support and the developer-tools flag under Chrome flags and relaunch; the feature is in beta; ChatGPT's browser has enabled it; Chrome, ChatGPT and others ran a challenge exploring what people build. Limits stated: no persistent login or session (tab must remain open), browser only (apps will not work), only useful if the site owner wants agents to visit, and the human is still in the loop. To check whether a site has it, ask your coding agent to inspect the site for WebMCP tools.

Why it matters

Sets expectations honestly before you promise a client anything.

People get this wrong

WebMCP works like an MCP server: always on, headless, with my login.

It only works while the site is open in a browser tab and disappears when the tab closes.

09

Q&A and close: app-building weekend, AI filmmaking, no slowdown, and the ask for traction

1:24:40

Next weekend brings mobile app development and character animation; this Thursday's office hours want proof of distribution.

Harshit polls interest in a beginner iOS/Android app session (Saturday) and Duolingo-style character animations (Sunday), with a guest expert he has hired before; possible add-on on analytics and user behaviour. A cohort member asks about AI filmmaking: the described method - begin and end frames per scene, roughly 8-second generations, then joining and editing - is possible with video models and an editor, but is a field in itself, so he defers to a former student. On whether agentic AI will slow down after lab calls for restraint, he thinks not - the labs shipped new models straight after and cannot slow given the money invested; he suspects some doom messaging is attention marketing. He asks the cohort to bring monetization and distribution actions - first sign-ups, outreach counts, tactics - to Thursday's office hours. The CSAT poll is launched; resources will be on the LMS.

Why it matters

Course logistics and the accountability nudge carried from part 1.

This idea elsewherecontinuesWeek 17 part 1 Q&A

Tools referenced

ToolCoverageMomentContext
Codex (OpenAI)demonstrated0:21Browser agent used for all three demo branches
ChatGPTexplained0:53Its browser has WebMCP enabled
Claude Codementioned1:28Alongside Codex for video editing
Vercelmentioned0:19Founder bullish on WebMCP; a support-flow example
Stripementioned0:17Announced WebMCP for agent payments in the browser (as shown on X)

Session materials

Archived locally on V: — click to open. Companion pages link to the LMS.

Action items

Resources mentioned

Resources
  • docChrome WebMCP documentation (and 'WebMCP versus MCP' and 'when to use WebMCP' guides) 0:36:00
  • docInstruction to the coding agent: 'use the imperative API to enable WebMCP on this website' then test 1:13:57
  • docDemo prompt: find properties in Goa for 3 guests under a budget, next week 0:30:15
  • docSession resources (from this and the previous session)

Extraction notes

This page was built from an auto-generated transcript, which garbles product and people's names. Those were corrected silently in everything above and logged here for transparency. The warnings flag claims that were true on the recording day but change fast.

Transcript corrections applied

The transcript saysThe trainer actually means
Web MCV / VEVA MCP / WebCP / WebMCPGWebMCP
Mother in our browserthe agent's built-in browser (Codex)
Borchert stays / Search frictional stayssearch stays / search fictional stays
GluedGlued (Harshit's own metrics tool) - spelling as heard
Knockery.comNaukri.com (job portal)
Deborah is the front end only'the HTML/CSS is the front end only' - garbled
ChatGPDChatGPT
Haydwayunclear - a product he says Outskill is building on; unverified

True on recording day — verify before relying