Qu’est-ce que Bolt.New#

Bolt.new est un outil basé sur le navigateur pour générer et exécuter instantanément des applications web full-stack. Construit sur la technologie WebContainer de StackBlitz, il offre aux développeurs une pile propre et préconfigurée incluant Next.js (App Router), Tailwind CSS, Supabase, Prisma et ShadCN UI. Tout l’environnement fonctionne localement dans le navigateur : pas d’installation, pas d’étapes de compilation cloud, aucune inscription requise.

Contrairement aux outils qui se concentrent sur l’aide à la programmation par IA dans un projet existant, Bolt.new cible le tout début du processus de développement. Il supprime la lourdeur liée à la création de la structure du projet, la gestion des dépendances et des serveurs locaux, pour passer de l’idée au prototype fonctionnel en quelques secondes.

En quoi Bolt.new est-il différent de Cursor ou Lovable ?#

Alors que des outils comme Cursor et Lovable servent de copilotes IA dans votre éditeur de code, Bolt.new vise autre chose : la génération et l’exécution instantanées de projets full-stack.

• Cursor améliore les workflows VS Code avec de l’IA pour modifier ou générer du code dans votre environnement actuel.
• Bolt.new crée une application fonctionnelle à partir d’une simple consigne ou d’un modèle, et l’exécute instantanément dans le navigateur via WebContainers.

Aucune dépendance à des outils locaux ou à des VM cloud distantes. Tout tourne dans le navigateur avec une prise en charge native de Node.js, la gestion de paquets et le développement full-stack. C’est particulièrement adapté au prototypage rapide et à l’expérimentation « local-first », en particulier pour l’IA ou les projets SaaS.

À qui s’adresse Bolt.new ?#

Bolt.new est conçu pour les développeurs qui recommencent souvent de zéro, comme :

• Les indie hackers qui valident une idée de produit
• Les créateurs IA qui testent des workflows ou intègrent des modèles
• Les fondateurs qui prototypent un MVP
• Les ingénieurs qui créent des outils internes ou des démos

Ces utilisateurs sont généralement à l’aise avec la stack web moderne et préfèrent des outils rapides, propres et flexibles. Bolt.new n’est pas un builder visuel ni une plateforme didactique : il suppose une connaissance pratique de React et du développement full-stack, tout en éliminant la friction de la configuration.

Histoire et évolution de Bolt.new#

Bolt.new a été créé par l’équipe derrière StackBlitz, une société fondée en 2017 par Eric Simons et Albert Pai. StackBlitz a été pionnière en lançant les WebContainers, un runtime WebAssembly natif pour navigateur capable d’exécuter des environnements Node.js directement dans le navigateur. Cela a éliminé le besoin de serveurs cloud ou d’installations locales pour développer des applications JavaScript modernes.

En 2023, StackBlitz a connu un tournant. La croissance ralentissait, et l’équipe a exploré une direction plus radicale : combiner les WebContainers à l’IA pour générer des applications totalement fonctionnelles à partir de prompts en langage naturel.

Cette expérimentation a donné naissance à Bolt.new, lancé publiquement en octobre 2024. En quelques semaines, il a rencontré un fort succès auprès des développeurs pour sa simplicité et sa rapidité. Cet outil combinait tout le travail de StackBlitz : l’isolation du runtime, l’installation rapide des dépendances, des environnements partageables, et une interface IA qui comprenait les objectifs courants de développement.

Bolt.new a représenté un tournant dans les outils développeur : au lieu d’écrire du code plus vite, on pouvait désormais commencer avec du code déjà opérationnel, adapté à l’intention.

Guide : utilisez Logto et Bolt.New pour ajouter une expérience de connexion personnalisée#

Enregistrer une application sur la console Logto#

Dans cet exemple, j’ai utilisé Bolt.new pour créer une app CMS. J’ai sauté la phase de prompt pour aller droit au but : j’ai demandé à l’agent de construire un CMS avec Logto comme fournisseur d’authentification.

Selon la documentation, il fallait fournir deux informations essentielles :

1. Logto endpoint
2. App ID

Comme l’app est une application React monopage, pas besoin de secret d’application. L’agent s’est chargé du reste : il a installé le dernier SDK Logto React, mis en place les composants d’authentification et tout relié ensemble.

Pour finaliser la configuration, je me suis rendu sur la console Logto Cloud, j’ai créé une nouvelle application monopage et recopié l’endpoint Logto ainsi que l’App ID dans Bolt.new.

Ensuite, configurez les URIs de redirection et les URIs de redirection post-déconnexion.

Un détail important : puisque Bolt.new s’utilise dans un navigateur et non dans un IDE local, tu ne peux pas utiliser http://localhost:3000/ comme URI de redirection. Utilise plutôt l’URL de prévisualisation affichée dans l’onglet Bolt.new du navigateur.

Personnaliser l’expérience de connexion préfabriquée de Logto#

Logto propose un flux de connexion pré-construit configurable directement dans la console. Pour commencer, va dans Sign-in Experience > Sign-in & Sign-up, puis choisis tes méthodes de connexion préférées (email, pseudo, numéro de téléphone, ou connexion sociale, par exemple).

Une fois configuré, déclencher le flux de connexion redirige les utilisateurs vers la page de connexion hébergée de Logto avec tes options. Tout le flux d’authentification est géré par Logto, qui renverra ensuite les utilisateurs sur ton app après connexion.

Créer un panneau de connexion flottant au-dessus de ton produit#

Maintenant, je veux aller plus loin et concevoir une expérience de connexion plus personnalisée, comme le fait Perplexity. Plutôt que de rediriger sur une page dédiée, je placerai un panneau de connexion flottant directement par-dessus l’interface produit. Ça garde les utilisateurs dans le contexte tout en utilisant le flux d’authentification Logto en arrière-plan.

J’utilise ce prompt tout simplement :

Je veux que la page de connexion soit plus jolie, juste un fond simple avec deux boutons : un pour « Se connecter » et un pour « Créer un compte ». Chaque bouton doit rediriger vers un écran différent, géré par Logto. En utilisant l’expérience de première page décrite ici : https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

C’est super pratique : cliquer sur Se connecter mène directement à la page de connexion, tandis que Créer un compte ouvre l’écran d’inscription immédiatement.

Ajouter des flux sociaux#

Tu peux donner à l’agent la documentation du sign-in direct avec Logto accompagnée d’un prompt du type « Ajoute des flux de connexion sociale ». Ça permet de sauter l’écran d’accueil par défaut de Logto. Par exemple, cliquer sur le bouton Connexion avec Google lancera tout de suite le flux d’authentification Google pour offrir une expérience plus rapide et conviviale.

La future mise à jour de Logto activera l’intégration auth alimentée par l’IA#

Ceci n’est qu’un exemple de base. Logto prépare actuellement des serveurs MCP à faire tourner directement dans ton IDE, te permettant d’interagir avec la console Logto et l’API management sans quitter ton environnement de développement.

Avec ce setup, tu pourras :

1. Créer et gérer les utilisateurs
2. Voir et filtrer les logs
3. Configurer les flux de connexion et d’inscription
4. Définir les ressources d’API, permissions et rôles
5. Gérer applications et paramètres d’accès
6. Et plus encore

En alliant outils locaux, IA et l’infrastructure Logto, l’authentification n’est plus une intégration pénible, elle fait désormais partie de ton flux naturel de développement.