WebMCP en tu sitio|INEMA.CLUB-PRO

Formación WebMCP · curso 2 de 6 · 8 clases

WebMCP en tu sitio: herramientas en la página, con fallback y pruebas

Registra herramientas con document.modelContext, marca lo que solo lee y lo que tiene consecuencias, haz que la acción importante espere a la persona y prueba todo de forma automática. WebMCP es un borrador del 16/10/2026: el curso enseña a preparar la página sin romper a quien no tiene la API.

Empezar por la clase 1 Ver el área de la formación
Escritorio de desarrollador oscuro con un monitor que muestra un navegador y un cable conectado a un pequeño hub metálico.
  • 8clases
  • 22ejercicios con salida esperada
  • 3modos de prueba: sem API, polyfill, nativo
  • 0llamadas a modelos o API de pago

Las clases

Del estado de la spec a la batería automática: entorno, primera herramienta, ciclo de vida, anotaciones, formulario, catálogo y prueba.

  1. Clase 1 · 12 minWebMCP hoy: borrador del 16/10/2026, origin trial, flag y quién lo apoyaWebMCP permite que la página entregue herramientas a un agente en el navegador. El 19/10/2026 es un borrador de Community Group, probado en origin trial en Chrome y Edge, con Mozilla neutral y WebKit en contra. En esta lección compruebas la fecha de la spec con un comando y aprendes a leer el estado sin caer en promesas.
  2. Clase 2 · 15 minEntorno: flag, origin trial, polyfill y tres modos de pruebaNo 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.
  3. Clase 3 · 18 minPrimera tool: registerTool con inputSchema y executeUna tool de WebMCP es un objeto con nombre, descripción, esquema de entrada y una función execute. La página la registra; el agente las lista con getTools y la llama con executeTool. En esta clase lees la tool de búsqueda del kit, la llamas como la llamaría un agente y registras la tuya.
  4. Clase 4 · 15 minCiclo de vida: getTools, toolchange, AbortSignal y cancelaciónUna tool no es para siempre: la página la registra cuando la función existe y la quita cuando sale de escena. En la spec del 16/10/2026 no existe unregisterTool; quien la quita es el signal de un AbortController. Y quien llama puede cancelar una ejecución a la mitad. En esta clase ves el ciclo completo y los eventos que dispara el navegador.
  5. Clase 5 · 16 minAnotaciones y confirmación: readOnly, consequential y untrustedContentUna anotación es una pista que la página le da al agente y al navegador: esta herramienta solo lee, esta tiene consecuencias, esta devuelve texto de terceros. Una pista no es un bloqueo. Por eso la acción con efecto del kit también espera a que la persona haga clic en Confirmar. En esta lección marcas las anotaciones y ves funcionar la confirmación.
  6. Clase 6 · 14 minFormulario como herramienta: toolname y toolautosubmit (experimental, fuera de la spec)Chrome deja que un formulario se convierta en herramienta con tres atributos HTML. Es el camino más corto para quien ya tiene un formulario bien etiquetado, pero quedó fuera de la spec del 16/10/2026: existe en el origin trial de Chrome y en una capa temporal del polyfill. En esta clase lo usas con esa etiqueta y decides cuándo el formulario puede enviarse solo.
  7. Clase 7 · 18 minDiseñar el catálogo y migrar un sitio existente sin romper a nadieUn buen catálogo tiene pocas tools, cada una con una intención, nombre con verbo, entrada mínima y un error que el agente entiende. En un sitio que ya existe, la regla sale de la interfaz hacia una función que atiende el clic y la tool. En esta clase revisas un catálogo malo con el validador y planeas la migración de tu sitio.
  8. Clase 8 · 18 minProbar por tu cuenta: batería en los tres modos, checklist y planUna herramienta solo está lista cuando una prueba demuestra que funciona y que la página sigue igual sin ella. La batería del kit corre sin modelo en los tres modos, compara herramienta con formulario, prueba la confirmación y la remoción. En esta clase la ejecutas, ves cómo se detecta una rotura y sales con el plan fechado de tu sitio.

Para quién es

  1. 1Dev front-end o maker que edita HTML/JS y ejecuta comandos en la terminal.
  2. 2Quien quiere que su propio sitio sea usado por agentes en el navegador sin renunciar al camino normal.
  3. 3Quien prefiere preparar con pruebas antes que apostar por una API que todavía cambia.

Lo que vas a saber hacer

  1. 1Leer la spec con fecha y separar borrador, origin trial y flag.
  2. 2Registrar, listar, quitar y cancelar herramientas con document.modelContext.
  3. 3Marcar anotaciones y poner la acción con consecuencias detrás de un Confirmar.
  4. 4Ejecutar la batería en los modos sem API, polyfill y nativo, y detectar una falla.

Dónde encaja este curso en la Formación WebMCP

  1. 1Después del curso 0 (cómo los agentes usan un sitio) y del curso 1 (servidor MCP).
  2. 2Es el dueño de la API WebMCP en la página. El curso 3 mira el lado del agente; el curso 4, la seguridad.
  3. 3Antes de empezar: Node 20 o más nuevo, git y espacio en disco para el Chromium de Playwright.