WebMCP no seu site|INEMA.CLUB-PRO

Aula 6 · 14 min

Formulá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.

Começar a aula
Monitor escuro com um formulário web abstrato e, à frente, uma prancheta com um formulário de papel em branco.

Nesta aula você vai

  1. 1toolname, tooldescription e toolparamdescription
  2. 2O schema que o navegador monta a partir dos campos
  3. 3toolautosubmit só para o que só lê
  4. 4agentInvoked e respondWith no submit

Objetivo: transformar um formulário em ferramenta com toolname, sabendo que é experimental e fora da spec, e decidir quando usar toolautosubmit.

01Do formulário à ferramenta

Experimental em 19/10/2026, fora da spec. Clique em cada passo.

Use a API imperativa (aulas 3 a 5) como base. O formulário declarativo é extra: se sumir, o formulário continua sendo formulário.

README do WebMCP: "Future Exploration… not part of the specification at this time". O Chrome documenta e implementa no trial (página atualizada em 25/09/2026).

02Dois formulários: um se envia, o outro espera

Trecho de kit/pagina/declarativa.html. A busca só lê e pode usar toolautosubmit; a reserva tem efeito e espera o clique.

Trecho · kit/pagina/declarativa.html (HTML)
<!-- Só lê: pode enviar sozinho (toolautosubmit). -->
<form id="f-busca" toolname="buscar_oficinas_form" tooldescription="Busca oficinas da agenda por tema. Só lê." toolautosubmit>
  <label for="d-tema">Tema</label>
  <select id="d-tema" name="tema" required toolparamdescription="Tema da oficina.">
    <option value="html">HTML</option><option value="javascript">JavaScript</option>
    <option value="webmcp">WebMCP</option><option value="mcp">MCP</option>
  </select>
  <button type="submit">Buscar</button>
</form>

<!-- Tem efeito: SEM toolautosubmit. O agente preenche, a pessoa clica em Reservar. -->
<form id="f-reserva" toolname="reservar_vaga_form" tooldescription="Preenche a reserva de uma vaga. Quem envia é a pessoa, clicando em Reservar.">
  <label for="d-id">Oficina (id)</label>
  <input id="d-id" name="id" required pattern="of-[0-9]{3}" toolparamdescription="Id da oficina, ex.: of-301.">
  <label for="d-nome">Seu nome</label>
  <input id="d-nome" name="nome" required minlength="2">
  <button type="submit">Reservar</button>
</form>
Trecho · kit/pagina/declarativa.html (submit)
$('#f-busca').addEventListener('submit', e => {
  e.preventDefault();
  const lista = agenda.buscar({ tema: $('#d-tema').value });
  $('#d-resultados').replaceChildren(...lista.map(o => Object.assign(document.createElement('li'), { textContent: `${o.id} · ${o.titulo}` })));
  if (e.agentInvoked) e.respondWith(Promise.resolve({ total: lista.length, ids: lista.map(o => o.id) }));
});
Terminal · nativo e polyfill
cd ~/projetos/formacao-webmcp-site-v72/kit
node scripts/declarativa.mjs nativo; echo "saída: $?"
node scripts/declarativa.mjs polyfill; echo "saída: $?"
Exemplo do repositório
== Chromium 156.0.8078.4 (Playwright) · modo: nativo
ferramenta do formulário: buscar_oficinas_form · campos: tema
ferramenta do formulário: reservar_vaga_form · campos: id, nome
buscar_oficinas_form (toolautosubmit): {"total":1,"ids":["of-301"]}
reservar_vaga_form preencheu: id=of-301 nome=Rita · enviado? não, esperando a pessoa
pessoa clicou em Reservar → {"reservado":true,"reserva":{"id":"of-301","nome":"Rita","titulo":"Primeira ferramenta WebMCP"}}
saída: 0
== Chromium 156.0.8078.4 (Playwright) · modo: polyfill
ferramenta do formulário: buscar_oficinas_form · campos: tema
ferramenta do formulário: reservar_vaga_form · campos: id, nome
buscar_oficinas_form (toolautosubmit): {"total":1,"ids":["of-301"]}
reservar_vaga_form preencheu: id=of-301 nome=Rita · enviado? não, esperando a pessoa
pessoa clicou em Reservar → {"reservado":true,"reserva":{"id":"of-301","nome":"Rita","titulo":"Primeira ferramenta WebMCP"}}
saída: 0

A busca volta direto (toolautosubmit). A reserva fica preenchida e parada até o clique: o declarativa.mjs faz o papel da pessoa.

03Prática

Nativo e polyfill. Cada exercício termina num pronto quando.

E1 · Os dois formulários

4 min

Rode o bloco e compare as linhas de busca e de reserva.

Pronto quando: node scripts/declarativa.mjs nativo → enviado? não, esperando a pessoa e pessoa clicou em Reservar → {"reservado":true, e saída: 0.

E2 · Um formulário seu

15 min

Pegue um formulário de busca do seu site (só leitura), acrescente toolname, tooldescription e toolparamdescription numa cópia local. Deixe um comentário no HTML: experimental, fora da spec, data.

Pronto quando: PAGINA=[sua pasta] node scripts/listar.mjs nativo [arquivo].html → a linha com o seu toolname; no modo sem, o formulário envia como antes. O comentário com a data está no HTML.

04Teste da aula

A explicação aparece depois da resposta.

Pergunta 1 de 4

Qual a situação da API declarativa (toolname) em 19/10/2026?

05Em três frases

Fora da spectoolname/tooldescription/toolautosubmit existem no Chrome em trial, não na spec de 16/10/2026.
Quem enviatoolautosubmit só no que só lê; o resto espera o clique da pessoa.
BaseA API imperativa é a base; o formulário declarativo é extra e continua funcionando sem a API.

Para ir além

Aula anteriorPróxima aula