WebMCP Discovery

Discover and use website-exposed tools via the W3C WebMCP standard through BAP’s built-in bridge.

What Is WebMCP?

WebMCP is a W3C Community Group standard that allows websites to expose structured tools to AI agents through browser-native APIs. Websites can opt in by annotating HTML forms or registering tools via JavaScript.

BAP includes first-class WebMCP support — agents using BAP do not need a separate WebMCP integration.

Two API Surfaces

Declarative (HTML Attributes)

Websites annotate forms with tool metadata:

<form toolname="search-products" tooldescription="Search the product catalog by keyword">
  <input name="query" toolparamdescription="Search keywords" />
  <input name="category" toolparamdescription="Product category filter" />
  <button type="submit">Search</button>
</form>

Imperative (JavaScript)

Websites register tools programmatically:

navigator.modelContext.addTool({
  name: "add-to-cart",
  description: "Add a product to the shopping cart",
  inputSchema: {
    type: "object",
    properties: {
      productId: { type: "string", description: "Product identifier" },
      quantity: { type: "number", description: "Number of items" },
    },
    required: ["productId"],
  },
  handler: async ({ productId, quantity }) => {
    // Site-defined logic
  },
});

Discovering WebMCP Tools

CLI

# Navigate to a page and discover tools
bap goto https://example.com
bap discover

TypeScript SDK

const tools = await client.discoverTools();
for (const tool of tools.tools) {
  console.log(`${tool.name}: ${tool.description}`);
  console.log(`  Source: ${tool.source}`); // "webmcp-declarative" or "webmcp-imperative"
}

MCP Tool

The discover_tools MCP tool is available to any MCP-native agent:

{
  "method": "tools/call",
  "params": {
    "name": "discover_tools",
    "arguments": {}
  }
}

Fused Discovery with Observe

Get interactive elements and WebMCP tools in a single call:

const obs = await client.observe({
  includeInteractiveElements: true,
  includeWebMCPTools: true,
});

// Standard interactive elements
for (const el of obs.interactiveElements ?? []) {
  console.log(`${el.ref}: ${el.role} "${el.name}"`);
}

// WebMCP tools discovered on the page
for (const tool of obs.webmcpTools ?? []) {
  console.log(`Tool: ${tool.name} (${tool.source})`);
}

Progressive Detection

BAP’s discovery implementation follows a three-step strategy:

1. Declarative Scan

   Query the DOM for form[toolname] elements and extract tool metadata from HTML attributes. Fast, no JavaScript execution required.

2. Imperative Scan

   Check for navigator.modelContext and enumerate programmatically registered tools. Catches dynamic tools without DOM representation.

3. Graceful Fallback

   If neither API surface is present, return an empty tool list with totalDiscovered: 0. No errors — the agent proceeds with standard BAP automation.

Agent Decision Pattern

The recommended pattern for agents:

// 1. Navigate and observe with WebMCP discovery
await client.navigate("https://example.com");
const obs = await client.observe({
  includeInteractiveElements: true,
  includeWebMCPTools: true,
});

// 2. Prefer WebMCP tools when available
if (obs.webmcpTools?.length) {
  // Use site's intended agent interface
  // (agent decides which WebMCP tool to invoke)
} else {
  // Fall back to BAP automation
  await client.act({
    steps: [
      /* observe-decide-act */
    ],
  });
}

Today, discover_tools returns empty on virtually every website — WebMCP adoption is in early stages (Chrome 146 Canary behind a flag). But calling it costs nothing. Call it speculatively on every page. When adoption grows, agents automatically benefit without code changes.

Discovery Response Format

{
  "tools": [
    {
      "name": "search-products",
      "description": "Search the product catalog by keyword",
      "inputSchema": {
        "type": "object",
        "properties": {
          "query": { "type": "string" }
        }
      },
      "source": "webmcp-declarative",
      "formSelector": "form[toolname='search-products']"
    }
  ],
  "totalDiscovered": 1,
  "apiVersion": "1.0"
}

Each tool includes a source field: "webmcp-declarative" for HTML attribute-based tools or "webmcp-imperative" for JavaScript API-based tools.