E1 · Kit instalado
10 minClona el repositorio del curso en ~/projetos e instala el kit con el bloque de arriba.
Listo cuando: El bloque termina en saída: 0 y ls ~/projetos/formacao-webmcp-site-v72/kit/pagina/vendor muestra webmcp-polyfill.js.
Clase 2 · 15 min
Entorno: flag, origin trial, polyfill y tres modos de prueba
No necesitas tener instalado un Chrome experimental para trabajar. El kit levanta la página en un servidor local y abre el mismo Chromium de Playwright en tres modos: sin la API, con el polyfill y con WebMCP nativo detrás de la flag de prueba. Sin costo y sin clave de API.
Empezar la lección
En esta lección vas a
- 1Clonar el kit e instalar con versiones fijadas
- 2Contexto seguro: https en producción, 127.0.0.1 en el ensayo
- 3Los tres modos: sem, polyfill y nativo
- 4Origin trial y flag en tu Chrome, cuando quieras verlo en vivo
Objetivo: armar el kit y ver la misma página en tres modos (sin API, polyfill, nativo) sin gastar cuota ni instalar un Chrome experimental.
01La misma página, tres navegadores
Haz clic en cada modo.
La API solo existe en contexto seguro: https o localhost/127.0.0.1. Por eso el kit sirve la página en 127.0.0.1.
Prueba siempre el modo Sem ("sin API"): es el que ve la mayoría de los visitantes.
02Clonar e instalar el kit
Versiones fijadas al 19/10/2026: @mcp-b/webmcp-polyfill 6.0.3 y playwright 1.64.0. El postinstall copia el polyfill a pagina/vendor/ (solo para el ensayo).
Terminal · clonar, instalar y descargar 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: $?"
Ejemplo del repositorio
> 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
La primera vez, playwright install descarga Chrome for Testing 156.0.8078.4 (190,5 MiB), el headless shell (119,9 MiB) y FFmpeg (1,9 MiB); las siguientes veces no descarga de nuevo. La ruta (aquí linux-arm64) y el tiempo cambian de una máquina a otra.
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
Sin npx playwright install chromium, todos los scripts del kit se detienen aquí. La ruta del medio cambia según el sistema (aquí, arm64).
03Qué ve la página en cada modo
ambiente.mjs abre la página en los tres modos y lee: contexto seguro, document.modelContext, el nombre antiguo navigator.modelContext y el aviso de la pantalla.
Terminal · tres modos
cd ~/projetos/formacao-webmcp-site-v72/kit node scripts/ambiente.mjs; echo "saída: $?"
Ejemplo del repositorio
== 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
En el modo Sem, la página avisa y sigue por el formulario. En los otros dos, registra 4 herramientas. En ninguno existe navigator.modelContext.
04Verlo en tu Chrome (opcional)
Experimental al 19/10/2026. Nada de esto es criterio de listo.
1. Flag
Abre chrome://flags/#enable-webmcp-testing, actívala y reinicia Chrome.
Ejecuta el servidor del kit y abre la URL que imprime.
Servidor
cd kit && node scripts/servir.mjs
2. Polyfill
Sin la flag, añade ?ensaio=polyfill a la URL.
La página carga el polyfill de pagina/vendor/ y registra las mismas herramientas.
URL
http://127.0.0.1:[porta]/?ensaio=polyfill
3. Inspector
Google publica la extensión Model Context Tool Inspector, que lista y llama a las tools con lenguaje natural.
Pide la clave de API de un modelo (Gemini). No es necesaria en este curso.
4. Producción
Registra tu dominio en el origin trial de WebMCP y pega el token en la meta tag de la parte superior de kit/pagina/index.html.
El token se registra para el dominio del sitio; en localhost, usa la flag.
05Práctica
Todo local, sin costo. Cada ejercicio termina con un listo cuando.
E2 · Tres modos
3 minEjecuta ambiente.mjs y compara las tres líneas "página:".
Listo cuando: node scripts/ambiente.mjs; echo "saída: $?" → página: sem, página: com, página: com y saída: 0.
E3 · ¿El modo Sem se rompe?
5 minEjecuta node scripts/servir.mjs, abre la URL en el navegador que usas todos los días (sin flag) y haz una búsqueda y una reserva desde la pantalla.
Listo cuando: La búsqueda muestra resultados y la reserva aparece en "Minhas reservas" sin ninguna tool registrada.
06Prueba de la clase
La explicación aparece después de la respuesta.
Pregunta 1 de 4
¿Por qué el kit sirve la página en 127.0.0.1 y no abre el archivo directamente?
Correcto
ModelContext es [SecureContext]: solo existe en https o localhost/127.0.0.1. En producción, https. El error común es probar por file:// y creer que la API desapareció.No es esa
ModelContext es [SecureContext]: solo existe en https o localhost/127.0.0.1. En producción, https. El error común es probar por file:// y creer que la API desapareció.Repasar: La misma página, tres navegadoresPregunta 2 de 4
¿Qué demuestra el modo Sem?
Correcto
Sem es el visitante común. Si la página se rompe ahí, se rompió para la mayoría. Los otros modos prueban el camino del agente.No es esa
Sem es el visitante común. Si la página se rompe ahí, se rompió para la mayoría. Los otros modos prueban el camino del agente.Repasar: La misma página, tres navegadoresPregunta 3 de 4
¿Qué es @mcp-b/webmcp-polyfill 6.0.3 en este curso?
Correcto
Es una redistribución temporal del polyfill del CG, mantenida por MCP-B, y avisa que será retirada. Sirve para ensayar la API de la spec; no dispara toolactivated/toolcancel. El puente con MCP es @mcp-b/global, fuera de este curso.No es esa
Es una redistribución temporal del polyfill del CG, mantenida por MCP-B, y avisa que será retirada. Sirve para ensayar la API de la spec; no dispara toolactivated/toolcancel. El puente con MCP es @mcp-b/global, fuera de este curso.Repasar: La misma página, tres navegadoresPregunta 4 de 4
¿Qué modo usa la implementación real de Chrome sin token?
Correcto
El Chromium 156.0.8078.4 de Playwright 1.64.0 con --enable-features=WebMCPTesting expone la implementación de Chrome. Es experimental y puede cambiar hasta el final del trial (156).No es esa
El Chromium 156.0.8078.4 de Playwright 1.64.0 con --enable-features=WebMCPTesting expone la implementación de Chrome. Es experimental y puede cambiar hasta el final del trial (156).Repasar: Clonar e instalar el kitPrueba 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.
07En tres frases
KitUn clon, npm ci y el Chromium de Playwright: no se instala ningún Chrome experimental.
Tres modosSem prueba el fallback, Polyfill ensaya la API, Nativo ejecuta la implementación de Chrome.
ProducciónOrigin trial en tu dominio; el resto de los visitantes cae en el modo Sem.