Al terminar el taller tendrás un servidor MCP funcional que coordina varios agentes especializados para optimizar imágenes con encoders modernos (MozJPEG, WebP, AVIF, JPEG XL) y validar la calidad con métricas perceptuales (SSIMULACRA2). En 4 horas, en remoto, veremos la implementación de tres arquitecturas multiagente sobre un caso real de Web Performance.
Este no es un taller de "hola mundo con agentes". Vamos a construir, paso a paso, la primera versión de un MCP que tu agente de IA puede usar para optimizar imágenes en cualquier proyecto. El repositorio queda público y como inicio de un proyecto open-source en el que puedes seguir contribuyendo.
¿Para quién es este workshop?
Este workshop es para ti si:
- Trabajas en frontend, full-stack o backend Node y quieres entender qué hay de verdad bajo el término "multiagentes" sin marketing.
- Ya usas Claude Code, Antigravity CLI, Codex o similares y quieres pasar de consumidor a constructor de tools y servidores MCP.
- Te interesa el rendimiento web y reconoces que la optimización de imágenes sigue siendo uno de los primeros cuellos de botella en LCP y en peso total de página.
- Quieres ver código real de coordinación de agentes, no diagramas de marketing.
Requisitos previos: TypeScript/Node a nivel intermedio, familiaridad con la terminal y Git. Conocimientos básicos de Core Web Vitals ayudan, pero no son imprescindibles. No es necesario haber construido un MCP previamente.
¿Qué veremos en el taller?
El taller construye image-optim-mcp en directo. Empezamos con la baseline imperativa que todos conocemos, evolucionamos a tres arquitecturas multiagente distintas viendo los límites de cada una, y terminamos empaquetándolo como servidor MCP conectado a Claude Code. Cada bloque construye sobre el anterior y deja código funcional en una rama del repositorio.
1. Fundamentos de multiagentes y por qué este dominio
Qué es exactamente un sistema multiagente (LLM + bucle + herramientas + coordinación) y, sobre todo, cuándo NO usarlo. Los tres patrones que vamos a construir: pipeline secuencial, orquestador con subagentes y agentes paralelos coordinados. Por qué la optimización de imágenes es un dominio especialmente adecuado para enseñar estos patrones.
2. El dominio en frío: encoders modernos y métricas perceptuales
Tour rápido de MozJPEG, WebP, AVIF y JPEG XL: cuándo brilla cada uno y qué flags importan de verdad. Por qué SSIM clásico ya no basta y qué aportan SSIMULACRA2 y Butteraugli. Ejecutamos un script imperativo que optimiza una imagen 'a la antigua' con flags fijos. Esa es la baseline que vamos a superar.
3. Arquitectura 1, Pipeline secuencial
Cuatro agentes en cadena: Analyzer → Strategist → Encoder → Judge. Cada uno con su system prompt acotado y sus tools. El Encoder ejecuta los encoders nativos vía tool use, el Judge valida con SSIMULACRA2 y decide accept/reject. Haremos tests sobre imágenes muy distintas (foto, screenshot con texto, ilustración con alpha, hero LCP). También veremos los límites del pipeline: ¿quién reintenta cuando el Judge rechaza?
4. Arquitectura 2, Orquestador + subagentes
El patrón Claude Code aplicado a nuestro problema. Un agente Orquestador con tools que invocan subagentes especializados, cada uno con contexto limpio. Manejo de "retries" con feedback: si el Judge rechaza, el Orquestador puede pedir al Strategist que recalcule con la razón del rechazo. Demo con la imagen que el pipeline no supo resolver, viendo cómo ahora converge. Inspección de coste y latencia reales en pantalla.
5. Arquitectura 3, Agentes paralelos coordinados
Cuatro encoders ejecutándose en paralelo (MozJPEG, WebP, AVIF, JPEG XL), cada uno como agente autónomo con capacidad de ajustar sus flags. Un Judge central que recibe los cuatro candidatos y elige ganador según contenido y soporte de navegador objetivo. Latencia aproximadamente 4 veces menor para calidad equivalente. Comparativa directa contra los dos anteriores sobre la misma imagen.
6. Empaquetado como servidor MCP
Convertimos el orquestador en un servidor MCP en TypeScript usando el SDK oficial, lo conectamos a Claude Code y ejecutamos un workflow real: "optimiza todas las imágenes de public/ y abre una PR con los resultados". Vemos el handshake del protocolo, cómo se exponen las tools y cómo se manejan los errores en la frontera MCP.
7. Comparativa final y workflows reales
Matriz comparativa de las tres arquitecturas sobre el mismo input: latencia, coste por imagen, calidad media (SSIMULACRA2), complejidad de código y mantenibilidad. Cuándo elegir cada arquitectura en proyectos reales. Integración en CI/CD para detectar regresiones de peso y calidad por Pull Request.
Por qué este caso es ideal para aprender multiagentes
La mayoría de demos de multiagentes son artificiales (agente que escribe + agente que revisa sobre un todo-app). La optimización de imágenes es un buen ejemplo donde la división en agentes especializados está justificada técnicamente, no es teatro:
- Subtareas con conocimiento muy distinto: clasificar una imagen, elegir encoder, ajustar flags y validar perceptualmente son disciplinas separadas.
- Decisiones encadenadas con feedback: el Judge puede rechazar y obliga al sistema a iterar de forma inteligente, no a reintentar a ciegas.
- Resultado medible objetivamente: SSIMULACRA2, peso en bytes y tiempo de encoding son números, no opiniones. Validaremos si el sistema funciona.
- Reutilizable en producción: el MCP que construimos puede entrar en proyectos reales el lunes siguiente.
El proyecto open-source image-optim-mcp
El repositorio del taller no es código desechable. Es el primer commit público de image-optim-mcp, un servidor MCP open-source bajo licencia MIT. El roadmap es público e incluye batch processing, integración con CDNs (Cloudinary), presets por framework y dashboard de regresiones. Tu aportación en el taller será la primera ola de contributors.
image-optim-mcp se suma al ecosistema PerfReviews junto a webperf-snippets (medición) y perfreviews-mcp (análisis): medir, diagnosticar, arreglar.
Sobre el instructor
Joan León, Web Performance Artisan, Google Developer Expert en Web Technologies y Cloudinary Ambassador.
Me apasiona el rendimiento web y ayudar a equipos y empresas a crear experiencias digitales más rápidas que mejoren la conversión y generen impacto real en el negocio. Comparto conocimiento en meetups, conferencias, workshops y en joanleon.dev.
Actualmente exploro el uso de IA y agentes para automatizar auditorías y mejorar los procesos de optimización web, que es exactamente de lo que va este taller.
Otros talleres
Este no es el primero. Otros workshops que he impartido y puedes consultar:
- Web Performance Debugging con Agentes de IA + Chrome DevTools MCP, del análisis manual al fix automatizado con Pull Request.
- Taller de Web Performance, rendimiento web desde cero: Core Web Vitals, herramientas de medición y optimización.
- Image Optimization Workshop, formatos, compresión, imágenes responsive y pipeline de automatización.
- Testing E2E, testing de extremo a extremo con Playwright.
- PostCSS Workshop, transformación y optimización de CSS con PostCSS.
Formato
- Online en directo vía Zoom.
- Una sesión de 4 horas con todos los ejercicios paso a paso.
- Grabación disponible tras el taller para repasar cuando quieras.
- Repositorio público con el código por bloques en ramas separadas y todas las demos preparadas.
- Canal privado en Discord para resolver dudas durante, y después del taller.
- Acceso al roadmap de
image-optim-mcppara seguir contribuyendo después del taller.
Requisitos técnicos
- Node.js 22 LTS y npm o pnpm.
- Un agente de IA con soporte MCP: Claude Code, Antigravity CLI u otro cliente MCP compatible.
- API key de Anthropic (la usaremos para los ejemplos en directo; bastará con unos pocos euros de crédito).
- Docker Desktop instalado, para el devcontainer con los encoders nativos preconfigurados. Hay fallback de instalación local documentado para quien prefiera nativo.
- Cuenta de GitHub y GitHub CLI instalado para el ejercicio de Pull Request automatizada.
- Cuenta de Discord para acceder al canal privado del taller.
¿Cuándo?
Elige la opción que mejor se adapte a tu agenda:
| Opción | Día/s | Horario | Duración |
| A | Martes 30 de junio + Jueves 2 de julio | 19:00 a 21:00 (CEST) | 2 horas cada día |
| B | Sábado 4 de julio | 9:30 a 13:30 (CEST) | 4 horas |
Inversión
Incluye la sesión de 4 horas en directo, la grabación, el repositorio con todos los ejercicios y el acceso al canal de Discord.
- Pago personal: pago directo por Stripe con el botón de abajo.
- Pago por empresa o bonificación FUNDAE: escríbeme a LinkedIn antes de pagar y lo gestionamos (factura previa, transferencia o gestión FUNDAE).
¿Sois un equipo? Si queréis hacer una edición privada o adaptar el horario a vuestra jornada, escríbeme a LinkedIn y lo organizamos.
Preguntas frecuentes
¿Se grabará la sesión?
Sí. Tendrás acceso permanente a la grabación para consultarla cuando quieras.
¿Necesito experiencia previa con agentes de IA o MCP?
No con MCP. Sí con TypeScript/Node a nivel intermedio, porque vamos a construir un servidor MCP real y no es un taller de introducción a la programación. Si has hecho el taller de Chrome DevTools MCP ya tienes la base perfecta.
¿Por qué Node y no Python?
Porque la mayoría de los pipelines de assets web viven en ecosistemas Node/JavaScript y el SDK de MCP en TypeScript es muy maduro. Los conceptos de coordinación de agentes son los mismos en cualquier stack.
¿Qué pasa con la API key de Anthropic?
La usaremos para los ejemplos en directo. Con 5-10€ de crédito tendrás de sobra para todo el taller y para experimentar después. Si prefieres usar otro proveedor (por ejemplo, vía SDKs equivalentes), los patrones de coordinación son trasladables, aunque la demo se hará con Claude.
Yo haré el taller paso a paso, así que en el caso de que no quieras invertir en la API de Anthropic, podrás seguir lo que voy haciendo.
¿Podré usar el código en proyectos comerciales?
Sí. El repositorio image-optim-mcp está bajo licencia MIT.
¿Podré resolver dudas fuera de la sesión?
Sí. Tendrás acceso a un canal privado de Discord donde puedes preguntar durante y después del taller.
¿Podré tener factura?
Sí. Stripe genera la factura automáticamente después del pago.