> ## 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.

# Core Concepts

> Key concepts and terminology for understanding WebMCP architecture

This page explains the core concepts you'll encounter when working with WebMCP. For a high-level introduction, see the [Introduction](/introduction).

## The Core API

WebMCP centers around one key method: `navigator.modelContext.registerTool()`. This browser API lets you expose JavaScript functions as structured tools that AI agents can discover and call.

```javascript theme={null}
navigator.modelContext.registerTool({
  name: 'add_to_cart',
  description: 'Add a product to the shopping cart',
  inputSchema: { /* ... */ },
  async execute({ productId, quantity }) {
    // Your existing logic
  }
});
```

## WebMCP vs MCP

WebMCP is inspired by Anthropic's [Model Context Protocol (MCP)](https://modelcontextprotocol.io) but adapted for web browsers:

| Aspect             | MCP             | WebMCP                   |
| ------------------ | --------------- | ------------------------ |
| **Environment**    | Backend servers | Browser                  |
| **Use case**       | Server-to-agent | Human-in-the-loop        |
| **Authentication** | OAuth 2.1       | Inherits user session    |
| **API**            | MCP SDK         | `navigator.modelContext` |

Both protocols are complementary:

* **Use MCP** for backend services and server-to-agent communication
* **Use WebMCP** for browser-based tools where users are present

## MCP-B: The Reference Implementation

Since browsers don't yet natively support `navigator.modelContext`, **MCP-B** provides a polyfill that:

1. **Implements the W3C API** - Adds `navigator.modelContext` to any browser
2. **Bridges to MCP** - Translates WebMCP tools to MCP format for compatibility with existing AI frameworks

## Next Steps

<CardGroup cols={2}>
  <Card title="Architecture" icon="diagram-project" href="/concepts/architecture">
    Explore the technical architecture and component interactions
  </Card>

  <Card title="Tool Registration" icon="screwdriver-wrench" href="/concepts/tool-registration">
    Learn how to register tools with navigator.modelContext
  </Card>

  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Get started with WebMCP in minutes
  </Card>

  <Card title="Glossary" icon="book" href="/concepts/glossary">
    Key terminology and definitions
  </Card>
</CardGroup>