Java World Knowledge Sharing Portal

The evolution of web development has been a wild ride. We started with clunky Java AWT and Swing desktop apps , moved to Servlets and JSP for the server-side UI, and eventually saw JavaScript grow from a simple validation tool into the powerhouse of TypeScript frameworks like Angular, React, and Vue.

But the winds of change are blowing again. We are entering the Agentic Era , where AI agents—not just humans—are the primary “users” of our applications.

The Rise of the AI Agent

Imagine a SaaS application where you don’t manually click through menus. Instead, you tell an AI:

“Find all tickets open for more than a week and escalate them to the team lead.”

The agent understands, navigates, and executes. But how does it “see” the site? We have three main options:

Computer Vision / DOM Scraping: The agent “looks” at screenshots. It’s cool, but token-heavy, slow, and expensive .
Standard MCP Servers: Great for giants like GitHub, but nobody wants to build and host a custom server for every small internal tool .
WebMCP: The middle ground. Your website “talks” directly to the agent using structured tools.

What exactly is WebMCP?

WebMCP allows a website to tell an AI agent exactly what it can do through structured schemas. Instead of the agent guessing where to click, the website exposes its functions as tools.

Feature	Browser Automation (Vision)	Traditional MCP	WebMCP
Speed	Slow (seconds)	Fast	Blazing Fast (milliseconds)
Cost	High Token Usage	Medium	Minimal Tokens
Reliability	Non-deterministic	High	High
Setup	Easy	Complex	Integrated

How to use WebMCP Today

WebMCP is an emerging standard. To test it out, you’ll need a specific environment:

Chrome Canary: Download Chrome Canary (Version 146+).

Enable Flags: Go to chrome://flags and search for Web MCP to enable it.
The Interface: Install the Model Context Tool Inspector extension. This acts as the bridge between the agent and the site.

See it in action

Check out this French Bistro Demo. Once you add your Gemini API key, you can simply type:

“Book a table for 2 on March 15th at 7 PM under John Doe.”

The agent calls the website’s internal functions directly to book the table!

Building a WebMCP-Enabled Site

Let’s build a simple Ticket Management System using HTML and JavaScript and make it “Agent-Ready.”

Step 1: Create the Base Site

Using an IDE like Antigravity and Gemini, we generate a simple dashboard to:

Display tickets (ID, Name, Description, Status).
Search for tickets.
Create and Edit tickets.

Prompt:-

Create web site with simple html and javascript that has three fucntionality. Dashbard or landing page that will display the ticket in table format with column as id, name of ticket, description of ticket, status of the ticket i.e. new, assigned, done, escalate. Create new ticket that has follwoing field id, name of ticket, description of ticket, status of the ticket i.e. new, assigned, done, escalate. Search screen that will ask for string as input and display the search result in table format with column as id, name of ticket, description of ticket, status of the ticket i.e. new, assigned, done, escalate. No login is required. Keep the design simple. Keep the data in txt file for now.

Now lets functionality to edit the ticket also.

Use the belwo prompt

“Provide edit funtionality that will provide screen to edit the ticket all the necessary fields.”

Step 2: Make it “Agentic”

Now, we register our JavaScript functions as tools using the navigator.modelContext.registerTool API.

The Prompt:

“Register tools for this website’s existing functions (createTicket, editTicket, searchTicket). Ensure tools are page-specific so the agent only sees what is relevant to the current URL.”

How it works under the hood:

// Example of registering a tool for the AI Agent
navigator.modelContext.registerTool({
  name: "search_tickets",
  description: "Search for support tickets by keywords",
  parameters: { 
    type: "object", 
    properties: { query: { type: "string" } } 
  },
  execute: async ({ query }) => {
    return performSearch(query); // Calls your existing JS function
  }
});

Now lets convert our simple web site to webmcp enable site using the below prompt.

” now Registering Tools for this website’s existing JavaScript functions (like createTicket, Edit ticket, Search Ticket) are registered as tools using the navigator.modelContext.registerTool API.Contextual Awareness: Tools can be page-specific, so the agent only sees what is relevant to the current URL “

Conclusion: The Future is Programmable

WebMCP is the future of the Agentic Web. It turns websites into programmable interfaces that AI can navigate with 100% accuracy and zero guesswork. No more clunky scraping—just pure, structured interaction.

source code :- https://github.com/shdhumale/webmcp-example.git

Reference :-
Chrome Developer Blog Post: – https://developer.chrome.com/blog/webmcp-epp
GoogleChromeLabs WebMCP Tools (GitHub): – https://github.com/GoogleChromeLabs/webmcp-tools

Model Context Tool Inspector Extension: – https://chromewebstore.google.com/detail/webmcp-model-context-tool/gbpdfapgefenggkahomfgkhfehlcenpd

Ready made Demo:- https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos

Google Travel Demo (Live): – https://travel-demo.bandarra.me/
Le Petit Bistro | WebMCP Declarative Demo :- https://googlechromelabs.github.io/webmcp-tools/demos/french-bistro/

WebMCP zaMaker! | WebMCP Imperative Demo :- https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/

Awesome WebMCP Resources: – https://github.com/webmcpnet/awesome-webmcp