00:00:00L'ingénierie a toujours été un processus très collaboratif en raison de l'ampleur du travail et des différents rôles impliqués.
00:00:05Cela a changé avec l'IA, mais en même temps, elle apporte de nouvelles manières de collaborer.
00:00:09Différents modèles ont des forces différentes, que ce soit dans leurs rôles ou dans leur coût.
00:00:13Prenons un exemple.
00:00:14C'est un fait bien connu que les derniers modèles Gemini sont vraiment excellents pour la conception.
00:00:18Ils sont bien plus créatifs que n'importe quel modèle Claude, surtout si vous leur donnez moins d'instructions.
00:00:23Mais globalement, Opus 4.6 est un modèle exceptionnel,
00:00:26surtout avec Claude code comme outil d'accompagnement, qui est bien plus stable que Gemini CLI.
00:00:31Cependant, il n'existe pas de moyen efficace de les utiliser ensemble dans un flux de travail partagé.
00:00:35Même si vous essayez de le faire, vous devrez effectuer beaucoup de travail manuel,
00:00:38et il n'y a aucun moyen de rendre ces agents autonomes dans leur travail.
00:00:41Récemment, nous avons découvert un outil qui résout ce problème de communication en permettant à différents
00:00:46agents dotés de modèles variés de discuter entre eux, nous retirant ainsi de l'équation.
00:00:50Agent Chatter est une interface de chat pour la coordination en temps réel d'agents d'IA.
00:00:55Il prend en charge les trois agents les plus populaires comme Claude code, Gemini CLI et Codex,
00:01:00ainsi que des modèles open-source comme Kimi, Quen et d'autres.
00:01:03Vous pouvez aussi l'utiliser pour réduire les coûts en laissant des agents coûteux comme Claude s'occuper de la planification
00:01:07et en laissant Kimi ou GLM se charger de l'implémentation.
00:01:10Il utilise un chat partagé avec plusieurs canaux et permet aux agents de communiquer entre eux
00:01:14pour implémenter des fonctionnalités de manière coordonnée.
00:01:16Notre impression initiale de l'outil était que l'interface par défaut manquait de finition.
00:01:20Mais comme c'est un projet open-source, nous avons forké le dépôt original et créé
00:01:24une couche visuelle par-dessus, qui nous semble bien meilleure et plus facile à naviguer,
00:01:28avec certains changements adaptés à nos besoins.
00:01:31Nous avons publié cette version sur notre fork tout en préservant les fonctionnalités d'origine.
00:01:35Cependant, tout le mérite de l'architecture de base de cette plateforme revient au créateur original.
00:01:40Ce projet contient en fait une série de scripts
00:01:43que vous devez exécuter une fois pour initialiser les agents de cet outil.
00:01:46Ces scripts sont les points d'entrée pour lancer le système,
00:01:49et sans eux, vous ne pouvez faire fonctionner aucun agent.
00:01:51Pour accéder à ces scripts, vous devez cloner l'intégralité du dépôt.
00:01:54Le dépôt contient pratiquement des scripts pour initialiser chaque agent séparément.
00:01:58Mais avant d'utiliser les scripts, si vous êtes sur macOS ou Linux, vous devez avoir installé TMUX.
00:02:02TMUX est essentiellement un multiplexeur de terminaux.
00:02:05Il vous permet de créer plusieurs sessions de terminal et de les contrôler toutes depuis un seul point.
00:02:09C'est ce que le chat d'agents utilise en arrière-plan,
00:02:11pour envoyer des tâches à chaque agent de terminal qu'il exécute.
00:02:14Pour ceux qui sont sur Windows, vous pouvez exécuter les scripts directement et cela fonctionnera.
00:02:18Toutes les commandes pour lancer les scripts de chaque agent sont répertoriées.
00:02:21Par exemple, si vous comptez utiliser Claude code et Gemini CLI ensemble,
00:02:26vous copiez leurs commandes et les collez dans le terminal, dans le dossier où vous avez cloné le dépôt.
00:02:31Vous pouvez choisir les commandes pour les agents que vous souhaitez lancer.
00:02:34Une fois la commande collée, une session d'agent apparaîtra dans la session TMUX.
00:02:38Vous pouvez utiliser autant d'agents que vous le souhaitez dans votre configuration.
00:02:40Par exemple, vous pourriez configurer quatre agents : trois sessions Claude et une session Gemini.
00:02:44Mais quel que soit le nombre d'agents, chacun doit être exécuté dans un terminal dédié.
00:02:49Si vous lancez quatre sessions, il vous faut quatre terminaux tournant côte à côte,
00:02:53et vous pourrez tous les contrôler depuis l'unique session de chat de l'outil.
00:02:56Une fois que tout est installé, en naviguant sur localhost,
00:03:00vous devriez voir tous les agents lancés s'afficher dans le panneau de chat.
00:03:03Maintenant, pour tirer le meilleur parti de cet outil,
00:03:06certaines étapes vous aideront à travailler plus efficacement.
00:03:09Il est recommandé d'initialiser le framework que vous utilisez pour votre app avant d'utiliser l'outil,
00:03:14car c'est un point qui provoque souvent des conflits entre agents, même s'ils ont des rôles différents.
00:03:20Assurez-vous donc que votre application Next.js ou autre framework est déjà initialisé avant de commencer.
00:03:25Premièrement, comme chaque agent fonctionne comme une session Claude ou Gemini séparée,
00:03:29vous devrez approuver manuellement les permissions pour chacun d'entre eux individuellement.
00:03:33Bien qu'ils fournissent des scripts pour ignorer le mode permissions,
00:03:36ce n'est pas recommandé car avec plusieurs agents, le risque que l'un supprime le travail de l'autre est plus élevé.
00:03:42Vous devrez donc configurer le fichier settings.json pour Claude code et Gemini CLI avec les bonnes permissions.
00:03:48Ainsi, si une modification de fichier ou une commande de build doit être lancée, elle n'attendra pas votre approbation,
00:03:53tout en vous laissant le contrôle sur les commandes dangereuses.
00:03:56Il est aussi crucial de s'assurer que les outils MCP sont configurés dans le fichier,
00:04:01sinon vous devrez également les approuver un par un.
00:04:03Vous devriez également créer un fichier agents.md.
00:04:05Il sert actuellement de modèle contenant une structure optimisée pour l'utilisation des agents,
00:04:09qui sera ensuite rempli par ces derniers.
00:04:11Il inclut les règles de rôle, le comportement et tous les principes que les agents doivent suivre.
00:04:15Vous aurez aussi besoin de fichiers de planification comme un PRD et des modèles de spécifications Backend et UI,
00:04:20que nous utilisions sous forme de templates et qui seront complétés plus tard par l'agent de planification.
00:04:24L'utilisation de ces modèles permet de structurer le travail afin que les agents n'ajoutent pas de contenu inutile.
00:04:30Tous ces modèles sont disponibles sur AI Labs Pro, d'où vous pouvez les télécharger.
00:04:35Si vous appréciez notre travail et souhaitez soutenir la chaîne,
00:04:38AI Labs Pro est le meilleur moyen de le faire.
00:04:40Le lien sera dans la description.
00:04:42Cet outil vous permet également de donner un nom à chaque agent et de lui assigner un rôle spécifique.
00:04:47Cela facilite l'identification de l'agent et lui permet de travailler selon un rôle sur mesure.
00:04:52Par exemple, si vous utilisez Gemini pour le design de l'interface,
00:04:55vous pouvez le renommer et lui assigner le rôle d'expert UI/UX.
00:04:59L'attribution de noms et de rôles garantit que chaque agent opère selon le persona défini.
00:05:04Enfin, vous devez établir certaines règles pour que les agents suivent correctement les tâches.
00:05:09Comme mentionné, vous devriez utiliser agents.md.
00:05:12Mais Claude utilise Claude.md et Gemini utilise Gemini.md,
00:05:16et aucun des deux ne consulte naturellement le fichier d'instructions de l'autre.
00:05:19Pour les coordonner, utilisez agents.md et ajoutez une règle pour qu'ils s'y réfèrent comme fichier guide principal.
00:05:25Vous pouvez configurer autant de règles que nécessaire selon vos besoins.
00:05:29Mais quand vous créez une règle, elle reste d'abord en brouillon
00:05:31et vous devez la passer manuellement en "active" pour que les agents la reconnaissent.
00:05:35Les règles sont rafraîchies tous les 10 messages, un paramètre que vous pouvez ajuster.
00:05:39Notez aussi le "loop guard", réglé par défaut sur 4.
00:05:43Le loop guard est le nombre maximum de rebonds entre agents
00:05:46avant qu'ils ne mettent leurs tâches en pause en attendant une intervention.
00:05:49Il a été ajouté pour éviter que les agents ne s'enferment trop longtemps dans une boucle de questions-réponses.
00:05:53Une fois cette limite atteinte, les agents cessent de communiquer
00:05:56et vous devez envoyer une commande "continue" pour reprendre.
00:05:59Augmentez-le si vous voulez que les agents se coordonnent plus longtemps en autonomie.
00:06:03Mais avant de planifier l'implémentation, un mot de notre sponsor, Airtop.
00:06:06Si vous passez des heures chaque semaine à extraire des données manuellement
00:06:10ou à cliquer sur des dizaines d'onglets, il existe une bien meilleure solution.
00:06:13Airtop est une plateforme cloud qui permet aux agents IA d'interagir avec le web comme un humain,
00:06:19en utilisant des modèles personnalisés pour résoudre les tâches manuelles les plus fastidieuses.
00:06:23Voyez-le comme un navigateur cloud qui gère tout le travail ingrat pour vous.
00:06:27Par exemple, j'utilise un template pour étudier les prix de la concurrence.
00:06:30Je donne simplement mes instructions en anglais courant, sans aucun code,
00:06:33et l'agent navigue sur le site, gère la connexion et extrait exactement ce dont j'ai besoin dans un format propre.
00:06:39Ce que je préfère, c'est qu'il contourne les mesures anti-bot et les CAPTCHAs
00:06:43qui font généralement échouer les automatisations traditionnelles,
00:06:46ce qui le rend incroyablement fiable pour les volumes importants.
00:06:48Créez des automatisations fiables en quelques minutes et inscrivez-vous gratuitement sur Airtop dès maintenant.
00:06:53Cliquez sur le lien dans le commentaire épinglé et commencez dès aujourd'hui.
00:06:56Maintenant que toutes les étapes sont terminées, passons à l'implémentation.
00:07:00Comme nous l'avons toujours souligné, la planification est cruciale avant de coder,
00:07:03et vous devriez commencer par là ici aussi.
00:07:05Tout comme sur Slack, vous pouvez créer différents canaux.
00:07:09Vous voudrez séparer le front-end du back-end dans des canaux distincts.
00:07:12Une fois votre idée d'application soumise, une requête est envoyée à la session Tmux
00:07:16pour qu'elle vérifie le message où elle a été mentionnée.
00:07:18L'agent planificateur crée un plan complet, vous en informe et vous demande de l'approuver ou d'y apporter des modifications.
00:07:23Il documente le plan dans le PRD, directement sur le modèle que vous avez fourni.
00:07:28Vous pouvez modifier ce que vous voulez, et il mettra le PRD à jour en conséquence.
00:07:32Cet outil utilise MCP pour permettre à Claude d'envoyer des réponses et de lire le chat,
00:07:37rendant possible une communication bidirectionnelle.
00:07:39Une fois le plan confirmé, vous lui demandez de continuer.
00:07:41Et dès que le PRD est approuvé, il alerte Gemini de lui-même
00:07:44et lui demande d'implémenter les documents de spécifications UI.
00:07:47À ce stade, le designer UI et le planificateur commencent à se coordonner
00:07:51sur les détails d'implémentation, le planificateur suggérant des éléments
00:07:54et le designer les intégrant au plan, dans un processus de révision constant.
00:07:59À noter : même si nous avions réglé le loop guard sur 8,
00:08:02cela n'a pas été pris en compte pour une raison inconnue.
00:08:04Nous avons donc atteint la limite après seulement 4 itérations et avons dû relancer manuellement.
00:08:08Le bâtisseur est ensuite informé par le designer que les plans sont prêts,
00:08:13et il confirme la réception en attendant votre feu vert pour commencer.
00:08:18L'agent designer vous prévient également qu'il souhaite lancer l'implémentation UI,
00:08:22mais vous devriez attendre d'avoir examiné les plans vous-même.
00:08:25Dans le canal backend, vous pouvez demander au bâtisseur et au planificateur de vérifier backend.md,
00:08:30qui a été généré par le planificateur lors de la création du PRD.
00:08:33Vous les utilisez pour valider les documents ensemble,
00:08:37car chacun peut identifier des lacunes dans l'implémentation.
00:08:40Ils se coordonnent tous, incluant le designer pour les specs UI,
00:08:44travaillant de concert pour corriger les problèmes.
00:08:47Vous pouvez ensuite demander une dernière révision au planificateur une fois que tout est prêt.
00:08:50Dans notre cas, ils ont trouvé quelques problèmes supplémentaires lors de cet examen final.
00:08:54Après correction, tous les agents ont confirmé
00:08:56que les soucis étaient résolus et que l'app était prête pour le build.
00:08:59Mais ne lancez pas le build tout de suite. Il reste une étape conseillée.
00:09:02Vous devriez leur faire réviser les plans entre eux.
00:09:04Cet outil propose plusieurs modes, et vous devriez tester le mode "planner".
00:09:08Il existe aussi des modes pour la revue de design, la critique de code, etc.
00:09:12Ces modes fonctionnent en 3 phases avec différents modèles jouant des rôles distincts.
00:09:16Désignez l'agent planificateur comme présentateur, qui expose son travail précédent,
00:09:20et l'agent réviseur comme contradicteur, qui remet en question de manière critique ce qui est présenté.
00:09:24L'agent de planification final sert de synthétiseur, combinant les conclusions de chacun.
00:09:28La session débute par l'exposé, suivi d'une analyse critique du contradicteur
00:09:32qui teste la solidité des documents et identifie de nombreuses lacunes.
00:09:36Grâce à cette confrontation entre agents,
00:09:38ils parviennent à identifier et corriger des erreurs qui passeraient inaperçues autrement.
00:09:42Vous obtenez ainsi le plan final, marquant la fin de cette session en 3 phases.
00:09:46D'ailleurs, si vous aimez notre contenu, n'hésitez pas à cliquer sur le bouton "hype",
00:09:50car cela nous aide à produire plus de vidéos et à toucher un plus large public.
00:09:54Une fois la revue finie, demandez au planificateur d'être l'orchestrateur et de coordonner
00:09:58tous les autres agents pour lancer le projet, en utilisant les modèles adaptés à chaque tâche.
00:10:03Il prend les commandes et fait travailler le designer et le bâtisseur en parallèle.
00:10:06Il envoie des messages aux canaux backend et frontend, donnant au bâtisseur
00:10:10le feu vert et débloquant l'ingénieur frontend pour qu'il puisse implémenter le design.
00:10:15Travailler ainsi est passionnant car on confie l'essentiel de la tâche
00:10:18à l'agent planificateur et on n'a plus qu'à lui demander des mises à jour.
00:10:22Voir les agents collaborer est fascinant car ils se reprennent mutuellement en cas d'erreur.
00:10:26Par exemple, chez nous, le designer UI a accidentellement tenté de corriger une erreur
00:10:30qui relevait de la responsabilité du bâtisseur.
00:10:32Le planificateur et le bâtisseur lui ont signalé que ce n'était pas à lui d'intervenir,
00:10:37car il écrasait le fichier sur lequel le bâtisseur travaillait.
00:10:39Ce flux de travail serait encore plus fluide avec des arbres de travail dédiés par agent,
00:10:44où un agent central fusionnerait et réviserait l'ensemble,
00:10:47ce qui éliminerait les risques de fichiers écrasés.
00:10:50C'est un point à garder en tête pour les configurations complexes.
00:10:53Le planificateur active ensuite l'agent de revue, qui détaille les problèmes restants,
00:10:57fournit un rapport complet et assigne les tâches aux agents.
00:11:01Comme nous avions établi une règle de communication directe entre agents,
00:11:04le designer UI a pu demander l'accès à une variable spécifique au bâtisseur,
00:11:09qui le lui a accordé immédiatement.
00:11:10Une fois leur revue terminée, le planificateur vous invite à la revue front-end finale.
00:11:15En allant sur le serveur de développement,
00:11:17vous constaterez que l'interface correspond exactement à la version ludique souhaitée.
00:11:20La page d'accueil affiche des contrastes forts pour un aspect "gaming",
00:11:23avec un vocabulaire percutant qui donne envie d'essayer.
00:11:26Après le test de dactylographie, vous recevez un rapport de performance.
00:11:29Les résultats s'affichent sur le tableau de bord, indiquant votre record de vitesse,
00:11:33votre niveau actuel et votre progression, pour une expérience vraiment immersive.
00:11:37C'est ainsi que s'achève cette vidéo. Si vous souhaitez nous soutenir
00:11:40et nous aider à continuer, vous pouvez le faire via le bouton "Super Thanks" ci-dessous.
00:11:45Comme toujours, merci d'avoir regardé et à la prochaine !