Getting Started

Make your website WebMCP-ready in under 5 minutes. Pick your framework below.

React

$ npm install @webmcpregistry/react

import { WebMCPProvider, useWebMCPTool } from '@webmcpregistry/react'

function App() {
  return (
    <WebMCPProvider mode="auto">
      <YourApp />
    </WebMCPProvider>
  )
}

function SearchPage() {
  useWebMCPTool({
    name: 'search_products',
    description: 'Search the product catalog by keyword',
    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 <div>Search Page</div>
}

Next.js

$ npm install @webmcpregistry/nextjs

// app/layout.tsx
import { WebMCPProvider } from '@webmcpregistry/nextjs'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <WebMCPProvider mode="auto">
          {children}
        </WebMCPProvider>
      </body>
    </html>
  )
}

Vue 3

$ npm install @webmcpregistry/vue

// main.ts
import { createApp } from 'vue'
import { webmcpPlugin } from '@webmcpregistry/vue'

const app = createApp(App)
app.use(webmcpPlugin, { mode: 'auto' })
app.mount('#app')

HTML (no framework)

$

<script src="https://cdn.webmcpregistry.com/v1/auto.js"
  data-mode="auto">
</script>

<!-- Or use declarative attributes -->
<form toolname="search_products"
      tooldescription="Search the product catalog">
  <input name="query" type="text"
         toolparamdescription="Search keywords" />
  <button type="submit">Search</button>
</form>

Test your implementation

Use the CLI tool to validate your WebMCP implementation:

# Full readiness test
npx @webmcpregistry/cli test https://yoursite.com

# Quick static scan (no browser needed)
npx @webmcpregistry/cli scan https://yoursite.com

# Scaffold setup for your framework
npx @webmcpregistry/cli init --framework react

Key concepts

What is WebMCP?

WebMCP (Web Model Context Protocol) is a W3C Community Group proposal that adds a navigator.modelContext API to browsers. It lets websites register structured tools that AI agents can discover and call — like an API for the agentic web.

Why do I need a polyfill?

No production browser ships navigator.modelContext yet (only Chrome Canary behind a flag). Our SDK includes a polyfill so you can develop and ship today. When browsers add native support, the polyfill automatically steps aside.

Safety levels

Every tool must declare a safety level: 'read' (queries, no side effects), 'write' (creates or modifies data), or 'danger' (deletes data, financial transactions). AI agents use this to decide whether to ask for user confirmation.

Auto-detection

In 'auto' mode, the SDK scans your page's DOM — forms, buttons, ARIA labels, select elements — and generates tool definitions automatically. You can review and customize these in 'suggest' mode.