Développer plus vite avec l'IA - v0, CursorAI et Anthropic Claude [Vibe Coding] — Transcript

Full transcript

1. 0:00Vous connaissez cette sensation quand vous devez  passer à une nouvelle techno et que vous savez
2. 0:05que cela va vous prendre des jours voire des  semaines pour être à l'aise et être productif
3. 0:09moi mon challenge de la semaine c'était react  et typescript je voulais créer une interface
4. 0:14qui affiche en temps réel les conversations  internes de mes agents IA comme ce qu'on voit
5. 0:19dans DeepSeek et Open AI O1 le problème il  y a une semaine je n'avais jamais écrit une
6. 0:25seule ligne de typescript mais grâce aux nouveaux  outils de développement IA j'ai appris et réalisé
7. 0:30mon projet en une semaine seulement et au final  j'ai fait bien plus que prévu j'ai développé un
8. 0:36front pour mes deux assistants IA customer support  et Video Script j'ai créé une landing page et des
9. 0:42menus dynamiques j'ai ajouté des conversations  starter pour mon assistant support et j'ai même
10. 0:47conçu un site pour mes nouvelles formations  IA que j'ai généré en 2 heures dans le train
11. 0:51waouh alors attends c'est incroyable  ce qu'il m'a fait là c'est ouf
12. 0:59je suis sur le cul seulement c'est Ding bref  c'est ça le développement augmenté c'est aller
13. 1:05bien plus vite apprendre en produisant et  déléguer une partie du travail à l'IA mais
14. 1:10attention tout n'a pas été si simple si vous êtes  nouveau ici bienvenue je suis pierre Bittner et
15. 1:17vous êtes sur Applied AI la chaîne qui vous  aide à créer des produits IA et à exploiter
16. 1:21au mieux l'intelligence artificielle dans  cette vidéo je vais vous présenter trois
17. 1:25combinaisons d'outils incontournables qui m'ont  permis de booster la création de mes assistants
18. 1:30IA je vais vous montrer en détail comment j'ai  fait les moments où j'ai gagné du temps et ceux où
19. 1:35il a atteint ses limites et restez bien jusqu'au  bout parce que je vais vous montrer une technique
20. 1:40qui va complètement changer votre façon de coder  avec l'ia allez c'est parti quand on travaille
21. 1:47avec l'ia on démarre souvent en python c'est ultra  puissant mais dès qu'on veut créer une interface
22. 1:53web moderne on est bloqué le problème python n'est  pas fait pour faire du Front End Streamlit c'est
23. 1:59sympa pour du prototypage mais pas du tout viable  pour une app en production les plateformes cloud
24. 2:04modernes comme Vercel ou Cloudflare préfèrent  largement JavaScript et typescript donc si on
25. 2:08veut un bon front pas le choix il faut passer  à react sauf qu'il y avait un vrai souci il n'y
26. 2:14avait aucune solution propre pour intégrer  un backend python LangGraph avec un front
27. 2:19React jusqu'à la semaine dernière où LangGraph a  comblé ce manque en sortant une libre react pour
28. 2:24LangGraph serveur sans cela j'ai été obligé de  créer et maintenir mes propres adaptateur ce que
29. 2:31j'ai pu faire grâce à ça exposer proprement mes  agents IA en backend via une API avec LangGraph
30. 2:36serveur et créer un premier front en react  pour afficher les conversations en temps réel
31. 2:41le résultat j'ai pu connecter mon backend  sans bricolage et avoir une UI fluide qui
32. 2:47affiche les interactions des agents IA mais une  chose est vite devenue évidente installer react
33. 2:53c'est une chose écrire en typescript sans perdre  des jours sur Stack Overflow ça en est une autre
34. 2:58alors comment j'ai fait pour garder ma vélocité  en changeant de stack technique je devais aller
35. 3:05plus vite et ne plus continuer à me reposer  sur continue pour du pair programming j'avais
36. 3:09vu d'excellents retours sur cursor et Claude 3.5  et je me suis dit ok c'est le moment de tester ça
37. 3:15et la vraie surprise c'est clairement un Game  changer pourquoi ? cursor comprend très bien
38. 3:21tout votre projet pas juste les lignes de code  référencé dans la conversation avec claude 3.5 il
39. 3:27génère du code propre lisible et bien structuré  bien mieux que GPT 4o cursor versionne teste et
40. 3:34propose des refactoring intelligents ok maintenant  regardez bien ce que cursor est capable de faire
41. 3:39avec claude 3.5 vous allez voir c'est juste fou  donc là j'ai ouvert le projet qui a été généré
42. 3:45donc là on a le fichier page par défaut je vais  l'afficher voilà c'est du react on ne peut plus
43. 3:50classique donc je vais aller récupérer le fichier  de la nouvelle intégration qui est proposé donc
44. 3:58là on voit qu'il y a une petite typo hop qu'on va  corriger tout de suite hop ça charge en direct on
45. 4:08voit que on a une petite UI assez rapidement on  a quelque chose d'assez minimaliste donc allez je
46. 4:16vais aller chercher là j'ai lancerai un autre  application que j'avais fait avec l'interface
47. 4:22assistante API c'est une application template  qui était proposée par OpenAI et donc je vais
48. 4:30aller retourner dans mon sur mon curseur là avec  le fichier qui est que je viens juste de copier et
49. 4:35en faisant contrôle k je sélectionne tout contrôle  k j'ai un éditeur je passe en edit mode je vais
50. 4:41lui faire copier-coller de l'interface graphique  peux-tu modifier la page pour qu'elle ressemble à
51. 4:52la capture d'écran je vais spécifier il s'agit  d'une interface d'assistant conversationnel
52. 5:12ok donc on va essayer ça il a rendu il a fait  la modification bon ben voilà directement c'est
53. 5:17plutôt cool quelles sont les news je sais  que normalement il y a peut-être des appels
54. 5:26de fonctions intégrés dans langue euh dans la  démo que j'ai utilisé pour la présentation on
55. 5:33voit qu'il y a des petites erreurs d'affichage  là un message avec un contenu vide et le message
56. 5:40tool qui a été rendu donc de la même façon hop  je vais faire un follow-up il y a des messages
57. 5:52de type type tool et des messages type il a  qui ont un contenu vide il faut les il ne faut
58. 6:10pas les afficher
59. 6:15hop et est parti et va générer voilà message  type tool il tac tac tac il change tout on va
60. 6:29pouvoir tester ça et voilà ils ont disparus  c'est super nickel donc voilà on voit qu'en
61. 6:37quelques minutes j'ai pu ben créer une interface  front me l'interfacer à mon application LangGraph
62. 6:44et ensuite générer un front en react juste en lui  indiquant faisant des copier-coller des images des
63. 6:51interfaces que je voulais avoir et lui donnant  des directives et il a fait les modifications
64. 6:56vraiment sans absolument sans sourciller mais gros  souci en fin de semaine le combo cursor claude
65. 7:03était tellement populaire que cursor a commencé  à avoir des problèmes de rate limite sur les API
66. 7:07d'Anthropic du coup j'ai cherché des alternatives  Gpt-4o dans cursor le code était vraiment moins
67. 7:14bon Continue.dev avec Claude on était loin du  niveau de cursor et j'ai même testé l'autre
68. 7:19IDE agentique winsurf avec Anthropic et j'ai pas  été pour l'instant convaincu des résultats bref
69. 7:25après quelques tests le combo initial était  vraiment le meilleur mais même avec ça il y
70. 7:30a des limites par exemple je voulais passer  le paramètre recursion_limit à LangGraph pour
71. 7:35augmenter le nombre d'échanges entre les agents et  là claude était complètement largué alors oui il y
72. 7:40a boost la productivité mais il faut savoir quand  reprendre le contrôle comme j'avais bien avancé
73. 7:46sur mes assistant j'ai voulu tester un autre  outil magique Vercel V0 j'étais dans le train avec
74. 7:52seulement 2 heures devant moi je me suis dit ok  est-ce que je peux générer un site React complet
75. 7:56pour mes nouvelles formations d' ingénieur IA dans  ce lapse de temps il me fallait un prompte ultra
76. 8:02sharp sinon j'allais perdre du temps en itération  alors j'ai eu l'idée de lancer o3 Deep Research et
77. 8:08là en 6 minutes j'avais un plan d'action détaillé  à passer à V0 après quelques minutes de génération
78. 8:14du code il ne me restait plus qu'à tester et le  résultat m'a une nouvelle fois bluffé comment
79. 8:19ça s'est passé pour avoir des instructions super  détaillées et faire faire le travail à O3 d'abord
80. 8:25je lui ai expliqué clairement mon existant et mes  besoins je lui ai passé quelques exemples et des
81. 8:30idées mais pas trop pour le laisser travailler  le gros plus il pose des questions pour être sûr
82. 8:35qu'il a bien compris avant de se mettre au travail  et là en 6 minutes il m'a généré une proposition
83. 8:41ultra pertinente maintenant je vais vous montrer  comment j'ai utilisé le prompte qu'il a produit
84. 8:45dans V0 nouvelle présentation là sur la partie  O3 pour pouvoir générer les instructions pour
85. 8:51vercel V0 j'ai fait une petite présentation assez  détaillée du contenu de ma formation AI je lui
86. 8:57donné des exemples de sit web qui me semblaient  euh plutôt pertinent pour pouvoir présenter ça
87. 9:03donc j'ai vraiment j'ai composé en deux tâches  premièrement c'est vraiment qu'il fasse une
88. 9:06réflexion assez profonde sur le syllabus du cours  et de son agenda est-ce que je devais y intégrer
89. 9:13et ensuite proposer une structure de site web pour  présenter le cours j'ai utilisé O3 pour faire et
90. 9:21la partie recherche approfondie de deep search  donc ca cocher cette case là ce que j'aime bien
91. 9:27c'est qu'il m'a d'abord posé des questions sur  la compréhension là où il avait des doutes il m'a
92. 9:32demandé de confirmer ce qu'il avait compris j'ai  fait des commentaires donc je prendre le temps de
93. 9:37bien bien bien corriger les choses tout de suite  pour que ce soit super propre je suis donné un
94. 9:42exemple de de mes vidéos de ma chaîne youtube je  l'ai lancé ensuite dans la réalisation de de sa
95. 9:48recherche donc ça lui a pris 7 minutes et voilà on  voit toutes les actions qu'il a pu réaliser toutes
96. 9:55les tâches qu'il a accompli et donc il m'a proposé  les modules les extensions va parvenir là-dedans
97. 10:02vous en saurez certainement plus un peu plus tard  et là il m'a proposé la structure du website pour
98. 10:09présenter cette formation ensuite tout ce que  j'ai fait ben j'ai tout simplement repris ceci
99. 10:14hop voilà donc j'étais je suis allé sur v0.dev  j'ai copier-coller les instructions que m'a
100. 10:22généré o3 et donc hop donc super détaillé plein  d'informations donc on voit bien que la Vercel
101. 10:32pareil il est en mode V0 à mode agentique avec des  réflexions internes est-ce que je peux encore les
102. 10:40voir là non les afficher oui il est là hop donc  on retrouve bien les différentes catégories du
103. 10:46site web tac les différents éléments la structure  les composants et il est parti dans une génération
104. 10:53donc voilà un peu comme un peu à la mode cursor  et ça tourne voilà oh mais super la partie il
105. 11:01me l'avait pas fait il génère l'organisation du  programme et ensuite j'ai eu plus qu'à récupérer
106. 11:07ça dans un projet react mais attention  le code généré n'était pas directement
107. 11:12utilisable il m'a fallu ensuite une petite  heure pour ajusté le générer et installer les
108. 11:17bons composants et l'intégrer proprement mais le  plus impressionnant cursor m'a réellement guidé
109. 11:22pas à pas pour réaliser le travail ce qui est  dingue c'est que cursor m'a non seulement aidé
110. 11:27à intégrer le code mais il a aussi détecté des  incohérences et optimiser certains composants au
111. 11:32final un cite react complet généré et corrigé en  moins de 2 heure le développement augmenté c'est
112. 11:39pas juste des suggestions de (GitHub) copilot  c'est bosser plus vite apprendre en produisant
113. 11:44et savoir quand y a utile et quand elle ne l'est  pas honnêtement sans ces outils ce projet m'aurait
114. 11:49pris plusieurs semaines là j'ai tout bouclé en une  seule semaine et encore avec des améliorations et
115. 11:55des objectifs supplémentaires alors j'ai une  question pour vous jusqu'où vous seriez prêt
116. 11:59à déléguer du code à une IA comme d'habitude  le code complet est dispo sur mon github et
117. 12:05si vous voulez savoir comment structurer une app  Ia agentique complète c'est par ici abonnez-vous
118. 12:12lâchez un super thanks et on se retrouve dans  la prochaine vidéo à bientôt sur Applied AI