WebMCP no seu site|INEMA.CLUB-PRO

Formação WebMCP · curso 2 de 6 · 8 aulas

WebMCP no seu site: ferramentas na página, com fallback e teste

Registre ferramentas com document.modelContext, marque o que só lê e o que tem consequência, faça a ação importante esperar a pessoa e teste tudo sozinho. WebMCP é rascunho de 16/10/2026: o curso ensina a preparar a página sem quebrar quem não tem a API.

Começar pela aula 1 Ver a área da formação
Mesa de desenvolvedor escura com monitor mostrando um navegador e um cabo encaixado num pequeno hub metálico.
  • 8aulas
  • 22exercícios com saída esperada
  • 3modos de teste: sem API, polyfill, nativo
  • 0chamadas de modelo ou API paga

As aulas

Do estado da spec à bateria automática: ambiente, primeira ferramenta, ciclo de vida, anotações, formulário, catálogo e teste.

  1. Aula 1 · 12 minWebMCP hoje: rascunho de 16/10/2026, origin trial, flag e quem apoiaWebMCP deixa a página entregar ferramentas a um agente no navegador. Em 19/10/2026 ele é rascunho de Community Group, testado em origin trial no Chrome e no Edge, com Mozilla neutra e WebKit contra. Nesta aula você confere a data da spec com um comando e aprende a ler o status sem cair em promessa.
  2. Aula 2 · 15 minAmbiente: flag, origin trial, polyfill e três modos de testeVocê 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.
  3. Aula 3 · 18 minPrimeira ferramenta: registerTool com inputSchema e executeUma ferramenta WebMCP é um objeto com nome, descrição, esquema de entrada e uma função execute. A página registra; o agente lista com getTools e chama com executeTool. Nesta aula você lê a ferramenta de busca do kit, chama do jeito que um agente chamaria e registra a sua primeira.
  4. Aula 4 · 15 minCiclo de vida: getTools, toolchange, AbortSignal e cancelamentoFerramenta não é para sempre: a página registra quando a função existe e remove quando sai de cena. Na spec de 16/10/2026 não há unregisterTool; quem remove é o signal de um AbortController. E quem chama pode cancelar uma execução no meio. Nesta aula você vê o ciclo inteiro e os eventos que o navegador dispara.
  5. Aula 5 · 16 minAnotações e confirmação: readOnly, consequential e untrustedContentAnotação é uma dica que a página dá ao agente e ao navegador: esta ferramenta só lê, esta tem consequência, esta devolve texto de terceiros. Dica não é trava. Por isso a ação com efeito do kit também espera a pessoa clicar em Confirmar. Nesta aula você marca as anotações e vê a confirmação funcionar.
  6. Aula 6 · 14 minFormulário como ferramenta: toolname e toolautosubmit (experimental, fora da spec)O Chrome deixa um formulário virar ferramenta com três atributos HTML. É o caminho mais curto para quem já tem formulário bem rotulado, mas ficou fora da spec de 16/10/2026: existe no origin trial do Chrome e numa camada temporária do polyfill. Nesta aula você usa com essa etiqueta e decide quando o formulário pode se enviar sozinho.
  7. Aula 7 · 18 minDesenhar o catálogo e migrar um site existente sem quebrar ninguémUm catálogo bom tem poucas ferramentas, cada uma com uma intenção, nome com verbo, entrada mínima e erro que o agente entende. Num site que já existe, a regra sai da interface para uma função que atende o clique e a ferramenta. Nesta aula você revisa um catálogo ruim com o validador e planeja a migração do seu site.
  8. Aula 8 · 18 minTestar sozinho: bateria nos três modos, checklist e planoUma ferramenta só está pronta quando um teste prova que ela funciona e que a página continua igual sem ela. A bateria do kit roda sem modelo nos três modos, compara ferramenta com formulário, testa a confirmação e a remoção. Nesta aula você a roda, vê uma quebra ser pega e sai com o plano datado do seu site.

Para quem é

  1. 1Dev front-end ou maker que edita HTML/JS e roda comandos no terminal.
  2. 2Quem quer que o próprio site seja usado por agentes no navegador sem abrir mão do caminho normal.
  3. 3Quem prefere preparar com teste a apostar numa API que ainda muda.

O que você sai fazendo

  1. 1Ler a spec com data e separar rascunho, origin trial e flag.
  2. 2Registrar, listar, remover e cancelar ferramentas com document.modelContext.
  3. 3Marcar anotações e pôr a ação com consequência atrás de um Confirmar.
  4. 4Rodar a bateria nos modos sem API, polyfill e nativo, e pegar uma quebra.

Onde este curso entra na Formação WebMCP

  1. 1Depois do curso 0 (como os agentes usam um site) e do curso 1 (servidor MCP).
  2. 2É o dono da API WebMCP na página. O curso 3 olha o lado do agente; o curso 4, a segurança.
  3. 3Antes de começar: Node 20 ou mais novo, git e espaço em disco para o Chromium do Playwright.