👨🏼‍💻

khriztianmoreno's Blog

Inicio Etiquetas Acerca |

Posts with tag ai

Los 15 updates de Chrome en el Google I/O 2026 que de verdad importan

2026-05-19
google iochromeaiweb development

A ver gente, el Google I/O 2026 acaba de terminar y tenemos que hablar de lo que nos acaban de soltar. Ya es oficial: la "web agéntica" (agentic web) llegó para quedarse, y va a cambiar por completo cómo armamos nuestras apps en el frontend.Como dev que ha pasado años peleando con DOM scrapers que se rompen con mirarlos, bundles de JS gigantes y flujos de auth que son un dolor de cabeza, me leí todo el post oficial de Chrome en el I/O '26 para separar el humo de las mejoras reales en arquitectura y DX (Developer Experience). Acá les dejo el resumen sin rodeos de los 15 updates más grandes y por qué de verdad nos tienen que importar.

Depuración Web con IA - Del Runtime del Navegador al Agente Autónomo

2026-05-18
debuggingmcpchrome-devtoolsaiperformance

La depuración web con IA tuvo durante años un problema fundamental: los modelos programaban con los ojos vendados. Podían leer tu código fuente, pero no podían ver qué pasaba en el navegador cuando ese código se ejecutaba. No veían la fuga de memoria, la petición de red fallida, ni el layout shift que solo ocurre bajo condiciones específicas.Eso cambió con la llegada del Model Context Protocol (MCP) y el Chrome DevTools MCP Server — un servidor oficial de Google que conecta directamente a los agentes de IA con el motor de renderizado del navegador. El agente ya no teoriza sobre tu código: lo observa corriendo en tiempo real y actúa sobre él.1. El Problema: La Ceguera del Código EstáticoUn LLM tradicional analiza el código fuente como texto estático. Puede detectar errores de sintaxis, sugerir refactors y explicar la lógica. Pero cuando la pregunta es "¿por qué mi LCP está en 4.2 segundos en mobile?" o "¿por qué el carrito falla solo cuando el usuario viene de una redirección de pago?", el modelo no tiene datos reales para responder.El Chrome DevTools Protocol (CDP) lleva años siendo la base de herramientas como Puppeteer y Playwright. El Chrome DevTools MCP Server lo expone directamente a cualquier agente compatible con MCP.2. Configuración: Conectar el Agente al NavegadorInstalaciónEl paquete oficial está publicado en npm como chrome-devtools-mcp:# Ejecutar directamente sin instalar (recomendado para probar) npx -y chrome-devtools-mcp@latest # O instalar globalmente npm install -g chrome-devtools-mcpConfigurar en tu IDEPara Cursor o VS Code con extensión MCP, crea o edita .cursor/mcp.json (o .vscode/mcp.json):{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } }Para Claude Code (CLI), el archivo es ~/.claude/claude_desktop_config.json:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } }Dos modos de conexiónModo aislado (recomendado): El servidor levanta una instancia limpia de Chrome con perfil temporal. El agente tiene control total sin tocar tu sesión principal.Modo --autoConnect (Chrome M144+): Conecta directamente a tu sesión activa. Para habilitarlo, abre chrome://inspect/#remote-debugging y acepta el diálogo de permiso cuando el agente intente conectarse.# Conectar a una sesión activa de Chrome npx -y chrome-devtools-mcp@latest --autoConnectAdvertencia: Con --autoConnect el agente puede leer cookies y sesiones activas. Úsalo solo en perfiles de desarrollo, nunca en tu perfil personal.3. Las Herramientas DisponiblesEl servidor expone 45 herramientas divididas en categorías. Las más útiles en el día a día:| Categoría | Herramientas clave | |---|---| | Automatización | click, fill_form, type_text, drag, hover | | Navegación | navigate_page, wait_for, list_pages | | Performance | performance_start_trace, performance_stop_trace, performance_analyze_insight | | Red | get_network_request, list_network_requests | | Inspección | evaluate_script, list_console_messages, take_screenshot | | Memoria | take_heapsnapshot, get_heapsnapshot_summary | | Emulación | emulate, resize_page |4. Casos de Uso RealesA. Auditoría de Core Web VitalsEl agente puede simular condiciones de red degradadas y analizar métricas como LCP (Largest Contentful Paint) e INP (Interaction to Next Paint) con datos reales del navegador, no estimaciones.Prompt de ejemplo:Navega a http://localhost:3000, emula una conexión Slow 3G, inicia un performance trace, recarga la página, detén el trace y dime qué está bloqueando el LCP.Lo que el agente ejecuta internamente:await navigate_page({ url: "http://localhost:3000" }); await emulate({ network: "slow3G" }); await performance_start_trace(); await navigate_page({ url: "http://localhost:3000" }); await performance_stop_trace(); const insight = await performance_analyze_insight();Si detecta una imagen hero con loading="lazy" bloqueando el LCP, propone el fix directo:// Antes — el navegador retrasa la carga de esta imagen <Image src="/hero.webp" alt="Hero" loading="lazy" /> // Después — precargada como recurso crítico <Image src="/hero.webp" alt="Hero" priority />B. Persistir Cambios del Inspector al Código FuenteAjustas márgenes en el inspector de Chrome, refrescas, y el cambio desaparece. Con el agente conectado, haces el ajuste visual en el navegador y luego pides:Acabo de cambiar el padding del componente Card en el inspector. Extrae los estilos actuales del DOM y actualiza el archivo de estilos.El agente ejecuta:// Extrae los estilos computados del elemento modificado const styles = await evaluate_script({ expression: ` const el = document.querySelector('.card'); const computed = window.getComputedStyle(el); return { padding: computed.padding, borderRadius: computed.borderRadius, boxShadow: computed.boxShadow }; ` }); // Luego localiza el archivo de estilos correspondiente y aplica el diffC. QA Automatizado y Detección de Errores SilenciososErrores que solo ocurren bajo interacciones específicas — flujos OAuth, carritos con descuentos combinados, formularios multipaso — son los más costosos de encontrar. El agente puede ejecutar el flujo completo y monitorear consola y red en paralelo:Completa el flujo de checkout: agrega el producto 42 al carrito, aplica el cupón PROMO10, paga con la tarjeta de prueba 4242 4242 4242 4242, y reporta cualquier error en consola o red.await navigate_page({ url: "http://localhost:3000/product/42" }); await click({ selector: "#add-to-cart" }); await navigate_page({ url: "http://localhost:3000/cart" }); await fill_form({ selector: "#coupon-input", value: "PROMO10" }); await click({ selector: "#checkout-btn" }); // Captura errores de red durante todo el flujo const requests = await list_network_requests(); const failedRequests = requests.filter(r => r.status >= 400); // Captura errores de consola const logs = await list_console_messages(); const errors = logs.filter(log => log.type === "error");Si un endpoint responde con HTTP 500, el agente captura el stack trace a través de source maps, lo correlaciona con el código fuente y propone el fix.D. Detección de Fugas de MemoriaLas fugas de memoria en SPAs son difíciles de diagnosticar manualmente. El agente puede comparar heap snapshots antes y después de una secuencia de navegación:Navega entre /dashboard y /reports 10 veces y dime si hay una fuga de memoria.// Snapshot inicial await take_heapsnapshot(); const before = await get_heapsnapshot_summary(); // Simular navegación repetida for (let i = 0; i < 10; i++) { await navigate_page({ url: "http://localhost:3000/dashboard" }); await navigate_page({ url: "http://localhost:3000/reports" }); } // Snapshot final y comparación await take_heapsnapshot(); const after = await get_heapsnapshot_summary(); // El agente compara retainers y reporta objetos que no fueron liberados5. Seguridad: Lo que No Puedes IgnorarAislamiento de perfiles obligatorio. Si el agente tiene acceso simultáneo a tu terminal y a tu navegador personal, un ataque de prompt injection desde una web maliciosa podría leer cookies de sesión, tokens de autenticación, o extraer información de formularios con credenciales guardadas. Usa siempre un perfil de Chrome dedicado para desarrollo:# Crear y usar un perfil aislado de Chrome google-chrome --user-data-dir=/tmp/dev-profile --no-first-runEvita la contaminación de contexto. No agregues todos los servidores MCP disponibles a tu workspace. Cada servidor adicional consume tokens del contexto del modelo y degrada la precisión de sus decisiones. Configura solo los servidores relevantes para la tarea actual — un workspace de debugging frontend no necesita el MCP de base de datos ni el de GitHub al mismo tiempo.ConclusiónLa depuración web ha evolucionado de una inspección artesanal a un flujo de trabajo automatizado y continuo de observabilidad agéntica. Al dotar a los modelos de lenguaje con la capacidad de interactuar directamente con el motor de renderizado y las herramientas internas de Chrome, cerramos la brecha entre la intención de diseño y la ejecución en el mundo real. Los desarrolladores que adopten este flujo interactivo no solo reducirán drásticamente el tiempo empleado en cazar bugs repetitivos, sino que elevarán el estándar de optimización y confiabilidad de sus aplicaciones a niveles sin precedentesProfile@khriztianmoreno en Twitter y GitHu

