Claude Code + CMUX: El terminal definitivo para programar con IA

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00Este es Cmux, una terminal diseñada para agentes de programación que les permite abrir
00:00:04y controlar un navegador, crear sub-agentes en diferentes paneles, enviarte notificaciones personalizadas
00:00:09y mucho más a través de una CLI y una API de sockets.
00:00:13Pero con tantos otros agentes de terminal como Warp, Solotam y Dmux, ¿qué hace que Cmux sea tan
00:00:19especial?
00:00:20Suscríbete y vamos a descubrirlo.
00:00:24A pesar de su nombre, Cmux no tiene nada que ver con tmux; es una aplicación nativa de Mac basada
00:00:30en libghosty que usa un navegador WebKit y bond-split para el diseño: pestañas, paneles y
00:00:36demás.
00:00:37Pero la verdadera magia reside en la forma en que el agente se comunica con la aplicación.
00:00:41Déjame enseñártelo.
00:00:42Tras instalar y configurar Cmux, veremos una terminal de aspecto normal que
00:00:46permite pestañas, divisiones verticales u horizontales, e incluso podemos tener pestañas dentro
00:00:53de esas divisiones si queremos.
00:00:55Con Cmux instalado, también tendremos acceso a la CLI de Cmux, que ofrece opciones
00:01:00para varias cosas, como crear espacios de trabajo y paneles divididos, mostrar información como
00:01:06logs y progreso en la barra lateral, e incluso usar comandos compatibles con tmux.
00:01:11Todo esto es gracias al socket Unix de Cmux, del que hablaremos más adelante.
00:01:15Pero hagamos algo interesante.
00:01:16Primero, voy a limpiar esto; abriré Claude Code, y vemos que
00:01:20el título de la barra lateral ha cambiado. Cambiaré el modelo a Haiku para no desperdiciar
00:01:25tokens.
00:01:26Luego, le pediré a Claude que use la CLI de Cmux para abrir el navegador en un nuevo panel
00:01:30dividido, navegar a google.com, escribir “hello world” en la entrada y hacer una búsqueda.
00:01:36Si pulso Intro, Claude hará lo suyo.
00:01:38Aquí está aprendiendo a usar Cmux.
00:01:40Ha abierto la nueva pestaña en Google.
00:01:42Veamos si realiza la búsqueda.
00:01:44Vale, parece que le cuesta un poco.
00:01:45Y ya ha buscado “hello world”.
00:01:47Lo ha hecho perfectamente.
00:01:49Incluso puedo pedirle que haga clic en enlaces.
00:01:51Digamos que quiero que pulse en este enlace de IMDb; puedo decir: “haz clic en el enlace
00:01:55de hello world de IMDb”.
00:01:57Y Claude procederá a hacerlo.
00:01:59Lo genial es que incluso dentro de este navegador en panel dividido, tengo acceso a las herramientas
00:02:04de desarrollador, lo que ayuda a depurar las páginas en las que estoy trabajando.
00:02:07Todo esto se hace con comandos de navegador similares al diseño de la API del navegador
00:02:11de agentes de Stagehand.
00:02:12El beneficio de tener esta vista de navegador y terminal en paralelo es que el agente puede
00:02:16navegar por la web, hacer pruebas y enviar los resultados, que tú puedes ver como
00:02:20desarrollador en tiempo real.
00:02:21Probemos otra cosa.
00:02:22Voy a cerrar esta pestaña y limpiar toda esta información.
00:02:25Le pediré a Claude que cree dos instancias de sí mismo en paneles divididos: una para entender
00:02:30el proyecto y otra para analizar el código del mismo.
00:02:33Cuando terminen, deberán devolver la información a la instancia principal de Claude
00:02:38y luego cerrar los paneles.
00:02:39Al pulsar Intro, crea dos paneles y abre a Claude en ambos.
00:02:45Ahora vemos cómo les da instrucciones, lo cual es increíble de ver en tiempo real.
00:02:50Los paneles que no están seleccionados se ven oscuros, así que podemos clicar en ellos
00:02:53para que brillen más.
00:02:54Voy a adelantar esta parte del vídeo porque va a tardar un rato.
00:02:57Ahora que ambas divisiones han terminado, Claude las ha cerrado automáticamente y ha obtenido información
00:03:02de la primera instancia aquí y de la segunda aquí abajo, lo cual es fantástico.
00:03:07Podéis imaginar muchos usos para esto, como verificar permisos en diferentes sub-agentes
00:03:11para asegurar que no se queden bloqueados.
00:03:12Pero un problema con la demo que acabo de mostrar es que, si alguno de ellos tenía una
00:03:16notificación o necesitaba ayuda, no había una forma fácil de que yo lo supiera.
00:03:21Por suerte, Cmux facilita eso.
00:03:23Probemos algo más.
00:03:24En una nueva sesión de Claude Code, voy a darle un prompt para crear una nueva instancia de
00:03:28Claude en un panel dividido usando Cmux y que, en ese panel, le pida estudiar y sugerir
00:03:33mejoras de código para este proyecto.
00:03:36Al terminar, debe escribir una notificación adecuada con Cmux y ejecutar “trigger flash” para
00:03:40llamar mi atención.
00:03:41El comando activa un borde azul parpadeante en el panel especificado.
00:03:45Mientras eso ocurre, crearé un nuevo espacio de trabajo y ejecutaré
00:03:48Open Code.
00:03:49Lo bueno de Cmux es que, al ser una CLI, puede funcionar con cualquier entorno de agente.
00:03:54Justo al terminar de abrir Open Code, vemos que tenemos una notificación de Cmux.
00:03:58Si pulso en la campana, veo que el análisis paralelo ha comenzado, así que aún no ha terminado.
00:04:03Pero si clico en la notificación, me muestra el panel derecho que tiene la información.
00:04:07No ha hecho exactamente lo que pedí, así que voy a decirle que lo repita.
00:04:10Mientras tanto, volvamos a Open Code para hacer lo que iba a
00:04:13hacer originalmente: usar la CLI de Cmux para añadir el nombre de la rama del proyecto y
00:04:19un icono apropiado junto al nombre de esa rama.
00:04:21Pulso Intro, dejo que trabaje y vemos que hay una notificación
00:04:25de Cmux: el análisis paralelo ha comenzado y parece que esta vez ha arrancado correctamente.
00:04:30Incluso podemos ver el mensaje dentro de la barra lateral.
00:04:32Ya ha terminado.
00:04:33Le pediré que cierre el panel dividido y limpie el texto de la barra lateral.
00:04:36Vemos que añadió el nombre de la rama con un icono adecuado; antes
00:04:40dije iconos SF, pero me refería a símbolos SF, me alegra que lo haya deducido.
00:04:45Y aquí vemos que ha cerrado el panel y eliminado el texto de la barra lateral.
00:04:49Todos estos ejemplos eran muy sencillos, pero espero que os den una idea de las
00:04:52cosas tan potentes que puede hacer la terminal Cmux cuando un agente tiene el control.
00:04:57Y ni siquiera he mencionado funciones geniales como usar una barra de
00:05:00progreso, añadir colores personalizados al espacio de trabajo, usar agentes para renombrar pestañas,
00:05:05mostrar todas las opciones en la paleta de comandos y que Cmux puede leer y aplicar tu
00:05:10configuración de Ghosty.
00:05:11He usado Cmux sin ganchos ni habilidades y desactivé el sandbox en Claude Code porque
00:05:16habría dado error, pero recomiendo instalar las habilidades de núcleo y navegador
00:05:20para Cmux creadas por el autor, y configurarlo con ganchos de Claude Code para que te envíe
00:05:26notificaciones automáticamente o incluso para escribir scripts personalizados.
00:05:29Todo esto hace que Cmux sea mucho más útil, aunque desearía que hubiera una forma más fácil de
00:05:33configurarlo desde cero en lugar de tener que copiar y pegar manualmente las habilidades
00:05:38y notificaciones en su sitio.
00:05:39Igual que con skills.sh, que detecta automáticamente tu entorno de agente y aplica
00:05:43la habilidad en el directorio correcto, ojalá Cmux hiciera lo mismo para ayudar con la
00:05:48configuración inicial.
00:05:49Aun así, Cmux ya es una herramienta increíble y seguro que añadirán un script de instalación más adelante.
00:05:53Me gusta mucho que sea una app nativa de Mac, lo cual es bueno para la memoria y el rendimiento,
00:05:58y que la CLI se comunique con la app vía JSON mediante sockets Unix, lo que
00:06:02hace que la comunicación sea rápida y sencilla.
00:06:04Hablando de rápido y sencillo, ¿sabías que hay una base de datos 138 veces más rápida que
00:06:10SQLite escrita en Rust llamada StoolLab? Puedes aprender todo sobre ella en este vídeo de
00:06:17Andris.

