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

> Build a WebMCP tool, integrate React, or connect a desktop agent through guided exercises.

These tutorials guide you through small, working projects. Start with the first tool tutorial if you
have not used WebMCP before.

<CardGroup cols={2}>
  <Card title="Build your first tool" icon="wrench" href="/tutorials/first-tool">
    Register one WebMCP tool on a plain HTML page and verify the result.
  </Card>

  <Card title="Build your first React tool" icon="react" href="/tutorials/first-react-tool">
    Register a tool from a React component with the `useWebMCP` hook.
  </Card>

  <Card title="Connect a desktop agent" icon="plug" href="/tutorials/desktop-agent-relay">
    Connect a browser tool to a desktop MCP client through the local relay.
  </Card>
</CardGroup>

The first two tutorials need a text editor and a modern browser. The relay tutorial also requires
Node.js 22.12 or later.

When you need directions for an existing project, open the [how-to guides](/how-to/index). For
package APIs, open the [package index](/packages/index).