Gemini en Chrome: El amanecer de la Web Agéntica

2026-01-28
chromeaiweb-developmentfuture

El reciente lanzamiento de Gemini en Chrome no es solo una actualización más del navegador; es una señal clara de un cambio de paradigma que veníamos anticipando: la transición de una web pasiva a una web agéntica.Hasta ahora, el navegador era una ventana para que tú consumieras contenido. Con la integración de capacidades agénticas (como el Auto-Browse) y modelos locales (Nano Banana), Chrome se convierte en un actor activo que puede razonar, navegar y ejecutar.Para nosotros como desarrolladores, esto cambia las reglas del juego. No se trata solo de "IA generativa", se trata de cómo nuestros sitios y aplicaciones serán consumidos por inteligencias artificiales que actúan en nombre de los usuarios.El fin del "solo visualizar"La característica más disruptiva es, sin duda, el Auto Browse. Gemini ahora puede manejar flujos de varios pasos: investigar, comparar y completar formularios.¿Qué significa esto para el Ecosistema?La Interfaz de Usuario (UI) se vuelve opcional: En muchos casos, el usuario no verá tu hermoso diseño de CSS. Verá el resultado procesado por el agente. Si tu sitio depende puramente de interacción visual humana para convertir, estás en riesgo.La revancha del HTML Semántico: Durante años, muchos frameworks modernos han abusado del "div-soup". Un agente de IA necesita entender la estructura de tu página para navegarla. Un <div> con un onClick no es lo mismo que un <button> o un <a> para un modelo que intenta entender acciones posibles.Universal Commerce Protocol (UCP): La estandarización de las compras es un arma de doble filo. Reduce la fricción para el usuario, pero commoditiza la experiencia de compra. Si tu checkout es complejo o no estándar, el agente podría fallar o preferir a la competencia.Nano Banana: IA en el el "Edge" real (El Cliente)La integración de modelos de imagen ("Nano Banana") directamente en el navegador elimina la latencia de red y los costos de servidor.La oportunidad para devs: Podemos empezar a construir experiencias ricas de edición y generación de contenido sin quemar créditos en APIs costosas. La privacidad mejora drásticamente ya que los datos no salen del dispositivo. Sin embargo, esto transfiere la carga computacional al dispositivo del usuario. La optimización de recursos (batería, memoria) será más crítica que nunca.¿En qué debemos empezar a trabajar?Como desarrolladores críticos que miran hacia el futuro, aquí está nuestra lista de tareas inmediata:1. Accesibilidad como SEO para AgentesLa accesibilidad (a11y) siempre ha sido importante para los usuarios; ahora es crítica para la supervivencia de tu negocio. Los agentes de IA utilizan el árbol de accesibilidad (Accessibility Tree) y el DOM semántico para entender tu sitio.Acción: Revisa tus roles ARIA, usa etiquetas semánticas (<article>, <nav>, <main>) y asegúrate de que tus formularios tengan etiquetas (labels) claras.2. Datos Estructurados (JSON-LD)No confíes en que el agente "lea" tu texto. Aliméntalo explícitamente. Implementar Schema.org y JSON-LD ya no es solo para aparecer bonito en Google Search; es el manual de instrucciones para que Gemini sepa qué productos vendes, cuánto cuestan y cómo comprarlos.3. APIs para el FrontendDebemos pensar en nuestros frontends no solo como consumidores de APIs, sino como fuentes de información expuesta. Si tu aplicación es una "caja negra" renderizada completamente por JavaScript sin estados intermedios accesibles, serás invisible para los agentes.4. Prepararse para UCPInvestiga el Universal Commerce Protocol. Si gestionas un e-commerce, la compatibilidad con este protocolo podría ser la diferencia entre una venta automática gestionada por Gemini y un carrito abandonado.ConclusiónGemini en Chrome es el canario en la mina de carbón. La web está evolucionando de ser un catálogo de documentos a un entorno de ejecución para agentes.El "SEO" del futuro no será sobre palabras clave, sino sobre legibilidad agéntica. Los desarrolladores que sigan construyendo solo para ojos humanos se quedarán atrás. Es hora de volver a los fundamentales de la web abierta, estructurada y semántica, pero con la potencia de la IA moderna.ReferenciasChrome’s next chapter with Gemini¡Espero que esto haya sido útil y/o te haya hecho aprender algo nuevo!Profile@khriztianmoreno �

