¿Qué es Bolt.New?#

Bolt.new es una herramienta basada en el navegador para generar y ejecutar aplicaciones web full-stack al instante. Construida sobre la tecnología WebContainer de StackBlitz, ofrece a los desarrolladores un stack limpio y preconfigurado que incluye Next.js (App Router), Tailwind CSS, Supabase, Prisma y ShadCN UI. Todo el entorno se ejecuta localmente en el navegador, sin instalaciones, sin pasos de construcción en la nube y sin necesidad de registro.

A diferencia de herramientas que se enfocan en la asistencia por IA dentro de un proyecto existente, Bolt.new se centra en el inicio del proceso de desarrollo. Elimina la sobrecarga de configurar la estructura de proyecto, dependencias y servidores locales, permitiendo pasar de la idea al prototipo funcional en segundos.

¿En qué se diferencia Bolt.new de Cursor o Lovable?#

Mientras que herramientas como Cursor y Lovable funcionan como copilotos de IA integrados en tu editor de código, Bolt.new apunta a algo completamente diferente: generación y ejecución instantánea de proyectos full-stack.

• Cursor mejora el flujo de trabajo en VS Code con IA, ayudando a editar o generar código en tu entorno existente.
• Bolt.new crea una app funcionando desde cero basada en un prompt o plantilla, y la ejecuta instantáneamente en el navegador usando WebContainers.

No hay dependencia de herramientas locales ni máquinas virtuales en la nube. Todo se ejecuta en el navegador, con soporte nativo para Node.js, gestión de paquetes y desarrollo full-stack. Esto lo hace especialmente útil para prototipado rápido y experimentación local, sobre todo en contextos de proyectos de IA o SaaS.

¿Para quién es Bolt.new?#

Bolt.new está diseñado para desarrolladores que suelen comenzar desde cero, como:

• Indie hackers validando ideas de productos
• Constructores de IA probando flujos de trabajo o integrando modelos
• Fundadores prototipando MVPs
• Ingenieros creando herramientas internas o demos

Estos usuarios suelen estar cómodos con el stack web moderno y prefieren herramientas rápidas, limpias y sin opiniones estrictas. Bolt.new no es un constructor visual de sitios ni una plataforma guiada por tutoriales. Se asume conocimiento práctico de React y desarrollo full-stack, pero elimina la fricción de la configuración inicial.

Historia y evolución de Bolt.new#

Bolt.new fue creado por el equipo detrás de StackBlitz, una empresa fundada en 2017 por Eric Simons y Albert Pai. StackBlitz fue pionera con WebContainers, un runtime basado en WebAssembly nativo del navegador capaz de ejecutar entornos Node.js directamente en el navegador. Esto eliminó la necesidad de servidores en la nube o instalaciones locales al desarrollar aplicaciones modernas de JavaScript.

En 2023, StackBlitz enfrentó un punto de inflexión. El crecimiento se había desacelerado y el equipo exploró una dirección más radical: combinar WebContainers con IA para generar aplicaciones funcionales a partir de prompts en lenguaje natural.

Este experimento se convirtió en Bolt.new, que se lanzó públicamente en octubre de 2024. En pocas semanas, ganó tracción significativa entre desarrolladores por su simplicidad y velocidad. La herramienta combinó todo lo que StackBlitz había construido durante años: aislamiento de runtime, instalación rápida de dependencias y entornos compartibles, con una interfaz de IA que comprendía los objetivos comunes de desarrollo.

Bolt.new supuso un cambio en la creación de herramientas de desarrollo: en lugar de solo escribir código más rápido, los desarrolladores ahora podían comenzar con código que ya estaba en ejecución, adaptado a su intención.

Guía: Usa Logto y Bolt.New para añadir una experiencia de inicio de sesión personalizada#

Registra una app en la consola de Logto#

En este ejemplo, utilicé Bolt.new para crear una app de CMS. Omití la fase del prompt y fui directo al grano: le pedí al agente que construyera un CMS con Logto como proveedor de autenticación.

Según las instrucciones, necesitaba proporcionar dos piezas clave de información:

1. Logto endpoint
2. App ID

Como la app es una aplicación React de una sola página, no se necesita un secreto de app. El agente se encargó del resto: instaló la última Logto React SDK, configuró los componentes de autenticación e interconectó todo.

Para completar la configuración, fui a la Consola de Logto Cloud, creé una nueva aplicación de una sola página y copié el endpoint de Logto y el App ID en Bolt.new.

Luego configura las URIs de redirección y las URIs de redirección post-cierre de sesión.

Un detalle importante: como Bolt.new funciona en el navegador y no en un IDE local, no puedes utilizar http://localhost:3000/ como tu URI de redirección. En su lugar, asegúrate de usar la URL de vista previa que aparece en la pestaña del navegador de Bolt.new.

Personaliza la experiencia de inicio de sesión preconstruida de Logto#

Logto proporciona un flujo de inicio de sesión preconstruido y configurable que puedes personalizar en la Consola. Para empezar, ve a Sign-in Experience > Sign-in & Sign-up, luego elige tus métodos preferidos de inicio de sesión (como correo electrónico, nombre de usuario, número de teléfono o login social).

Una vez configurado, al activar el flujo de inicio de sesión se redirigirá a los usuarios a la página de inicio de sesión alojada por Logto, con las opciones seleccionadas. Todo el proceso de autenticación es gestionado por Logto y los usuarios regresan a tu app después de iniciar sesión.

Crea un panel de login flotante sobre tu producto#

Ahora quiero ir un paso más allá y construir una experiencia de inicio de sesión más personalizada, similar a la que ofrece Perplexity. En vez de redirigir a una página aparte, pondré un panel flotante de login directamente encima de la interfaz del producto. Así los usuarios permanecen en contexto mientras se sigue usando el flujo de autenticación de Logto en segundo plano.

Solo usé este prompt:

Quiero que la página de inicio de sesión se vea mejor, solo un fondo sencillo con dos botones: uno para "Iniciar sesión" y otro para "Crear cuenta". Cada botón debe redirigir a una pantalla distinta, manejada por Logto. Usando la experiencia de primera pantalla documentada en Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

Lo bueno es que, al hacer clic en Iniciar sesión, se va directamente a la página de inicio de sesión. Si haces clic en Crear cuenta, se abre directamente la pantalla de creación de cuenta.

Añade flujos sociales#

Puedes proporcionar al agente la documentación de inicio de sesión directo de Logto junto a un prompt como “añade flujos de login social.” Esto permite saltarse la pantalla de inicio predeterminada de Logto. Por ejemplo, al hacer clic en el botón Google Sign-In se lanza inmediatamente el flujo de autenticación de Google, brindando a los usuarios una experiencia de login más rápida y amigable.

La próxima actualización de Logto soportará integración de autenticación potenciada por IA#

Esto es solo un ejemplo básico. Logto actualmente está desarrollando servidores MCP que se ejecutan directamente en tu IDE, permitiéndote interactuar con la Consola de Logto y la Management API sin salir del entorno de desarrollo.

Con esta configuración, podrás:

1. Crear y gestionar usuarios
2. Ver y filtrar registros (logs)
3. Configurar flujos de login y registro
4. Definir recursos de API, permisos y roles
5. Gestionar aplicaciones y configuraciones de acceso
6. Y mucho más

Combinando herramientas locales con IA y la infraestructura de Logto, la autenticación deja de ser un paso doloroso de integración y se convierte en parte natural de tu flujo de desarrollo.