E1 · Los dos formularios
4 minEjecuta el bloque y compara las líneas de búsqueda y de reserva.
Listo cuando: node scripts/declarativa.mjs nativo → enviado? não, esperando a pessoa y pessoa clicou em Reservar → {"reservado":true, y saída: 0.
Clase 6 · 14 min
Formulario como herramienta: toolname y toolautosubmit (experimental, fuera de la spec)
Chrome deja que un formulario se convierta en herramienta con tres atributos HTML. Es el camino más corto para quien ya tiene un formulario bien etiquetado, pero quedó fuera de la spec del 16/10/2026: existe en el origin trial de Chrome y en una capa temporal del polyfill. En esta clase lo usas con esa etiqueta y decides cuándo el formulario puede enviarse solo.
Empezar la lección
En esta lección vas a
- 1toolname, tooldescription y toolparamdescription
- 2El schema que el navegador arma a partir de los campos
- 3toolautosubmit solo para lo que solo lee
- 4agentInvoked y respondWith en el submit
Objetivo: convertir un formulario en herramienta con toolname, sabiendo que es experimental y está fuera de la spec, y decidir cuándo usar toolautosubmit.
01Del formulario a la herramienta
Experimental al 19/10/2026, fuera de la spec. Haz clic en cada paso.
Usa la API imperativa (clases 3 a 5) como base. El formulario declarativo es un extra: si desaparece, el formulario sigue siendo un formulario.
README de WebMCP: "Future Exploration… not part of the specification at this time". Chrome lo documenta y lo implementa en el trial (página actualizada el 25/09/2026).
02Dos formularios: uno se envía, el otro espera
Fragmento de kit/pagina/declarativa.html. La búsqueda solo lee y puede usar toolautosubmit; la reserva tiene efecto y espera el clic.
Fragmento · 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>Fragmento · 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 y polyfill
cd ~/projetos/formacao-webmcp-site-v72/kit node scripts/declarativa.mjs nativo; echo "saída: $?" node scripts/declarativa.mjs polyfill; echo "saída: $?"
Ejemplo del repositorio
== 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: 0La búsqueda vuelve directo (toolautosubmit). La reserva queda rellenada y detenida hasta el clic: declarativa.mjs hace el papel de la persona.
Con toolautosubmit en el formulario de reserva, el agente rellena y envía sin que la persona lo vea. Reserva el envío automático para lo que solo lee. Y recuerda: respondWith exige preventDefault() antes, si no, el navegador sigue con el envío normal.
03Práctica
Nativo y polyfill. Cada ejercicio termina con un listo cuando.
E2 · Un formulario tuyo
15 minToma un formulario de búsqueda de tu sitio (solo lectura) y agrega toolname, tooldescription y toolparamdescription en una copia local. Deja un comentario en el HTML: experimental, fuera de la spec, fecha.
Listo cuando: PAGINA=[tu carpeta] node scripts/listar.mjs nativo [archivo].html → la línea con tu toolname; en el modo sem, el formulario envía como antes. El comentario con la fecha está en el HTML.
04Prueba de la clase
La explicación aparece después de la respuesta.
Pregunta 1 de 4
¿Cuál es la situación de la API declarativa (toolname) al 19/10/2026?
Correcto
El README dice que es exploración futura, fuera de la spec. Chrome la documenta y la implementa en el trial. Por eso el curso pone el sello "experimental, fuera de la spec".No es esa
El README dice que es exploración futura, fuera de la spec. Chrome la documenta y la implementa en el trial. Por eso el curso pone el sello "experimental, fuera de la spec".Repasar: Del formulario a la herramientaPregunta 2 de 4
¿Cuándo usar toolautosubmit?
Correcto
El envío automático saca a la persona del circuito. En una búsqueda no hay problema; en una reserva, el formulario debe esperar el clic.No es esa
El envío automático saca a la persona del circuito. En una búsqueda no hay problema; en una reserva, el formulario debe esperar el clic.Repasar: Dos formularios: uno se envía, el otro esperaPregunta 3 de 4
¿Cómo sabe el submit que fue el agente quien llenó el formulario?
Correcto
SubmitEvent gana agentInvoked (true cuando viene del agente) y respondWith(promise) para devolver el resultado, después de preventDefault().No es esa
SubmitEvent gana agentInvoked (true cuando viene del agente) y respondWith(promise) para devolver el resultado, después de preventDefault().Repasar: Dos formularios: uno se envía, el otro esperaPregunta 4 de 4
Sin toolparamdescription en un campo, ¿de dónde saca Chrome la descripción?
Correcto
Según la documentación de Chrome (25/09/2026), sin toolparamdescription el navegador usa el label asociado; sin label, el aria-description. Un formulario bien etiquetado ya ayuda.No es esa
Según la documentación de Chrome (25/09/2026), sin toolparamdescription el navegador usa el label asociado; sin label, el aria-description. Un formulario bien etiquetado ya ayuda.Repasar: Del formulario a la herramientaPrueba completada
Acertaste {a} de {n}. Si aciertas todas, la clase se marca como completada.Elige una alternativa. La explicación aparece después de tu intento.
05En tres frases
Fuera de la spectoolname/tooldescription/toolautosubmit existen en Chrome en trial, no en la spec del 16/10/2026.
Quién envíatoolautosubmit solo en lo que solo lee; el resto espera el clic de la persona.
BaseLa API imperativa es la base; el formulario declarativo es un extra y sigue funcionando sin la API.