Base: cómo usan los agentes un sitio hoy|INEMA.CLUB-PRO

Clase 4 · 15 min

MCP y WebMCP en una figura: servidor × página, quién llama a quién

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
Robot humanoide industrial sentado frente a un monitor con un navegador, con cables que van a un rack de servidores al fondo.

En esta clase vas a

  1. 1MCP: el agente llama a tu servidor (revisión 2026-07-28)
  2. 2WebMCP: la página declara tools (herramientas) en el navegador
  3. 3Detección de funcionalidad: sin la API, nada se rompe
  4. 4Qué curso de la formación enseña cada lado

Objetivo: situar MCP (servidor) y WebMCP (página) en una figura y ver la detección de funcionalidad con fallback en ejecución.

01Dos caminos hasta la misma acción

Haz clic en cada bloque.

Haz clic en cada bloque del diagrama para ver qué hace.

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.

02Lado a lado

Qué cambia entre los dos, en cuatro preguntas.

1. ¿Dónde se ejecuta?

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.

03Detección de funcionalidad con 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.

Archivo · kit/site/deteccao.js
// 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);
})();
Terminal · las dos ramas
cd ~/projetos/formacao-webmcp-base-v72/kit
node detectar.mjs depois; echo "saída: $?"
Ejemplo del repositorio
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.

04Práctica

Los dos ramos y la detección en tu copia.

E1 · Los dos ramos

5 min

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.

E2 · Detección en tu copia

10 min

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.

E3 · El mapa de tu servicio

10 min

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.

05Prueba de la lección

Pregunta 1 de 4

¿Dónde corre la tool en un servidor MCP?competencia

06En tres frases

MCP es servidorEl agente llama a un proceso tuyo; estable, revisión 2026-07-28.
WebMCP es páginadocument.modelContext, borrador del 16/10/2026, solo con origin trial o flag.
Detecta y cae al HTMLSin la API, el formulario sigue siendo el camino.

Para ir más allá

MCP: versionamiento (revisión actual 2026-07-28)WebMCP: repositorio de la spec y READMECurso 1 de la formación: servidor MCP de tu servicioCurso 2 de la formación: WebMCP en tu sitio
Clase anteriorSiguiente clase