E1 · Kit instalado
10 minRode o bloco de clonar e instalar.
Pronto quando: npx playwright install chromium; echo "saída: $?" → saída: 0, e ls pagina/vendor mostra webmcp-polyfill.js.
Aula 2 · 18 min
Uma ação, três superfícies: HTML, WebMCP na página e MCP no servidor
A mesma reserva pode chegar pela pessoa no formulário, por um agente dentro do navegador (WebMCP) ou por um agente fora dele (MCP). Se cada caminho tiver a sua cópia da regra, elas divergem. Nesta aula a regra mora num arquivo só, e um script prova que as três superfícies respondem igual e pedem a pessoa.
Começar a aula
Nesta aula você vai
- 1As três superfícies e quem chega por cada uma
- 2Uma regra importada pela página e pelo servidor
- 3Três jeitos de pedir a pessoa antes de reservar
- 4O erro de copiar a regra à mão no servidor
Objetivo: servir a mesma ação pela tela, pelo WebMCP e pelo MCP com uma regra só, e provar que as três respondem igual e pedem a pessoa.
01Três portas, uma regra
Clique em cada bloco.
Clique em cada bloco do diagrama para ver o que ele faz.
Em produção a regra e o estado ficam no backend; no kit, a regra é o mesmo arquivo e cada superfície tem a sua memória.
02Onde cada ferramenta mora
Não é tudo nas três. Decida pela pergunta certa.
1. Tela
Toda ação que a pessoa faz continua no HTML, acessível e rotulado.
É o fallback de tudo: sem ele, desligar uma ferramenta (aula 7) tira a ação do ar.
2. WebMCP
Quando o agente precisa do que está na página: filtro aberto, item na tela, a pessoa ali para confirmar.
Só existe com a API (origin trial ou flag); detecção e fallback sempre.
3. MCP
Quando o agente trabalha fora do navegador: assistente no terminal, automação, outro serviço.
Autorização real (OAuth, escopo) é do servidor: curso 1, aula 6.
4. Backend
Regra, estado e autorização ficam no backend, nunca só na página.
As três superfícies são portas finas que chamam a mesma regra.
Teste rápido
Se mudar a regra exige editar dois arquivos, ela está duplicada.
03Baixar e instalar o kit
Versões fixadas em 19/10/2026: Playwright 1.64.0 (traz o Chromium), polyfill 6.0.3, SDK MCP 2.3.1.
Terminal · clonar e instalar
git clone -q https://github.com/inematds/formacao-webmcp-expert-v72 ~/projetos/formacao-webmcp-expert-v72 cd ~/projetos/formacao-webmcp-expert-v72/kit npm ci --no-audit --no-fund 2>&1 | tail -2 npx playwright install chromium; echo "saída: $?"
Exemplo do repositório
added 18 packages in 799ms saída: 0
O postinstall copia o polyfill para pagina/vendor/, só para o ensaio. Se o Chromium já estiver baixado, o install não imprime nada.
04A mesma regra nas duas pontas
Trechos do kit: a página e o servidor importam o mesmo oficinas.mjs.
Trecho · kit/pagina/app.mjs
import { criarAgenda } from './oficinas.mjs';
import { catalogo, liberadas, comRegistro, iniciarWebMCP } from './ferramentas.mjs';Trecho · kit/servidor/mcp.mjs
import { criarAgenda, TEMAS } from '../pagina/oficinas.mjs';Trecho · kit/servidor/mcp.mjs
// O estado do serviço fica FORA da fábrica: o protocolo não guarda sessão, o seu serviço guarda o dado. export const agenda = criarAgenda();
05Provar que as três respondem igual
Busca pelas três portas, depois três reservas, cada uma com o seu jeito de pedir a pessoa. Cliente MCP no mesmo processo, sem porta.
Terminal · três superfícies
cd ~/projetos/formacao-webmcp-expert-v72/kit node scripts/superficies.mjs nativo; echo "saída: $?"
Exemplo do repositório
== Chromium 156.0.8078.4 (Playwright) · modo: nativo · MCP 2026-07-28 (SDK 2.3.1)
buscar_oficinas {"tema":"html","apenasComVaga":true}
html → of-101
webmcp → of-101
mcp → of-101
reservar_vaga of-101
html → painel Confirmar na página → reservado
webmcp → consequentialHint + Confirmar na página → reservado
mcp → MRTR: o cliente perguntou "Reservar "HTML semântico na prática" (2026-11-04) para Duda?" → reservado
SUPERFÍCIES: 3/3 iguais na busca · 3/3 reservas esperaram a pessoa
saída: 0No MCP, a 1ª volta da chamada devolve input_required; o cliente pergunta ao usuário e repete a chamada (MRTR). O texto da pergunta vem do servidor.
html → of-101 webmcp → of-101 mcp → of-101,of-102 SUPERFÍCIES: 2/3 iguais na busca · 3/3 reservas esperaram a pessoa saída: 1
Alguém reescreveu o filtro no servidor "para não depender da página" e esqueceu o apenasComVaga. O MCP passa a oferecer of-102, que não tem vaga. A prova pega e sai com 1.
06O ensaio da regra duplicada
Numa cópia descartável do kit (scripts/copia.sh): o kit não muda.
Terminal · regra copiada no servidor
cd ~/projetos/formacao-webmcp-expert-v72/kit
E=$(bash scripts/copia.sh a2)
# o erro comum: copiar a regra à mão no servidor (e esquecer o filtro de vaga)
sed -i 's/const oficinas = agenda.buscar(input);/const oficinas = agenda.buscar({}).filter(o => !input.tema || o.tema === input.tema);/' $E/servidor/mcp.mjs
cd $E && node scripts/superficies.mjs nativo | grep -E "→ of|SUPERF"; echo "saída: ${PIPESTATUS[0]}"07Prática
Instalar, provar a equivalência e ver a divergência ser pega. Cada exercício termina num pronto quando.
E2 · Três superfícies iguais
5 minRode o bloco das três superfícies no modo nativo (e, se quiser, no polyfill).
Pronto quando: node scripts/superficies.mjs nativo; echo "saída: $?" → SUPERFÍCIES: 3/3 iguais na busca · 3/3 reservas esperaram a pessoa e saída: 0.
E3 · Ver a divergência
5 minRode o ensaio da regra copiada à mão no servidor.
Pronto quando: O bloco imprime mcp → of-101,of-102, SUPERFÍCIES: 2/3 iguais na busca e saída: 1.
E4 · As portas do seu site
15 minEscolha uma ação do seu site e escreva onde mora a regra e por quais portas ela sai (tela, WebMCP, MCP), com o jeito de pedir a pessoa em cada uma.
Pronto quando: O arquivo superficies-[seu site].md tem a ação, o caminho do arquivo da regra (um só) e uma linha por porta com a confirmação.
08Teste da aula
A explicação aparece depois da resposta.
Pergunta 1 de 4
Por que o servidor MCP do kit importa ../pagina/oficinas.mjs em vez de ter o próprio filtro?
Correto
Uma regra, várias portas. O ensaio mostra o contrário: a cópia à mão esqueceu um filtro e o MCP passou a oferecer oficina sem vaga. O WebMCP não chama o MCP: são superfícies independentes.Não é essa
Uma regra, várias portas. O ensaio mostra o contrário: a cópia à mão esqueceu um filtro e o MCP passou a oferecer oficina sem vaga. O WebMCP não chama o MCP: são superfícies independentes.Rever: Baixar e instalar o kitPergunta 2 de 4
Como a reserva pelo MCP pede a pessoa na revisão 2026-07-28?
Correto
MRTR: a ferramenta devolve input_required com o pedido; o cliente pergunta ao usuário e repete a chamada com a resposta. Requisições iniciadas pelo servidor e sessão saíram na 2026-07-28.Não é essa
MRTR: a ferramenta devolve input_required com o pedido; o cliente pergunta ao usuário e repete a chamada com a resposta. Requisições iniciadas pelo servidor e sessão saíram na 2026-07-28.Rever: Baixar e instalar o kitPergunta 3 de 4
Qual ação NÃO deve sair só pelo WebMCP?
Correto
Toda ação da pessoa continua no HTML: é o fallback quando não há WebMCP ou quando a ferramenta é desligada. As outras três dependem do estado da tela, o caso típico do WebMCP.Não é essa
Toda ação da pessoa continua no HTML: é o fallback quando não há WebMCP ou quando a ferramenta é desligada. As outras três dependem do estado da tela, o caso típico do WebMCP.Rever: Onde cada ferramenta moraPergunta 4 de 4
superficies.mjs deu 3/3 na busca. O que ainda NÃO está provado?
Correto
O script prova equivalência e confirmação. Autorização (OAuth, escopo mínimo) é do servidor e se testa no curso 1, aula 6, e no curso 4.Não é essa
O script prova equivalência e confirmação. Autorização (OAuth, escopo mínimo) é do servidor e se testa no curso 1, aula 6, e no curso 4.Rever: Três portas, uma regraTeste concluído
Você acertou {a} de {n}. Acertando todas, a aula é marcada como concluída.Escolha uma alternativa. A explicação aparece depois da sua tentativa.
09Em três frases
PortasTela sempre; WebMCP quando o agente precisa da página; MCP quando ele trabalha fora do navegador.
RegraUm arquivo, importado pelas duas pontas; cópia à mão diverge.
PessoaTrês jeitos de confirmar (painel, painel com consequentialHint, MRTR), o mesmo sim antes de reservar.