00:00:00Si vous utilisez Claude Code pour créer des applications web, vous devez absolument découvrir GSD,
00:00:04un framework de développement piloté par les spécifications, open-source, spécialisé dans l'orchestration
00:00:08de différents sous-agents pour mener à bien des projets selon la méthode Spec-Driven Development.
00:00:12Contrairement aux frameworks traditionnels de ce type que nous avons présentés sur la chaîne,
00:00:15comme la méthode Beemap, SpecKits, Taskmaster et bien d'autres, tous ces frameworks classiques
00:00:20doivent suivre une règle stricte : tout doit être fait dans une seule
00:00:24et même fenêtre de contexte. Par exemple, la planification, la recherche, le développement, les vérifications,
00:00:29tout doit tenir dans ce contexte unique. Mais cela pose un problème majeur,
00:00:33celui de la saturation du contexte : plus la consommation de tokens est élevée dans une seule fenêtre,
00:00:38plus la précision diminue. La solution consiste à utiliser des sous-agents pour
00:00:42déléguer la planification, la recherche, le développement et les vérifications à des entités distinctes,
00:00:47où chaque sous-agent dispose de son propre contexte neuf pour accomplir sa tâche successivement.
00:00:51GSD devient alors l'orchestrateur de ces sous-agents en suivant le développement par spécifications,
00:00:55guidant l'IA étape par étape pour passer d'une idée brute à une application prête pour la production.
00:01:00Certes, nous allons consommer plus de tokens, mais le gain de précision
00:01:04sera bien plus important par rapport à une approche où tout est concentré
00:01:07dans un seul contexte. C'est pourquoi, dans cette vidéo, je vais vous montrer
00:01:11exactement comment configurer le framework GSD sur votre Claude Code, en vous expliquant
00:01:15comment partir d'une idée pour construire sur une application existante ou nouvelle,
00:01:19et comment structurer votre projet grâce aux agents de recherche et de planification inclus.
00:01:23Une fois l'idée définie, nous passerons à l'implémentation avec son propre exécuteur
00:01:27chargé de réaliser les tâches grâce à des agents tournant en parallèle.
00:01:32Chaque agent possède sa propre fenêtre de contexte et valide chaque tâche terminée.
00:01:37De plus, à chaque fois qu'une tâche est finie, il lance un autre agent
00:01:41pour vérifier le travail par rapport aux objectifs fixés. Enfin, une fois
00:01:45qu'une phase est achevée, je vous montrerai comment boucler sur chaque étape,
00:01:49discussion, plan, exécution et vérification, boucle après boucle, jusqu'à ce que
00:01:55le jalon soit entièrement atteint de manière autonome. Voilà ce que nous allons couvrir.
00:02:00Si cela vous intéresse, c'est parti. Avant de commencer, une brève
00:02:04introduction pour les nouveaux : je m'appelle Eric. J'ai été ingénieur logiciel senior
00:02:09pendant des années dans des entreprises comme Amazon, AWS et Microsoft. J'ai créé
00:02:15cette chaîne YouTube pour partager mon expérience, de l'IA au code, en passant par l'automatisation,
00:02:22le Web3 et la carrière, via des tutoriels pratiques. Donc, si vous voulez
00:02:27progresser, allez voir ma chaîne et abonnez-vous. Maintenant, revenons à la vidéo.
00:02:32La première chose à faire est de se rendre sur le dépôt GSD.
00:02:36Ici, on vous explique comment l'installer sur votre machine locale.
00:02:40Je vais copier cette commande, retourner dans le terminal de
00:02:44mon projet actuel, et coller la commande pour l'installer
00:02:49localement. Je confirme l'installation. On nous demande
00:02:53si on veut utiliser Claude Code, open code ou les deux. Je choisis seulement
00:02:57Claude Code pour cette démonstration. Ensuite, on me demande où
00:03:02je souhaite l'installer. Je préfère une installation globale pour tous mes projets. D'accord.
00:03:07Une fois ce choix fait, vous voyez que GSD inclut une ligne d'état affichant le modèle,
00:03:12la tâche en cours et l'utilisation de la fenêtre de contexte. Doit-on garder
00:03:17l'actuelle ou la remplacer par celle de GSD ? Comme je ne connais pas encore celle de GSD,
00:03:22je vais choisir l'option numéro deux pour voir à quoi
00:03:26elle ressemble. J'ouvre ma session Claude Code. Et voilà,
00:03:31voici la ligne d'état actuelle de GSD. Bien sûr, si vous préférez
00:03:37ma version personnalisée, vous pouvez regarder ma vidéo dédiée où
00:03:41je montre comment obtenir ce résultat précis. Mais pour l'instant,
00:03:46nous allons rester sur la ligne d'état par défaut de GSD.
00:03:49Une fois GSD installé, il suffit de taper "gsd". On voit
00:03:54toutes les commandes personnalisées apparaître dans le terminal de Claude Code. Très bien.
00:03:58L'étape suivante consiste à initialiser notre projet.
00:04:02Pour un nouveau projet, utilisez "gsd new project". Mais si vous
00:04:06avez déjà un projet, nous allons d'abord lancer cette commande spécifique.
00:04:10Elle active plusieurs sous-agents pour analyser la stack, l'architecture, les conventions
00:04:15et les points de vigilance. Cela permet de cartographier tout le code et de répondre
00:04:20aux questions selon ce que vous voulez ajouter. Dans mon cas,
00:04:24je lance d'abord la commande pour cartographier tout le code. Vous voyez
00:04:28qu'il lance quatre agents "mapper" en parallèle pour analyser l'ensemble du projet,
00:04:32comprendre la stack technique, l'architecture, les conventions et les problèmes potentiels.
00:04:38Attendons un peu qu'ils aient fini d'analyser
00:04:42toute l'application en parallèle. Voilà, les mappers
00:04:46ont terminé l'analyse. Maintenant, je vais réinitialiser ma session Claude Code car
00:04:50la fenêtre de contexte actuelle est déjà à moitié pleine.
00:04:54Je ferme donc la session, je vide le terminal et je relance
00:04:59Claude Code. Nous repartons de zéro, mais ne vous inquiétez pas,
00:05:04la cartographie a été sauvegardée. Vous pouvez voir un dossier ".planning"
00:05:09dans lequel se trouve le fichier "codebase". Il résume
00:05:13tout ce qu'il y a dans l'application : l'architecture,
00:05:17les points d'attention, les conventions, les intégrations... tout est stocké
00:05:23dans ce dossier pour ne pas perdre l'état de notre analyse. Parfait.
00:05:28Maintenant que le code est cartographié, initialisons le projet.
00:05:32Le système va me poser une série de questions pour
00:05:36comprendre mon idée et les nouvelles fonctionnalités à ajouter. Il va ensuite
00:05:39lancer des sous-agents en parallèle pour explorer le domaine visé.
00:05:43Cela l'aidera à extraire les exigences ainsi qu'une feuille de route
00:05:47détaillant les phases nécessaires à la réalisation. C'est ce que
00:05:51nous allons faire. Je copie cette commande et je la colle. Il tente
00:05:56d'initialiser le projet actuel. Il détecte qu'il s'agit d'un projet existant (
00:06:00"brownfield") avec un code déjà cartographié. Le dépôt Git existe,
00:06:05mais il n'y a pas encore de fichier "project.md". Il me demande alors :
00:06:10"Je vois que vous avez un projet existant cartographié. En regardant le fichier Claude.md,
00:06:14je vois le contexte métier... que voulez-vous construire ensuite ?".
00:06:18Comme j'ai déjà une idée précise, à savoir créer un tableau de bord
00:06:23pour le système d'administration, j'ai préparé un court fichier Markdown
00:06:29pour un panneau d'administration minimal : un nouvel onglet dans la barre latérale
00:06:34fournissant les outils essentiels pour gérer les utilisateurs et le support au lancement.
00:06:39J'ai listé les fonctionnalités demandées pour le MVP,
00:06:42les maquettes UX, les frameworks à utiliser, etc. C'est très détaillé.
00:06:47Je vous recommande vivement d'utiliser Claude pour
00:06:52analyser vos applications et rédiger un plan de ce que vous voulez bâtir,
00:06:56en listant au moins les changements UX ou les fonctionnalités à inclure pour
00:07:00avoir un plan clair que Claude pourra ensuite implémenter.
00:07:04Je pourrais donner ce plan directement à Claude, mais je préfère
00:07:08laisser GSD prendre le relais pour mener l'investigation et la recherche.
00:07:13Il va lancer plusieurs sous-agents pour faire les recherches à ma place et diviser
00:07:20cette grosse tâche en plus petites tâches plus faciles à coder. Pour cela,
00:07:25j'ouvre mon terminal et je lui indique ce que nous allons construire.
00:07:28Je fais référence à ce fichier en disant : "Je prévois de construire ceci".
00:07:33Je valide et je laisse GSD m'aider
00:07:40pour la planification. Il lit la liste des tâches à accomplir
00:07:44pour cette application. Et vous voyez qu'il me pose
00:07:48des questions précises pour confirmer les spécifications. Il note que
00:07:52les specs incluent quatre fonctions : liste des utilisateurs, crédits, niveaux et usurpation d'identité.
00:07:58Faut-il tout construire d'un coup ou prioriser un sous-ensemble ? Vous voyez qu'il
00:08:02commence déjà à décomposer ces quatre grosses fonctions en éléments plus simples.
00:08:07Je lui réponds de commencer par le plus simple : la liste et les crédits.
00:08:11Il me demande ensuite comment vérifier que le panneau d'administration fonctionne.
00:08:16Le projet étant tout récent, je fais surtout des tests manuels, mais vous voyez
00:08:21qu'il suggère une couverture de tests : tests d'intégration pour les API
00:08:25ou couverture complète incluant tests unitaires et de bout en bout.
00:08:30Je vais d'abord rester sur les tests manuels uniquement,
00:08:34nous augmenterons la couverture plus tard. Je valide donc
00:08:38pour les tests manuels pour l'instant. Voyons ce que
00:08:43GSD va faire maintenant. Il continue de me questionner.
00:08:46Quand le panneau d'administration doit-il être prêt ? Dans mes documents
00:08:50d'analyse métier, la date de lancement prévue est le 30 janvier.
00:08:56Il a repéré cette date et me demande si c'est pour
00:09:01le lancement de la v2 le 30 janvier. Je confirme que je le veux
00:09:05avant cette date. Puis il demande si on procède à la création du fichier project.md.
00:09:10Je souhaite encore explorer et poser d'autres questions. L'une
00:09:14des questions que j'ai posées visait à identifier les lacunes
00:09:19dans nos spécifications. Il a lancé plusieurs sous-agents pour
00:09:22étudier la sécurité, l'UX, les bonnes pratiques et les manques techniques
00:09:28potentiels de notre spec actuelle. Voici le tableau récapitulatif
00:09:32des lacunes trouvées. Par exemple : absence de protection par middleware,
00:09:37cookies manquants, limitation de débit en mémoire et gestion des suppressions
00:09:43d'utilisateurs par les admins. La fonction "isAdmin" est aussi défaillante pour certains utilisateurs.
00:09:49Nous devons corriger ces points avant l'implémentation.
00:09:52Voici la liste des correctifs qu'il suggère d'appliquer.
00:09:57Nous pouvons passer tout cela en revue pour voir si ces corrections
00:10:02sont pertinentes. Si oui, nous pourrons créer notre fichier
00:10:06project.md et lancer l'exécution. Il me demande :
00:10:11"La recherche a trouvé des failles de sécurité critiques. Comment gérer cela ?".
00:10:15Je lui dis de corriger les plus critiques, comme recommandé.
00:10:20Je valide pour que Claude Code s'assure que notre plan
00:10:24ne néglige rien avant de générer le fichier project.md. Une fois que tout est prêt,
00:10:29on peut créer le fichier. Je donne mon accord.
00:10:33Claude Code va maintenant générer le fichier project.md
00:10:38pour l'ensemble du projet. Attendons qu'il ait terminé. Avant
00:10:42de passer à la suite, je remercie notre sponsor du jour, Testbrite.
00:10:46Testbrite est un agent IA conçu spécifiquement pour le test logiciel.
00:10:51Avec leur nouveau MCP, vous pouvez l'utiliser directement dans votre IDE,
00:10:57comme Cursor, Windsurf ou Claude Code. La configuration est ultra simple :
00:11:02ajoutez les réglages MCP et c'est bon. Ce que j'aime, c'est qu'il ne teste pas à l'aveugle.
00:11:07Il analyse votre code, comprend la documentation et valide
00:11:11les résultats produits par vos agents IA. Il génère un plan de test à partir de vos specs,
00:11:16crée des cas de test et assure la couverture, tout cela automatiquement.
00:11:21Ensuite, il exécute les tests et vous envoie des rapports détaillés
00:11:26montrant précisément ce qui pose problème. Si la plupart des agents de code
00:11:32stagnent à 42 % de précision, avec Testbrite, on peut monter jusqu'à 93 %.
00:11:38Pour en savoir plus, cliquez sur le lien en description. De retour à la vidéo.
00:11:42Une fois le cadrage et le fichier project.md terminés,
00:11:47on nous propose différents modes. Le mode "YOLO"
00:11:52qui approuve tout automatiquement et exécute directement,
00:11:56ou le mode interactif où l'on valide chaque étape et les changements
00:12:01effectués au fur et à mesure. Je vais choisir le mode YOLO pour
00:12:04laisser l'IA tout gérer en autonomie. Je valide.
00:12:09On me demande ensuite la profondeur de planification souhaitée.
00:12:14Soit un mode rapide pour livrer vite (3 à 5 phases, 1 à 3 plans chacune),
00:12:18soit le mode standard, plus équilibré (5 à 8 phases, 3 à 5 plans par phase).
00:12:22Je choisis l'option standard car nous ne sommes pas pressés
00:12:26et nous voulons quelque chose de bien structuré.
00:12:30Je sélectionne donc le numéro deux.
00:12:34Je soumets ma réponse. On me propose ensuite
00:12:38le mode d'exécution : soit lancer les plans en parallèle,
00:12:42ce qui signifie que les tâches indépendantes tournent en même temps,
00:12:46soit les exécuter l'un après l'autre. Si le temps n'est pas un problème,
00:12:51je recommande vivement le mode séquentiel, car on traite les plans
00:12:57les uns après les autres. En parallèle, si vous tombez à court de crédits,
00:13:01vous risquez d'avoir deux tâches inachevées. En séquentiel,
00:13:06certaines tâches seront terminées. En cas de manque de crédits, vous pouvez
00:13:10attendre le lendemain pour reprendre et continuer l'exécution
00:13:14étape par étape, sans que tout le projet soit à moitié fait.
00:13:18Je choisis donc le séquentiel pour avancer pas à pas. Ensuite,
00:13:22pour le suivi Git, on me demande si on valide les documents de planification.
00:13:27Oui, je veux garder une trace de tout cela dans Git. Je réponds oui
00:13:31et je valide. Quelques questions subsidiaires m'ont été posées :
00:13:35faut-il faire des recherches avant de planifier ? J'ai dit oui. Faut-il vérifier
00:13:40que les plans atteignent les objectifs avant l'exécution ? J'ai aussi dit oui.
00:13:46Pour la vérification, je veux que le travail soit validé après chaque phase.
00:13:52Enfin, pour le modèle, je choisis la qualité maximale : Opus pour la recherche
00:13:58et la roadmap, malgré un coût plus élevé pour une analyse plus profonde.
00:14:03Toutes ces configurations sont enregistrées dans le fichier config.json.
00:14:07On peut d'ailleurs modifier ce fichier manuellement plus tard si besoin.
00:14:12Sans trop faire traîner la vidéo, GSD passe à la recherche.
00:14:16Il lance son synthétiseur de recherche qui active plusieurs sous-agents.
00:14:21Une fois leur travail terminé, il va synthétiser
00:14:26toutes les informations pour créer un rapport de recherche spécifique
00:14:30au projet que nous développons. Après validation de notre part,
00:14:34GSD passe à la création de la feuille de route détaillée
00:14:39pour l'ensemble du projet. Voilà, il a généré
00:14:43la roadmap complète : cinq phases et 36 exigences couvrant
00:14:49tout ce qui était prévu pour la V1 : base de données, schéma, backend,
00:14:54puis l'expérience utilisateur. Il me demande si cette structure
00:14:59me convient. On peut vérifier s'il manque quelque chose.
00:15:03Si tout est bon, j'approuve pour qu'il commence les modifications.
00:15:08Une fois le projet initialisé, voici tous les documents générés pour le MVP.
00:15:13Tout se trouve dans le dossier de planification. Les 5 phases et les 36 exigences sont prêtes.
00:15:18L'étape suivante, si cela nous convient, est de commencer par la phase 1,
00:15:21commencer par la phase 1, une par une. Et une fois le plan de la phase 1 créé,
00:15:25vous voyez qu'il a aussi lancé plusieurs sous-agents pour créer les plans des phases 2 et 3,
00:15:29tout en un, n'est-ce pas ? On peut donc utiliser tous ces sous-agents pour clarifier,
00:15:34créer un nouveau plan ou un plan pour chaque phase que nous avons. Une fois la phase créée,
00:15:38ce qu'on peut faire maintenant, c'est passer à l'implémentation. Comme on l'a dit,
00:15:41on veut exécuter cela de manière séquentielle avec un contexte neuf, et je ne veux pas
00:15:46qu'il termine un plan et me demande de vérifier à chaque fois. Je veux qu'il termine tout,
00:15:52et ensuite nous pourrons tout vérifier. Je ne veux pas vérifier chaque phase séparément.
00:15:55Je veux vérifier quand toutes les phases sont finies. Pour cela, vous pouvez communiquer
00:15:59avec Claude et dire : "Je veux exécuter les phases GSD séquentiellement avec un contexte neuf".
00:16:03Ce qu'il va faire, c'est exécuter chaque phase l'une après l'autre avec une session
00:16:08propre pour chaque plan. Vous verrez que ce qui va se passer,
00:16:13c'est qu'il va lancer de nouveaux sous-agents via l'exécuteur GSD. Chaque agent
00:16:18reçoit un contexte de 200k vierge, pour ne pas mélanger avec le plan du sous-agent précédent.
00:16:23Ensuite, il va exécuter l'intégralité des 13 plans de manière
00:16:27autonome via GSD. On a notre schéma de base de données, le backend, l'UI, la gestion des crédits
00:16:34et le journal d'audit ; tout s'exécute l'un après l'autre. Ici, je vais simplement
00:16:39effacer le contexte, passer outre les permissions et lancer l'exécution. Très bien,
00:16:44vous voyez qu'il lance la phase 1 de l'implémentation du tableau de bord administrateur.
00:16:48Attendons un peu que tout soit implémenté. Voilà, une fois toutes les phases
00:16:53implémentées par GSD, voici le résultat. Ici, vous voyez que je suis
00:16:57dans l'onglet admin, plus précisément dans la gestion des utilisateurs. On peut voir
00:17:03tous les utilisateurs de nos plateformes actuelles. Je peux en rechercher un.
00:17:07Par exemple, si je tape "test", on voit le premier résultat s'afficher juste ici.
00:17:12Et si je l'efface, vous voyez que toute la liste s'affiche de nouveau.
00:17:17Je peux aussi filtrer par offre. Qui utilise les offres gratuites ? Je peux le voir,
00:17:21ainsi que leur consommation de crédits, leur date d'inscription et ajuster leurs crédits.
00:17:25Je peux voir les détails du compte ici, ou bien
00:17:29ajuster les crédits là. Je peux aider les gens à ajuster les événements,
00:17:33définir les crédits, fixer des limites de crédits personnalisées,
00:17:38voir l'usage actuel et donner un motif. Tout est suivi dans le journal d'audit.
00:17:42Par exemple, disons que je sélectionne toutes les offres. Je suis connecté avec cet
00:17:48utilisateur-ci, défini comme administrateur. Si je clique ici pour ajuster les crédits,
00:17:52disons que je vais augmenter ce montant de 50 crédits. Donc,
00:17:57on passe de 510 crédits à 560 crédits. Tout ce qu'il y a à faire
00:18:03en bas, c'est d'ajouter un motif. Par exemple, je mets "test",
00:18:07et j'applique l'ajustement. Ce qui se passe, c'est que
00:18:11nous avons une notification montrant le passage de 510 à 560, ce qui déclenche aussi
00:18:17le rafraîchissement du composant. On voit que c'est aussi répercuté dans le tableau,
00:18:21de 510 à 560, ce que nous avons maintenant. On peut vérifier que la fonctionnalité
00:18:27est opérationnelle. On peut aussi consulter la partie analyse admin pour voir
00:18:31les statistiques de tout ce qui se trouve dans nos applications. On voit la date de
00:18:36dernière mise à jour, ainsi que le nombre total d'utilisateurs, les clients payants,
00:18:40les différentes offres, l'usage des crédits et les utilisateurs les plus actifs.
00:18:46On peut aussi voir les journaux d'audit, ce qui signifie que tous les événements,
00:18:51toutes les actions de modification des crédits utilisateurs, sont visibles ici
00:18:55dans le journal. Par exemple : ajuster les crédits, synchroniser les crédits, la cible,
00:19:00et les détails de l'action. On voit tout l'historique d'audit. Voilà en gros
00:19:05comment utiliser GSD pour suivre tout le cycle de développement d'une fonctionnalité.
00:19:09Si vous avez aimé cette vidéo, n'oubliez pas de mettre un "like". Et bien sûr,
00:19:13si vous vous demandez comment j'ai fait pour rafraîchir ce composant après l'ajout
00:19:16de crédits sans recharger la page, la réponse courte est que j'utilise Zustand,
00:19:21une solution de gestion d'état qui centralise l'état de toute notre application.
00:19:26Dès qu'une partie d'un composant est mise à jour, cela met à jour l'état actuel.
00:19:30Si vous voulez savoir comment ajouter cette gestion d'état dans vos propres
00:19:34applications, je vous recommande vivement mon cours de sept heures sur la création
00:19:38d'applications NestJS complètes, évolutives et prêtes pour la production.
00:19:44Sur ce, si vous avez appris quelque chose, n'oubliez pas de liker cette vidéo.
00:19:47Pensez à vous abonner, car je partagerai bientôt d'autres techniques pour
00:19:51construire des applications professionnelles en utilisant l'IA pour coder,
00:19:55exactement comme celle-ci. Sur ce, je vous dis à la prochaine vidéo !