Llevamos años construyendo herramientas para medir el rendimiento web: scripts de consola, extensiones de navegador, paneles de DevTools. Todas tienen algo en común: las maneja una persona. Alguien que sabe qué medir, cuándo ejecutarlo y cómo interpretar el resultado. Con [WebMCP](https://webmachinelearning.github.io/webmcp/) eso empieza a cambiar. Y en [WebPerf Snippets](https://webperf-snippets.nucliweb.net/) hemos dado el primer paso: exponer las herramientas de medición de rendimiento de forma que cualquier asistente de IA pueda descubrirlas, entenderlas y ejecutarlas directamente en el navegador. ## ¿Qué es MCP y qué tiene que ver con el navegador? [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) es un estándar abierto que define cómo los modelos de lenguaje pueden interactuar con herramientas externas. En lugar de que una IA improvise acciones, MCP proporciona un contrato claro: estas son las herramientas disponibles, esto es lo que hacen, así se usan. MCP funciona ya en muchos contextos: servidores, editores de código, aplicaciones de escritorio. Pero el navegador es un entorno diferente. El código se ejecuta en un sandbox, no hay acceso directo al sistema de archivos, y la interacción ocurre en el contexto de una página web concreta. **WebMCP** es la propuesta del W3C para resolver exactamente eso: un protocolo nativo para que los sitios web expongan herramientas estructuradas que los agentes de IA puedan usar de forma fiable. La API se integra directamente en el navegador a través de `navigator.modelContext`. La diferencia respecto a que una IA "navegue" y manipule el DOM directamente es significativa: en lugar de que el agente interprete la interfaz visual y simule clics, el sitio le dice explícitamente qué puede hacer y cómo. Más velocidad, más precisión, menos errores de interpretación. ## Las tres herramientas que expone WebPerf Snippets La integración registra tres herramientas vía `navigator.modelContext`: ### `list_snippets` Devuelve todos los snippets disponibles con sus metadatos: identificador, categoría, título, descripción y URL. Sin código. Es el punto de entrada para que un agente descubra qué herramientas de medición existen. ```js // Un agente puede preguntar: "¿qué snippets hay disponibles?" // list_snippets devuelve algo así: [ { id: "LCP", category: "CoreWebVitals", title: "Largest Contentful Paint", description: "Measures the render time of the largest image or text block visible in the viewport", url: "https://webperf-snippets.nucliweb.net/...", }, // ... los 31 snippets disponibles ]; ``` ### `get_snippet` Devuelve el código JavaScript completo de un snippet por su ID. Cuando un agente quiere ejecutar una medición concreta, esta herramienta le da el código listo para usar. ```js // "Dame el código para medir el LCP" get_snippet({ id: "LCP" }); // → devuelve el JavaScript completo del snippet ``` ### `search_snippets` Filtra snippets por categoría y/o palabra clave. Útil cuando un agente no sabe exactamente qué ID buscar pero conoce el área de interés. ```js // "Muéstrame todo lo relacionado con Core Web Vitals" search_snippets({ category: "CoreWebVitals" }); // "Busca snippets sobre imágenes" search_snippets({ keyword: "image" }); ``` Con estas tres herramientas, el flujo completo queda cubierto: descubrir qué existe, buscar lo relevante y obtener el código para ejecutarlo. ## Cómo probarlo (hoy) WebMCP está en fase de prototipado. Para probarlo necesitas: 1. **Chrome 146+ Canary** con las flags de WebMCP activadas 2. Verificar que `navigator.modelContext` está disponible en consola 3. Acceder a [webperf-snippets.nucliweb.net](https://webperf-snippets.nucliweb.net/) y llamar a las herramientas desde un agente compatible Podéis consultar el [Early Preview Program de Chrome](https://developer.chrome.com/blog/webmcp-epp) y el repositorio [webmcp-tools](https://github.com/GoogleChromeLabs/webmcp-tools) de Google Chrome Labs para seguir la evolución de la implementación. ## Zero cost para el resto de navegadores Uno de los requisitos que me pareció importante cumplir desde el principio: que añadir soporte WebMCP no impactara en la carga de la página para quienes usen navegadores sin soporte. La solución es sencilla: el registro de snippets se carga como un import dinámico que solo se ejecuta si `navigator.modelContext` existe. En un navegador estándar, ese chunk nunca se descarga. ```js if (navigator.modelContext) { const { snippets } = await import("./snippets-registry.js"); // register tools... } ``` Cero coste de red, cero parsing adicional, cero impacto en rendimiento para la mayoría de visitantes. ## Lo que significa para el debugging asistido por IA En mis auditorías de rendimiento, uno de los pasos más repetitivos es ejecutar el mismo conjunto de scripts para obtener métricas: LCP, INP, CLS, tiempos de carga de recursos, análisis de fuentes. Con WebMCP, ese conjunto de scripts puede convertirse en un flujo automatizado que un agente de IA ejecuta, interpreta y sobre el que da recomendaciones. No se trata de reemplazar el criterio de quien analiza el rendimiento. Se trata de eliminar la fricción: pasar de "necesito copiar este script, pegarlo en consola, interpretar el output" a "analiza el LCP de esta página y dime si hay oportunidades de mejora". ### Una aclaración importante: WebMCP expone el código, no lo ejecuta Aquí conviene ser preciso. Si queréis analizar el LCP de `web.dev` usando WebPerf Snippets + WebMCP, las herramientas registradas en `webperf-snippets.nucliweb.net` os dan el código del snippet, pero **no lo ejecutan en otra página automáticamente**. Para que el flujo completo funcione, el agente de IA necesita capacidad de control de navegador. El proceso real sería: 1. El agente visita `webperf-snippets.nucliweb.net` → llama a `get_snippet({ id: "LCP" })` → obtiene el JavaScript 2. El agente navega a `web.dev` → inyecta y ejecuta ese código en su contexto 3. El agente lee el resultado y da recomendaciones Sin esa capacidad de automatización de navegador (vía CDP, Puppeteer, o un agente con control de browser), WebMCP en WebPerf Snippets actúa como un **repositorio estructurado y descubrible**: el agente sabe qué herramientas existen y cómo usarlas, pero la ejecución en sitios de terceros requiere un paso más. Es una distinción importante que refleja el estado actual de la tecnología. WebMCP define el contrato; la capa de automatización que cierra el ciclo está evolucionando en paralelo. WebPerf Snippets lleva años siendo esa colección de scripts que se usan a mano. Con esta integración, empieza a ser también una colección que los agentes pueden descubrir y usar de forma estructurada, lista para cuando esa capa de automatización madure. ## Conclusión WebMCP todavía es un draft del W3C y la API está disponible solo en Chrome Canary. Pero el modelo es claro: los sitios web exponen herramientas estructuradas, los agentes de IA las descubren y usan de forma nativa. WebPerf Snippets ya está preparado para ese escenario. > Mientras tanto, hay una alternativa que ya podemos utilizar: los **Agent Skills** de WebPerf Snippets. Usando **Chrome DevTools MCP**, un agente puede navegar a cualquier página y ejecutar los snippets directamente, sin esperar soporte de navegador. Dos aproximaciones al mismo objetivo; lo detallo en [WebPerf Snippets y Agent SKILLs: auditorías determinísticas con Chrome DevTools MCP](/posts/webperf-snippets-agent-skills).