W3C Community Group Draft/Chrome 146+/Apache 2.0

Make any website callable by AI agents

The open-source SDK for the WebMCP browser standard. Register typed tools on your website. AI agents discover and call them directly. No scraping.

Get Started Try the Playground

Without WebMCP

scraper.ts

import { chromium } from 'playwright';
 
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://shop.com');
 
// Wait for JS to render... hope it loads
await page.waitForSelector('.search-input');
await page.fill('.search-input', 'shoes');
await page.click('button.search-btn');
 
// Parse DOM... guess the structure
const items = await page.$$eval(
  '.product-card',
  cards => cards.map(c => ({
    name: c.querySelector('h3')?.textContent,
    price: c.querySelector('.price')?.textContent,
  }))
);

✘Fragile. Breaks on DOM changes. 16 lines of guesswork.

With WebMCP

agent.ts

// Discover tools the site publishes
const tools = await navigator.modelContext
  .getTools();
 
// Call with typed inputs — returns JSON
const results = await tools
  .search_products.execute({
    query: 'shoes',
    maxResults: 10,
  });
 
// Structured response — no parsing needed
console.log(results.products);
// => [{ name: "Air Max", price: 129, ... }]

✔Typed. Stable. Direct to application logic.

The Problem

How agents work today

✘

Indirect

Agents simulate clicks and form fills through the UI. Selector-based automation breaks on every DOM change.

✘

Overhead

Every interaction requires browser rendering, JS execution, and DOM parsing. 2-10 seconds of overhead per page.

✘

No Declared Intent

Sites have no structured way to declare what actions agents should take, what inputs they accept, or what is safe.

The Solution

How WebMCP changes it

✔

Typed Inputs (W3C Spec)

Every tool has a JSON Schema defining exactly what parameters it accepts. No guessing, no DOM parsing.

✔

Structured Responses

Tools return JavaScript values, not raw HTML. The spec defines execute() callbacks that return structured data.

✔

Safety Annotations

W3C spec provides readOnlyHint. Our SDK extends this with read/write/danger classification for richer safety signals.

Dogfooding: Active

This site uses its own SDK

Right now, 3 WebMCP tools are live on this page: search_docs, get_sdk_packages, and validate_tool_definition.

Console

> await navigator.modelContext.getTools()

[ { name: "search_docs", safetyLevel: "read" }, ... ]

Click the floating inspector in the bottom-right corner to call them live.

5-Minute Setup

Three steps. That's it.

Add AI-callable tools to any React app. Works the same way for Vue, Angular, Svelte, and plain HTML.

1Install

$ npm install @webmcpregistry/react

2Wrap your app

import { WebMCPProvider } from '@webmcpregistry/react';

export default function App({ children }) {
  return (
    <WebMCPProvider mode="suggest" polyfill>
      {children}
    </WebMCPProvider>
  );
}

3Register a tool

import { useWebMCPTool } from '@webmcpregistry/react';

function SearchProducts() {
  useWebMCPTool({
    name: 'search_products',
    description: 'Search the product catalog',
    inputSchema: {
      type: 'object',
      properties: {
        query: { type: 'string', description: 'Search term' },
      },
      required: ['query'],
    },
    safetyLevel: 'read',
    handler: async ({ query }) => {
      const res = await fetch(`/api/search?q=${query}`);
      return res.json();
    },
  });
  return null;
}

That's it. AI agents can now discover and call your tools via navigator.modelContext.getTools()

Every framework. One API.

Thin adapters over core. Same tools, same API surface, any stack.

React

@webmcpregistry/react

Next.js

@webmcpregistry/nextjs

Vue

@webmcpregistry/vue

Angular

@webmcpregistry/angular

Svelte

@webmcpregistry/svelte

HTML

@webmcpregistry/browser

What you get

12 packages covering framework adapters, testing, conformance, evals, and infrastructure.

Framework Adapters

core0.2.1

Polyfill, detector, validator, security

react0.2.1

React hooks + provider

nextjs0.2.1

Next.js App Router adapter

vue0.2.1

Vue 3 plugin + composables

angular0.2.1

Angular service + DI

svelte0.2.1

Svelte stores + actions

browser0.2.1

10KB script tag bundle

Testing & Quality

testing0.2.1

Schema-driven + mutation tests

conformance0.2.1

W3C spec conformance suite

evals0.2.1

AI agent accuracy evaluation

Infrastructure

cli0.2.1

Test, scan, init commands

mcp-server0.2.1

MCP-to-WebMCP bridge

Built on Standards

W3C Community Group Draft

Draft spec by engineers at Google and Microsoft. Published by the Web Machine Learning CG.

Open Source

Apache 2.0 License

0 packages. 0+ tests. Sigstore provenance on every publish. Fully auditable.

Production Ready

Tested + CI Verified

Vitest + jsdom. Conformance suite with 0 W3C scenarios. Mutation testing. AI eval harness.

Ready to make your site agent-ready?

Start with the documentation or jump straight into the code. Works with React, Next.js, Vue, Angular, Svelte, or plain HTML.

Read the Docs Star on GitHub