El stack web que no puedes ignorar en 2026

2025-12-26
web-performanceidentitypwaaidevtoolsprogrammingweb-developmentdiscuss

Después de revisar roadmaps, specs, charlas del Chrome Dev Summit y señales reales en producción, mi predicción es simple:El desarrollo web en 2026 se moverá hacia más capacidades nativas, menos JavaScript innecesario y performance medible en el mundo real.Esto no es una lista de “herramientas cool”. Estas son las áreas que se vuelven no negociables.1. Performance (Core Web Vitals + Soft Navigation)Si solo vas a arreglar una cosa, arregla esta. Performance es la prioridad. Sin discusión.Por qué será vital en 2026Google está apostando por la experiencia real del usuario, no por benchmarks sintéticos. Soft Navigation también cambia cómo se evalúan las SPAs modernas (y las apps “tipo MPA”).En 2026:Si no mejoras INP y LCP, no solo “pierdes SEO” — pierdes conversiones.Si no mides bien las soft navigations, vas a enviar rutas “más rápidas” con métricas falsas.Qué cambiaCLS deja de ser “cosmético”.INP reemplaza por completo la mentalidad de “FID”.El performance de una SPA se juzga como una MPA.Qué debes dominarweb-vitals en producciónLong tasks (y qué los provoca)Heurísticas de soft navigationRUM > LighthouseRecursosWeb VitalsSoft NavigationCrUX2. Identity: Passkeys + FedCMEl login tradicional se está muriendo. Solo que todavía no se ha enterado.Por qué será vital en 2026Las contraseñas son una responsabilidad técnica y legal. Las passkeys reducen fricción y fraude. Y FedCM es la respuesta real del navegador a la identidad en un mundo sin third‑party cookies.En 2026:Un producto sin passkeys se percibirá como obsoleto.El “OAuth clásico” sin FedCM se va a degradar (o romper) en flujos que a los usuarios sí les importan.Qué cambiaLo passwordless se vuelve normal.La UI de login nativa del navegador se vuelve la expectativa.Menos JS. Más plataforma.Qué debes dominarWebAuthnPatrones de UX para passkeysFlujos de FedCMIdentity privacy‑preserving por defectoRecursosFedCMPasskeysWebAuthn3. Fugu / PWA APIsLa web ya habla con el hardware. El debate se acabó — lo que queda es ejecución.Por qué será vital en 2026Las apps web compiten directo con nativas cuando la brecha de capacidades es pequeña. Y los navegadores siguen entregando APIs basadas en estándares: menos dependencias, menos “pegamento”.En 2026:WebUSB, File System Access y Badging dejan de ser “raros”.Las PWAs se sienten cada vez más como apps de primera clase cuando el caso de uso lo amerita.Qué cambiaOffline realIntegración más profunda con el OSUX más rápida sin wrappers nativosQué debes dominarFile System Access APIBackground SyncBadging APIHeurísticas de instalación (PWA)RecursosWeb capabilitiesProgressive Web Apps4. AI for Web Developers (Built-in AI APIs)La IA deja de ser “solo un SaaS”. Pasa a ser parte del navegador.Por qué será vital en 2026Menos latencia. Más privacidad (porque lo local se vuelve el default). Y mejor UX sin obligar a cada producto a construir un backend de IA costoso.Esto no es “embeber ChatGPT”. Esto es IA nativa, con progressive enhancement.En 2026:On-device AI se vuelve el default cuando esté disponible.La UX impulsada por IA se vuelve un diferenciador real.Qué cambiaModelos más pequeños y rápidos corriendo localmenteMenos llamadas externasPatrones de UI que se adaptan al contextoQué debes dominarRestricciones de inferencia on-device (y fallbacks)Patrones de UX con IA (asistiva, no invasiva)IA privacy-firstProgressive enhancement con IARecursosAI in Chrome5. DevTools & Browser AutomationEl debugging tradicional no escala.Por qué será vital en 2026Las apps se vuelven más complejas. Los problemas de performance se vuelven más sutiles. Y el testing manual simplemente no es viable si quieres velocidad y calidad.En 2026:La observabilidad desde DevTools se vuelve un hábito diario.La automatización se vuelve parte del flujo, no una “fase de QA”.Qué cambiaDevTools más inteligentesTesting más integradoDebugging centrado en UX realQué debes dominarFlujos avanzados del panel de PerformanceLighthouse CIPuppeteer / PlaywrightTracing y profiling profundoRecursosChrome DevToolsLighthouseMi predicción final (sin marketing)Si tuviera que apostar por una sola base:Performance + Identity serán el fundamento. Todo lo demás se apoya encima de eso.La web en 2026 será:Más nativaMás rápidaMás privadaMenos dependiente de la “magia del framework”El resto es ruido.¡Espero que esto haya sido útil y/o te haya hecho aprender algo nuevo!Profile@khriztianmoreno 🚀Hasta la próxima

