Aula 1 · 15 min
Quando um agente de IA chega ao seu site, ele faz uma de três coisas: lê o HTML, opera a tela como uma pessoa ou chama uma ferramenta que o site declarou. Nesta aula você roda os três contra uma página de exemplo e contra um site real, e vê qual funciona em cada caso.
Começar a aula
Objetivo: distinguir ler, operar a tela e chamar ferramenta e ver os três rodando contra a página de exemplo do kit.
Clique em cada bloco.
Quem chama ferramenta ainda é minoria em out/2026; quem lê e quem opera a tela chegam todo dia.
Pedido: "agende uma revisão completa para a Ana no dia 25/10".
O agente baixa o HTML e descobre que existe um formulário com três rótulos. Ele sabe o que a página oferece, mas não agenda nada: ler não envia.
Se o formulário só aparece depois do JavaScript, um leitor sem navegador nem fica sabendo dele.
O agente abre a página, acha o campo "Seu nome", o campo "Serviço", o campo "Data" e o botão "Agendar", e clica. Funciona se cada controle tiver nome.
Na página antiga do kit o nome está só no placeholder e o botão é um div: o agente trava no primeiro campo.
Um agente procura pelo papel e pelo nome ("campo de texto Seu nome", "botão Agendar"). Placeholder some quando a pessoa digita e div não é botão para quem lê a árvore.
Se a página registrasse uma ferramenta de agendar, o agente passaria nome, serviço e data em JSON e receberia a resposta, sem clicar em nada.
No Chromium do kit a API não existe: a página de exemplo não tem token de origin trial. O inema.club tem, e ali o mesmo Chromium lista as ferramentas.
Uma vez só. Clona o repositório do curso em ~/projetos, instala o Playwright 1.63.0 (versão fixada, de 04/09/2026) e baixa o Chromium dele. Nenhum passo do curso chama 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
Na primeira vez o npx playwright install chromium baixa o navegador (algumas centenas de MB). A última linha mostra a pasta do Chromium que o kit vai usar; no Mac e no Linux x86 o nome muda.
O kit sobe a página da Oficina Pedal Livre (fictícia) num servidor só seu, em 127.0.0.1, e roda os três jeitos. depois.html tem HTML semântico; antes.html é a mesma tela sem rótulos.
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
Mesma tela, resultado oposto. Em depois.html o agente agenda; em antes.html ele não acha nem o primeiro campo e o script sai com 1. O jeito 3 está ausente nas duas: a página de exemplo não tem token de origin trial.
A captura de tela de antes.html e a de depois.html são quase iguais: mesmo texto, mesmo botão amarelo. Quem testa só olhando acha que está pronto. O teste que conta é o do agente: achar cada controle pelo papel e pelo nome. A aula 2 mostra o que ele recebe e a aula 3 conserta.
O mesmo script contra o inema.club, que é do INEMA. No seu caso, use só o seu site: o script lê e lista, nunca clica nem executa ferramenta fora do 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://<seu-site>/<página com formulário>; 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
No site real o jeito 2 conta os controles da árvore e quantos não têm nome. O jeito 3 aparece: o inema.club publica um token de origin trial numa meta tag, e o Chromium 153 do kit (dentro da faixa 149–156 do trial) expõe document.modelContext. O script só chama getTools(), que lista; não executa nenhuma ferramenta.
Conceito em 30 s. Dois avisos de 19/10/2026: o "formulário que vira ferramenta" é a API declarativa, que ficou fora da spec e só existe no Chrome; e a segurança não fica só com o site: prompt injection não está resolvida, e o curso 4 trata disso.
Kit instalado, os três jeitos na página de exemplo e no seu site.
Rode o bloco "instalar". Se você já tem o repositório em ~/projetos, ele só instala as dependências.
Pronto quando: o bloco termina com a linha playwright pronto: seguida da pasta do Chromium (ex.: chromium-1243/…/chrome).
Rode o bloco "depois e antes" e compare a linha 2 das duas páginas.
Pronto quando: node tres-jeitos.mjs depois → 2 · operar achou 3 campos e o botão pelo nome e saída: 0; node tres-jeitos.mjs antes → travou e saída: 1.
Rode o modelo com a página do seu site que tem o formulário mais importante (contato, agendamento, busca). Anote as três linhas: vão para o plano da aula 8.
Pronto quando: a saída tem as linhas 1 · ler, 2 · operar e 3 · chamar, e termina em saída: 0 (nenhum controle sem nome) ou saída: 1 com o número de controles sem nome anotado.
Pergunta 1 de 4
Um agente baixa o HTML da sua página de agendamento e responde que existe um formulário. Qual dos três jeitos ele usou?competência
Pergunta 2 de 4
antes.html e depois.html parecem iguais na tela. Por que o agente trava só em antes.html?competência
Pergunta 3 de 4
No inema.club o jeito 3 aparece com 8 ferramentas; na página do kit, não. O que explica a diferença no mesmo Chromium 153?
Pergunta 4 de 4
Por onde começar a preparar um site para agentes em out/2026?
Escolha uma alternativa. A explicação aparece depois da sua tentativa.