Clase 4 · 15 min
Los dos nombres parecen lo mismo y no lo son. MCP conecta un agente con un servidor tuyo, fuera del navegador, y es estable. WebMCP deja que la propia página declare tools (herramientas) para el agente que está en el navegador, y es un borrador. En esta lección separas los dos en una figura y ejecutas la detección de funcionalidad que mantiene el sitio funcionando sin la API.
Comenzar la clase
Objetivo: situar MCP (servidor) y WebMCP (página) en una figura y ver la detección de funcionalidad con fallback en ejecución.
Haz clic en cada bloque.
MCP: el agente va hasta tu servidor. WebMCP: la página abierta ofrece tools (herramientas) al agente del navegador. El HTML sostiene a los dos.
Qué cambia entre los dos, en cuatro preguntas.
MCP: en un proceso tuyo (en la máquina del agente por stdio, o en una dirección HTTP). WebMCP: dentro de la pestaña abierta, en el JavaScript de la página.
MCP: el cliente (el agente) llama al servidor. WebMCP: el agente del navegador lee la lista con getTools y ejecuta la tool (herramienta); la función que se ejecuta es la de la página.
MCP: estable, revisión 2026-07-28 (los tutoriales con SSE e initialize son de revisiones antiguas). WebMCP: borrador que ya cambió de nombre una vez (de navigator a document, aceptado el 19/05/2026). Lección 5.
WebMCP: experimental el 19/10/2026 (origin trial Chrome 149–156, Edge 150).
El HTML que el agente lee (lección 3) sirve para los dos. Si tienes un servicio con API, el servidor MCP es el paso estable. La página con WebMCP entra como laboratorio, siempre con detección y fallback.
El único JavaScript de WebMCP de este curso: ver si la API existe y, si no existe, dejar el formulario como está. Registrar tools (herramientas) de verdad es el curso 2. El detectar.mjs abre la página sin la API y con un stub vacío (no es la API ni el polyfill), solo para mostrar las dos ramas.
// deteccao.js — detección de funcionalidad de WebMCP con fallback (kit del curso 0, Formación WebMCP).
// Spec usada: WebMCP, Draft Community Group Report del 16/10/2026 (document.modelContext).
// Es un borrador de Community Group, no un estándar: en Chrome solo con origin trial (149–156) o flag local.
// Sin la API, nada cambia: el formulario de arriba sigue siendo el camino para personas y agentes.
(function () {
const caminho = "modelContext" in document
? "WebMCP presente: aqui a página registraria as ferramentas (curso 2 da formação)"
: "WebMCP ausente: o site segue pelo formulário, igual para todos";
document.documentElement.dataset.webmcp = "modelContext" in document ? "sim" : "nao";
console.log(caminho);
})();cd ~/projetos/formacao-webmcp-base-v72/kit node detectar.mjs depois; echo "saída: $?"
sem API · WebMCP ausente: o site segue pelo formulário, igual para todos · botão Agendar: sim com stub · WebMCP presente: aqui a página registraria as ferramentas (curso 2 da formação) · botão Agendar: sim saída: 0
En los dos ramos el botón "Agendar" sigue ahí: el fallback no depende de la API. Con la API presente, la página registraría las tools; sin ella, sigue igual para todos.
sem API · (a página não faz detecção) · botão Agendar: não com stub · (a página não faz detecção) · botão Agendar: não saída: 1
Al correr la misma prueba en antes.html: la página no hace ninguna detección y ni siquiera tiene un botón con nombre. El código WebMCP sin "modelContext" in document se rompe en el navegador que no tiene la API, que hoy es casi todo navegador.
Los dos ramos y la detección en tu copia.
Corre el bloque "os dois ramos" y lee el deteccao.js línea por línea.
Listo cuando: node detectar.mjs depois → línea sem API · WebMCP ausente, línea com stub · WebMCP presente, las dos con botão Agendar: sim, y saída: 0.
Copia kit/site/deteccao.js a /tmp/oficina/ e incluye <script src="deteccao.js"></script> al final del body de la copia arreglada en la clase 3.
Listo cuando: node detectar.mjs /tmp/oficina/antes.html → las dos líneas con botão Agendar: sim y saída: 0.
Escribe tres líneas: qué acción de tu sitio pediría un agente; si vive en un servicio con API (candidata a MCP, curso 1) o solo en la página (candidata a WebMCP, curso 2); y cuál formulario es el fallback.
Listo cuando: el archivo con las tres líneas existe y cada acción tiene un formulario de fallback nombrado.
Pregunta 1 de 4
¿Dónde corre la tool en un servidor MCP?competencia
Pregunta 2 de 4
¿Cuál es la superficie de WebMCP en el borrador del 16/10/2026?competencia
Pregunta 3 de 4
¿Para qué sirve la detección "modelContext" in document?
Pregunta 4 de 4
¿El stub de detectar.mjs es el polyfill de WebMCP?
Elige una alternativa. La explicación aparece después de tu intento.