Key Takeaway

Cmux redefine la experiencia de desarrollo al proporcionar una terminal nativa que permite a los agentes de IA controlar navegadores y gestionar múltiples sub-agentes mediante una interfaz programable y altamente visual.

Highlights

Cmux es una terminal nativa de Mac basada en libghosty que integra un navegador WebKit y soporte para agentes de IA.

Permite a agentes como Claude Code controlar el navegador para realizar búsquedas, navegar por sitios y depurar código en tiempo real.

La herramienta facilita la orquestación de sub-agentes en paneles divididos para realizar tareas paralelas de análisis y desarrollo.

Cuenta con una CLI y una API de sockets Unix que utiliza JSON para una comunicación rápida entre los agentes y la aplicación.

Incluye funciones avanzadas de interfaz como notificaciones personalizadas, barras de progreso y efectos visuales de atención como el "trigger flash".

Es compatible con comandos de tmux y puede leer configuraciones existentes de la terminal Ghosty para una transición fluida.

Aunque la configuración inicial puede ser manual, ofrece un gran potencial para automatizar flujos de trabajo de programación complejos.

Timeline

Introducción a Cmux y su arquitectura nativa

El video comienza presentando a Cmux como una terminal revolucionaria diseñada específicamente para potenciar a los agentes de programación. A diferencia de lo que su nombre sugiere, no está basada en tmux, sino que es una aplicación nativa para macOS construida sobre libghosty. Utiliza tecnologías como WebKit para integrar un navegador y bun-split para gestionar la disposición de paneles y pestañas. El narrador destaca que la verdadera innovación reside en el canal de comunicación entre el agente y la aplicación. Esta sección establece la base técnica necesaria para entender por qué Cmux es superior a otras terminales convencionales en el contexto de la IA.

