> ## Documentation Index
> Fetch the complete documentation index at: https://mcp-b-sync-npm-packages-docs-bf03420.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# WebMCP Documentation

> W3C draft proposal for making websites AI-accessible - Enable AI agents to interact with your website through structured tools via navigator.modelContext

## Welcome to WebMCP

<Warning>
  **Early Incubation**: The WebMCP API is currently being incubated by the [W3C Web Machine Learning Community Group](https://www.w3.org/community/webmachinelearning/). The proposal is still evolving, and not all features implemented by MCP-B may be included in the final WebMCP specification. APIs and patterns documented here are subject to change as the proposal matures.
</Warning>

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 draft proposal (currently being incubated by the [W3C Web Machine Learning Community Group](https://www.w3.org/community/webmachinelearning/)) that lets websites expose structured tools to AI agents through the `navigator.modelContext` API. 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

<Card title="Why WebMCP?" icon="lightbulb" href="/concepts/why-webmcp">
  Understand why WebMCP is a better approach than browser automation, remote APIs, or computer use
</Card>

### What WebMCP Is NOT

WebMCP is specifically designed for human-in-the-loop workflows. It is **not** intended for:

<Warning>
  These use cases are explicitly out of scope for WebMCP and should use other solutions.
</Warning>

* **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](https://modelcontextprotocol.io)
* **UI replacement** - The human web interface remains the primary interaction method

### Key Terms

For detailed terminology, see the [Glossary](/concepts/glossary). Key concepts:

* **WebMCP**: W3C Web Model Context API proposal 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

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Get WebMCP running on your website in minutes
  </Card>

  <Card title="Live Demo" icon="play" href="https://webmcp.sh">
    See WebMCP in action with interactive examples
  </Card>

  <Card title="Examples" icon="code" href="/examples">
    Explore ready-to-use examples for various frameworks
  </Card>

  <Card title="Polyfill Package" icon="npm" href="https://www.npmjs.com/package/@mcp-b/global">
    Install the @mcp-b/global polyfill from npm
  </Card>
</CardGroup>

## Who Is This For?

<CardGroup cols={2}>
  <Card title="Website Developers" icon="code">
    Add AI copilot features to your React, Vue, or vanilla JS app
  </Card>

  <Card title="App Builders" icon="hammer">
    Let AI assistants interact with your web app's functionality
  </Card>

  <Card title="Extension Users" icon="puzzle-piece">
    Customize websites with AI-powered userscripts using the [MCP-B Extension](/extension/index)
  </Card>

  <Card title="AI Developers" icon="robot">
    Build frontend AI agents that can use website tools
  </Card>
</CardGroup>

## Why Use WebMCP?

* **Openly Developed**: 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

<Steps>
  <Step title="Add WebMCP to your site">
    Install `@mcp-b/global` to enable `navigator.modelContext`
  </Step>

  <Step title="Register your tools">
    Turn your JavaScript functions into AI-accessible tools with `registerTool()`
  </Step>

  <Step title="Connect AI agents">
    Install the MCP-B Extension or integrate with AI frameworks like Assistant-UI
  </Step>

  <Step title="AI calls your tools">
    AI assistants can now discover and use your tools to help users
  </Step>
</Steps>

<Info>
  **Want to understand the architecture first?** Check out [Core Concepts](/concepts/overview) for diagrams and detailed explanations of how everything works together.
</Info>

## Next Steps

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Get WebMCP running on your website in minutes
  </Card>

  <Card title="Core Concepts" icon="diagram-project" href="/concepts/overview">
    Understand the architecture and how components work together
  </Card>

  <Card title="Examples" icon="code" href="/examples">
    Explore ready-to-use examples for React, Vue, and vanilla JS
  </Card>

  <Card title="Security Guide" icon="shield-halved" href="/security">
    Security best practices before deploying
  </Card>
</CardGroup>

## Understanding the Standards

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

<CardGroup cols={2}>
  <Card title="WebMCP Specification" icon="globe" href="https://github.com/webmachinelearning/webmcp">
    W3C Web Model Context API proposal
  </Card>

  <Card title="MCP Documentation" icon="book" href="https://modelcontextprotocol.io">
    Original Model Context Protocol specification
  </Card>
</CardGroup>

## Community

<CardGroup cols={3}>
  <Card title="Discord" icon="discord" href="https://discord.gg/ZnHG4csJRB">
    Get help and discuss ideas
  </Card>

  <Card title="GitHub" icon="github" href="https://github.com/WebMCP-org">
    Explore the source code
  </Card>

  <Card title="NPM" icon="npm" href="https://www.npmjs.com/package/@mcp-b/global">
    Install our packages
  </Card>
</CardGroup>