WebMCP Integration

Interactive WebMCP showcase

See the difference a structured tool makes.

Give two identical demo websites the same goal. The left relies on visible interface navigation. The right looks the same, but privately exposes a structured WebMCP tool to the agent.

Five controlled demonstrations

Choose a customer journey.

Checking browser support
Customer goal“Find me a navy jacket in medium for under $100.”
Without0 of 5 actions
With1 tool call

Illustrative sequence, not a speed benchmark. Actual timing varies by agent, page, and network.

Without WebMCPInterface navigationAgent reads and operates the page
demo-business.test
Jackets12 products
2 matching jackets
Agent activity5 interface actions
  1. 1Inspect the page for filter controls
  2. 2Open the color menu and select Navy
  3. 3Open the size menu and select Medium
  4. 4Enter the maximum price
  5. 5Apply the filters and inspect the results
With WebMCPStructured tool accessAgent calls the website's declared tool
demo-business.test
Jackets12 products
2 matching jackets
Agent activity1 structured tool call
  1. 1

    DiscoverRead the tool description

  2. 2

    CallSupply three structured values

  3. 3

    ResultReceive two matching products

Without WebMCP5 interface actions
  1. 1Inspect the page for filter controls
  2. 2Open the color menu and select Navy
  3. 3Open the size menu and select Medium
  4. 4Enter the maximum price
  5. 5Apply the filters and inspect the results
With WebMCP1 structured tool call
  1. 1

    DiscoverRead the tool description

  2. 2

    CallSupply three structured values

  3. 3

    ResultReceive two matching products

Without WebMCP

The agent must identify and operate each visible control correctly.

With WebMCP

The identical website declares a structured path to the same result.

Capability boundary

Can: Apply exact filters to catalog data the website exposes. Cannot: Find inventory or options that the website has not exposed.

Illustrative sequence, not a speed benchmark. Actual timing varies by agent, page, and network.

Live tool language

What the agent can actually read

Imperative API · Read only
Tool definition used on this page
await document.modelContext.registerTool({
  name: 'filter_demo_products',
  description: 'Filter the demo catalog by color, size, and maximum price.',
  inputSchema: {
    type: 'object',
    properties: {
      color: { type: 'string', enum: ['navy', 'black', 'olive'] },
      size: { type: 'string', enum: ['S', 'M', 'L', 'XL'] },
      max_price: { type: 'number', minimum: 0 }
    },
    required: ['color', 'size', 'max_price']
  },
  annotations: { readOnlyHint: true },
  execute: filterDemoProducts
});
Input argument
{
  "color": "navy",
  "size": "M",
  "max_price": 100
}
Structured result
{
  "waiting": "Run the comparison or call the live tool."
}
Safe by design

Every scenario uses fictional information. The tools cannot create a real ticket, access an account, book a meeting, place an order, or charge a payment method.