Test de Kilo Code avec la création d'un serious game
Alexis teste Kilo Code, une extension VS Code open source, en tentant de créer une application full stack de quiz cyberpunk avec interface mail, authentification utilisateur et génération dynamique de questions via l'API Claude.
À propos de cette session
Alexis débute sa session en présentant Kilo Code comme alternative open source à Cursor et Windsurf. Il installe l'extension dans VS Code et configure son compte avec 20$ de crédit gratuit via OpenRouter.
Il lance un prompt complexe demandant une application de quiz cyberpunk présentée comme une interface mail, avec 10 questions hardcodées et génération automatique via l'API Claude au-delà, plus un système d'authentification pour sauvegarder la progression.
Kilo Code entre en mode architecte et pose des questions pertinentes sur l'architecture souhaitée (SPA vs SSR, clé API, format de requêtes). Alexis répond en demandant une SPA avec backend Node.js, laissant le choix du framework frontend à l'IA.
L'outil génère un plan de développement détaillé et commence l'implémentation en mode automatique. Il crée la structure de fichiers, installe les dépendances NPM (Express, SQLite, bcrypt, jsonwebtoken), et génère le code backend puis frontend.
Plusieurs alertes apparaissent concernant des modules dépréciés, notamment dans les dépendances. Kilo Code utilise Create React App, lui-même déprécié par React.
Lors du lancement, Alexis rencontre des problèmes techniques typiques : fichier .env mal placé, erreurs de configuration des ports (client sur 3000, serveur sur 3001), et problèmes CORS. Avec l'aide de la communauté dans le chat, il résout les problèmes de configuration.
L'application se lance finalement avec succès : inscription et connexion fonctionnelles, mais l'interface affiche seulement "Coming soon" car KiloC ode n'a implémenté que l'authentification et pas la logique de jeu proprement dite.
Points clés
- Kilo Code rivalise avec Cursor/Windsurf en termes d'expérience utilisateur tout en étant open source et potentiellement moins cher
- L'approche multi-agents (orchestrateur, architecte, codeur) est prometteuse mais nécessite encore de la supervision humaine
- Les questions préalables de l'IA sont un excellent point fort pour clarifier les besoins avant l'implémentation
- Create React App utilisé par défaut révèle le problème des données d'entraînement datées des LLM
- Modules dépréciés systématiques soulignent les risques de sécurité du code généré automatiquement
- Environnement local plus complexe que les solutions cloud (Bolt, Loveable) en termes de configuration et debugging
- Problèmes de ports et CORS récurrents dans le développement full stack avec séparation client/serveur
- Importance des compétences techniques même avec des outils "no-code" : debugging, environnement, architecture
- Lecture des plans générés essentielle pour éviter les surprises (fonctionnalités manquantes)
- Vibe coding haute intensité dangereux quand on valide sans lire et comprendre
- Communauté cruciale pour résoudre rapidement les blocages techniques
- Configuration .env source d'erreurs fréquente (emplacement, syntaxe, variables manquantes)
- OpenRouter permet flexibilité sur les modèles sans vendor lock-in
- Différence importante entre "ça compile" et "ça fonctionne complètement"
- Architecture complexe possible mais nécessite validation étape par étape
- NPM audit warnings à surveiller pour la sécurité même si non bloquantes
- Terminal interactif non géré par l'IA (validation Y/N manuelle nécessaire)
- Proxy/CORS mal configurés par défaut dans les générations automatiques
- Mode architecte vs orchestrateur : choix manuel nécessaire selon le contexte