Claude Code + CMUX : Le terminal ultime pour le codage par IA

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00Voici Cmux, un terminal conçu pour les agents de codage qui leur permet d'ouvrir
00:00:04et de contrôler un navigateur, de créer des sous-agents dans différents volets, de vous envoyer des notifications
00:00:09et bien plus encore via une interface en ligne de commande (CLI) et une API socket.
00:00:13Mais avec autant d'autres agents de terminal comme Warp, Solotam et Dmux, qu'est-ce qui rend Cmux
00:00:19si spécial ?
00:00:20Abonnez-vous et découvrons-le ensemble.
00:00:24Malgré son nom, Cmux n'a rien à voir avec tmux ; c'est une application Mac native basée
00:00:30sur libghosty qui utilise un navigateur WebKit et bon-split pour la mise en page, donc les onglets, les volets,
00:00:36et ainsi de suite.
00:00:37Mais la vraie magie réside dans la manière dont l'agent communique avec l'application.
00:00:41Laissez-moi vous montrer.
00:00:42Après avoir installé et configuré Cmux, on voit un terminal d'apparence classique
00:00:46qui gère les onglets. On peut diviser l'écran, verticalement ou horizontalement, et même avoir des onglets
00:00:53à l'intérieur de ces divisions si on le souhaite.
00:00:55Une fois Cmux installé, on a aussi accès à la CLI Cmux, qui propose des options
00:01:00pour diverses tâches comme créer un nouvel espace de travail, de nouveaux volets divisés, afficher des infos
00:01:06comme les logs et la progression dans la barre latérale, et même utiliser des commandes compatibles tmux.
00:01:11Tout cela est possible grâce au socket Unix de Cmux, dont nous reparlerons plus tard.
00:01:15Mais faisons quelque chose d'intéressant.
00:01:16D'abord, je vais effacer tout ça, puis lancer “claude code”. On voit que
00:01:20le titre de la barre latérale a changé. Je vais passer au modèle Haiku pour ne pas gaspiller
00:01:25de tokens.
00:01:26Ensuite, je vais demander à Claude d'utiliser la CLI Cmux pour ouvrir le navigateur dans un nouveau volet,
00:01:30d'aller sur google.com, de taper “hello world” dans le champ de recherche et de lancer la requête.
00:01:36Si j'appuie sur Entrée, Claude commence son travail.
00:01:38Ici, il apprend à utiliser Cmux.
00:01:40Il a ouvert un nouvel onglet sur Google.
00:01:42Voyons s'il effectue la recherche.
00:01:44D'accord, il hésite un peu.
00:01:45Et voilà, il a lancé la recherche pour “hello world”.
00:01:47Il a fait la recherche parfaitement.
00:01:49Et je peux même lui demander de cliquer sur des liens.
00:01:51Disons que je veuille cliquer sur ce lien IMDb ici, je peux dire : “clique sur le lien hello world
00:01:55provenant d'IMDb”.
00:01:57Et Claude va s'en charger.
00:01:59Ce qui est vraiment génial, c'est que même dans ce navigateur en volet divisé, j'ai accès aux outils
00:02:04de développement, ce qui aide à déboguer les pages sur lesquelles je travaille.
00:02:07Tout cela se fait avec des commandes de navigation similaires à l'API du navigateur d'agent de Sales.
00:02:12L'avantage de cette vue côte à côte terminal/navigateur est que l'agent peut
00:02:16naviguer, faire des tests et renvoyer ses résultats, que vous pouvez voir
00:02:20en tant que développeur en temps réel.
00:02:21Essayons autre chose.
00:02:22Je vais fermer cet onglet et effacer ces informations.
00:02:25Je vais demander à Claude de créer deux instances de lui-même dans des volets divisés : l'une pour comprendre
00:02:30le projet, et l'autre pour analyser le code de ce projet.
00:02:33Une fois terminé, elles devront transmettre les informations à l'instance principale de Claude,
00:02:38puis fermer les volets.
00:02:39J'appuie sur Entrée, il crée deux volets et lance Claude dans chacun d'eux.
00:02:45On peut maintenant le voir donner des instructions, c'est impressionnant en temps réel.
00:02:50Les volets non sélectionnés sont un peu sombres, on peut cliquer dessus pour les
00:02:53rendre plus lumineux.
00:02:54Je vais accélérer cette partie de la vidéo car cela va prendre un moment.
00:02:57Maintenant que les deux analyses sont finies, Claude a fermé les volets automatiquement et a récupéré
00:03:02les infos de la première instance ici et de la seconde là, ce qui est très cool.
00:03:07On peut imaginer tellement d'usages, comme vérifier les permissions de différents sous-agents
00:03:11pour s'assurer qu'ils ne restent pas bloqués.
00:03:12Mais un problème avec la démo actuelle, c'est que si l'un d'eux recevait une
00:03:16notification ou avait besoin d'aide, je n'avais aucun moyen simple de le savoir.
00:03:21Heureusement, Cmux facilite cela.
00:03:23Essayons autre chose.
00:03:24Dans une nouvelle session Claude Code, je vais lui demander de créer une nouvelle instance de
00:03:28Claude dans un volet divisé via Cmux, puis dans ce volet, de lui demander d'étudier et de suggérer
00:03:33des améliorations de code pour ce projet.
00:03:36Une fois fini, il doit écrire une notification via Cmux et lancer “trigger-flash” pour attirer
00:03:40mon attention.
00:03:41Cette commande active une bordure bleue clignotante sur le volet spécifié.
00:03:45Pendant que ça tourne, je vais créer un nouvel espace de travail et y lancer
00:03:48“open-code”.
00:03:49La beauté de Cmux, c'est que comme c'est une CLI, il peut fonctionner avec n'importe quel moteur d'agent.
00:03:54Et juste au moment où je finis d'ouvrir “open-code”, on voit une notification de Cmux.
00:03:58En cliquant sur la cloche, on voit que l'analyse parallèle a commencé, donc ce n'est pas tout à fait fini.
00:04:03Mais si je clique sur la notification, cela m'affiche le bon volet contenant l'information.
00:04:07Il n'a pas fait exactement ce que j'ai demandé, donc je vais lui dire de recommencer.
00:04:10Et pendant ce temps, retournons sur “open-code” pour faire ce que je voulais
00:04:13faire au départ : utiliser la CLI Cmux pour ajouter le nom de la branche du projet et mettre
00:04:19une icône appropriée à côté du nom de cette branche.
00:04:21Je valide, je le laisse faire, et on voit une notification de Cmux indiquant que
00:04:25l'analyse parallèle a débuté, et il semble que cette fois cela ait démarré correctement.
00:04:30On peut même voir le message dans la barre latérale.
00:04:32Voilà, c'est fait.
00:04:33Je vais lui demander de fermer le volet divisé et d'effacer le texte de la barre latérale.
00:04:36On voit ici qu'il a ajouté le nom de la branche avec une icône adaptée. Plus tôt,
00:04:40j'avais dit “icônes SF”, mais je voulais dire “symboles SF”, et je suis ravi qu'il ait compris.
00:04:45Et on voit qu'il a bien fermé le volet et supprimé le texte de la barre latérale.
00:04:49Tous ces exemples étaient très simples, mais j'espère qu'ils vous donnent un aperçu du
00:04:52potentiel du terminal Cmux lorsqu'un agent en prend le contrôle.
00:04:57Et je n'ai même pas montré des fonctionnalités géniales comme l'utilisation d'une barre
00:05:00de progression, l'ajout d'une couleur personnalisée à l'espace, le renommage d'onglets par l'agent,
00:05:05toutes les options de la palette de commandes et le fait que Cmux puisse lire et appliquer
00:05:10votre configuration Ghosty.
00:05:11J'ai utilisé Cmux sans hooks ni skills, et j'ai désactivé le sandbox dans Claude Code car
00:05:16j'aurais eu cette erreur, mais je recommande vivement d'installer les skills “core” et “browser”
00:05:20pour Cmux créés par l'auteur, et de le configurer avec les hooks de Claude Code pour
00:05:26envoyer automatiquement des notifications ou même écrire un script personnalisé.
00:05:29Tout cela rend Cmux bien plus utile, mais j'aimerais qu'il y ait un moyen plus simple de tout
00:05:33configurer au lieu de devoir copier-coller manuellement les skills et les notifications
00:05:38aux bons endroits.
00:05:39Comme avec “skills.sh” qui détecte automatiquement votre moteur d'agent et applique
00:05:43le skill au bon répertoire, j'aimerais que Cmux fasse de même pour faciliter
00:05:48toute l'installation.
00:05:49Mais Cmux est déjà un outil génial et je suis sûr qu'un script d'installation sera ajouté plus tard.
00:05:53J'aime beaucoup le fait que ce soit une application Mac native, ce qui est bon pour la mémoire et les performances,
00:05:58et que la CLI communique avec l'app via JSON par des sockets Unix, ce qui
00:06:02rend la communication rapide et simple.
00:06:04En parlant de rapidité et de simplicité, saviez-vous qu'il existe une base de données 138 fois plus
00:06:10rapide que SQLite, écrite en Rust et appelée StoolLab ? Vous pouvez tout apprendre
00:06:17à son sujet dans cette vidéo d'Andris.

