WebMCP on your site|INEMA.CLUB-PRO

WebMCP Track · course 2 of 6 · 8 lessons

WebMCP on your site: tools on the page, with fallback and testing

Register tools with document.modelContext, mark which ones only read and which ones have consequences, make the important action wait for the person, and test everything on its own. WebMCP is a draft from 10/16/2026: the course teaches you to prepare the page without breaking things for people who don't have the API.

Start with lesson 1 See the track area
Dark developer desk with a monitor showing a browser and a cable plugged into a small metal hub.
  • 8lessons
  • 22exercises with expected output
  • 3test modes: no API, polyfill, native
  • 0model calls or paid API

The lessons

From the state of the spec to the automatic test battery: environment, first tool, lifecycle, annotations, form, catalog, and testing.

  1. Lesson 1 · 12 minWebMCP today: the Oct 16, 2026 draft, origin trial, flag, and who backs itWebMCP lets a page hand tools to an agent in the browser. As of Oct 19, 2026, it is a Community Group draft, tested in an origin trial in Chrome and Edge, with Mozilla neutral and WebKit opposed. In this lesson you check the spec date with one command and learn to read the status without falling for a promise.
  2. Lesson 2 · 15 minSetup: flag, origin trial, polyfill, and three test modesYou don't need an experimental Chrome installed to work. The kit serves the page on a local server and opens the same Playwright Chromium in three modes: without the API, with the polyfill, and with native WebMCP behind the test flag. No cost and no API key.
  3. Lesson 3 · 18 minFirst tool: registerTool with inputSchema and executeA WebMCP tool is an object with a name, a description, an input schema, and an execute function. The page registers it; the agent lists it with getTools and calls it with executeTool. In this lesson you read the kit's search tool, call it the way an agent would, and register your first one.
  4. Lesson 4 · 15 minLifecycle: getTools, toolchange, AbortSignal, and cancellationA tool is not forever: the page registers it when the function exists and removes it when it leaves the scene. In the 10/16/2026 spec there is no unregisterTool; what removes it is the signal of an AbortController. And the caller can cancel an execution midway. In this lesson you see the whole cycle and the events the browser fires.
  5. Lesson 5 · 16 minAnnotations and confirmation: readOnly, consequential and untrustedContentAn annotation is a hint the page gives to the agent and the browser: this tool only reads, this one has consequences, this one returns third-party text. A hint is not a lock. That is why the kit's action with side effects also waits for the person to click Confirmar. In this lesson you set the annotations and see the confirmation work.
  6. Lesson 6 · 14 minForm as a tool: toolname and toolautosubmit (experimental, outside the spec)Chrome lets a form become a tool with three HTML attributes. It's the shortest path for anyone who already has a well-labeled form, but it was left out of the 10/16/2026 spec: it exists in Chrome's origin trial and in a temporary layer of the polyfill. In this lesson you use it with that label and decide when the form can submit itself.
  7. Lesson 7 · 18 minDesign the catalog and migrate an existing site without breaking anyoneA good catalog has few tools, each with one intent, a verb-based name, minimal input, and an error the agent understands. On a site that already exists, the rule moves out of the interface into a function that serves both the click and the tool. In this lesson you review a bad catalog with the validator and plan the migration of your site.
  8. Lesson 8 · 18 minTest it yourself: run the suite in all three modes, checklist and planA tool is only ready when a test proves it works and that the page stays the same without it. The kit's test suite runs with no model in all three modes, compares tool with form, and tests the confirmation and the cleanup. In this lesson you run it, watch a break get caught and leave with a dated plan for your site.

Who it's for

  1. 1Front-end devs or makers who edit HTML/JS and run commands in the terminal.
  2. 2People who want their own site to be used by agents in the browser without giving up the normal path.
  3. 3People who would rather prepare with tests than bet on an API that still changes.

What you'll be able to do

  1. 1Read the dated spec and tell draft, origin trial, and flag apart.
  2. 2Register, list, remove, and cancel tools with document.modelContext.
  3. 3Set annotations and put the action with consequences behind a Confirmar button.
  4. 4Run the test battery in the no API, polyfill, and native modes, and catch a failure.

Where this course fits in the WebMCP Track

  1. 1After course 0 (how agents use a site) and course 1 (MCP server).
  2. 2It owns the WebMCP API on the page. Course 3 looks at the agent side; course 4, at security.
  3. 3Before you start: Node 20 or newer, git, and disk space for Playwright's Chromium.