WebMCP

<!doctype html>
<meta charset="utf-8">
<title>WebMCP · ejemplo mínimo</title>
<!-- La página ofrece herramientas a los agentes de IA del navegador.
     Chrome: chrome://flags/#enable-webmcp-testing o la prueba de origen «WebMCP». HTTPS o localhost. -->
<p>Tema actual: <b id="theme">claro</b></p>

<!-- 1 · API declarativa: un formulario normal se convierte en herramienta -->
<form id="search" toolname="search_notes" tooldescription="Busca notas por palabra clave." toolautosubmit>
  <label>Palabra clave <input name="q" required toolparamdescription="Texto a buscar"></label>
  <button>Buscar</button>
</form>
<pre id="out"></pre>

<script type="module">
const out = document.querySelector('#out');
const notes = ['Comprar pan', 'Llamar a Ana', 'Revisar WebGPU'];
const search = (q) => notes.filter((n) => n.toLowerCase().includes(q.toLowerCase()));

// El formulario sigue funcionando para las personas; si lo envía un agente, responde con datos.
document.querySelector('#search').addEventListener('submit', (e) => {
  e.preventDefault();
  const results = search(new FormData(e.target).get('q'));
  out.textContent = results.join('\n') || 'Sin resultados';
  if (e.agentInvoked) e.respondWith(Promise.resolve({ results }));
});

// 2 · API imperativa: document.modelContext (antes navigator.modelContext, obsoleto desde Chrome 150)
const mc = document.modelContext;
if (!mc) {
  out.textContent = 'document.modelContext no está disponible: activa la flag o usa la prueba de origen.';
} else {
  const registration = new AbortController(); // registration.abort() retira la herramienta
  await mc.registerTool({
    name: 'set_theme',
    description: 'Cambia el tema de color de la página.',
    inputSchema: {
      type: 'object',
      properties: { theme: { type: 'string', enum: ['claro', 'oscuro'] } },
      required: ['theme'],
    },
    annotations: { readOnlyHint: false },
    async execute({ theme }) {
      document.querySelector('#theme').textContent = theme;
      return { ok: true, theme }; // devuelve siempre algo serializable
    },
  }, { signal: registration.signal });

  // La propia página puede hacer de agente para probar sus herramientas:
  const tools = await mc.getTools();
  out.textContent = 'Herramientas: ' + tools.map((t) => t.name).join(', ');
  const tool = tools.find((t) => t.name === 'set_theme');
  // La entrada es un objeto. Chrome, antes de la 155, la pedía como texto JSON y la rechazaba sin ejecutar nada
  // («Failed to parse input»): solo en ese caso se reintenta así.
  const run = (input) => mc.executeTool(tool, input).catch((e) => {
    if (!/parse input/i.test(String(e?.message ?? e))) throw e;
    return mc.executeTool(tool, JSON.stringify(input));
  });
  out.textContent += '\nset_theme → ' + (await run({ theme: 'oscuro' }));
}
</script>