Key Takeaway

Cmux transforme le terminal en un écosystème multitâche où les agents d'IA peuvent naviguer sur le web, gérer des sous-agents et interagir avec l'utilisateur via une interface programmable puissante.

Highlights

Présentation de Cmux, un terminal innovant conçu spécifiquement pour les agents d'intelligence artificielle comme Claude Code.

Capacité unique de l'agent à ouvrir et contrôler un navigateur WebKit directement dans des volets divisés du terminal.

Utilisation d'une interface en ligne de commande (CLI) et de sockets Unix pour une communication rapide en format JSON.

Possibilité de créer des sous-agents en parallèle pour l'analyse de code et la gestion de projets complexes.

Fonctionnalités avancées de notification visuelle, comme le clignotement des bordures (trigger-flash) pour attirer l'attention de l'utilisateur.

Architecture native Mac basée sur libghosty garantissant des performances optimales et une faible consommation de mémoire.

Compatibilité étendue avec les configurations Ghosty et intégration possible de 'skills' personnalisés pour automatiser les flux de travail.

Timeline

Introduction et architecture de Cmux

L'auteur introduit Cmux comme un terminal de nouvelle génération optimisé pour les agents de codage autonomes. Contrairement à ce que son nom suggère, il n'est pas lié à tmux mais repose sur une application Mac native utilisant libghosty et WebKit. Cette structure permet une gestion fluide des onglets et des volets tout en offrant une API socket pour la communication. L'objectif est de permettre aux agents de contrôler l'interface utilisateur de manière programmable. Cette section pose les bases techniques nécessaires pour comprendre l'originalité de l'outil par rapport à ses concurrents.

