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

# Start Here

> Choose the right path through the docs based on what you want to build with WebMCP and MCP-B.

# Start Here

Use this page when you want help choosing the right docs path. If you want the overview first, start on the [homepage](/).

<Note>
  Start with the smallest layer that fits the job. If you are unsure, read [Choose a runtime](/how-to/choose-runtime).
</Note>

## Pick a starting point by role

<Columns cols={3}>
  <Card title="Web developer" icon="code">
    You build websites and want to expose tools to AI agents.

    **Start here:**

    * [Build your first tool](/tutorials/first-tool) (tutorial)
    * [Add tools to an existing app](/how-to/add-tools-to-an-existing-app) (how-to)
    * [Choose a runtime](/how-to/choose-runtime) (how-to)
  </Card>

  <Card title="React developer" icon="react">
    You build React apps and want hook-based registration with automatic cleanup.

    **Start here:**

    * [Build your first React tool](/tutorials/first-react-tool) (tutorial)
    * [Framework integration guide](/how-to/frameworks) (how-to)
    * [@mcp-b/react-webmcp reference](/packages/react-webmcp/reference) (reference)
  </Card>

  <Card title="AI agent builder" icon="robot">
    You build AI agents or MCP clients and want to call tools from websites.

    **Start here:**

    * [Connect desktop agents with local relay](/tutorials/desktop-agent-relay) (tutorial)
    * [Use DevTools MCP](/how-to/use-devtools-mcp) (how-to)
    * [Transports reference](/packages/transports/reference) (reference)
  </Card>
</Columns>

## Pick a page by goal

<Columns cols={2}>
  <Card title="Build your first tool" icon="hammer" href="/tutorials/first-tool" cta="Open tutorial" arrow={true} horizontal>
    Start with strict WebMCP tool registration in the browser.
  </Card>

  <Card title="Build your first React tool" icon="react" href="/tutorials/first-react-tool" cta="Open tutorial" arrow={true} horizontal>
    Register tools from React components with lifecycle-aware hooks.
  </Card>

  <Card title="Preview native WebMCP" icon="flask-vial" href="/tutorials/first-native-preview" cta="Open tutorial" arrow={true} horizontal>
    Test the browser proposal draft in Chrome and inspect tools with Chrome tooling.
  </Card>

  <Card title="Choose a runtime" icon="code-branch" href="/how-to/choose-runtime" cta="Open guide" arrow={true} horizontal>
    Decide between native support, the strict polyfill, and the full MCP-B runtime.
  </Card>

  <Card title="Add tools to an existing app" icon="puzzle-piece" href="/how-to/add-tools-to-an-existing-app" cta="Open guide" arrow={true} horizontal>
    Expose existing application behavior without rebuilding your app around WebMCP.
  </Card>

  <Card title="Connect desktop agents" icon="tower-broadcast" href="/how-to/connect-desktop-agents-with-local-relay" cta="Open guide" arrow={true} horizontal>
    Bridge browser tools to desktop clients such as Claude Desktop or Cursor.
  </Card>

  <Card title="Understand WebMCP" icon="lightbulb" href="/explanation/what-is-webmcp" cta="Read explanation" arrow={true} horizontal>
    Read the high-level explanation of the proposal and where it fits in the browser.
  </Card>

  <Card title="Browse packages" icon="book-open" href="/packages/index" cta="Browse packages" arrow={true} horizontal>
    Start with package overviews and package references before diving into the standard-only reference pages.
  </Card>
</Columns>

## Choose a package layer

Pick the smallest layer that fits the job. For more background on the boundary, read [Native vs Polyfill vs Global](/explanation/native-vs-polyfill-vs-global) and [Strict Core vs MCP-B Extensions](/explanation/strict-core-vs-mcp-b-extensions).

<Steps>
  <Step title="Types only: @mcp-b/webmcp-types">
    Use zero-runtime TypeScript types for `navigator.modelContext`. Install this as a dev dependency when you only need compile-time safety.

    ```bash theme={null}
    npm install --save-dev @mcp-b/webmcp-types
    ```

    [Reference](/packages/webmcp-types/reference)
  </Step>

  <Step title="Strict core polyfill: @mcp-b/webmcp-polyfill">
    Install the WebMCP surface on `navigator.modelContext` without MCP-B extensions. Use this when you want the browser proposal draft in browsers today.

    ```bash theme={null}
    npm install @mcp-b/webmcp-polyfill
    ```

    [Reference](/packages/webmcp-polyfill/reference)
  </Step>

  <Step title="Full runtime: @mcp-b/global">
    Add the MCP-B runtime layer on top of the core. Use this when you need transport, `listTools()`, `callTool()`, prompts, resources, or browser-to-desktop connectivity.

    ```bash theme={null}
    npm install @mcp-b/global
    ```

    [Reference](/packages/global/reference) | [Choose a runtime](/how-to/choose-runtime)
  </Step>

  <Step title="React hooks: @mcp-b/react-webmcp or usewebmcp">
    **`@mcp-b/react-webmcp`** provides hooks for the full MCP-B runtime, including provider and client patterns, Zod schema support, and execution state tracking.

    **`usewebmcp`** provides a single hook for strict core `navigator.modelContext` tool registration.

    ```bash theme={null}
    # Full MCP-B hooks
    npm install @mcp-b/react-webmcp

    # Strict core hooks
    npm install usewebmcp
    ```

    [react-webmcp reference](/packages/react-webmcp/reference) | [usewebmcp reference](/packages/usewebmcp/reference) | [Framework guide](/how-to/frameworks)
  </Step>
</Steps>

<Note>
  Not sure which package to pick? Read [Choose a runtime](/how-to/choose-runtime) for the detailed comparison.
</Note>

## Use the main docs tabs

This documentation uses package-first navigation for product docs and the [Diataxis framework](https://diataxis.fr/) for content types. Use each tab for a different kind of question:

<Columns cols={2}>
  <Card title="Packages" icon="boxes-stacked" href="/packages/index">
    Start here when you know which package you are evaluating and need its overview or API surface.
  </Card>

  <Card title="Tutorials" icon="graduation-cap" href="/tutorials/index">
    Use step-by-step learning exercises when you are new and want guided practice.
  </Card>

  <Card title="How-To Guides" icon="compass-drafting" href="/how-to/index">
    Use goal-oriented directions when you know the basics and need to finish a task.
  </Card>

  <Card title="Packages" icon="boxes-stacked" href="/packages/index">
    Browse package overviews and API reference for every published package.
  </Card>

  <Card title="Explanation" icon="lightbulb" href="/explanation/index">
    Use explanation pages when you want background, design context, or tradeoffs.
  </Card>
</Columns>