Wat is Bolt.New#

Bolt.new is een browsergebaseerde tool voor het direct genereren en uitvoeren van full-stack webapplicaties. Gebouwd op StackBlitz’s WebContainer-technologie biedt het ontwikkelaars een schone, vooraf geconfigureerde stack met Next.js (App Router), Tailwind CSS, Supabase, Prisma en ShadCN UI. De hele omgeving draait lokaal in de browser: geen installaties, geen cloud-buildstappen en geen account nodig.

In tegenstelling tot tools die zich richten op AI-ondersteunde code in een bestaand project, focust Bolt.new op het begin van het ontwikkelproces. Het verwijdert de overhead van het opzetten van projectstructuur, afhankelijkheden en lokale servers, zodat je in enkele seconden van idee naar een werkend prototype gaat.

Hoe verschilt Bolt.new van Cursor of Lovable?#

Waar tools als Cursor en Lovable dienen als AI copiloten binnen je code-editor, richt Bolt.new zich op iets heel anders: directe generatie en uitvoering van full-stack projecten.

• Cursor verbetert VS Code-workflows met AI die je helpt code te bewerken of genereren in je bestaande omgeving.
• Bolt.new maakt op basis van een prompt of template direct een werkende app vanaf nul, en draait die meteen in de browser met WebContainers.

Er is geen afhankelijkheid van lokale tools of cloud-VM’s. Alles draait in de browser met native ondersteuning voor Node.js, package management en full-stack development. Dit maakt het vooral geschikt voor snel prototypen en lokaal experimenteren, bijvoorbeeld voor AI- of SaaS-projecten.

Voor wie is Bolt.new bedoeld?#

Bolt.new is ontworpen voor ontwikkelaars die vaak vanaf nul starten, zoals:

• Indie hackers die productideeën valideren
• AI bouwers die workflows testen of modellen integreren
• Founders die MVP’s prototypen
• Engineers die interne tools of demo’s maken

Deze gebruikers zijn doorgaans vertrouwd met de moderne webstack en geven de voorkeur aan snelle, cleane en niet-opdringerige tools. Bolt.new is geen visuele site-builder of tutorial-gedreven platform. Het gaat ervan uit dat je kunt werken met React en full-stack development, maar haalt het opstartgedoe weg.

De geschiedenis en evolutie van Bolt.new#

Bolt.new werd ontwikkeld door het team achter StackBlitz, een bedrijf dat in 2017 werd opgericht door Eric Simons en Albert Pai. StackBlitz was pionier met WebContainers, een browser-native WebAssembly-runtime die Node.js-omgevingen direct in de browser kan uitvoeren. Hierdoor waren cloudservers of lokale installaties niet meer nodig voor het ontwikkelen van moderne JavaScript-apps.

In 2023 kwam StackBlitz op een kruispunt. De groei was vertraagd en het team verkende een radicalere richting: WebContainers combineren met AI om volledig functionele apps te genereren vanuit natuurlijke taal prompts.

Dat experiment werd Bolt.new, dat in oktober 2024 publiek werd gelanceerd. Binnen enkele weken kreeg het veel tractie onder ontwikkelaars vanwege de eenvoud en snelheid. De tool combineerde alles wat StackBlitz had gebouwd—runtime-isolatie, snelle dependency-installatie en deelbare omgevingen—met een AI-interface die gebruikelijke ontwikkeldoelen begreep.

Bolt.new betekende een omslag in developer tooling: in plaats van alleen sneller code te schrijven, konden ontwikkelaars nu starten met code die al draaide, afgestemd op hun intentie.

Gids: Voeg met Logto en Bolt.New een aangepaste login-ervaring toe#

Registreer een app in de Logto-console#

In dit voorbeeld gebruikte ik Bolt.new om een CMS-app te maken. Ik sloeg de promptfase over en ging meteen ter zake: ik vroeg de agent een CMS te bouwen met Logto als authenticatieprovider.

Volgens de instructies moest ik twee essentiële gegevens opgeven:

1. Logto endpoint
2. App ID

Omdat de app een single-page React-applicatie is, is er geen app secret nodig. De agent regelde de rest: hij installeerde de laatste Logto React SDK, zette de authenticatiecomponenten op en verbond alles.

Om de installatie te voltooien, ging ik naar de Logto Cloud Console, maakte een nieuwe single-page app aan en kopieerde de Logto endpoint en App ID naar Bolt.new.

Configureer daarna de Redirect URI’s en de post-sign-out redirect URI’s.

Een belangrijk detail: omdat Bolt.new browsergebaseerd is en geen lokale IDE, kun je http://localhost:3000/ niet als redirect URI gebruiken. Gebruik in plaats daarvan de preview-URL die getoond wordt in het Bolt.new-browsertabblad.

Pas de Logto vooraf gebouwde login-ervaring aan#

Logto biedt een configureerbare, vooraf gebouwde loginflow die je in de Console kunt aanpassen. Ga hiervoor naar Sign-in Experience > Sign-in & Sign-up en kies je gewenste aanmeldmethoden (zoals e-mail, gebruikersnaam, telefoonnummer of sociale login).

Na configuratie leidt het starten van de loginflow gebruikers naar de door Logto gehoste loginpagina met jouw gekozen opties. Het hele authenticatieproces wordt door Logto afgehandeld. Gebruikers keren na het aanmelden terug naar jouw app.

Maak een zwevend loginpaneel bovenop je product#

Nu wil ik een stap verder gaan en een meer aangepaste login-ervaring bouwen, vergelijkbaar met Perplexity. In plaats van door te sturen naar een aparte pagina, plaats ik een zwevend inlogpaneel direct boven de product-UI. Zo blijven gebruikers in context, terwijl onderwater Logto’s loginflow wordt gebruikt.

Hiervoor gebruik ik gewoon deze prompt:

Ik wil dat de sign-in pagina er beter uitziet: gewoon een simpele achtergrond met twee knoppen: eentje voor ‘Inloggen’ en eentje voor ‘Account aanmaken’. Elke knop verwijst naar een ander scherm, geregeld door Logto. Gebruik de first-screen ervaring zoals beschreven op https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

Het mooie is: als je op Inloggen klikt, ga je direct door naar de inlogpagina. Klik je op Account aanmaken, dan opent direct het aanmaakscherm.

Voeg social flows toe#

Je kunt de agent de rechtstreekse inlogdocumentatie van Logto geven met een prompt als “voeg social sign-in flows toe.” Daarmee kun je het standaard Logto-startscherm overslaan. Bijvoorbeeld: als je op de Google Sign-In knop klikt, start meteen het Google-authenticatieproces voor een snellere, gebruiksvriendelijke login.

Logto’s komende update ondersteunt AI-aangedreven auth-integratie#

Dit is slechts een basisvoorbeeld. Logto werkt momenteel aan MCP-servers die direct in je IDE draaien, zodat je de Logto Console en Management API kunt gebruiken zonder je ontwikkelomgeving te verlaten.

Met die opzet kun je:

1. Gebruikers aanmaken en beheren
2. Logs bekijken en filteren
3. Aanmeld- en registratieflows configureren
4. API-resources, rechten en rollen definiëren
5. Applicaties en toegangsinstellingen beheren
6. En meer

Door lokale tooling te combineren met AI en de Logto-infrastructuur is authenticatie geen lastig integratieproject meer, maar onderdeel van je natuurlijke ontwikkelflow.