El Kit de Desarrollo de Agentes - ADK

2025-10-15
aiweb-develpomentmcp

Hoy vamos a meternos de lleno en el Agent Development Kit, mejor conocido como ADK. Es un framework que está cambiando las reglas del juego para construir agentes de inteligencia artificial.Pensemos en esto por un momento. Para quienes desarrollan software, la idea de crear un agente de IA funcional con una sola línea de código no es solo una pregunta: es el sueño hecho realidad.Quienes programan conocen bien este dolor de cabeza. Uno empieza con una idea simple, pero pronto el proyecto se convierte en un laberinto de llamadas a APIs, gestión de estado y código repetitivo. Todo se vuelve un caos. Y justo ahí es donde entra ADK para poner orden.Lo interesante es que trae principios sólidos de la ingeniería de software —como modularidad y facilidad para hacer pruebas— aplicados al desarrollo de inteligencia artificial. Es una solución elegante para un problema complejo.🔩 Los seis componentes clavePara entender cómo funciona ADK, hay que mirar debajo del capó. El sistema se compone de seis bloques fundamentales, que trabajan como una orquesta donde cada instrumento cumple un rol esencial.El agente: Es el cerebro del sistema. Procesa lo que se le pide, toma decisiones y sabe cuándo debe usar sus herramientas.El runner: Actúa como el director de orquesta. Se asegura de que todo fluya correctamente: que los mensajes lleguen, las herramientas se activen y las respuestas regresen sin problemas.La sesión: Es la memoria a corto plazo. Permite mantener la coherencia en la conversación, recordar de qué se está hablando y no perder el contexto.El estado: Es como una pizarra compartida. Todos los componentes pueden leer y escribir datos ahí. Una herramienta puede dejar información y el agente usarla al instante.La memoria: Representa el conocimiento a largo plazo. Guarda información que persiste entre conversaciones, lo que permite que el agente aprenda y mejore con el tiempo.Las herramientas: Son las manos del agente. Sin ellas, solo podría conversar, pero con ellas puede actuar: buscar en internet, conectarse a APIs, obtener datos. Son lo que transforma un chatbot en un asistente verdaderamente útil.🎼 Cómo funciona la sinfoníaCuando llega una petición:La sesión carga el contexto de la conversación.El agente procesa la solicitud.Si es necesario, una herramienta entra en acción.El estado se actualiza con los resultados.El runner orquesta todo para devolver una respuesta coherente.Sinfonia completaUn ciclo perfecto que da vida a agentes inteligentes.🧰 Extender las capacidades con herramientasHay dos formas de dotar a los agentes de nuevas habilidades:Crear herramientas personalizadas: Diseñadas para una lógica de negocio específica. Solo requieren cuatro elementos:Un nombre únicoUna descripción claraUn esquema con los datos necesariosLa función que ejecuta la acciónUsar el Model Context Protocol (MCP): Un conector universal que permite integrar servicios existentes (como GitHub, Discord o Slack) sin código de integración a medida.Además, ADK es agnóstico: funciona con OpenAI, Anthropic o cualquier modelo. Total libertad.⚙️ Flujos de trabajo y colaboración entre agentesCuando una tarea es demasiado grande para un solo agente, entran los flujos de trabajo, que permiten orquestar varios agentes para automatizar procesos complejos.Es clave distinguir entre:Sistemas multiagentes: pensados para conversaciones dinámicas (como un bot de soporte que deriva a un experto).Flujos de trabajo: para automatización pura, con pasos fijos y predecibles (por ejemplo, generar un informe mensual).Los patrones más comunes son:Secuencial: Un agente recopila datos, otro redacta y otro publica. Ideal para procesos paso a paso, como creación de contenido.Paralelo: Divide una tarea entre varios agentes a la vez (por ejemplo, revisión técnica y revisión de negocio simultánea). Gana velocidad y múltiples perspectivas.Bucle (loop): Un agente genera un resultado, otro evalúa si cumple los criterios, y si no, lo devuelve con feedback para mejorar. Perfecto para refinamiento iterativo y mejora continua.Regla práctica:Paso a paso → secuencialVelocidad o diversidad → paraleloCalidad máxima → bucle🔌 Conexión con el mundo exterior: el adaptador universal (MCP)El Model Context Protocol (MCP) actúa como un adaptador de corriente universal. Permite conectar los agentes con servicios externos sin necesidad de integraciones personalizadas.Esto separa la lógica del agente de la complejidad técnica de las conexiones externas.Ejemplos reales:Un asistente de DevOps que detecta problemas en GitHub y alerta por Discord.Un agente de soporte que consulta el CRM y notifica al cliente por Telegram.El potencial de automatización es enorme.🔗 Referencias esencialesGoogle – Agent Development Kit (ADK)Este es el recurso principal. Aquí está toda la documentación oficial.Doc oficial: Agent Development KitGitHub SDK: Agent Development Kit (ADK) Web🚀 ConclusiónEl ADK es mucho más que un conjunto de herramientas. Representa una nueva filosofía de desarrollo de IA, donde los agentes se construyen con la misma rigurosidad que el software profesional.La pregunta final:¿Cuál será el próximo gran problema que automatizaremos

