Polydesk-logotype
Polydesk.ai — Header

Bolt.new Guide Complet : Créer des Applications Full-Stack dans le Navigateur

Bolt.new est un éditeur de code IA qui fonctionne entièrement dans le navigateur, propulsé par les WebContainers de StackBlitz. Vous décrivez votre application en langage naturel, et Bolt génère, exécute et déploie le code en temps réel, avec npm, serveur Node.js et preview live, sans rien installer localement.

Bolt.new : fiche technique
Éditeur
StackBlitz (bolt.new)
Technologie
WebContainers (Node.js dans le navigateur)
Modèles IA
Claude Sonnet 4.6, Opus 4.6 (profondeur de raisonnement ajustable)
Frameworks supportés
React, Next.js, Vite, Astro, SvelteKit, et la plupart des frameworks JavaScript
Intégrations
Supabase, Stripe, GitHub, Netlify, Figma
Hébergement
Bolt Cloud (.bolt.host) ou export vers Netlify/Vercel
Plan gratuit
1M tokens/mois, 300K/jour
Plan Pro
À partir de 20 $/mois (10M tokens), jusqu’à 200 $/mois (120M tokens)
Plan Teams
30 $/membre/mois (tokens par membre, non partagés)
Open source
bolt.diy disponible (auto-hébergeable, 19+ fournisseurs LLM)
Site officiel
bolt.new

Ce qui différencie Bolt.new des autres builders IA

Bolt.new se distingue fondamentalement par son architecture technique. Là où des outils comme Lovable ou v0 génèrent du code que vous pouvez voir, Bolt donne à l’IA le contrôle complet sur l’environnement d’exécution. Grâce aux WebContainers de StackBlitz, l’IA peut installer des packages npm, lancer un serveur Node.js, gérer le système de fichiers, exécuter des commandes terminal et accéder à la console du navigateur, le tout dans un onglet de votre navigateur.

Concrètement, cela signifie que Bolt est l’un des rares outils de vibe coding qui supporte réellement le full-stack dans le navigateur. Vous pouvez exécuter des backends, installer des librairies, et tester votre application en temps réel sans jamais quitter l’interface.

Frameworks supportés

Contrairement à Lovable (limité à React/Vite/Tailwind), Bolt supporte la plupart des frameworks JavaScript populaires. Si ça tourne sur StackBlitz, ça tourne sur Bolt. Cela inclut React, Next.js, Vite, Astro, SvelteKit, Tailwind CSS, ShadCN, et bien d’autres. Spécifiez le framework dans votre prompt initial pour que Bolt scaffold le projet correctement.

Modèles IA disponibles

Bolt utilise principalement les modèles Claude d’Anthropic. Le modèle par défaut est Claude Sonnet 4.6. Depuis mars 2026, Opus 4.6 est disponible avec une profondeur de raisonnement ajustable, permettant de choisir entre rapidité (raisonnement léger) et qualité (raisonnement profond). Le choix du modèle et de la profondeur influence la consommation de tokens et la qualité du code généré.

Premiers pas : de l’idée à l’application

Créer un compte

Rendez-vous sur bolt.new et créez un compte. Le plan gratuit offre 1 million de tokens par mois avec une limite de 300 000 tokens par jour. C’est suffisant pour explorer la plateforme et construire de petits projets. Pour un usage sérieux, le plan Pro à 20-25 $/mois avec 10 millions de tokens est recommandé.

Écrire votre premier prompt

L’interface est simple : un chat à gauche, une preview live à droite. Décrivez votre application dans le champ de saisie. Soyez aussi spécifique que possible sur les fonctionnalités, le framework et le design.

Exemple de prompt initial : « Create a recipe tracking app with React and Tailwind CSS. Include a main page listing all recipes as cards with images, individual recipe pages, a search bar to filter by name, and a form to add new recipes. Modern, sleek design. »

Utilisez le bouton Enhance

Avant d’envoyer votre prompt, cliquez sur l’icône « Enhance » pour que l’IA enrichisse votre description avec des détails techniques. Relisez et éditez le résultat avant de l’envoyer. C’est gratuit et améliore significativement la qualité du premier résultat.

Itérer et affiner

Bolt génère la première version de votre app en quelques minutes. Utilisez le chat pour demander des modifications : ajouter une fonctionnalité, changer le design, corriger un bug. Chaque modification est visible en temps réel dans la preview.

