Lesson 1 · 15 min
When an AI agent reaches your site, it does one of three things: it reads the HTML, it operates the screen like a person, or it calls a tool the site has declared. In this lesson you run all three against a sample page and against a real site, and see which one works in each case.
Start the lesson
Goal: tell reading, operating the screen, and calling a tool apart, and see all three running against the kit's sample page.
Click each block.
Agents that call tools are still a minority in Oct 2026; agents that read and agents that operate the screen show up every day.
Request: "schedule a full service for Ana on 10/25".
The agent downloads the HTML and finds out there's a form with three labels. It knows what the page offers, but it doesn't schedule anything: reading doesn't submit.
If the form only appears after JavaScript runs, a reader without a browser never even learns it exists.
The agent opens the page, finds the "Seu nome" field, the "Serviço" field, the "Data" field and the "Agendar" button, and clicks. It works if every control has a name.
On the kit's old page, the name is only in the placeholder and the button is a div: the agent gets stuck on the first field.
An agent looks things up by role and name ("text field Seu nome", "button Agendar"). A placeholder disappears when the person types, and a div is not a button to anyone reading the accessibility tree.
If the page registered a scheduling tool, the agent would pass name, service and date as JSON and get the response back, without clicking anything.
In the kit's Chromium the API doesn't exist: the example page has no origin trial token. inema.club does, and there the same Chromium lists the tools.
Just once. It clones the course repository into ~/projetos, installs Playwright 1.63.0 (pinned version, from 09/04/2026) and downloads its Chromium. No step in the course calls a model.
[ -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
The first time, npx playwright install chromium downloads the browser (a few hundred MB). The last line shows the Chromium folder the kit will use; on Mac and x86 Linux the name changes.
The kit serves the Oficina Pedal Livre (a fictional bike shop) page on a server of your own, at 127.0.0.1, and runs the three ways. depois.html has semantic HTML; antes.html is the same screen without labels.
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
Same screen, opposite result. In depois.html the agent schedules; in antes.html it can't even find the first field, and the script exits with 1. Way 3 is absent in both: the example page has no origin trial token.
The screenshot of antes.html and the one of depois.html are almost the same: same text, same yellow button. Anyone who tests only by looking thinks it's done. The test that counts is the agent's: find each control by role and name. Lesson 2 shows what it receives and lesson 3 fixes it.
The same script against inema.club, which belongs to INEMA. In your case, use only your own site: the script reads and lists, and never clicks or runs a tool outside the 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://<your-site>/<page with a form>; 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
On the real site, way 2 counts the controls in the tree and how many have no name. Way 3 shows up: inema.club publishes an origin trial token in a meta tag, and the kit's Chromium 153 (inside the trial's 149–156 range) exposes document.modelContext. The script only calls getTools(), which lists; it doesn't run any tool.
The concept in 30 s. Two notes from 10/19/2026: the "form that becomes a tool" is the declarative API, which was left out of the spec and only exists in Chrome; and security isn't up to the site alone: prompt injection is not solved, and course 4 covers it.
Kit installed, the three ways on the example page and on your site.
Run the "install" block. If you already have the repository in ~/projetos, it only installs the dependencies.
Done when: the block ends with the line playwright pronto: followed by the Chromium folder (e.g. chromium-1243/…/chrome).
Run the "after and before" block and compare line 2 of the two pages.
Done when: node tres-jeitos.mjs depois → 2 · operar achou 3 campos e o botão pelo nome and saída: 0; node tres-jeitos.mjs antes → travou and saída: 1.
Run the template on the page of your site that has the most important form (contact, booking, search). Write down the three lines: they go into the plan for lesson 8.
Done when: the output has the lines 1 · ler, 2 · operar and 3 · chamar, and ends with saída: 0 (no unnamed controls) or saída: 1 with the number of unnamed controls noted down.
Question 1 of 4
An agent downloads the HTML of your booking page and replies that a form exists. Which of the three ways did it use?skill
Question 2 of 4
antes.html and depois.html look the same on screen. Why does the agent get stuck only on antes.html?skill
Question 3 of 4
On inema.club, way 3 shows up with 8 tools; on the kit's page, it doesn't. What explains the difference in the same Chromium 153?
Question 4 of 4
Where do you start preparing a site for agents in Oct/2026?
Pick an answer. The explanation shows up after you try.