E1 · Kit installed
10 minRun the clone and install block.
Done when: npx playwright install chromium; echo "saída: $?" → saída: 0, and ls pagina/vendor shows webmcp-polyfill.js.
Lesson 2 · 18 min
One action, three surfaces: HTML, WebMCP on the page, and MCP on the server
The same booking can arrive through the person on the form, through an agent inside the browser (WebMCP), or through an agent outside it (MCP). If each path has its own copy of the rule, they drift apart. In this lesson the rule lives in a single file, and a script proves that the three surfaces respond the same way and ask for the person.
Start the lesson
In this lesson you will
- 1The three surfaces and who arrives through each
- 2One rule imported by the page and by the server
- 3Three ways to ask for the person before booking
- 4The mistake of copying the rule by hand onto the server
Goal: serve the same action through the screen, WebMCP, and MCP with a single rule, and prove that the three respond the same way and ask for the person.
01Three doors, one rule
Tap each block.
Click each block in the diagram to see what it does.
In production, the rule and the state live in the backend; in the kit, the rule is the same file and each surface has its own memory.
02Where each tool lives
It's not everything on all three. Decide by asking the right question.
1. Screen
Every action the person takes stays in the HTML, accessible and labeled.
It's the fallback for everything: without it, turning off a tool (lesson 7) takes the action offline.
2. WebMCP
When the agent needs what's on the page: an open filter, an item on screen, the person right there to confirm.
It only exists with the API (origin trial or flag); always detect it and have a fallback.
3. MCP
When the agent works outside the browser: a terminal assistant, automation, another service.
Real authorization (OAuth, scope) belongs to the server: course 1, lesson 6.
4. Backend
Rule, state and authorization live in the backend, never only on the page.
The three surfaces are thin doors that call the same rule.
Quick test
If changing the rule means editing two files, it's duplicated.
03Download and install the kit
Versions pinned on 10/19/2026: Playwright 1.64.0 (brings Chromium), polyfill 6.0.3, MCP SDK 2.3.1.
Terminal · clone and install
git clone -q https://github.com/inematds/formacao-webmcp-expert-v72 ~/projetos/formacao-webmcp-expert-v72 cd ~/projetos/formacao-webmcp-expert-v72/kit npm ci --no-audit --no-fund 2>&1 | tail -2 npx playwright install chromium; echo "saída: $?"
Example from the repository
added 18 packages in 799ms saída: 0
The postinstall copies the polyfill to pagina/vendor/, only for the rehearsal. If Chromium is already downloaded, the install prints nothing.
04The same rule on both ends
Excerpts from the kit: the page and the server import the same oficinas.mjs.
Excerpt · kit/pagina/app.mjs
import { criarAgenda } from './oficinas.mjs';
import { catalogo, liberadas, comRegistro, iniciarWebMCP } from './ferramentas.mjs';Excerpt · kit/servidor/mcp.mjs
import { criarAgenda, TEMAS } from '../pagina/oficinas.mjs';Excerpt · kit/servidor/mcp.mjs
// O estado do serviço fica FORA da fábrica: o protocolo não guarda sessão, o seu serviço guarda o dado. export const agenda = criarAgenda();
05Prove that all three answer the same
Search through the three doors, then three bookings, each one with its own way of asking the person. MCP client in the same process, no port.
Terminal · three surfaces
cd ~/projetos/formacao-webmcp-expert-v72/kit node scripts/superficies.mjs nativo; echo "saída: $?"
Example from the repository
== Chromium 156.0.8078.4 (Playwright) · modo: nativo · MCP 2026-07-28 (SDK 2.3.1)
buscar_oficinas {"tema":"html","apenasComVaga":true}
html → of-101
webmcp → of-101
mcp → of-101
reservar_vaga of-101
html → painel Confirmar na página → reservado
webmcp → consequentialHint + Confirmar na página → reservado
mcp → MRTR: o cliente perguntou "Reservar "HTML semântico na prática" (2026-11-04) para Duda?" → reservado
SUPERFÍCIES: 3/3 iguais na busca · 3/3 reservas esperaram a pessoa
saída: 0In MCP, the first round of the call returns input_required; the client asks the user and repeats the call (MRTR). The text of the question comes from the server.
html → of-101 webmcp → of-101 mcp → of-101,of-102 SUPERFÍCIES: 2/3 iguais na busca · 3/3 reservas esperaram a pessoa saída: 1
Someone rewrote the filter on the server "so it doesn't depend on the page" and forgot apenasComVaga. MCP now offers of-102, which has no seat left. The proof catches it and exits with 1.
06The duplicated-rule rehearsal
On a disposable copy of the kit (scripts/copia.sh): the kit itself does not change.
Terminal · rule copied on the server
cd ~/projetos/formacao-webmcp-expert-v72/kit
E=$(bash scripts/copia.sh a2)
# o erro comum: copiar a regra à mão no servidor (e esquecer o filtro de vaga)
sed -i 's/const oficinas = agenda.buscar(input);/const oficinas = agenda.buscar({}).filter(o => !input.tema || o.tema === input.tema);/' $E/servidor/mcp.mjs
cd $E && node scripts/superficies.mjs nativo | grep -E "→ of|SUPERF"; echo "saída: ${PIPESTATUS[0]}"07Practice
Install, prove the equivalence, and watch the divergence get caught. Each exercise ends in a done when.
E2 · Three equal surfaces
5 minRun the three-surfaces block in native mode (and, if you want, in polyfill).
Done when: node scripts/superficies.mjs nativo; echo "saída: $?" → SUPERFÍCIES: 3/3 iguais na busca · 3/3 reservas esperaram a pessoa and saída: 0.
E3 · See the divergence
5 minRun the rehearsal of the rule copied by hand on the server.
Done when: The block prints mcp → of-101,of-102, SUPERFÍCIES: 2/3 iguais na busca and saída: 1.
E4 · The doors of your site
15 minPick one action on your site and write down where the rule lives and through which doors it goes out (screen, WebMCP, MCP), with the way of asking the person in each one.
Done when: The file superficies-[your site].md has the action, the path of the rule file (just one) and one line per door with the confirmation.
08Lesson quiz
The explanation appears after the answer.
Question 1 of 4
Why does the kit's MCP server import ../pagina/oficinas.mjs instead of having its own filter?
Correct
One rule, several doors. The rehearsal shows the opposite: the copy by hand forgot a filter and MCP started offering a workshop with no seat. WebMCP doesn't call MCP: they are independent surfaces.Not this one
One rule, several doors. The rehearsal shows the opposite: the copy by hand forgot a filter and MCP started offering a workshop with no seat. WebMCP doesn't call MCP: they are independent surfaces.Review: Download and install the kitQuestion 2 of 4
How does booking through MCP ask the person in revision 2026-07-28?
Correct
MRTR: the tool returns input_required with the request; the client asks the user and repeats the call with the answer. Server-initiated requests and session were dropped in 2026-07-28.Not this one
MRTR: the tool returns input_required with the request; the client asks the user and repeats the call with the answer. Server-initiated requests and session were dropped in 2026-07-28.Review: Download and install the kitQuestion 3 of 4
Which action should NOT go out through WebMCP alone?
Correct
Every action of the person stays in the HTML: it is the fallback when there is no WebMCP or when the tool is turned off. The other three depend on the screen state, the typical WebMCP case.Not this one
Every action of the person stays in the HTML: it is the fallback when there is no WebMCP or when the tool is turned off. The other three depend on the screen state, the typical WebMCP case.Review: Where each tool livesQuestion 4 of 4
superficies.mjs returned 3/3 on search. What is still NOT proven?
Correct
The script proves equivalence and confirmation. Authorization (OAuth, minimum scope) belongs to the server and is tested in course 1, lesson 6, and in course 4.Not this one
The script proves equivalence and confirmation. Authorization (OAuth, minimum scope) belongs to the server and is tested in course 1, lesson 6, and in course 4.Review: Three doors, one ruleQuiz complete
You got {a} of {n} right. If you get them all right, the lesson is marked as completed.Choose an option. The explanation appears after your attempt.
09In three sentences
DoorsScreen always; WebMCP when the agent needs the page; MCP when it works outside the browser.
RuleOne file, imported by both ends; a hand-made copy drifts apart.
PersonThree ways to confirm (panel, panel with consequentialHint, MRTR), the same yes before booking.