Skip to main content
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 instead.

Build Your First Tool

Create a single WebMCP tool on a plain HTML page and verify it works. No build tools, no frameworks.

Build Your First React Tool

Register a WebMCP tool from a React component using the useWebMCP hook.

Try the Native Chrome Preview

Enable Chrome’s experimental WebMCP flag, register a tool using the native browser API, and inspect it.

Connect a Desktop Agent

Set up the local relay so a desktop AI client (Claude, Cursor, or others) can call tools on your web page.

​
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 for real-world tasks like adding tools to an existing app, using schemas, or bridging iframes
  • Packages for the complete API surface of each package
  • Explanation for the architecture and design decisions behind WebMCP