Presentando Chrome DevTools MCP

2025-09-30
javascriptchromedevtoolsaimcpdebuggingperformancechrome-devtools

Participé en el programa de acceso anticipado (Early Access Program) de Chrome DevTools MCP y puse a prueba la funcionalidad en proyectos reales. Me enfoqué en cuatro escenarios: corregir un problema de estilos, ejecutar trazas de rendimiento y extraer insights, depurar una solicitud de red fallida y validar que los assets tengan encabezados de caché óptimos. En este post comparto esa experiencia práctica: qué funcionó, dónde brilla y cómo lo usaría en el día a día.Chrome DevTools MCP proporciona a los asistentes de codificación con IA visibilidad real en un navegador Chrome activo para que puedan inspeccionar, probar, medir y corregir problemas basados en señales reales, no en suposiciones. En la práctica, esto significa que tu agente puede abrir páginas, hacer clic, leer el DOM, recopilar trazas de rendimiento, analizar peticiones de red y perfeccionar soluciones en un ciclo cerrado.Por qué es importanteLa mayoría de los agentes de codificación son ciegos. Proponen código, pero no pueden ver la UI renderizada, la consola, las cascadas de red o los problemas de layout thrashing. Chrome DevTools MCP elimina esa venda conectando cualquier cliente AI habilitado para MCP (por ejemplo, Cursor, Claude Code, Gemini CLI) a una instancia local de Chrome con superpoderes a nivel de DevTools. El resultado es un flujo de trabajo donde el agente puede implementar un cambio, ejecutarlo en Chrome, observar el resultado y refinarlo.Introducción rápida: ¿Qué es MCP?MCP (Model Context Protocol) es un estándar abierto (de Anthropic) que define cómo los asistentes de IA se conectan a herramientas y fuentes de datos mediante una interfaz consistente. Un servidor MCP expone "herramientas" (capacidades). Un cliente MCP (tu asistente de IA) llama a esas herramientas. Chrome DevTools MCP es un servidor MCP que conecta un asistente de IA con DevTools de Chrome y su superficie de automatización.Puppeteer para confiabilidad: El servidor MCP utiliza Puppeteer para manejar la navegación, esperar a selectores, inactividad de red, diálogos, etc. Obtienes un control del navegador robusto y de nivel de producción en lugar de los peligros del CDP puro.Capa de herramientas MCP: El servidor expone herramientas de alto nivel (por ejemplo, navigate_page, click, performance_start_trace) a través de MCP. Tu AI llama a una herramienta; el servidor traduce eso en automatización de Chrome confiable y devuelve resultados estructurados.Chrome local y aislado: Se ejecuta localmente con un directorio de datos de usuario separado o perfiles efímeros completamente aislados. Puedes adjuntarte a un Chrome existente o iniciar una nueva instancia, en modo headless o visible.Capacidades clave (herramientas seleccionadas)Navegación y ciclo de vida: new_page, navigate_page, wait_for, avance/retroceso, listar páginas abiertas.Interacción de usuario: click, fill, fill_form, hover, drag, handle_dialog, upload_file.DOM y scripting: evaluate_script, take_snapshot, take_screenshot, list_console_messages.Red: list_network_requests, get_network_request para introspección de solicitudes/respuestas.Emulación: emulate_cpu, emulate_network, resize_page para restricciones de dispositivo/red.Rendimiento: performance_start_trace, performance_stop_trace, performance_analyze_insight para extraer métricas como LCP y TBT de trazas reales.Estas son primitivas a nivel de DevTools: puedes reproducir flujos de usuario reales y obtener la misma fidelidad que tendrías al depurar manualmente en Chrome.Flujos de trabajo prácticos que utilizaría en proyectos realesA continuación se presentan flujos probados en batalla que entregaría a un asistente de IA cuando trabajo en aplicaciones frontend a escala.1) Verificar una corrección de UI de extremo a extremoAplicar el parche (PR del agente o cambio local).navigate_page a la URL de vista previa.click o fill para reproducir la ruta del error.take_screenshot del estado roto para la línea base.Aplicar la corrección; recargar; repetir pasos 2–4.Comparar capturas de pantalla y list_console_messages para regresiones.Por qué es útil: reemplaza las pruebas manuales con un bucle determinista que el agente puede ejecutar repetidamente en diferentes páginas y puntos de interrupción.2) Detectar y explicar errores de ejecución rápidamentenavigate_page a la ruta fallida.list_console_messages y evaluate_script para inspeccionar el estado.list_network_requests + get_network_request para confirmar el estado del backend, payload, CORS y tiempos.Proponer corrección con contexto (marcos de pila, respuestas erróneas, encabezados mal configurados).Por qué es útil: tu agente deja de adivinar—los errores están fundamentados en la actividad real de la consola y la red.3) Reproducir recorridos críticos de usuario antes de implementarnew_page a staging.fill_form para iniciar sesión, click CTA, navegar por el checkout.take_screenshot en cada paso para aceptación visual.emulate_network 3G-lento y volver a intentar el flujo para la resiliencia.Por qué es útil: ejecuciones E2E realistas y repetibles que puedes adjuntar a los PRs.4) Depuración de estilos y layout en la que puedes confiartake_snapshot y evaluate_script para extraer estilos computados para un componente problemático.Aplicar parche de estilo; take_screenshot en múltiples tamaños de viewport mediante resize_page.Validar riesgo de CLS y problemas de desbordamiento.Por qué es útil: previene el "funciona en mi máquina" al basarse en el renderizado real.5) Triaje de rendimiento sin salir de tu editor performance_stop_trace + performance_analyze_insight para extraer señales y bloqueadores de LCP/TBT/CLS.Recomendar optimizaciones específicas (por ejemplo, precarga de imágenes, división de código basada en rutas, eliminar tareas largas, diferir la hidratación no crítica).Por qué es útil: integra una auditoría estilo Lighthouse en tu ciclo de agente con especificidad basada en trazas.Patrones avanzados para equipos seniorArnés de regresión: Codifica los recorridos principales (inicio de sesión, búsqueda, checkout) como secuencias MCP. Ejecuta en cada PR con capturas de pantalla + registros de consola/red adjuntos a los artefactos de CI.Presupuestos de rendimiento: Falla CI si performance_analyze_insight excede los presupuestos para LCP/TBT; incluye trazas como evidencia.Contratos de red: Usa get_network_request para validar esquemas y encabezados de caché; marca sorpresas (por ejemplo, falta de cache-control, JSON sobredimensionado o sobre-fetching).Verificaciones de accesibilidad: Combina evaluate_script para consultar heurísticas de ARIA y contraste; captura screenshots para diferencias visuales.Seguridad y restricciones a tener en cuentaTrata al navegador automatizado como un perfil separado. Evita navegar a sesiones de producción sensibles con sesión iniciada.Prefiere perfiles efímeros/aislados para ejecuciones reproducibles.Sé explícito sobre los datos de prueba y los entornos para prevenir efectos secundarios en sistemas reales.Primeros pasos (nivel alto)El repositorio documenta los detalles de instalación y configuración. A alto nivel:Instala el servidor Chrome DevTools MCP (paquete de Node.js).Configura tu cliente habilitado para MCP (Cursor, Claude Code, Gemini CLI) para registrar el servidor DevTools MCP.Inicia tu cliente; generará/se conectará a una instancia de Chrome cuando se invoquen herramientas.Llama a herramientas desde la interfaz del cliente o mediante prompts (por ejemplo, “abrir página, hacer clic en botón, recopilar traza de rendimiento”).Ejemplo de llamadas a herramientas MCP que podrías orquestar en una sesión:navigate_page -> wait_for(selector) -> click(selector) -> list_console_messages -> take_screenshot -> performance_start_trace -> trigger_interaction -> performance_stop_trace -> performance_analyze_insightConsulta la documentación oficial y el repositorio para obtener la lista más reciente de herramientas, flags y opciones de configuración.Cuándo recurrir a estoSi ya te apoyas en un asistente de IA para cambios de código, agrega DevTools MCP siempre que la corrección deba fundamentarse en el navegador: correcciones visuales/UI, interacciones inestables, depuración de tiempo de ejecución y red, y cualquier cosa relacionada con el rendimiento.ReferenciasAnuncio y documentación de Chrome DevTools MCPDescripción general del Model Context Protocol (MCP)Puppeteer y Chrome DevTools Protocol (CDP)¡Espero que esto haya sido útil y/o te haya enseñado algo nuevo!Profile@khriztianmoreno �

La API revolucionaria de Chrome

2025-08-01
aiweb-developmentjavascript

La inteligencia artificial ha dejado de ser una promesa futurista para convertirse en una herramienta tangible y poderosa en nuestro día a día como desarrolladores. Hasta hace poco, integrar IA en nuestras aplicaciones web significaba depender de servidores externos, lidiar con la latencia y gestionar costos. Pero, ¿y si te dijera que el juego está a punto de cambiar drásticamente? Google nos ha dado una nueva y poderosa herramienta: la Prompt API, que nos permite ejecutar modelos de IA, como Gemini Nano, directamente en el navegador del usuario.Recientemente, he estado experimentando con esta API y la sensación es electrizante. Estamos ante un cambio de paradigma que no solo mejora el rendimiento, sino que también aborda preocupaciones clave como la privacidad y la personalización. Acompáñame a desglosar por qué creo que esta API es tan revolucionaria.¿Por qué es revolucionario?La verdadera revolución de la Prompt API radica en tres pilares fundamentales:Privacidad por Diseño: Al ejecutar el modelo de IA en el cliente, los datos del usuario nunca abandonan su dispositivo. Esto es un cambio masivo. Imagina poder ofrecer funcionalidades inteligentes sin que el usuario tenga que preocuparse por cómo se maneja su información personal en la nube. Esto no solo genera confianza, sino que simplifica enormemente el cumplimiento de normativas de privacidad.Latencia Cero: La comunicación con un servidor externo introduce inevitablemente un retraso. Con la Prompt API, la inferencia ocurre localmente, lo que se traduce en respuestas casi instantáneas. Esto es crucial para crear experiencias de usuario fluidas e interactivas que se sientan naturales y no como si estuvieras esperando una respuesta de un servidor lejano.Disponibilidad Offline: Una vez que el modelo se ha descargado, la aplicación puede seguir funcionando sin conexión a Internet. Esto abre la puerta a un nuevo tipo de aplicaciones web inteligentes que son robustas y siempre disponibles, sin importar la calidad de la conexión del usuario.Primeros Pasos: Un Ejemplo SencilloAntes de sumergirnos en los casos de uso más complejos, veamos lo simple que es comenzar. Lo primero es verificar si el navegador del usuario puede ejecutar el modelo.// Verifica si la API está disponible const disponibilidad = await window.ai.getAvailability(); if (disponibilidad === "available") { console.log("¡La IA está lista para usarse!"); } else { console.log("La IA no está disponible en este dispositivo."); }Si está disponible, podemos crear una sesión y enviarle un prompt. ¡Así de fácil!if (disponibilidad === "available") { // Crea una sesión de inferencia const session = await window.ai.createSession(); // Envía un prompt y espera la respuesta completa const respuesta = await session.prompt( "Escríbeme un poema corto sobre el código." ); console.log(respuesta); // No olvides destruir la sesión para liberar recursos session.destroy(); }Este simple fragmento de código ya nos muestra el poder que tenemos al alcance de nuestras manos.Casos de Uso Donde Esta API BrillaríaLas posibilidades son enormes, pero aquí hay algunas ideas donde la Prompt API podría tener un impacto inmediato y significativo:Asistentes de Escritura Inteligentes: Imagina un editor de texto que no solo corrige tu gramática, sino que te ayuda a reformular frases, ajustar el tono o incluso generar borradores completos de correos electrónicos o artículos, todo en tiempo real y sin enviar tus borradores a ningún servidor.Clasificación y Organización de Contenido: Un sitio de noticias o un blog podría usar la API para clasificar automáticamente los artículos en categorías relevantes para el usuario, permitiendo crear feeds personalizados y dinámicos sin necesidad de lógica en el backend.Búsqueda Semántica en el Cliente: En lugar de una simple búsqueda por palabras clave, podrías implementar una búsqueda que entienda el significado detrás de la consulta del usuario dentro del contenido de una página o un conjunto de documentos, ofreciendo resultados mucho más precisos.Transcripción de Audio y Descripción de Imágenes: La API tiene capacidades multimodales. Podrías permitir a los usuarios grabar notas de voz y transcribirlas instantáneamente, o subir una imagen y generar automáticamente un texto alternativo descriptivo para mejorar la accesibilidad.¿Por Qué Es Importante?La Prompt API no es solo una nueva función; es una declaración sobre el futuro de la web. Nos está empoderando como desarrolladores para construir la próxima generación de aplicaciones web: más inteligentes, más privadas y más centradas en el usuario.Al mover la IA al cliente, se democratiza el acceso a esta tecnología. Ya no se requieren grandes infraestructuras de servidor ni presupuestos elevados para la inferencia. Pequeños desarrolladores y equipos pueden ahora competir en igualdad de condiciones, creando experiencias innovadoras que antes estaban reservadas para las grandes corporaciones.Explorando la API a Fondo: Más EjemplosLa documentación oficial nos proporciona ejemplos más avanzados que vale la pena explorar.Streaming de RespuestasPara respuestas más largas, podemos mostrar el resultado a medida que se genera, mejorando la percepción de velocidad.const session = await window.ai.createSession(); const stream = session.promptStreaming( "Escríbeme un poema extra largo sobre el universo" ); for await (const chunk of stream) { // Agrega cada fragmento a tu UI document.getElementById("poema-div").textContent += chunk; }Manteniendo el ContextoLas sesiones recuerdan las interacciones anteriores, permitiendo conversaciones fluidas.const session = await window.ai.createSession({ initialPrompts: [ { role: "system", content: "Eres un asistente amigable y útil." }, ], }); let respuesta1 = await session.prompt("¿Cuál es la capital de Italia?"); console.log(respuesta1); // "La capital de Italia es Roma." let respuesta2 = await session.prompt("¿Y qué idioma se habla allí?"); console.log(respuesta2); // "El idioma oficial de Italia es el italiano."Salida Estructurada con JSONPuedes forzar al modelo a responder en un formato JSON específico, lo cual es increíblemente útil para integrar la IA con otras partes de tu aplicación.const session = await window.ai.createSession(); const schema = { type: "boolean" }; const post = "Hoy horneé unas tazas de cerámica y quedaron geniales."; const resultado = await session.prompt( `¿Este post trata sobre cerámica?\n\n${post}`, { responseConstraint: schema } ); console.log(JSON.parse(resultado)); // trueConclusión: El Futuro es LocalMi experiencia con la Prompt API ha sido reveladora. Es una de esas tecnologías que te hacen sentir que estás presenciando el comienzo de algo grande. Nos da las herramientas para construir una web más inteligente y respetuosa con la privacidad, directamente desde el navegador.Te invito a que te sumerjas, experimentes y pienses en cómo puedes usar esta increíble capacidad en tus propios proyectos. El futuro de la IA en la web es local, y ya está aquí