Exploration de la CLI et intégration du navigateur

Cette partie détaille l'utilisation de la CLI Cmux pour manipuler l'espace de travail, notamment la création de divisions horizontales et verticales. Une démonstration frappante montre Claude Code ouvrant un navigateur dans un volet pour effectuer une recherche Google et naviguer sur IMDb. L'utilisateur souligne que l'agent peut non seulement lire le contenu, mais aussi cliquer sur des liens spécifiques avec précision. La présence d'outils de développement intégrés dans le navigateur permet un débogage en temps réel par le développeur humain. Cette synergie entre le terminal et le web facilite grandement les tests d'applications par l'IA.

Analyse parallèle et gestion des sous-agents

L'auteur explore des scénarios plus complexes où Claude crée deux instances de lui-même dans des volets séparés pour analyser un projet. Un agent se concentre sur la compréhension globale tandis que l'autre examine le code source en profondeur. Une fois leurs tâches respectives terminées, ils transmettent leurs conclusions à l'instance principale avant de fermer automatiquement leurs volets. Ce flux de travail illustre la puissance de l'exécution parallèle gérée par un agent maître via Cmux. L'interface visuelle permet de suivre cette collaboration en temps réel grâce à la gestion dynamique de la luminosité des volets. C'est un exemple concret de l'augmentation de la productivité grâce à l'orchestration d'agents.

Système de notifications et personnalisation

Cette section traite de la communication entre l'agent et l'utilisateur via les notifications et la barre latérale. L'auteur présente la commande "trigger-flash" qui fait clignoter la bordure d'un volet pour signaler qu'un agent a besoin d'attention. On y voit aussi comment l'agent peut modifier dynamiquement l'interface, par exemple en ajoutant le nom de la branche Git avec des symboles SF dans la barre de titre. Malgré quelques hésitations de l'IA, le système prouve son efficacité pour tenir l'utilisateur informé des processus en arrière-plan. La flexibilité de la CLI permet ainsi d'adapter l'environnement de travail aux besoins spécifiques de chaque projet. Ces fonctions de retour d'information sont essentielles pour maintenir le contrôle sur des tâches automatisées.

Recommandations de configuration et conclusion

En conclusion, l'auteur partage ses conseils pour tirer le meilleur parti de Cmux, notamment l'installation des "skills" core et browser. Il recommande de désactiver le sandbox dans Claude Code pour permettre une interaction complète avec le système de fichiers et la CLI. Bien qu'il souhaite un script d'installation plus simple à l'avenir, il loue la performance de l'application due à l'utilisation des sockets Unix et du format JSON. La vidéo se termine sur une ouverture vers d'autres technologies performantes comme la base de données StoolLab. Cmux est présenté comme un outil indispensable pour quiconque souhaite pousser l'ingénierie assistée par IA vers de nouveaux sommets. L'aspect natif et léger reste l'un des arguments de vente majeurs évoqués.

Community Posts

View all posts