Evaluación comparativa de los costes de agentes de IA en frameworks JavaScript

En octubre de 2026, el desarrollador Nolan Lawson publicó una comparación basada en datos sobre el rendimiento de los frameworks JavaScript modernos cuando son construidos por agentes de IA. El estudio desafía la toma de decisiones predominante "basada en sensaciones" en el desarrollo frontend mediante la medición de métricas reales de coste, tiempo y calidad. Utilizando Claude Opus 5.5, Lawson encargó a un agente de IA la construcción de la misma aplicación Pokémon en doce stacks tecnológicos diferentes para determinar qué herramientas optimizan realmente los flujos de trabajo agénticos.

Qué ocurrió

Lawson diseñó un benchmark para probar la hipótesis de que ciertos frameworks son inherentemente mejores para la codificación asistida por IA. Seleccionó un proyecto no trivial pero bien definido: una aplicación de directorio de Pokémon utilizando PokéAPI. La aplicación requería listar Pokémon, mostrar sus tipos y movimientos, e implementar funcionalidades de búsqueda y filtrado. Para garantizar la equidad, cada framework se emparejó con su servidor oficial de Model Context Protocol (MCP) o habilidades de agente donde estaba disponible, evitando desventajas debido a lagunas en los datos de entrenamiento.

El experimento implicó ejecutar el agente cinco veces para cada framework para tener en cuenta la naturaleza estocástica de los grandes modelos de lenguaje. La única excepción fue Angular, que no logró producir una aplicación medible en dos instancias, resultando en solo tres iteraciones válidas para algunas métricas. El agente operó en un entorno sandbox sin saber que sería evaluado según las puntuaciones de rendimiento de Lighthouse, aunque se le proporcionó una suite de pruebas de conformidad para evitar trampas. El objetivo era medir resultados del mundo real en lugar de experiencias teóricas de desarrollo.

Los resultados revelaron una varianza sustancial tanto en coste como en eficiencia. Hono combinado con htmx emergió como la opción más rentable, con un coste mediano de $2.67 por ejecución. En contraste, Angular demostró ser el más caro con $4.97, mientras que SvelteKit y Gracile junto con Lit también ocuparon posiciones altas en coste. Curiosamente, JavaScript vanilla con Vite tuvo un rendimiento inferior a varios frameworks, lo que sugiere que las abstracciones estructuradas pueden ayudar más a los agentes de IA que la infraestructura pura. El estudio destaca que las afirmaciones sobre la superioridad de los frameworks para IA a menudo carecen de respaldo empírico, y este benchmark proporciona una línea base concreta para la evaluación.

Cómo funciona

El benchmark depende de una especificación estricta y una pipeline de evaluación automatizada. Lawson instruyó al agente de IA, Claude Opus 5.5, para construir la app utilizando configuraciones de alto esfuerzo. No se dieron al agente mandatos arquitectónicos específicos, como elegir entre renderizado en el servidor o en el cliente, permitiéndole tomar decisiones basadas en las convenciones del framework. Este enfoque prueba qué tan bien navega el agente por el ecosistema sin una guía humana excesiva.

La evaluación se centró en cuatro dimensiones clave: tiempo de desarrollo, consumo de tokens, líneas de código y métricas de calidad. La calidad se evaluó utilizando Lighthouse para las puntuaciones de rendimiento y accesibilidad, junto con una suite de conformidad personalizada que revisa el árbol de accesibilidad en lugar del DOM bruto. Este método acomoda frameworks como Lit que utilizan shadow DOM, asegurando que las diferencias estructurales no penalizen la puntuación. Al medir los valores medianos a través de múltiples ejecuciones, el estudio mitiga el impacto de los outliers aleatorios inherentes a las salidas de la IA generativa.

Detalles clave

• Hono+htmx fue el framework más barato para construir, costando una mediana de $2.67 por ejecución.
• Angular fue el más caro con un coste mediano de $4.97 y tomó el mayor tiempo, 17.2 minutos.
• JavaScript vanilla con Vite costó $2.98, teniendo un rendimiento inferior a varios frameworks estructurados en eficiencia.
• Los agentes de SvelteKit frecuentemente leían la guía de migración v3, aumentando el uso de tokens debido a su novedad en los datos de entrenamiento.
• El uso de servidores MCP y habilidades por parte del agente fue inconsistente, con el MCP de Nuxt nunca utilizado y las habilidades de Next.js accedidas raramente.
• Las métricas de Lighthouse favorecieron a los frameworks de aplicaciones multipágina debido a sesgos inherentes contra las aplicaciones de una sola página.

Por qué importa

Para líderes técnicos y fundadores, este estudio subraya las implicaciones financieras de la elección de framework en un flujo de trabajo agéntico. A medida que los agentes de IA asumen más tareas de codificación, el coste por función se convierte en una métrica tangible en lugar de una preocupación abstracta. Los frameworks que requieren menos tokens y menos tiempo para generar código correcto reducen directamente los gastos operativos. La varianza observada, como la mayor tasa de fallos y coste de Angular, sugiere que algunos ecosistemas aún no están optimizados para la interacción con IA, lo que potencialmente conduce a sobrecostos presupuestarios en proyectos a gran escala.

Además, los resultados desafían la noción de que el código "vanilla" es siempre el camino más eficiente para la IA. Los datos muestran que los frameworks proporcionan barreras de seguridad y convenciones que ayudan a los agentes a evitar errores comunes, reduciendo la necesidad de cargar extenso contexto. Esta información es crucial para equipos que deciden si adoptar nuevos meta-frameworks o mantenerse con librerías establecidas. Sugiere que la abstracción correcta puede reducir la carga cognitiva en la IA, conduciendo a una salida más rápida y fiable.

Qué puedes hacer

• Evalúa tu framework actual haciendo que un agente de IA construya un componente pequeño y estandarizado, midiendo el uso de tokens.
• Asegúrate de que las herramientas de IA de tu equipo estén configuradas para usar servidores MCP oficiales o habilidades para maximizar la relevancia del contexto.
• Considera el costo total de propiedad, incluyendo el consumo de tokens de IA, al evaluar nuevos frameworks JavaScript.
• Ejecuta múltiples iteraciones de código generado por IA para tener en cuenta la varianza estocástica antes de tomar decisiones arquitectónicas.
• Usa pruebas basadas en el árbol de accesibilidad en lugar de inspección del DOM para evaluar justamente frameworks que usan shadow DOM.
• Monitorea el comportamiento del agente para ver si utiliza efectivamente la documentación disponible y los archivos de habilidades durante el desarrollo.