E1 · Kit installed
10 minClone the course repository into ~/projetos and install the kit with the block above.
Done when: The block ends with saída: 0 and ls ~/projetos/formacao-webmcp-site-v72/kit/pagina/vendor shows webmcp-polyfill.js.
Lesson 2 · 15 min
Setup: flag, origin trial, polyfill, and three test modes
You 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.
Start the lesson
In this lesson you will
- 1Clone the kit and install it with pinned versions
- 2Secure context: https in production, 127.0.0.1 for rehearsal
- 3The three modes: sem, polyfill, and nativo
- 4Origin trial and flag in your Chrome, when you want to see it live
Goal: set up the kit and see the same page in three modes (no API, polyfill, native) without spending quota or installing an experimental Chrome.
01The same page, three browsers
Click each mode.
The API only exists in a secure context: https or localhost/127.0.0.1. That is why the kit serves the page at 127.0.0.1.
Always test the No API mode: it is what most visitors see.
02Clone and install the kit
Versions pinned on 10/19/2026: @mcp-b/webmcp-polyfill 6.0.3 and playwright 1.64.0. The postinstall copies the polyfill to pagina/vendor/ (for rehearsal only).
Terminal · clone, install, and download Chromium
git clone -q https://github.com/inematds/formacao-webmcp-site-v72 ~/projetos/formacao-webmcp-site-v72 cd ~/projetos/formacao-webmcp-site-v72/kit npm ci npx playwright install chromium echo "saída: $?"
Example from the repository
> kit-webmcp-no-seu-site@1.0.0 postinstall > node scripts/copiar-polyfill.mjs polyfill copiado para pagina/vendor/webmcp-polyfill.js added 4 packages, and audited 5 packages in 1s found 0 vulnerabilities (…) barras de progresso cortadas Downloading Chrome for Testing 156.0.8078.4 (playwright chromium v1248) from https://cdn.playwright.dev/builds/cft/156.0.8078.4/linux-arm64/chrome-linux-arm64.zip Chrome for Testing 156.0.8078.4 (playwright chromium v1248) downloaded to ~/.cache/ms-playwright/chromium-1248 Downloading FFmpeg (playwright ffmpeg v1013) from https://cdn.playwright.dev/dbazure/download/playwright/builds/ffmpeg/1013/ffmpeg-linux-arm64.zip FFmpeg (playwright ffmpeg v1013) downloaded to ~/.cache/ms-playwright/ffmpeg-1013 Downloading Chrome Headless Shell 156.0.8078.4 (playwright chromium-headless-shell v1248) from https://cdn.playwright.dev/builds/cft/156.0.8078.4/linux-arm64/chrome-headless-shell-linux-arm64.zip Chrome Headless Shell 156.0.8078.4 (playwright chromium-headless-shell v1248) downloaded to ~/.cache/ms-playwright/chromium_headless_shell-1248 saída: 0
The first time, playwright install downloads Chrome for Testing 156.0.8078.4 (190.5 MiB), the headless shell (119.9 MiB), and FFmpeg (1.9 MiB); after that, it does not download again. The path (here linux-arm64) and the time change from machine to machine.
browserType.launch: Executable doesn't exist at /tmp/sem-navegador/chromium_headless_shell-1248/chrome-headless-shell-linux-arm64/chrome-headless-shell saída: 1
Without npx playwright install chromium, every kit script stops here. The path in the middle changes depending on the system (here, arm64).
03What the page sees in each mode
ambiente.mjs opens the page in the three modes and reads: secure context, document.modelContext, the old name navigator.modelContext, and the on-screen notice.
Terminal · three modes
cd ~/projetos/formacao-webmcp-site-v72/kit node scripts/ambiente.mjs; echo "saída: $?"
Example from the repository
== Chromium 156.0.8078.4 (Playwright) · modo: sem contexto seguro: sim · document.modelContext: ausente · navigator.modelContext: ausente página: sem · aviso: Este navegador não expõe WebMCP. Tudo funciona pelo formulário. == Chromium 156.0.8078.4 (Playwright) · modo: polyfill contexto seguro: sim · document.modelContext: presente · navigator.modelContext: ausente página: com · aviso: WebMCP ativo: 4 ferramentas registradas. == Chromium 156.0.8078.4 (Playwright) · modo: nativo contexto seguro: sim · document.modelContext: presente · navigator.modelContext: ausente página: com · aviso: WebMCP ativo: 4 ferramentas registradas. saída: 0
In the No API mode, the page shows a notice and carries on through the form. In the other two, it registers 4 tools. In none of them does navigator.modelContext exist.
04See it in your Chrome (optional)
Experimental as of 10/19/2026. Nothing here is a done-when criterion.
1. Flag
Open chrome://flags/#enable-webmcp-testing, turn it on, and restart Chrome.
Run the kit's server and open the URL it prints.
Server
cd kit && node scripts/servir.mjs
2. Polyfill
Without the flag, add ?ensaio=polyfill to the URL.
The page loads the polyfill from pagina/vendor/ and registers the same tools.
URL
http://127.0.0.1:[porta]/?ensaio=polyfill
3. Inspector
Google publishes the Model Context Tool Inspector extension, which lists the tools and calls them in natural language.
It asks for an API key for a model (Gemini). It is not needed in this course.
4. Production
Register your domain in the WebMCP origin trial and paste the token into the meta tag at the top of kit/pagina/index.html.
The token is registered for the site's domain; on localhost, use the flag.
05Practice
All local, no cost. Each exercise ends with a done when.
E2 · Three modes
3 minRun ambiente.mjs and compare the three "página:" lines.
Done when: node scripts/ambiente.mjs; echo "saída: $?" → página: sem, página: com, página: com and saída: 0.
E3 · Does the "sem" mode break?
5 minRun node scripts/servir.mjs, open the URL in the browser you use every day (no flag), and do a search and a booking through the screen.
Done when: The search shows results and the booking appears in "Minhas reservas" with no tool registered.
06Lesson quiz
The explanation appears after your answer.
Question 1 of 4
Why does the kit serve the page at 127.0.0.1 instead of opening the file directly?
Correct
ModelContext is [SecureContext]: it only exists on https or localhost/127.0.0.1. In production, https. The common mistake is testing through file:// and thinking the API disappeared.Not that one
ModelContext is [SecureContext]: it only exists on https or localhost/127.0.0.1. In production, https. The common mistake is testing through file:// and thinking the API disappeared.Review: The same page, three browsersQuestion 2 of 4
What does the "sem" mode prove?
Correct
"Sem" is the ordinary visitor. If the page breaks there, it broke for most people. The other modes prove the agent's path.Not that one
"Sem" is the ordinary visitor. If the page breaks there, it broke for most people. The other modes prove the agent's path.Review: The same page, three browsersQuestion 3 of 4
What is @mcp-b/webmcp-polyfill 6.0.3 in this course?
Correct
It is a temporary redistribution of the CG's polyfill, maintained by MCP-B, and it warns that it will be removed. It is for rehearsing the spec's API; it does not fire toolactivated/toolcancel. The bridge to MCP is @mcp-b/global, outside this course.Not that one
It is a temporary redistribution of the CG's polyfill, maintained by MCP-B, and it warns that it will be removed. It is for rehearsing the spec's API; it does not fire toolactivated/toolcancel. The bridge to MCP is @mcp-b/global, outside this course.Review: The same page, three browsersQuestion 4 of 4
Which mode uses Chrome's real implementation without a token?
Correct
Playwright 1.64.0's Chromium 156.0.8078.4 with --enable-features=WebMCPTesting exposes Chrome's implementation. It is experimental and may change until the end of the trial (156).Not that one
Playwright 1.64.0's Chromium 156.0.8078.4 with --enable-features=WebMCPTesting exposes Chrome's implementation. It is experimental and may change until the end of the trial (156).Review: Clone and install the kitQuiz complete
You got {a} of {n} right. Get them all right and the lesson is marked as complete.Pick an answer. The explanation shows up after you try.
07In three sentences
KitOne clone, npm ci and Playwright's Chromium: no experimental Chrome installed.
Three modesNo API tests the fallback, Polyfill rehearses the API, Native runs Chrome's implementation.
ProductionOrigin trial on your domain; the rest of your visitors fall back to the No API mode.