WebContainers al máximo - Bolt.new combina IA y desarrollo full-stack en el navegador

2024-10-08
javascriptaiweb-development

¿Recuerdas los WebContainers? Es el "microsistema operativo" basado en WebAssembly que puede ejecutar las operaciones de Vite y todo el ecosistema Node.js en el navegador. El equipo de StackBlitz creó WebContainers para potenciar su IDE en el navegador, pero a menudo parecía que la tecnología todavía estaba buscando un caso de uso decisivo, hasta ahora.Esto se debe a que StackBlitz acaba de lanzar bolt.new , un sandbox de desarrollo impulsado por IA que Eric Simons describió durante ViteConf como "como si Claude o ChatGPT hubieran tenido un bebé con StackBlitz".Bolt.newIntentaré no imaginarlo demasiado vívidamente, pero en base a las críticas abrumadoramente positivas hasta el momento, supongo que está funcionando: docenas de desarrolladores lo describen como una combinación de v0, Claude, Cursor y Replit.En qué se diferencia Bolt: las herramientas de código de IA existentes a menudo pueden ejecutar algo de JavaScript/HTML/CSS básico en el navegador, pero para proyectos más complejos, es necesario copiar y pegar el código en un entorno local.Pero Bolt no. Al utilizar WebContainers, puede solicitar, ejecutar, editar e implementar aplicaciones web completas , todo desde el navegador.Así es como se ve:Puedes solicitarle a bolt.new que cree una aplicación de varias páginas lista para producción con un backend y una base de datos específicos, usando cualquier stack tecnológico que desees (por ejemplo: “Construye un blog personal usando Astro, Tailwind y shadcn”).A diferencia de otras herramientas, Bolt puede instalar y ejecutar paquetes y bibliotecas npm relevantes, interactuar con API de terceros y ejecutar servidores Node.Puede editar manualmente el código que genera a través de un editor en el navegador o hacer que Bolt resuelva los errores por usted . Esto es exclusivo de Bolt, porque integra IA en todos los niveles de WebContainers (no solo en el paso CodeGen).Puedes implementar en producción desde el chat a través de Netlify, sin necesidad de iniciar sesión.Hay mucho más que podríamos analizar aquí, pero la demostración de Eric es bastante salvaje.Para cerrar: desde fuera, no siempre estuvo claro si StackBlitz alguna vez obtendría un retorno significativo de la inversión durante los más de 5 años que han pasado desarrollando WebContainers. Pero, de repente, parece que podrían estar en una posición única para ayudar a los desarrolladores a aprovechar la IA para crear aplicaciones legítimas FullStack.<iframe width="560" height="315" src="https://www.youtube.com/embed/knLe8zzwNRA?si=7R7-1HxzwuyzL0EZ&amp;start=700" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>¡Espero que esto haya sido útil y/o te haya hecho aprender algo nuevo!Profile@khriztianmoreno �

Desbloquea tu creatividad con Google Gemini y JavaScript - Guía práctica

2024-06-12
javascriptaitutorial

Hola! Hoy les traigo una nueva herramienta que potenciará tu creatividad a otro nivel: Google Gemini. Esta API de inteligencia artificial te permite generar texto de alta calidad en español, desde simples frases hasta historias completas, con solo unas pocas líneas de código.¿Qué es Google Gemini?Google Gemini es un modelo de lenguaje de última generación desarrollado por Google AI. Se ha entrenado con un conjunto de datos masivo de texto y código, lo que le permite comprender y generar lenguaje natural con una precisión impresionante.¿Qué podemos hacer con Google Gemini y JavaScript?Las posibilidades son infinitas. Aquí te presento algunos ejemplos:Generar contenido creativo: Escribe poemas, historias, guiones, artículos de blog, o cualquier tipo de contenido textual que puedas imaginar.Traducir idiomas: Traduce textos de un idioma a otro de forma rápida y precisa. Responder preguntas: Obtén respuestas a tus preguntas de forma informativa y completa.Crear chatbots: Desarrolla chatbots conversacionales que interactúen con los usuarios de forma natural.Automatizar tareas: Automatiza la generación de informes, correos electrónicos, y otras tareas que requieren procesamiento de lenguaje natural.¿Cómo empezar?Para empezar a usar Google Gemini con JavaScript, solo necesitas:Una cuenta de Google Cloud Platform: https://cloud.google.com/Habilitar la API de Google Gemini: https://ai.google.dev/Ejemplo práctico:En este ejemplo, vamos a generar un poema usando Google Gemini y JavaScript.const { GoogleGenerativeAI } = require("@google/generative-ai"); // Access your API key as an environment variable (see "Set up your API key" above) const genAI = new GoogleGenerativeAI(process.env.API_KEY); async function run() { // For embeddings, use the embedding-001 model const model = genAI.getGenerativeModel({ model: "embedding-001" }); const text = "Escribe un poema sobre la naturaleza"; const result = await model.embedContent(text); const embedding = result.embedding; console.log(embedding.values); } run();Para la generación de texto usamos el método getGenerativeModel del objeto genAI.Ejemplo de poema generado:La tierra verde, el cielo azul, el sol brilla con luz de cristal. Las flores florecen en el jardín, los pájaros cantan con dulce trino. El viento susurra entre las hojas, las abejas zumban entre las flores. La naturaleza es un regalo divino, un lugar de paz y armonía.Conclusión:Google Gemini y JavaScript son una combinación poderosa que te permite desbloquear tu creatividad y desarrollar aplicaciones increíbles. Con esta guía práctica, ya estás listo para empezar a explorar las posibilidades infinitas de esta tecnología.Recursos adicionales:Documentación de Google Gemini: https://ai.google.dev/docsTutoriales de Google Gemini: https://m.youtube.com/watch?v=TXvbT8ORI50Ejemplos de código de Google Gemini: https://m.youtube.com/watch?v=jTdouaDuUOA¡Anímate a experimentar con Google Gemini y JavaScript! Comparte tus creaciones en los comentarios y déjame saber qué te parece esta herramienta.¡Espero que esto haya sido útil y/o te haya hecho aprender algo nuevo!Profile@khriztianmoreno �