Bonnes pratiques pour l’itération : commencez par la structure de base avant d’ajouter des fonctionnalités avancées. Regroupez les instructions simples dans un seul message (« Change the color scheme to dark blue, add mobile responsiveness, and restart the dev server ») pour économiser des tokens. Utilisez le mode « Discuss » pour planifier sans générer de code.

Les fonctionnalités clés de Bolt

Environnement de développement complet dans le navigateur

Bolt n’est pas un simple générateur de code. C’est un IDE complet dans le navigateur avec éditeur de fichiers, terminal intégré, console de debug, et preview live. Vous pouvez éditer le code directement, installer des packages npm manuellement si besoin, et utiliser le terminal comme vous le feriez localement.

Target File et File Lock

Deux fonctionnalités avancées pour garder le contrôle. Target File permet de focaliser les modifications de l’IA sur un fichier spécifique, évitant les réécritures non souhaitées dans d’autres fichiers. File Lock verrouille un fichier pour empêcher l’IA de le modifier, ce qui est essentiel pour protéger le code que vous avez déjà validé.

Diff Preview

Sur les plans payants, vous pouvez voir les modifications proposées par l’IA sous forme de diff (avant/après) avant de les appliquer. Cette fonctionnalité vous permet de vérifier chaque changement et de rejeter ceux qui ne conviennent pas, économisant des tokens et évitant les régressions.

Mode Discuss

Le mode Discuss permet de discuter avec l’IA sans qu’elle génère de code. Utilisez-le pour planifier l’architecture, poser des questions sur le code existant, ou comprendre le comportement de votre application avant de faire des modifications. C’est l’équivalent du Chat Mode de Lovable, et c’est un outil stratégique pour économiser des tokens.

Import Figma

Bolt accepte l’import de designs Figma directement dans le chat. Vous pouvez déposer des frames Figma à n’importe quel stade du développement, et Bolt génère les composants correspondants. C’est particulièrement utile quand un designer met à jour le design en cours de développement.

AI Image Editing (Nano Banana)

Bolt intègre un éditeur d’images IA qui permet de modifier des parties spécifiques d’images directement dans l’interface du chat. Utile pour les ajustements visuels rapides sans quitter la plateforme.

Intégrations disponibles

Service Fonction Configuration
Supabase Base de données PostgreSQL, auth, stockage, Edge Functions L’IA guide le setup et peut générer les schémas de DB automatiquement
Stripe Paiements, abonnements, checkout L’IA configure les flux de paiement via prompt
GitHub Synchronisation du code, version control, CI/CD Connexion en quelques clics, sync bidirectionnelle
Netlify Hébergement externe, custom domains, preview deploys Alternative à l’hébergement natif Bolt Cloud
Figma Import de designs, conversion en composants code Glisser-déposer des frames directement dans le chat

L’IA ne se contente pas de connecter ces services : elle les configure intelligemment. Demandez « Add Stripe payments with monthly and yearly plans » et Bolt crée le flux complet de paiement. C’est un gain de temps considérable pour les débutants qui redoutent la configuration backend.

Bolt Cloud : hébergement et déploiement

Bolt propose un hébergement natif via Bolt Cloud. Cliquez sur Publish, et votre app est déployée sur un sous-domaine .bolt.host avec HTTPS automatique. Les plans payants débloquent les domaines personnalisés et la suppression du branding Bolt.

Le processus de build est visible dans la sidebar (étapes de build, succès/échec). Pour les projets Next.js, Bolt exécute automatiquement « npx next build » et déploie le résultat.

Si vous préférez un hébergement externe, exportez votre code vers GitHub puis déployez sur Netlify ou Vercel. C’est la même approche que pour Lovable, et elle vous donne plus de contrôle sur l’infrastructure. Consultez notre page sur le déploiement Bolt pour les détails.

Le système de tokens : comprendre les coûts

Bolt utilise un modèle de facturation basé sur les tokens, fondamentalement différent du système de crédits de Lovable. Les tokens sont des fragments de texte que l’IA utilise pour traiter et générer les réponses. Chaque input que vous envoyez et chaque output que l’IA génère consomme des tokens.

Le point critique à comprendre : la consommation de tokens est proportionnelle à la taille de votre projet. Bolt synchronise l’ensemble du système de fichiers de votre projet avec l’IA à chaque message. Plus le projet grandit, plus chaque interaction coûte de tokens. Un même prompt sur un petit projet et sur un gros projet n’aura pas le même coût.

