E1 · Kit instalado
10 minClone o repositório do curso em ~/projetos e instale o kit com o bloco acima.
Pronto quando: O bloco termina em saída: 0 e ls ~/projetos/formacao-webmcp-site-v72/kit/pagina/vendor mostra webmcp-polyfill.js.
Aula 2 · 15 min
Ambiente: flag, origin trial, polyfill e três modos de teste
Você não precisa de Chrome experimental instalado para trabalhar. O kit sobe a página num servidor local e abre o mesmo Chromium do Playwright em três modos: sem a API, com o polyfill e com o WebMCP nativo atrás da flag de teste. Sem custo e sem chave de API.
Começar a aula
Nesta aula você vai
- 1Clonar o kit e instalar com versões fixadas
- 2Contexto seguro: https em produção, 127.0.0.1 no ensaio
- 3Os três modos: sem, polyfill e nativo
- 4Origin trial e flag no seu Chrome, quando quiser ver ao vivo
Objetivo: montar o kit e ver a mesma página em três modos (sem API, polyfill, nativo) sem gastar cota nem instalar Chrome experimental.
01A mesma página, três navegadores
Clique em cada modo.
A API só existe em contexto seguro: https ou localhost/127.0.0.1. Por isso o kit serve a página em 127.0.0.1.
Teste sempre o modo Sem: é ele que a maioria dos visitantes vê.
02Clonar e instalar o kit
Versões fixadas em 19/10/2026: @mcp-b/webmcp-polyfill 6.0.3 e playwright 1.64.0. O postinstall copia o polyfill para pagina/vendor/ (só para o ensaio).
Terminal · clonar, instalar e baixar o Chromium
git clone -q https://github.com/inematds/formacao-webmcp-site-v72 ~/projetos/formacao-webmcp-site-v72 cd ~/projetos/formacao-webmcp-site-v72/kit npm ci npx playwright install chromium echo "saída: $?"
Exemplo do repositório
> kit-webmcp-no-seu-site@1.0.0 postinstall > node scripts/copiar-polyfill.mjs polyfill copiado para pagina/vendor/webmcp-polyfill.js added 4 packages, and audited 5 packages in 1s found 0 vulnerabilities (…) barras de progresso cortadas Downloading Chrome for Testing 156.0.8078.4 (playwright chromium v1248) from https://cdn.playwright.dev/builds/cft/156.0.8078.4/linux-arm64/chrome-linux-arm64.zip Chrome for Testing 156.0.8078.4 (playwright chromium v1248) downloaded to ~/.cache/ms-playwright/chromium-1248 Downloading FFmpeg (playwright ffmpeg v1013) from https://cdn.playwright.dev/dbazure/download/playwright/builds/ffmpeg/1013/ffmpeg-linux-arm64.zip FFmpeg (playwright ffmpeg v1013) downloaded to ~/.cache/ms-playwright/ffmpeg-1013 Downloading Chrome Headless Shell 156.0.8078.4 (playwright chromium-headless-shell v1248) from https://cdn.playwright.dev/builds/cft/156.0.8078.4/linux-arm64/chrome-headless-shell-linux-arm64.zip Chrome Headless Shell 156.0.8078.4 (playwright chromium-headless-shell v1248) downloaded to ~/.cache/ms-playwright/chromium_headless_shell-1248 saída: 0
Na primeira vez, o playwright install baixa o Chrome for Testing 156.0.8078.4 (190,5 MiB), o headless shell (119,9 MiB) e o FFmpeg (1,9 MiB); nas seguintes, não baixa de novo. O caminho (aqui linux-arm64) e o tempo mudam de máquina para máquina.
browserType.launch: Executable doesn't exist at /tmp/sem-navegador/chromium_headless_shell-1248/chrome-headless-shell-linux-arm64/chrome-headless-shell saída: 1
Sem o npx playwright install chromium, todo script do kit para aqui. O caminho no meio muda conforme o sistema (aqui, arm64).
03O que a página enxerga em cada modo
ambiente.mjs abre a página nos três modos e lê: contexto seguro, document.modelContext, o nome antigo navigator.modelContext e o aviso da tela.
Terminal · três modos
cd ~/projetos/formacao-webmcp-site-v72/kit node scripts/ambiente.mjs; echo "saída: $?"
Exemplo do repositório
== Chromium 156.0.8078.4 (Playwright) · modo: sem contexto seguro: sim · document.modelContext: ausente · navigator.modelContext: ausente página: sem · aviso: Este navegador não expõe WebMCP. Tudo funciona pelo formulário. == Chromium 156.0.8078.4 (Playwright) · modo: polyfill contexto seguro: sim · document.modelContext: presente · navigator.modelContext: ausente página: com · aviso: WebMCP ativo: 4 ferramentas registradas. == Chromium 156.0.8078.4 (Playwright) · modo: nativo contexto seguro: sim · document.modelContext: presente · navigator.modelContext: ausente página: com · aviso: WebMCP ativo: 4 ferramentas registradas. saída: 0
No modo Sem, a página avisa e segue pelo formulário. Nos outros dois, registra 4 ferramentas. Em nenhum existe navigator.modelContext.
04Ver no seu Chrome (opcional)
Experimental em 19/10/2026. Nada aqui é critério de pronto.
1. Flag
Abra chrome://flags/#enable-webmcp-testing, ligue e reinicie o Chrome.
Rode o servidor do kit e abra a URL que ele imprime.
Servidor
cd kit && node scripts/servir.mjs
2. Polyfill
Sem a flag, acrescente ?ensaio=polyfill à URL.
A página carrega o polyfill de pagina/vendor/ e registra as mesmas ferramentas.
URL
http://127.0.0.1:[porta]/?ensaio=polyfill
3. Inspector
O Google publica a extensão Model Context Tool Inspector, que lista e chama as ferramentas por linguagem natural.
Ela pede chave de API de um modelo (Gemini). Não é necessária neste curso.
4. Produção
Registre o seu domínio no origin trial do WebMCP e cole o token na meta tag do topo de kit/pagina/index.html.
O token é registrado para o domínio do site; em localhost, use a flag.
05Prática
Tudo local, sem custo. Cada exercício termina num pronto quando.
E2 · Três modos
3 minRode ambiente.mjs e compare as três linhas "página:".
Pronto quando: node scripts/ambiente.mjs; echo "saída: $?" → página: sem, página: com, página: com e saída: 0.
E3 · O modo Sem quebra?
5 minRode node scripts/servir.mjs, abra a URL no navegador que você usa todo dia (sem flag) e faça uma busca e uma reserva pela tela.
Pronto quando: A busca mostra resultados e a reserva aparece em "Minhas reservas" sem nenhuma ferramenta registrada.
06Teste da aula
A explicação aparece depois da resposta.
Pergunta 1 de 4
Por que o kit serve a página em 127.0.0.1 e não abre o arquivo direto?
Correto
ModelContext é [SecureContext]: só existe em https ou localhost/127.0.0.1. Em produção, https. O erro comum é testar por file:// e achar que a API sumiu.Não é essa
ModelContext é [SecureContext]: só existe em https ou localhost/127.0.0.1. Em produção, https. O erro comum é testar por file:// e achar que a API sumiu.Rever: A mesma página, três navegadoresPergunta 2 de 4
O que o modo Sem prova?
Correto
Sem é o visitante comum. Se a página quebra ali, ela quebrou para a maioria. Os outros modos provam o caminho do agente.Não é essa
Sem é o visitante comum. Se a página quebra ali, ela quebrou para a maioria. Os outros modos provam o caminho do agente.Rever: A mesma página, três navegadoresPergunta 3 de 4
O que é o @mcp-b/webmcp-polyfill 6.0.3 neste curso?
Correto
É redistribuição temporária do polyfill do CG, mantida pela MCP-B, e avisa que será removida. Serve para ensaiar a API da spec; não dispara toolactivated/toolcancel. A ponte com MCP é o @mcp-b/global, fora deste curso.Não é essa
É redistribuição temporária do polyfill do CG, mantida pela MCP-B, e avisa que será removida. Serve para ensaiar a API da spec; não dispara toolactivated/toolcancel. A ponte com MCP é o @mcp-b/global, fora deste curso.Rever: A mesma página, três navegadoresPergunta 4 de 4
Que modo usa a implementação de verdade do Chrome sem token?
Correto
O Chromium 156.0.8078.4 do Playwright 1.64.0 com --enable-features=WebMCPTesting expõe a implementação do Chrome. É experimental e pode mudar até o fim do trial (156).Não é essa
O Chromium 156.0.8078.4 do Playwright 1.64.0 com --enable-features=WebMCPTesting expõe a implementação do Chrome. É experimental e pode mudar até o fim do trial (156).Rever: Clonar e instalar o kitTeste 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.
07Em três frases
KitUm clone, npm ci e o Chromium do Playwright: nada de Chrome experimental instalado.
Três modosSem prova o fallback, Polyfill ensaia a API, Nativo roda a implementação do Chrome.
ProduçãoOrigin trial no seu domínio; o resto dos visitantes cai no modo Sem.