Exploración de la interfaz y capacidades de la CLI

En este segmento, se realiza un recorrido visual por la interfaz de usuario, mostrando la flexibilidad de las divisiones verticales y horizontales. Se introduce la CLI de Cmux, la cual permite a los desarrolladores y agentes crear espacios de trabajo, gestionar paneles y visualizar logs en una barra lateral. Un punto clave es la mención del socket Unix, que actúa como el puente de comunicación fundamental para las operaciones del sistema. El presentador explica que incluso se pueden utilizar comandos compatibles con tmux para facilitar la adopción por parte de usuarios experimentados. Este apartado demuestra cómo la herramienta organiza el flujo de trabajo de manera eficiente y personalizable.

Interacción de Claude Code con el navegador integrado

El presentador demuestra un caso de uso práctico integrando Claude Code con Cmux para automatizar tareas de navegación web. Se observa cómo Claude utiliza la CLI para abrir Google, realizar una búsqueda de "hello world" y navegar por enlaces específicos de forma autónoma. La integración permite acceder a las herramientas de desarrollador dentro del panel del navegador, facilitando enormemente la depuración de aplicaciones web. El beneficio principal destacado es la capacidad del agente para realizar pruebas y enviar resultados que el desarrollador supervisa en tiempo real. Esta sección ilustra la sinergia entre el procesamiento de lenguaje natural de la IA y el control programático de la interfaz web.

Orquestación de sub-agentes y tareas paralelas

Se explora una funcionalidad avanzada donde la instancia principal de Claude crea dos sub-agentes en paneles independientes para analizar un proyecto. El primer sub-agente se encarga de entender el contexto general, mientras que el segundo realiza un análisis profundo del código fuente. El narrador muestra cómo estas instancias trabajan simultáneamente y devuelven sus hallazgos a la terminal principal antes de cerrarse automáticamente. Este flujo de trabajo paralelo ahorra tiempo y permite una mayor especialización en las tareas de desarrollo supervisadas por IA. Es un ejemplo claro de cómo Cmux puede gestionar procesos complejos que requieren múltiples hilos de pensamiento de IA.

Sistema de notificaciones y retroalimentación visual

El video aborda la importancia de la comunicación entre el agente y el humano a través del sistema de notificaciones de Cmux. Se presenta el comando "trigger flash", que activa un borde azul parpadeante en el panel para captar la atención del usuario cuando una tarea finaliza. El autor muestra cómo las notificaciones en la barra lateral mantienen al desarrollador informado sobre el progreso del análisis sin interrumpir su trabajo actual. También se corrige un pequeño error conceptual sobre "iconos SF" frente a "símbolos SF", demostrando que la IA puede deducir la intención del usuario. Esta parte resalta las características de experiencia de usuario (UX) que hacen que la colaboración con agentes sea más intuitiva.

Personalización técnica y recomendaciones finales

Para concluir, el presentador detalla funciones adicionales como las barras de progreso, colores personalizados y el uso de la paleta de comandos. Recomienda encarecidamente instalar las "habilidades de núcleo y navegador" creadas por el autor para maximizar el potencial de Cmux con Claude Code. Se discuten aspectos técnicos sobre el rendimiento de la aplicación nativa y la eficiencia del protocolo JSON mediante sockets Unix para la transferencia de datos. Aunque menciona que la configuración inicial podría simplificarse en futuras versiones, califica a la herramienta como excepcional para el ecosistema de programación actual. El video cierra con una breve mención a StoolLab, una base de datos de alto rendimiento escrita en Rust, invitando a los espectadores a seguir aprendiendo.

Community Posts

View all posts