Cos'è Bolt.New#

Bolt.new è uno strumento basato sul browser per generare ed eseguire applicazioni web full-stack istantaneamente. Costruito sopra la tecnologia WebContainer di StackBlitz, offre agli sviluppatori uno stack pulito e preconfigurato che include Next.js (App Router), Tailwind CSS, Supabase, Prisma e ShadCN UI. L'intero ambiente gira localmente nel browser: nessuna installazione, nessuno step di build sul cloud e nessuna registrazione richiesta.

A differenza degli strumenti che si concentrano sulla codifica assistita da IA all'interno di un progetto esistente, Bolt.new si focalizza sull'inizio del processo di sviluppo. Rimuove la complessità della configurazione della struttura del progetto, delle dipendenze e dei server locali, permettendoti di passare dall'idea al prototipo funzionante in pochi secondi.

In cosa Bolt.new è diverso da Cursor o Lovable?#

Mentre strumenti come Cursor e Lovable fungono da copiloti IA all'interno del tuo editor di codice, Bolt.new si concentra su qualcosa di completamente diverso: generazione ed esecuzione istantanea di progetti full-stack.

• Cursor migliora il flusso di lavoro in VS Code con l'IA, aiutandoti a modificare o generare codice nel tuo ambiente esistente.
• Bolt.new crea un'app funzionante da zero in base ad un prompt o a un modello e la esegue istantaneamente nel browser usando WebContainers.

Non c'è alcuna dipendenza da strumenti locali o VM cloud remote. Tutto gira nel browser, con supporto nativo a Node.js, gestione dei pacchetti e sviluppo full-stack. Questo lo rende particolarmente adatto per prototipazione veloce ed esperimenti local-first, soprattutto in contesti di progetti IA o SaaS.

A chi è rivolto Bolt.new?#

Bolt.new è pensato per gli sviluppatori che spesso partono da zero, come:

• Indie hacker che validano idee di prodotto
• Maker IA che testano workflow o integrano modelli
• Founder che prototipano MVP
• Ingegneri che creano strumenti interni o demo

Questi utenti generalmente hanno familiarità con lo stack web moderno e preferiscono strumenti veloci, puliti e senza opinioni forti. Bolt.new non è un site builder visuale o una piattaforma guidata da tutorial. Presume una conoscenza funzionante di React e dello sviluppo full-stack ma elimina la fatica del setup.

La storia e l'evoluzione di Bolt.new#

Bolt.new è stato creato dal team di StackBlitz, un'azienda fondata nel 2017 da Eric Simons e Albert Pai. StackBlitz ha introdotto per primo i WebContainer, un runtime WebAssembly nativo del browser in grado di eseguire ambienti Node.js direttamente nel browser. Questo ha eliminato la necessità di server cloud o installazioni locali per sviluppare applicazioni JavaScript moderne.

Nel 2023, StackBlitz affrontò un punto di svolta. La crescita era rallentata e il team ha esplorato una direzione più radicale: combinare WebContainer e IA per generare applicazioni completamente funzionali a partire da prompt in linguaggio naturale.

Questo esperimento è diventato Bolt.new, lanciato pubblicamente nell'ottobre 2024. Nel giro di poche settimane, ha ottenuto un notevole riscontro tra gli sviluppatori grazie alla sua semplicità e velocità. Lo strumento combinava tutto ciò che StackBlitz aveva costruito negli anni — isolamento del runtime, installazione veloce delle dipendenze e ambienti condivisibili — con un'interfaccia IA che capiva gli obiettivi più comuni degli sviluppatori.

Bolt.new ha segnato un cambio di paradigma negli strumenti per sviluppatori: invece di scrivere semplicemente codice più velocemente, gli sviluppatori ora potevano partire con codice già in esecuzione, personalizzato secondo le proprie intenzioni.

Guida: Usa Logto e Bolt.New per aggiungere un'esperienza di login personalizzata#

Registra un'app nella console Logto#

In questo esempio, ho usato Bolt.new per creare un'app CMS. Ho saltato la fase di prompt e sono andato subito al sodo: ho chiesto all'agente di costruire un CMS con Logto come provider di autenticazione.

Secondo le istruzioni, dovevo fornire due informazioni fondamentali:

1. Endpoint Logto
2. App ID

Poiché l'app è un'applicazione React single-page, non serve l'app secret. L'agente si è occupato del resto: ha installato l'ultima versione della Logto React SDK, ha configurato i componenti di autenticazione e ha collegato tutto quanto.

Per completare la configurazione, sono andato sulla Logto Cloud Console, ho creato una nuova single-page application e ho copiato l'endpoint Logto e l'App ID in Bolt.new.

Poi configura le Redirect URI e le URI di redirect post logout.

Un dettaglio importante: poiché Bolt.new è basato su browser e non su un IDE locale, non puoi usare http://localhost:3000/ come redirect URI. Assicurati invece di usare l'URL di anteprima mostrato nella scheda del browser di Bolt.new.

Personalizza l'esperienza di login pre-costruita di Logto#

Logto fornisce un flusso di login pre-costruito e configurabile che puoi personalizzare nella Console. Per iniziare, vai su Esperienza di login > Login & Registrazione, quindi scegli i metodi di accesso preferiti (ad esempio email, username, numero di telefono o accesso social).

Una volta configurato, attivare il flusso di login reindirizzerà gli utenti alla pagina di accesso ospitata da Logto con le opzioni selezionate. L'intero processo di autenticazione viene gestito da Logto e gli utenti tornano alla tua app dopo aver effettuato l'accesso.

Crea un pannello di login fluttuante sopra il tuo prodotto#

Ora voglio fare un passo in più e costruire un'esperienza di login più personalizzata, simile a quella offerta da Perplexity. Invece di reindirizzare a una pagina separata, piazzerò un pannello di login fluttuante direttamente sopra l'interfaccia del prodotto. Questo mantiene gli utenti nel contesto pur utilizzando il flusso di autenticazione di Logto a livello sottostante.

Quindi uso semplicemente questo prompt:

Voglio rendere la pagina di accesso più bella, solo uno sfondo semplice con due pulsanti: uno per "Accedi" e uno per "Crea account". Ogni pulsante deve reindirizzare a una schermata diversa, gestita da Logto. Utilizzando la documentazione first-screen di Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

La parte interessante è che, se clicchi su Accedi, vai direttamente alla pagina di login. Se clicchi su Crea account, si apre direttamente la schermata di creazione dell'account.

Aggiungi flussi social#

Puoi fornire all'agente la documentazione del login diretto di Logto insieme a un prompt come "aggiungi flussi di accesso social". Questo ti permette di saltare la schermata iniziale predefinita di Logto. Ad esempio, cliccando il pulsante Accedi con Google verrà subito avviato il flusso di autenticazione Google, offrendo agli utenti un'esperienza di login più veloce e intuitiva.

Il prossimo aggiornamento di Logto supporterà l'integrazione auth potenziata dall'IA#

Questo è solo un semplice esempio. Logto sta attualmente sviluppando MCP server che girano direttamente all'interno del tuo IDE, permettendoti di interagire con la Console Logto e la Management API senza mai lasciare l'ambiente di sviluppo.

Con questa configurazione, potrai:

1. Creare e gestire utenti
2. Visualizzare e filtrare i log
3. Configurare i flussi di login e registrazione
4. Definire risorse API, permessi e ruoli
5. Gestire applicazioni e parametri di accesso
6. E altro ancora

Combinando strumenti locali con IA e l'infrastruttura Logto, l'autenticazione non è più un'integrazione dolorosa, ma diventa parte naturale del tuo flusso di sviluppo.