Clase 1 · 15 min
Cuando un agente de IA llega a tu sitio, hace una de tres cosas: lee el HTML, opera la pantalla como una persona o llama a una tool que el sitio declaró. En esta clase ejecutas las tres contra una página de ejemplo y contra un sitio real, y ves cuál funciona en cada caso.
Comenzar la clase
Objetivo: distinguir leer, operar la pantalla y llamar a una tool, y ver las tres funcionando contra la página de ejemplo del kit.
Haz clic en cada bloque.
Quien llama a una tool todavía es minoría en oct/2026; quien lee y quien opera la pantalla llegan todos los días.
Pedido: "agenda una revisión completa para Ana el 25/10".
El agente descarga el HTML y descubre que existe un formulario con tres etiquetas. Sabe lo que ofrece la página, pero no agenda nada: leer no envía.
Si el formulario solo aparece después del JavaScript, un lector sin navegador ni se entera de que existe.
El agente abre la página, encuentra el campo "Seu nome", el campo "Serviço", el campo "Data" y el botón "Agendar", y hace clic. Funciona si cada control tiene nombre.
En la página antigua del kit el nombre está solo en el placeholder y el botón es un div: el agente se traba en el primer campo.
Un agente busca por el rol y por el nombre ("campo de texto Seu nome", "botón Agendar"). El placeholder desaparece cuando la persona escribe y un div no es un botón para quien lee el árbol de accesibilidad.
Si la página registrara una tool para agendar, el agente pasaría nombre, servicio y fecha en JSON y recibiría la respuesta, sin hacer clic en nada.
En el Chromium del kit la API no existe: la página de ejemplo no tiene token de origin trial. INEMA.CLUB sí lo tiene, y ahí el mismo Chromium lista las tools.
Una sola vez. Clona el repositorio del curso en ~/projetos, instala Playwright 1.63.0 (versión fijada, del 04/09/2026) y descarga su Chromium. Ningún paso del curso llama a un modelo.
[ -d ~/projetos/formacao-webmcp-base-v72 ] || git clone -q https://github.com/inematds/formacao-webmcp-base-v72 ~/projetos/formacao-webmcp-base-v72
cd ~/projetos/formacao-webmcp-base-v72/kit
npm ci --no-audit --no-fund && npx playwright install chromium
node -e "import('playwright').then(p => console.log('playwright pronto:', p.chromium.executablePath().split('/').slice(-3).join('/')))"added 2 packages in 210ms playwright pronto: chromium-1243/chrome-linux-arm64/chrome
La primera vez, npx playwright install chromium descarga el navegador (algunos cientos de MB). La última línea muestra la carpeta del Chromium que usará el kit; en Mac y en Linux x86 el nombre cambia.
El kit levanta la página de la Oficina Pedal Livre (un taller de bicicletas ficticio) en un servidor solo tuyo, en 127.0.0.1, y ejecuta los tres modos. depois.html tiene HTML semántico; antes.html es la misma pantalla sin etiquetas.
cd ~/projetos/formacao-webmcp-base-v72/kit for p in depois antes; do echo "## $p.html"; node tres-jeitos.mjs $p; echo "saída: $?"; done
## depois.html 1 · ler 2.2 KB de HTML · h1: Agendar revisão · <form>: 1 · <label>: 3 2 · operar achou 3 campos e o botão pelo nome · tela diz: Pedido recebido (simulação): revisão completa em 2026-10-25, Ana 3 · chamar document.modelContext: ausente neste Chromium 153.0.8010.12 → sem ferramentas declaradas, o agente fica no jeito 2 saída: 0 ## antes.html 1 · ler 1.7 KB de HTML · h1: (sem <h1>) · <form>: 0 · <label>: 0 2 · operar travou: não achou o campo "Seu nome" pelo nome em 2 s (o agente teria de adivinhar pela tela) 3 · chamar document.modelContext: ausente neste Chromium 153.0.8010.12 → sem ferramentas declaradas, o agente fica no jeito 2 saída: 1
Misma pantalla, resultado opuesto. En depois.html el agente agenda; en antes.html ni siquiera encuentra el primer campo y el script termina con 1. El modo 3 está ausente en las dos: la página de ejemplo no tiene token de origin trial.
La captura de pantalla de antes.html y la de depois.html son casi iguales: mismo texto, mismo botón amarillo. Quien prueba solo mirando cree que está listo. La prueba que cuenta es la del agente: encontrar cada control por el rol y por el nombre. La clase 2 muestra lo que él recibe y la clase 3 lo arregla.
El mismo script contra INEMA.CLUB, que es de INEMA. En tu caso, usa solo tu sitio: el script lee y lista, nunca hace clic ni ejecuta tools fuera del kit.
cd ~/projetos/formacao-webmcp-base-v72/kit node tres-jeitos.mjs https://inema.club/; echo "saída: $?"
cd ~/projetos/formacao-webmcp-base-v72/kit node tres-jeitos.mjs https://<tu-sitio>/<página con formulario>; echo "saída: $?"
1 · ler 104.2 KB de HTML · h1: INEMA.CLUB Portal INEMA · <form>: 1 · <label>: 1 2 · operar 146 controles na árvore · 0 sem nome (esses o agente teria de adivinhar pela tela) 3 · chamar document.modelContext: presente neste Chromium 153.0.8010.12 · 8 ferramenta(s) registrada(s): buscar_conhecimento, buscar_cursos, comparar_cursos, consultar_atualizacoes, … saída: 0
En el sitio real, el modo 2 cuenta los controles del árbol y cuántos no tienen nombre. El modo 3 aparece: INEMA.CLUB publica un token de origin trial en una meta tag, y el Chromium 153 del kit (dentro del rango 149–156 del trial) expone document.modelContext. El script solo llama a getTools(), que lista; no ejecuta ninguna tool.
Concepto en 30 s. Dos avisos del 19/10/2026: el "formulario que se vuelve herramienta" es la API declarativa, que quedó fuera de la spec y solo existe en Chrome; y la seguridad no queda solo en manos del sitio: prompt injection no está resuelta, y el curso 4 trata ese tema.
Kit instalado, los tres modos en la página de ejemplo y en tu sitio.
Ejecuta el bloque "instalar". Si ya tienes el repositorio en ~/projetos, solo instala las dependencias.
Listo cuando: el bloque termina con la línea playwright pronto: seguida de la carpeta del Chromium (ej.: chromium-1243/…/chrome).
Ejecuta el bloque "después y antes" y compara la línea 2 de las dos páginas.
Listo cuando: node tres-jeitos.mjs depois → 2 · operar achou 3 campos e o botão pelo nome y saída: 0; node tres-jeitos.mjs antes → travou y saída: 1.
Ejecuta el modelo con la página de tu sitio que tiene el formulario más importante (contacto, reservas, búsqueda). Anota las tres líneas: van al plan de la lección 8.
Listo cuando: la salida tiene las líneas 1 · ler, 2 · operar y 3 · chamar, y termina en saída: 0 (ningún control sin nombre) o saída: 1 con el número de controles sin nombre anotado.
Pregunta 1 de 4
Un agente descarga el HTML de tu página de reservas y responde que existe un formulario. ¿Cuál de las tres maneras usó?competencia
Pregunta 2 de 4
antes.html y depois.html se ven iguales en pantalla. ¿Por qué el agente se traba solo en antes.html?competencia
Pregunta 3 de 4
En inema.club la manera 3 aparece con 8 tools (herramientas); en la página del kit, no. ¿Qué explica la diferencia en el mismo Chromium 153?
Pregunta 4 de 4
¿Por dónde empezar a preparar un sitio para agentes en oct/2026?
Elige una alternativa. La explicación aparece después de tu intento.