🎨 Building a WebMCP Site

A simple tutorial on exposing tools to AI agents

What is WebMCP?

WebMCP is a proposed web standard that lets websites expose structured tools to AI agents. Instead of AI guessing how to interact with your UI, you tell it exactly what actions are available.

Think of it like this: Without WebMCP, AI has to "screen scrape" and guess what buttons do. With WebMCP, your site provides an API that AI can call directly.

MCP vs WebMCP - What's the Difference?

You might be wondering: why WebMCP when we already have MCP?

MCP WebMCP
Where it runs Server-side Client-side (browser)
Who builds it You deploy & maintain a server Website adds some JS/HTML
Access Need API keys, auth, infrastructure Just visit the website
Updates You update your server Website owner updates their site

The Real Value of WebMCP

1. Websites expose their own tools

With MCP, if you want AI to book a flight on United.com, you have to build a server that scrapes/automates their site, maintain it when their site changes, and handle auth and rate limits.

With WebMCP, United builds it once and every AI agent can use it.

2. No middle-man 
MCP:     AI → Your MCP Server → Website
WebMCP:  AI → Website (directly)
3. The website knows best

Who knows better how to book a flight on United.com - you, or United? WebMCP lets the website author define exactly what's possible.

4. Scales to the whole web

Imagine if every website had WebMCP tools:

You wouldn't need to build MCP servers for each one.

TL;DR: With MCP, you build tools for websites. With WebMCP, websites build tools for you. It's like websites publishing their own API for AI agents.

Our Project Structure

📄
index.html
Page structure
🎨
style.css
Styling
⚡
webmcp.js
The magic!
1 Check if WebMCP is Available

WebMCP only works in Chrome 146+ with the flag enabled. Always check first:

if (window.navigator.modelContext) {
  // WebMCP is available, register tools here
} else {
  console.log("WebMCP not available");
}

This prevents errors on browsers that don't support WebMCP yet.

2 Register a Tool

Use registerTool() to expose a function to AI agents:

window.navigator.modelContext.registerTool({
  name: "set_background_color",
  description: "Changes the background color...",
  inputSchema: { ... },
  execute: ({ color }) => { ... }
});
3 Anatomy of a Tool

Each tool has 4 required parts:

name The tool's identifier. AI calls this name to invoke the tool.
"set_background_color"
description Tells AI what the tool does and when to use it. Be descriptive!
"Changes the background color of the page..."
inputSchema A JSON Schema defining what parameters the tool accepts, their types, and which are required.
execute The function that runs when AI calls the tool. Receives parameters, does the work, returns a result.
4 Define the Input Schema

The schema tells AI what parameters your tool accepts:

inputSchema: {
  type: "object",
  properties: {
    color: {
      type: "string",
      description: "The color to set. Can be hex (#ff5733), 
                     RGB, or named color (coral, navy)"
    }
  },
  required: ["color"]
}
Tip: Good descriptions help AI understand what format to use. Include examples like "hex (#ff5733)" or "named color (coral)".
5 Write the Execute Function

This is where the actual work happens:

execute: ({ color }) => {
  // 1. Do the actual work
  document.body.style.backgroundColor = color;
  
  // 2. Update any UI elements
  document.getElementById("colorName").textContent = color;
  
  // 3. Return a result for the AI
  return {
    content: [{
      type: "text",
      text: `Background color changed to ${color}`
    }]
  };
}

The return value tells AI what happened - important for multi-step tasks!

The Complete Code

Here's the WebMCP registration part of webmcp.js:

if (window.navigator.modelContext) {
  window.navigator.modelContext.registerTool({
    name: "set_background_color",
    description: "Changes the background color of the page. Accepts any valid CSS color (hex, rgb, named colors like 'coral', 'forestgreen', etc.)",
    inputSchema: {
      type: "object",
      properties: {
        color: {
          type: "string",
          description: "The color to set. Can be a hex code (#ff5733), RGB (rgb(255,87,51)), or named color (coral, navy, forestgreen)"
        }
      },
      required: ["color"]
    },
    execute: ({ color }) => {
      setBackgroundColor(color, true); // true = called by AI
      
      return {
        content: [{
          type: "text",
          text: `Background color changed to ${color}`
        }]
      };
    }
  });

  console.log("✅ WebMCP tool registered!");
} else {
  console.log("⚠️ WebMCP not available");
}
Tip: In the demo, we use a shared setBackgroundColor(color, fromAI) function so both human controls and AI use the same logic. The fromAI flag lets us show a "🤖 AI changed this!" badge when the tool is called by an agent.

Try It Out!

With Chrome Canary (146+) and the WebMCP flag enabled, visit the demo and ask an AI: "Change the background to coral"

View the Demo →

Requirements

1. Chrome Canary (version 146+)

Download from google.com/chrome/canary

2. Enable the WebMCP Flag

Go to chrome://flags/#enable-webmcp-testing and set to Enabled

3. Relaunch Chrome

Click the relaunch button after enabling the flag