00:00:00La ingeniería siempre ha sido un proceso muy colaborativo debido a la escala del trabajo y a los diferentes roles involucrados.
00:00:05Esto ha cambiado debido a la IA, pero al mismo tiempo trae nuevas formas de colaboración.
00:00:09Diferentes modelos tienen diferentes fortalezas, ya sea en sus funciones o en su costo.
00:00:13Veamos un ejemplo.
00:00:14Es un hecho bien conocido que los últimos modelos de Gemini son realmente excelentes en diseño.
00:00:18Son mucho más creativos que cualquier modelo de Claude, especialmente si les das menos instrucciones.
00:00:23Pero en general, Opus 4.6 es un modelo excepcional,
00:00:26especialmente con Claude code como herramienta de soporte, que es mucho más estable que Gemini CLI.
00:00:31Pero no existe una forma eficiente de usarlos juntos en un flujo de trabajo compartido.
00:00:35Incluso si intentas usarlos, tendrás que hacer mucho trabajo manual,
00:00:38y no hay forma de hacer que estos agentes realicen el trabajo de manera autónoma.
00:00:41Recientemente, encontramos una herramienta que resuelve este problema de comunicación permitiendo que diferentes
00:00:46agentes con diferentes modelos chateen entre sí, eliminándonos a nosotros de intermediarios.
00:00:50Agent Chatter es una interfaz de chat para la coordinación en tiempo real de agentes de IA.
00:00:55Es compatible con los tres agentes más populares, como Claude code, Gemini CLI y Codex,
00:01:00y también con modelos de código abierto como Kimi, Quen y más.
00:01:03También puedes usarlo para ahorrar costos dejando que agentes caros como Claude se encarguen de la planificación
00:01:07y dejando que Kimi o GLM se encarguen de la implementación.
00:01:10Utiliza un chat compartido con múltiples canales y permite que los agentes hablen entre sí
00:01:14e implementen funciones de forma coordinada.
00:01:16Nuestra impresión inicial de la herramienta fue que la interfaz de usuario predeterminada no estaba muy pulida.
00:01:20Pero como este es un proyecto de código abierto, hicimos un fork del repositorio original y creamos
00:01:24una capa visual encima, que para nosotros se ve mucho mejor y es más fácil de navegar
00:01:28con ciertos cambios que se adaptaban a nuestras necesidades.
00:01:31Subimos esta versión a nuestro repositorio forkeado manteniendo intacta la funcionalidad original.
00:01:35Pero todo el mérito de la arquitectura subyacente de esta plataforma es del creador original.
00:01:40Ahora bien, este proyecto contiene en realidad un conjunto de scripts
00:01:43que debes ejecutar una vez para inicializar los agentes de esta herramienta.
00:01:46Estos scripts son los puntos de entrada para ejecutar el sistema,
00:01:49y sin ellos no puedes ejecutar ningún agente.
00:01:51Para acceder a estos scripts, necesitas clonar todo el repositorio.
00:01:54El repositorio contiene básicamente scripts para inicializar cada uno de los agentes por separado.
00:01:58Pero antes de usar los scripts, si estás en macOS o Linux, necesitas tener instalado TMUX.
00:02:02TMUX es básicamente un multiplexor de terminales.
00:02:05Te permite crear múltiples sesiones de terminal y controlarlas todas desde un único punto.
00:02:09Esto es lo que el chat de agentes utiliza internamente
00:02:11para enviar tareas a cada agente de terminal que está ejecutando.
00:02:14Para los que usan Windows, pueden ejecutar los scripts directamente y les funcionará.
00:02:18Han listado todos los comandos para ejecutar los scripts de cada agente.
00:02:21Por ejemplo, si vas a usar Claude code y Gemini CLI juntos,
00:02:26copias los comandos correspondientes y los pegas en la terminal, en la carpeta donde clonaste el repositorio.
00:02:31Puedes seleccionar los comandos de los agentes que quieras ejecutar.
00:02:34Una vez pegues el comando, se iniciará una sesión de agente en la sesión de TMUX.
00:02:38Puedes usar tantos agentes como quieras en tu configuración.
00:02:40Por ejemplo, podrías configurar cuatro agentes: tres sesiones de Claude y una de Gemini.
00:02:44Pero no importa cuántos agentes uses, cada uno debe ejecutarse en una terminal dedicada.
00:02:49Así que si ejecutas cuatro sesiones, necesitas cuatro terminales funcionando en paralelo,
00:02:53y podrás controlarlas todas desde la sesión de chat única en la herramienta.
00:02:56Ahora, una vez que todo esté instalado, al navegar a localhost,
00:03:00deberías ver todos los agentes que iniciaste mostrados en el panel de chat.
00:03:03Ahora, para aprovechar al máximo esta herramienta,
00:03:06hay ciertos pasos que debes seguir para trabajar de manera más eficiente.
00:03:09Se recomienda inicializar el framework que estés usando para tu app antes de usar la herramienta,
00:03:14porque este es un punto que causa conflictos entre múltiples agentes incluso si tienen roles distintos.
00:03:20Así que asegúrate de que tu app de Next.js o el framework que uses ya esté inicializado antes de empezar.
00:03:25Primero, como cada agente se ejecuta como una sesión separada de Claude o Gemini,
00:03:29tendrás que aprobar manualmente los permisos para cada uno de ellos individualmente.
00:03:33Aunque también proporcionan scripts para ejecutar en modo "omitir permisos",
00:03:36no es recomendable porque con múltiples agentes el riesgo de que uno borre el trabajo de otro es mucho mayor.
00:03:42Por lo tanto, tendrás que configurar el settings.json tanto para Claude code como para Gemini CLI con los permisos adecuados.
00:03:48De esta forma, si se necesita editar un archivo o ejecutar un comando de build, no esperará tu aprobación manual
00:03:53y, al mismo tiempo, mantendrás el control sobre los comandos peligrosos.
00:03:56Otro punto importante es asegurar que las herramientas MCP estén configuradas en el archivo también,
00:04:01o de lo contrario tendrías que aprobarlas tú también.
00:04:03También deberías crear un archivo agents.md.
00:04:05Actualmente sirve como una plantilla con una estructura optimizada para el uso de los agentes,
00:04:09que luego será completada por ellos.
00:04:11Incluye las reglas de rol, el comportamiento y todos los principios que los agentes deben seguir.
00:04:15También necesitarás archivos de planificación como un PRD y plantillas de especificaciones de backend y UI,
00:04:20que nosotros usamos como plantillas y que el agente de planificación completará más adelante.
00:04:24El propósito de usar estas plantillas es dar estructura para que los agentes no añadan contenido innecesario.
00:04:30Todas estas plantillas están disponibles en AI Labs Pro, desde donde puedes descargarlas y usarlas.
00:04:35Si encuentras valor en lo que hacemos y quieres apoyar al canal,
00:04:38AI Labs Pro es la mejor manera de hacerlo.
00:04:40El enlace estará en la descripción.
00:04:42Otra cosa que permite esta herramienta es dar un nombre a cada agente y asignarle un rol específico.
00:04:47Esto facilita la identificación del agente y permite que trabaje según un rol diseñado específicamente para él.
00:04:52Por ejemplo, si usas Gemini para el diseño de la interfaz,
00:04:55puedes renombrarlo y asignarle el rol personalizado de experto en UI/UX.
00:04:59Asignas nombres y roles a cada agente para que operen de acuerdo con la personalidad establecida para ellos.
00:05:04Y por último, necesitas establecer ciertas reglas para que los agentes sigan las tareas correctamente.
00:05:09Como mencioné antes, deberías usar agents.md.
00:05:12Pero Claude usa Claude.md y Gemini usa Gemini.md
00:05:16y ninguno utiliza el del otro como su archivo de instrucciones principal.
00:05:19Para coordinarlos, usas agents.md y añades una regla para que ambos lo consulten como el archivo guía clave.
00:05:25Puedes configurar múltiples reglas según tus necesidades y añadir tantas como quieras.
00:05:29Pero cuando creas una regla, primero se queda en borrador
00:05:31y tienes que pasarla manualmente a activa para que los agentes la reconozcan.
00:05:35Las reglas se actualizan cada 10 activaciones de chat, lo cual puedes ajustar según prefieras.
00:05:39Otra cosa a tener en cuenta es el "loop guard" (protector de bucle), que por defecto está en 4.
00:05:43El loop guard es el número máximo de saltos entre agentes
00:05:46antes de que los agentes pausen sus tareas y esperen una instrucción.
00:05:49Se añadió para evitar que los agentes se queden atrapados en un bucle de preguntas cruzadas demasiado tiempo.
00:05:53Una vez alcanzado el límite del loop guard, los agentes dejan de comunicarse
00:05:56y tienes que enviar un comando de continuar para reanudar.
00:05:59Deberías aumentarlo si quieres que los agentes se coordinen mejor entre sí por más tiempo.
00:06:03Pero antes de planificar la implementación, unas palabras de nuestro patrocinador, Airtop.
00:06:06Si pasas horas cada semana extrayendo datos manualmente
00:06:10o navegando por decenas de pestañas, hay una forma mucho mejor de manejar eso.
00:06:13Airtop es una plataforma en la nube que permite a los agentes de IA interactuar con la web como un humano
00:06:19usando plantillas personalizadas o preconfiguradas que resuelven las tareas manuales más molestas.
00:06:23Piensa en ello como un navegador en la nube que se encarga de todo el trabajo pesado por ti.
00:06:27Por ejemplo, estoy usando una plantilla para investigar los precios de la competencia.
00:06:30Solo le doy instrucciones al agente en lenguaje sencillo, sin necesidad de código,
00:06:33y este navega por el sitio, gestiona el inicio de sesión y extrae exactamente lo que necesito en un formato limpio.
00:06:39Mi parte favorita es que evita las frustrantes medidas antibot y los
00:06:43CAPTCHAs que suelen romper las automatizaciones tradicionales,
00:06:46lo que lo hace increíblemente fiable para trabajos de gran volumen.
00:06:48Crea automatizaciones fiables en minutos y regístrate en Airtop gratis ahora mismo.
00:06:53Haz clic en el enlace del comentario fijado y empieza a construir hoy mismo.
00:06:56Ahora que todos los pasos están completados, es hora de pasar a la implementación.
00:07:00Como siempre hemos recalcado la importancia de planificar antes de implementar,
00:07:03aquí también deberías empezar por la planificación.
00:07:05Al igual que los canales de Slack, aquí también puedes crear diferentes canales.
00:07:09Te interesará configurar canales separados tanto para el front-end como para el back-end.
00:07:12Una vez que das la idea de la aplicación, esta envía una solicitud a la sesión de Tmux
00:07:16y le insta a revisar el mensaje porque fue mencionado.
00:07:18El agente planificador crea un plan completo, te notifica y te pide que lo apruebes o añadas cambios.
00:07:23Documenta el plan en el PRD justo encima de la plantilla que añadiste inicialmente.
00:07:28Puedes hacer los cambios que consideres oportunos y el agente actualizará el PRD con ellos.
00:07:32Esta herramienta utiliza MCP para que Claude envíe respuestas y lea los chats de la interfaz,
00:07:37haciendo posible la comunicación bidireccional.
00:07:39Una vez confirmado el plan, le pides que proceda.
00:07:41Y una vez aprobado el PRD, alerta a Gemini por sí solo
00:07:44y le pide que implemente los documentos de especificación de la interfaz de usuario.
00:07:47A partir de ahí, el diseñador de UI y el planificador empiezan a coordinarse
00:07:51sobre los detalles de la implementación, con el planificador sugiriendo detalles
00:07:54y el diseñador de UI incorporándolos al plan, siguiendo con la revisión de ida y vuelta.
00:07:59Cabe señalar que, aunque habíamos fijado el loop guard en 8,
00:08:02por alguna razón no lo registró.
00:08:04Así que alcanzamos el máximo de bucles tras solo 4 iteraciones y se nos pidió continuar la conversación.
00:08:08Ahora se informa al constructor de que los planes están listos para ser implementados por el diseñador de UI,
00:08:13y el constructor confirma que ha recibido los planes y espera la aprobación para proceder.
00:08:18El agente diseñador también te avisa de que quiere proceder con la implementación de la interfaz,
00:08:22lo cual deberías retrasar hasta que hayas revisado los planes tú mismo.
00:08:25En el canal de backend, puedes pedir al agente constructor y al planificador que revisen el backend.md,
00:08:30que es creado por el planificador al implementar el PRD.
00:08:33Los usas para que se coordinen entre sí y validen los documentos,
00:08:37aunque cada uno de ellos podría identificar lagunas en la implementación.
00:08:40Así que todos se coordinan e involucran al diseñador de UI para las especificaciones de la interfaz,
00:08:44haciéndoles trabajar juntos para solucionar los problemas.
00:08:47Luego puedes pedir al planificador una última revisión cuando lo hayan implementado todo.
00:08:50En nuestro caso, encontraron algunos problemas adicionales durante la revisión final.
00:08:54Tras subsanarlos, todos los agentes confirmaron que
00:08:56los problemas se habían resuelto y la aplicación estaba lista para ser construida.
00:08:59Pero no conviene construirla todavía. Hay un paso más que deberías dar.
00:09:02Debes hacer que revisen los planes entre ellos.
00:09:04Esta herramienta tiene varios modos para probar, y deberías testear el modo planificador.
00:09:08Puedes probar múltiples modos para revisión de diseño, crítica de código y más.
00:09:12Estos modos funcionan en 3 fases con diferentes modelos desempeñando distintos roles.
00:09:16Configuras al agente planificador como el presentador, que expone lo hecho anteriormente,
00:09:20y al agente revisor como el desafiador, que cuestiona críticamente lo que dice el presentador.
00:09:24El agente de planificación es el sintetizador, que combina los hallazgos de cada uno.
00:09:28La sesión empieza cuando el presentador expone, tras lo cual el desafiador analiza críticamente
00:09:32los hallazgos y pone a prueba los documentos, identificando muchas lagunas.
00:09:36Debido a que los agentes se cuestionan entre sí,
00:09:38son capaces de identificar y solucionar muchos problemas que de otro modo pasarían desapercibidos.
00:09:42Tras lo cual terminas con el plan final, lo que marca el fin de la sesión de 3 fases.
00:09:46Además, si te gusta nuestro contenido, considera pulsar el botón de "hype",
00:09:50porque nos ayuda a crear más contenido como este y a llegar a más gente.
00:09:54Una vez terminada la revisión, pides al planificador que actúe como orquestador y se coordine con
00:09:58todos los demás agentes para implementar el proyecto, usando los modelos respectivos para sus tareas.
00:10:03Este acepta y hace que tanto el diseñador como el constructor trabajen en paralelo.
00:10:06Envía mensajes a los canales de backend y frontend, dando al constructor
00:10:10luz verde para empezar a construir y desbloqueando al ingeniero frontend para que implemente el diseño.
00:10:15Trabajar con esto es muy interesante porque básicamente solo entregas
00:10:18la tarea al agente planificador y solo necesitas pedirle actualizaciones.
00:10:22Ver a los agentes trabajar juntos es fascinante porque se señalan los errores entre ellos.
00:10:26Por ejemplo, en nuestro caso, el diseñador de UI intentó accidentalmente solucionar un error
00:10:30que debería ser responsabilidad del constructor.
00:10:32Tanto el planificador como el constructor señalaron que no debía implementar la corrección,
00:10:37porque sobrescribía el archivo en el que el constructor estaba trabajando.
00:10:39Este flujo de trabajo sería mucho más fluido si los agentes trabajaran en árboles de trabajo dedicados,
00:10:44con un agente fusionando y revisando todo en su conjunto,
00:10:47porque eso eliminaría el problema de que los agentes sobrescriban el trabajo de los demás.
00:10:50Así que es algo a tener en cuenta para configuraciones más complejas.
00:10:53El planificador activa entonces al agente de revisión, que identifica los problemas en detalle,
00:10:57proporciona un informe exhaustivo y asigna tareas a los agentes.
00:11:01Como ya habíamos establecido la regla de que si un agente necesitaba algo de otro,
00:11:04simplemente lo pidiera, el diseñador de UI solicitó acceso a una variable concreta al constructor,
00:11:09y el constructor se lo concedió.
00:11:10Una vez terminada la revisión por su parte, el planificador te pide que realices la revisión final del front-end.
00:11:15Cuando navegues al servidor de desarrollo,
00:11:17verás que la interfaz coincide con la versión gamificada que querías.
00:11:20La página de inicio tiene un alto contraste, lo que le da un aire de videojuego,
00:11:23y utiliza palabras llamativas y referencias que hacen que sea emocionante probarla.
00:11:26Después de la prueba de mecanografía, recibes un informe de rendimiento.
00:11:29Los resultados se muestran en el panel, indicando la mejor velocidad hasta el momento,
00:11:33junto con los niveles actuales y el progreso, haciendo que la experiencia de diseño sea inmersiva.
00:11:37Con esto llegamos al final de este vídeo. Si quieres apoyar al canal y
00:11:40ayudarnos a seguir haciendo vídeos como este, puedes hacerlo usando el botón de "super thanks" de abajo.
00:11:45Como siempre, gracias por vernos y nos vemos en el próximo.