Plan Tokens/mois Prix mensuel Prix annuel (~10 % réduction) Limite quotidienne
Free 1M 0 $ 300K/jour
Pro 10M 20-25 $ ~18-22 $ Aucune
Pro 50 26M 50 $ ~45 $ Aucune
Pro 100 52M 100 $ ~90 $ Aucune
Pro 200 120M 200 $ ~180 $ Aucune
Teams 26M/membre 30 $/membre ~27 $/membre Aucune
Enterprise Personnalisé Sur devis Sur devis Aucune

Les tokens non utilisés sur les plans payants sont reportés pour un mois supplémentaire (deux mois de validité maximum). Les reload tokens (20 $ pour 10M tokens, disponibles sur les plans Pro les plus élevés et annuels) n’expirent jamais tant que vous avez un abonnement actif. Le coût par million de tokens baisse significativement sur les paliers supérieurs. Pour une analyse détaillée, consultez notre page Bolt Prix.

Transparence des tokens

Plusieurs utilisateurs ont signalé sur Reddit une consommation de tokens opaque et difficile à anticiper. Surveillez le compteur de tokens dans le dashboard. La consommation augmente avec la taille du projet (chaque message envoie l’ensemble du codebase à l’IA). Les cycles de debug répétés sont les plus gros consommateurs de tokens.

Bolt v2 et les mises à jour récentes

Bolt v2, sorti en octobre 2025, a marqué la transition de l’expérimentation vers un outil de production plus sérieux. Les améliorations clés incluent un debugging autonome qui réduit les boucles d’erreur de 98 % selon l’éditeur, une meilleure gestion du contexte projet, et des optimisations de consommation de tokens.

Les mises à jour de début 2026 ajoutent les Team Templates (transformez un projet existant en template réutilisable), les URL Netlify éditables (changez l’URL sans redéployer), le support de Opus 4.6 avec profondeur de raisonnement ajustable, l’import Figma en cours de développement, et l’édition d’images IA (Nano Banana).

Bonnes pratiques de prompting sur Bolt

Spécifiez votre stack dès le premier prompt. « Build a task manager using Next.js, Tailwind CSS, and ShadCN components with Supabase for auth and database. » Cela évite que Bolt choisisse un framework par défaut qui ne correspond pas à vos besoins.

Construisez la base avant les fonctionnalités avancées. Assurez-vous que la structure de l’application est solide avant de plonger dans les fonctionnalités complexes. Bolt comprend mieux les fondations quand il les a posées lui-même.

Regroupez les instructions simples. Au lieu d’envoyer 5 messages séparés pour des ajustements mineurs, combinez-les en un seul : « Change the color scheme to navy blue, add padding to all cards, make the header sticky, add hover effects to buttons, and ensure responsive layout on mobile. » Un message au lieu de cinq économise des tokens considérables.

Utilisez le mode Discuss pour planifier. Avant de construire une fonctionnalité complexe, discutez-la avec l’IA en mode Discuss. Demandez-lui de proposer une approche, d’identifier les pièges potentiels, et de planifier les étapes. Cela ne consomme pas de tokens de génération de code.

Verrouillez les fichiers critiques. Quand un composant fonctionne correctement, verrouillez-le avec File Lock pour empêcher l’IA de le modifier accidentellement lors d’une autre modification. C’est la meilleure protection contre les régressions.

Exportez régulièrement vers GitHub. Connectez votre projet à GitHub dès le début et traitez chaque état stable comme un checkpoint. Si l’IA casse quelque chose, vous pouvez reverter.

Limites de Bolt.new

La consommation de tokens est le point de friction principal. Les gros projets consomment plus de tokens par message car Bolt synchronise l’ensemble du codebase avec l’IA. Les cycles de debug répétés peuvent brûler des tokens rapidement. L’opacité de la consommation rend le budget difficile à prévoir.

Les design systems complexes nécessitent souvent des retouches manuelles. Bolt excelle en fonctionnalité mais peut produire du CSS générique. Pour un design pixel-perfect, prévoyez des ajustements post-génération.

Le debugging en profondeur reste un défi. Le mode « Attempt Fix » résout les erreurs de syntaxe mineures, mais les conflits de framework ou les incohérences architecturales peuvent persister. Pour les bugs complexes, le mode Discuss et le debug manuel dans l’éditeur intégré sont plus efficaces.

Pas de mobile natif. Comme Lovable, Bolt génère des applications web. Pas d’iOS, pas d’Android natif.

Pour une analyse complète des limites, consultez Bolt vs Lovable.

