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

# Tutorials

> Guided, hands-on exercises to learn WebMCP from scratch. Each tutorial walks you through building something real.

These tutorials are guided exercises. Each one walks you through a small, self-contained project from start to finish. You will learn by doing, and every step produces a visible result.

No prior WebMCP experience is required. If you already know WebMCP and need to accomplish a specific task, head to the [How-To Guides](/how-to/index) instead.

<CardGroup cols={2}>
  <Card title="Build Your First Tool" icon="wrench" href="/tutorials/first-tool">
    Create a single WebMCP tool on a plain HTML page and verify it works. No build tools, no
    frameworks.
  </Card>

  <Card title="Build Your First React Tool" icon="react" href="/tutorials/first-react-tool">
    Register a WebMCP tool from a React component using the `useWebMCP` hook.
  </Card>

  <Card title="Try the Native Chrome Preview" icon="chrome" href="/tutorials/first-native-preview">
    Enable Chrome's experimental WebMCP flag, register a tool using the native browser API, and
    inspect it.
  </Card>

  <Card title="Connect a Desktop Agent" icon="plug" href="/tutorials/desktop-agent-relay">
    Set up the local relay so a desktop AI client (Claude, Cursor, or others) can call tools on your
    web page.
  </Card>
</CardGroup>

## What you will need

All tutorials assume you have:

* A text editor
* A modern web browser (Chrome, Edge, Firefox, or Safari)
* Node.js 22.12 or later (for the relay tutorial only)

## After the tutorials

Once you have completed a tutorial, you are ready for:

* **[How-To Guides](/how-to/index)** for real-world tasks like adding tools to an existing app, using schemas, or bridging iframes
* **[Packages](/packages/index)** for the complete API surface of each package
* **[Explanation](/explanation/index)** for the architecture and design decisions behind WebMCP