O que é Bolt.New#

Bolt.new é uma ferramenta baseada no navegador para gerar e rodar aplicações web full-stack instantaneamente. Construída sobre a tecnologia WebContainer da StackBlitz, oferece aos desenvolvedores uma stack limpa e pré-configurada incluindo Next.js (App Router), Tailwind CSS, Supabase, Prisma e ShadCN UI. Todo o ambiente roda localmente no navegador, sem instalações, etapas de build na nuvem, ou necessidade de cadastro.

Diferente de ferramentas que focam em codificação assistida por IA dentro de um projeto existente, o Bolt.new foca no início do processo de desenvolvimento. Ele remove a sobrecarga de configuração de estrutura de projeto, dependências e servidores locais, permitindo que você vá da ideia ao protótipo funcional em segundos.

Como o Bolt.new é diferente do Cursor ou Lovable?#

Enquanto ferramentas como o Cursor e o Lovable servem como copilotos de IA dentro do seu editor de código, o Bolt.new foca em algo totalmente diferente: geração instantânea e execução de projetos full-stack.

• O Cursor aprimora fluxos de trabalho do VS Code com IA, ajudando você a editar ou gerar código no seu ambiente atual.
• O Bolt.new cria um app funcional do zero baseado em um prompt ou modelo, e o executa instantaneamente no navegador usando WebContainers.

Não há dependência de ferramentas locais ou VMs em nuvem remotas. Tudo roda dentro do navegador com suporte nativo a Node.js, gerenciamento de pacotes e desenvolvimento full-stack. Isso o torna especialmente adequado para prototipagem rápida e experimentação local-first, especialmente em contextos de projetos de IA ou SaaS.

Para quem é o Bolt.new?#

Bolt.new foi criado para desenvolvedores que frequentemente começam do zero, como:

• Indie hackers validando ideias de produto
• Construtores de IA testando fluxos de trabalho ou embutindo modelos
• Fundadores prototipando MVPs
• Engenheiros criando ferramentas internas ou demonstrações

Esses usuários normalmente têm domínio do stack web moderno e preferem ferramentas rápidas, limpas e sem muitas opiniões. Bolt.new não é um construtor visual de sites nem uma plataforma guiada por tutoriais. Ele parte do pressuposto que você conhece React e desenvolvimento full-stack, mas elimina atritos na configuração inicial.

A história e evolução do Bolt.new#

Bolt.new foi criado pela equipe por trás da StackBlitz, uma empresa fundada em 2017 por Eric Simons e Albert Pai. A StackBlitz foi pioneira nos WebContainers, um runtime nativo de browser baseado em WebAssembly capaz de executar ambientes Node.js direto no navegador. Isso eliminou a necessidade de servidores em nuvem ou instalações locais ao desenvolver aplicações modernas em JavaScript.

Em 2023, a StackBlitz chegou a um ponto de virada. O crescimento havia desacelerado e a equipe explorou um caminho mais radical: combinar WebContainers com IA para gerar aplicações totalmente funcionais a partir de prompts em linguagem natural.

Esse experimento virou o Bolt.new, lançado publicamente em outubro de 2024. Em poucas semanas, conquistou muitos desenvolvedores por sua simplicidade e velocidade. A ferramenta reunia tudo que a StackBlitz havia desenvolvido por anos: isolamento de runtime, instalação de dependências rápida e ambientes compartilháveis, com uma interface IA que entendia objetivos comuns de desenvolvimento.

O Bolt.new marcou uma mudança nas ferramentas de desenvolvimento: ao invés de apenas escrever código mais rápido, os desenvolvedores podiam agora começar com o código já rodando, alinhado com sua intenção.

Guia: Use Logto e Bolt.New para adicionar uma experiência de login personalizada#

Cadastre um app no console do Logto#

Neste exemplo, usei o Bolt.new para criar um app CMS. Pulei a fase de prompt e fui direto ao ponto: pedi ao agente para construir um CMS com o Logto como provedor de autenticação.

Segundo as instruções, precisei informar dois dados essenciais:

1. Endpoint do Logto
2. App ID

Como o app é uma aplicação React de página única, não é necessário segredo de app. O agente cuidou do resto: instalou o Logto React SDK mais recente, configurou os componentes de autenticação e conectou tudo.

Para concluir a configuração, fui ao Logto Cloud Console, criei uma nova aplicação single-page e copiei o endpoint e o App ID do Logto para o Bolt.new.

Depois, configure as Redirect URIs e os Post sign-out redirect URIs.

Um ponto importante: como o Bolt.new é baseado no navegador e não em um IDE local, você não pode usar http://localhost:3000/ como seu redirect URI. Em vez disso, use a URL de preview mostrada na aba do Bolt.new no navegador.

Personalize a experiência de login pronta do Logto#

O Logto oferece um fluxo de login pré-construído e configurável que você pode personalizar no Console. Para começar, acesse Sign-in Experience > Sign-in & Sign-up, depois escolha seus métodos de login preferidos (como email, nome de usuário, telefone ou login social).

Depois de configurado, acionar o fluxo de login irá redirecionar os usuários para a página de login hospedada pelo Logto com as opções selecionadas. Todo o processo de autenticação é feito pelo Logto, retornando o usuário para seu app após o login.

Crie um painel de login flutuante em cima do seu produto#

Agora eu quero dar um passo além e construir uma experiência de login ainda mais personalizada, como a que a Perplexity oferece. Em vez de redirecionar para outra página, vou colocar um painel de login flutuante direto sobre a interface do produto. Assim, os usuários permanecem no contexto enquanto o fluxo de autenticação do Logto roda por baixo dos panos.

Então, só uso este prompt:

Quero deixar a página de login mais bonita, apenas um fundo simples com dois botões: um para “Entrar” e outro para “Criar Conta”. Cada botão deve enviar para uma tela diferente, gerenciada pelo Logto. Usando a experiência de first-screen documentada no Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

A parte interessante é que, ao clicar em Entrar, vai diretamente para a página de login. Se clicar em Criar Conta, abre direto a tela de criação de conta.

Adicione fluxos sociais#

Você pode passar para o agente a documentação de login direto do Logto junto com um prompt como “adicionar fluxos de login social”. Isso permite pular a tela padrão do Logto. Por exemplo, ao clicar no botão Entrar com Google, o fluxo de autenticação do Google será aberto imediatamente, oferecendo uma experiência mais rápida e amigável para o usuário.

O próximo update do Logto terá integração de autenticação com IA#

Este é apenas um exemplo básico. O Logto está atualmente desenvolvendo servidores MCP que rodam dentro do seu IDE, permitindo que você interaja com o Logto Console e a Management API sem sair do seu ambiente de desenvolvimento.

Com essa configuração, você poderá:

1. Criar e gerenciar usuários
2. Visualizar e filtrar logs
3. Configurar fluxos de login e cadastro
4. Definir recursos de API, permissões e funções
5. Gerenciar aplicativos e configurações de acesso
6. E muito mais

Ao combinar ferramentas locais com IA e a infraestrutura do Logto, a autenticação deixa de ser um passo doloroso de integração e passa a ser parte natural do seu fluxo de desenvolvimento.