Bolt.diy : l’alternative open source

Bolt est disponible en version open source sous le nom bolt.diy. Cette version vous permet de faire tourner Bolt sur votre propre serveur et de choisir parmi plus de 19 fournisseurs de LLM (OpenAI, Anthropic, Mistral, etc.). C’est une option intéressante pour les développeurs qui veulent le workflow Bolt avec un contrôle total sur les modèles et l’infrastructure, sans les contraintes du système de tokens de la version commerciale.

Notre verdict

Bolt.new est l’outil de vibe coding le plus complet techniquement grâce à ses WebContainers. Le fait de pouvoir exécuter un environnement Node.js complet dans le navigateur, installer des packages, et tester en temps réel le place au-dessus de la plupart des concurrents en termes de puissance technique. Le support multi-framework (Next.js, Astro, SvelteKit en plus de React) lui donne un avantage sur Lovable qui est limité à React/Vite.

Le système de tokens est à la fois sa force (vous payez proportionnellement à l’usage réel) et sa faiblesse (les coûts sont difficiles à prévoir, surtout sur les gros projets). Comparé à Lovable, Bolt est meilleur pour les développeurs solo qui veulent un contrôle technique approfondi. Lovable est meilleur pour les équipes (crédits partagés) et les non-développeurs (interface plus guidée).

Pour un premier projet, commencez avec le plan gratuit pour valider que Bolt correspond à votre workflow. Passez au Pro (20-25 $/mois) quand vous êtes prêt à construire sérieusement. Utilisez le mode Discuss, les File Locks et les exports GitHub systématiques pour maîtriser vos coûts et votre code.


Questions fréquentes sur Bolt.new

Bolt.new nécessite-t-il d’installer quelque chose localement ?

Non. Bolt fonctionne entièrement dans le navigateur grâce aux WebContainers de StackBlitz. Vous n’avez besoin d’aucune installation locale, pas de Node.js, pas d’IDE, pas de configuration. Tout se passe dans un onglet de navigateur : l’éditeur de code, le terminal, le serveur de développement et la preview live. C’est l’un des avantages principaux de Bolt par rapport aux éditeurs de code IA comme Cursor qui nécessitent une installation locale.

Combien de tokens consomme un projet typique ?

Cela dépend de la taille et de la complexité du projet. Un petit projet (landing page, formulaire simple) peut se construire avec quelques centaines de milliers de tokens. Un MVP de complexité moyenne nécessite typiquement 2 à 5 millions de tokens. Les projets plus ambitieux (SaaS multi-pages, dashboard complexe) peuvent consommer 10 millions de tokens ou plus. Le point crucial : la consommation par message augmente avec la taille du projet car Bolt synchronise l’ensemble du codebase avec l’IA à chaque interaction.

Peut-on utiliser Bolt.new avec des frameworks autres que React ?

Oui, c’est l’un des avantages de Bolt par rapport à Lovable. Bolt supporte la plupart des frameworks JavaScript : React, Next.js, Vite, Astro, SvelteKit, et d’autres. Si un framework fonctionne sur StackBlitz, il fonctionne sur Bolt. Spécifiez le framework dans votre premier prompt pour que Bolt configure le projet correctement dès le départ.

Quelle est la différence entre Bolt.new et bolt.diy ?

Bolt.new est la version commerciale hébergée par StackBlitz, avec les modèles Claude intégrés, l’hébergement Bolt Cloud, et un système de tokens payant. bolt.diy est la version open source que vous pouvez auto-héberger sur votre propre serveur. Elle supporte plus de 19 fournisseurs de LLM (OpenAI, Anthropic, Mistral, etc.) et ne vous impose pas de système de tokens. bolt.diy est idéal pour les développeurs qui veulent le workflow Bolt avec un contrôle total, mais nécessite une configuration technique plus avancée.

Comment économiser des tokens sur Bolt ?

Cinq stratégies concrètes. Utilisez le mode Discuss pour planifier avant de coder (pas de consommation de tokens de génération). Regroupez les instructions simples dans un seul message au lieu d’envoyer plusieurs messages séparés. Verrouillez les fichiers stables avec File Lock pour éviter les réécritures inutiles. Exportez régulièrement vers GitHub pour avoir des checkpoints en cas de régression. Pour les ajustements CSS précis ou les corrections de bugs pointus, envisagez d’exporter le code et de l’éditer dans un éditeur externe comme Cursor pour économiser vos tokens Bolt.

Polydesk.ai — Footer