Quoi de mieux pour apprendre à utiliser l’éditeur de texte IA Cursor, que de réaliser son propre projet ?
Dans cet article, découvrons les étapes pour créer une application web avec Cursor, sur un exemple précis : la création d’une application de mindmap pour notre formation Cursor.
Exemple de projet : créer une mindmap de formation Cursor
Nous utilisons habituellement le framework open source slidev pour créer des slides de cours en Markdown.
Ce format se prête particulièrement bien à la création de supports de formation combinant environ 50% de pratique et 50% de théorie, comme notre formation LangChain.
Mais Cursor étant un outil plutôt qu’un framework, la théorie doit vraiment être réduite au minimum lors d’une formation au développement augmenté avec Cursor.
J’ai donc privilégié un format mindmap pour les supports de formation. Une carte mentale se prête mieux à une exploration libre des concepts, en fonction des questions qui émergent naturellement au fil de la formation et de la réalisation d’un projet avec Cursor.
Objectif : créer l’application qui affiche cette mindmap, décrite au format markdown.
Bien sûr, il aurait été trop facile d’utiliser un logiciel de création de mindmap existant ! Nous avons donc créé notre propre framework pour la génération de cartes mentales en markdown, mdmap.
Voici un petit aperçu des fonctionnalités de Cursor utilisées pour mener à bien ce projet.
Générer une base de travail avec le mode agent de Cursor et ses capacités de planification
Nous commençons toujours nos projets par la génération d’une base de travail à partir d’un grand prompt structuré, décrivant le principe de fonctionnement de l’application, les technologies choisies, l’interface graphique.
Cette phase est essentielle pour poser des bases solides, définir les choix technologiques de l’application et clarifier son objectif fonctionnel.
Si vous n’êtes pas encore sûrs de vos choix, vous pouvez commencer plutôt en mode discussion pour explorer plusieurs solutions possibles.
Pas de pression : l’intérêt d’utiliser l’IA est justement de pouvoir itérer rapidement et de faire plusieurs essais pour identifier ce qui fonctionne ou non.
Par exemple, nous avons pu conclure à ce stade que la compilation des fichiers markdown décrivant la mindmap avec Vite était la solution la plus adaptée.
Nous avons également comparé différentes librairies pour l’affichage du graphe, avant de choisir reactflow.
Déboguer une application vibe codée
L’application n’était pas directement fonctionnelle — Cursor n’est pas une solution magique. Le vibe coding sans jamais écrire une ligne du code reste une utopie à ce stade, il faut plutôt parler de “développement augmenté”. Bref, on ne peut pas éviter une phase de débogage intense !
Nous avons notamment dû corriger manuellement un problème de définition du chemin d’import des fichiers, très basique mais que Cursor ne parvenait pas à identifier automatiquement.
Nous avons profité de cette étape de correction pour découvrir les outils tiers à disposition des développeurs front-end connectables dans Cursor, comme Browser Tools par AgentDesk. Cursor intègre aussi depuis septembre 2025 ses propres outils pour contrôler un navigateur
Finaliser l’application écrite avec Cursor
Nous sommes ensuite passés à la phase de peaufinage. Il ne suffit pas d’afficher une mindmap, il faut aussi qu’elle soit esthétique, navigable, capable d’afficher des images etc.
Le Plan Mode a été publié au même moment tout début octobre, et il s’est révélé très pratique pour une meilleure collaboration avec Cursor, selon une approche human-in-the-loop. Au lieu de se jeter dans le feu de l’action, Cursor génère d’abord un plan sous la forme d’un fichier texte, que l’on peut corriger si besoin.
Une fois le framework en place, nous avons pu nous pencher sur la création d’une première mindmap : celle de notre formation Cursor justement !
La structure d’une nouvelle mindmap a été générée automatiquement à partir du plan du cour grâce à une commande Cursor qui décrit les étapes à suivre pour accompagner l’utilisateur.
Commande Cursor pour guider l’utilisateur dans la création d’une nouvelle mindmap au format markdown
On comparer les commandes à une sorte de mini-GPT, si vous avez l’habitude d’utiliser la plateforme ChatGPT.
Intégrer Cursor aux processus de l’entreprise
Enfin, la dernière étape consiste à rédiger le cours et à collecter les ressources utiles pour la formation. Pas d’IA ici, on n’échappe pas au processus humain et profondément créatif de la création de contenu de formation !
Néanmoins, la question qui reste à résoudre est celle de l’après : une fois passé le cycle rapide de la création du framework de mindmap et d’une première mindmap, comment continuer à faire évoluer l’application web créée avec Cursor ?
Il faut pour cela intégrer progressivement Cursor à des outils de gestion de projet. Par exemple, Cursor peut utiliser le CLI GitHub pour créer des pull requests ou des issues. Pour aller plus loin, on peut l’intégrer à un gestionnaire de projet comme Linear, ou lui fournir des serveurs MCP afin d’accéder directement à des dépôts GitHub, à des APIs, etc.
Conclusion : une application web de qualité en quelques heures
Nous sommes finalement parvenus, en quelques heures, à créer une application de mindmap plus que satisfaisante.
Au-delà du résultat technique, ce projet a surtout été l’occasion de s’approprier une nouvelle façon de développer. Pas du vibe coding, mais bien du développement augmenté, avec la création d’une véritable synergie entre l’humain et la machine.
Il reste bien sûr nécessaire d’avoir une bonne base technique, notamment en développement web full-stack (LBKE propose aussi des formations à Next.js), mais le gain de productivité offert par Cursor est indéniable.
Note sur la transcription
Cet article a été dicté à la voix à l’aide d’un autre projet open source mic2key, initialisé avec Claude Code (juste avant la sortie de l’agent CLI Cursor !) et amélioré avec Cursor. Le modèle Whisper a été utilisé en local pour la transcription audio, avec correction par ChatGPT.
