Skip to main content

​
Welcome to WebMCP

With WebMCP, your existing JavaScript functions become discoverable tools. Rather than relying on browser automation or remote APIs, agents get deterministic function calls that work reliably and securely.

​
The Problem

AI assistants are great at conversation, but they can’t reliably interact with your website. They can’t click buttons, submit forms, or access your app’s functionality in a structured, deterministic way.

​
The Solution

WebMCP is a W3C web standard (currently being incubated by the Web Machine Learning Community Group) that lets websites expose structured tools to AI agents through the navigator.modelContext API. With WebMCP, your existing JavaScript functions become discoverable tools. AI assistants can then help users by directly calling your website’s functionality - all while respecting authentication and permissions.

​
Design Philosophy

WebMCP is built on a human-in-the-loop philosophy:
  • The human web interface remains primary - WebMCP doesn’t replace your UI
  • AI agents augment, not replace - Tools assist users, they don’t work autonomously
  • Users maintain control - Visibility and oversight over all agent actions
  • Collaborative workflows - Humans and AI work together, not separately
  • Context engineering - Like good web design guides users, good WebMCP guides AI by exposing the right tools at the right time

Why WebMCP?

Understand why WebMCP is a better approach than browser automation, remote APIs, or computer use

​
What WebMCP Is NOT

WebMCP is specifically designed for human-in-the-loop workflows. It is not intended for:
These use cases are explicitly out of scope for WebMCP and should use other solutions.
  • Headless browsing - WebMCP requires an active browsing context with the user present
  • Fully autonomous agents - Tools are designed to augment, not replace, human interaction
  • Backend service integration - For server-to-agent communication without a UI, use the Model Context Protocol
  • UI replacement - The human web interface remains the primary interaction method

​
Key Terms

For detailed terminology, see the Glossary. Key concepts:
  • WebMCP: W3C Web Model Context API standard for exposing website tools to AI agents
  • MCP-B: Reference implementation that polyfills navigator.modelContext and bridges WebMCP with MCP
  • MCP-B Extension: Browser extension for building, testing, and using WebMCP servers

Quick Start

Get WebMCP running on your website in minutes

Live Demo

See MCP-B in action with interactive examples

Examples

Explore ready-to-use examples for various frameworks

NPM Packages

View NPM package source code

​
Who Is This For?

Website Developers

Add AI copilot features to your React, Vue, or vanilla JS app

App Builders

Let AI assistants interact with your web app’s functionality

Extension Users

Customize websites with AI-powered userscripts using the MCP-B Extension

AI Developers

Build frontend AI agents that can use website tools

​
Why Use WebMCP?

  • Standards-Based: Implements the W3C Web Model Context API proposal
  • Zero Backend: Runs entirely in the browser - no server changes needed
  • Respects Auth: Tools inherit your user’s session and permissions
  • Framework Agnostic: Works with React, Vue, vanilla JS, or any framework
  • Developer Friendly: Simple API with React hooks for easy integration
  • Type Safe: Full TypeScript support with Zod validation

​
How It Works

1

Add WebMCP to your site

Install @mcp-b/global to enable navigator.modelContext
2

Register your tools

Turn your JavaScript functions into AI-accessible tools with registerTool()
3

Connect AI agents

Install the MCP-B Extension or integrate with AI frameworks like Assistant-UI
4

AI calls your tools

AI assistants can now discover and use your tools to help users
Want to understand the architecture first? Check out Core Concepts for diagrams and detailed explanations of how everything works together.

​
Community

Discord

Join our community for support and discussions

NPM

Install our packages from NPM

License

MIT License

​
Quick Example

Get started in under 2 minutes:
  • React
  • Vanilla JS
  • Script Tag (No Build)
Use the useWebMCP hook for automatic tool registration:
import '@mcp-b/global';
import { useWebMCP } from '@mcp-b/react-webmcp';
import { z } from 'zod';

function ProductPage({ productId }) {
  useWebMCP({
    name: 'add_to_cart',
    description: 'Add this product to shopping cart',
    inputSchema: {
      quantity: z.number().min(1).default(1)
    },
    handler: async ({ quantity }) => {
      await addToCart(productId, quantity);
      return { success: true, quantity };
    }
  });

  return <div>Product Details</div>;
}
That’s it! Your tools are now discoverable by AI agents.

​
Next Steps

1

Understand Core Concepts

Learn about WebMCP architecture and components
2

Install the Extension

Get the MCP-B Chrome Extension
3

Follow the Quickstart

Set up WebMCP on your website in the Quick Start Guide
4

Review Security

Understand security best practices before deploying
5

Explore Examples

Check out working examples for different frameworks
6

Build Your Integration

Use our NPM packages to create custom tools

​
Understanding the Standards

WebMCP builds on the Model Context Protocol (MCP), adapting it for the web platform:

WebMCP Specification

W3C Web Model Context API proposal and technical specification

WebMCP Proposal

Detailed proposal with API design and examples

MCP Documentation

Learn about the original Model Context Protocol specification

MCP GitHub

Explore Anthropic’s official MCP repositories and SDK

Core Concepts

Architecture overview and diagrams

Glossary

Key terminology reference

Security Guide

Security best practices

Changelog

Version history and migrations

Troubleshooting

Common issues and solutions

Extension Guide

MCP-B browser extension docs