E1 · Kit instalado
10 minEjecuta el bloque de clonar e instalar.
Listo cuando: npx playwright install chromium; echo "saída: $?" → saída: 0, y ls pagina/vendor muestra webmcp-polyfill.js.
Clase 2 · 18 min
Una acción, tres superficies: HTML, WebMCP en la página y MCP en el servidor
La misma reserva puede llegar por la persona en el formulario, por un agente dentro del navegador (WebMCP) o por un agente fuera de él (MCP). Si cada camino tiene su propia copia de la regla, se desalinean. En esta clase la regla vive en un solo archivo, y un script prueba que las tres superficies responden igual y piden a la persona.
Comenzar la clase
En esta clase vas a
- 1Las tres superficies y quién llega por cada una
- 2Una regla importada por la página y por el servidor
- 3Tres formas de pedir a la persona antes de reservar
- 4El error de copiar la regla a mano en el servidor
Objetivo: servir la misma acción por la pantalla, por WebMCP y por MCP con una sola regla, y probar que las tres responden igual y piden a la persona.
01Tres puertas, una regla
Haz clic en cada bloque.
Haz clic en cada bloque del diagrama para ver qué hace.
En producción la regla y el estado viven en el backend; en el kit, la regla es el mismo archivo y cada superficie tiene su propia memoria.
02Dónde vive cada herramienta
No va todo en las tres. Decide con la pregunta correcta.
1. Pantalla
Toda acción que la persona hace sigue en el HTML, accesible y con etiqueta.
Es el fallback de todo: sin él, desactivar una herramienta (clase 7) saca la acción del aire.
2. WebMCP
Cuando el agente necesita lo que está en la página: filtro abierto, ítem en pantalla, la persona ahí para confirmar.
Solo existe con la API (origin trial o flag); detección y fallback siempre.
3. MCP
Cuando el agente trabaja fuera del navegador: asistente en la terminal, automatización, otro servicio.
La autorización real (OAuth, scope) es del servidor: curso 1, clase 6.
4. Backend
La regla, el estado y la autorización viven en el backend, nunca solo en la página.
Las tres superficies son puertas delgadas que llaman a la misma regla.
Prueba rápida
Si cambiar la regla exige editar dos archivos, está duplicada.
03Descargar e instalar el kit
Versiones fijadas el 19/10/2026: Playwright 1.64.0 (trae Chromium), polyfill 6.0.3, SDK MCP 2.3.1.
Terminal · clonar y instalar
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: $?"
Ejemplo del repositorio
added 18 packages in 799ms saída: 0
El postinstall copia el polyfill a pagina/vendor/, solo para el ensayo. Si Chromium ya está descargado, el install no imprime nada.
04La misma regla en las dos puntas
Fragmentos del kit: la página y el servidor importan el mismo oficinas.mjs.
Fragmento · kit/pagina/app.mjs
import { criarAgenda } from './oficinas.mjs';
import { catalogo, liberadas, comRegistro, iniciarWebMCP } from './ferramentas.mjs';Fragmento · kit/servidor/mcp.mjs
import { criarAgenda, TEMAS } from '../pagina/oficinas.mjs';Fragmento · 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();
05Probar que las tres responden igual
Búsqueda por las tres puertas, luego tres reservas, cada una con su forma de pedir a la persona. Cliente MCP en el mismo proceso, sin puerto.
Terminal · tres superficies
cd ~/projetos/formacao-webmcp-expert-v72/kit node scripts/superficies.mjs nativo; echo "saída: $?"
Ejemplo del repositorio
== 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: 0En MCP, la 1.ª vuelta de la llamada devuelve input_required; el cliente le pregunta al usuario y repite la llamada (MRTR). El texto de la pregunta viene del servidor.
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
Alguien reescribió el filtro en el servidor "para no depender de la página" y olvidó el apenasComVaga. MCP pasa a ofrecer of-102, que no tiene cupo. La prueba lo detecta y sale con 1.
06El ensayo de la regla duplicada
En una copia descartable del kit (scripts/copia.sh): el kit no cambia.
Terminal · regla copiada en el servidor
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]}"07Práctica
Instalar, probar la equivalencia y ver la divergencia detectada. Cada ejercicio termina en un listo cuando.
E2 · Tres superficies iguales
5 minEjecuta el bloque de las tres superficies en el modo nativo (y, si quieres, en el polyfill).
Listo cuando: node scripts/superficies.mjs nativo; echo "saída: $?" → SUPERFÍCIES: 3/3 iguais na busca · 3/3 reservas esperaram a pessoa y saída: 0.
E3 · Ver la divergencia
5 minEjecuta el ensayo de la regla copiada a mano en el servidor.
Listo cuando: El bloque imprime mcp → of-101,of-102, SUPERFÍCIES: 2/3 iguais na busca y saída: 1.
E4 · Las puertas de tu sitio
15 minElige una acción de tu sitio y escribe dónde vive la regla y por qué puertas sale (pantalla, WebMCP, MCP), con la forma de pedir a la persona en cada una.
Listo cuando: El archivo superficies-[tu sitio].md tiene la acción, la ruta del archivo de la regla (una sola) y una línea por puerta con la confirmación.
08Prueba de la clase
La explicación aparece después de la respuesta.
Pregunta 1 de 4
¿Por qué el servidor MCP del kit importa ../pagina/oficinas.mjs en vez de tener su propio filtro?
Correcto
Una regla, varias puertas. El ensayo muestra lo contrario: la copia a mano olvidó un filtro y MCP pasó a ofrecer un taller sin cupo. WebMCP no llama a MCP: son superficies independientes.No es esa
Una regla, varias puertas. El ensayo muestra lo contrario: la copia a mano olvidó un filtro y MCP pasó a ofrecer un taller sin cupo. WebMCP no llama a MCP: son superficies independientes.Repasar: Descargar e instalar el kitPregunta 2 de 4
¿Cómo pide la reserva por MCP a la persona en la revisión 2026-07-28?
Correcto
MRTR: la tool devuelve input_required con el pedido; el cliente le pregunta al usuario y repite la llamada con la respuesta. Las requests iniciadas por el servidor y la sesión salieron en la 2026-07-28.No es esa
MRTR: la tool devuelve input_required con el pedido; el cliente le pregunta al usuario y repite la llamada con la respuesta. Las requests iniciadas por el servidor y la sesión salieron en la 2026-07-28.Repasar: Descargar e instalar el kitPregunta 3 de 4
¿Qué acción NO debe salir solo por WebMCP?
Correcto
Toda acción de la persona sigue en el HTML: es el fallback cuando no hay WebMCP o cuando la tool se desactiva. Las otras tres dependen del estado de la pantalla, el caso típico de WebMCP.No es esa
Toda acción de la persona sigue en el HTML: es el fallback cuando no hay WebMCP o cuando la tool se desactiva. Las otras tres dependen del estado de la pantalla, el caso típico de WebMCP.Repasar: Dónde vive cada herramientaPregunta 4 de 4
superficies.mjs dio 3/3 en la búsqueda. ¿Qué todavía NO está probado?
Correcto
El script prueba equivalencia y confirmación. La autorización (OAuth, scope mínimo) es del servidor y se prueba en el curso 1, lección 6, y en el curso 4.No es esa
El script prueba equivalencia y confirmación. La autorización (OAuth, scope mínimo) es del servidor y se prueba en el curso 1, lección 6, y en el curso 4.Repasar: Tres puertas, una reglaPrueba completada
Acertaste {a} de {n}. Si aciertas todas, la clase se marca como completada.Elige una alternativa. La explicación aparece después de tu intento.
09En tres frases
PuertasPantalla siempre; WebMCP cuando el agente necesita la página; MCP cuando trabaja fuera del navegador.
ReglaUn archivo, importado por los dos extremos; la copia a mano diverge.
PersonaTres formas de confirmar (panel, panel con consequentialHint, MRTR), el mismo sí antes de reservar.