O que é o Bolt.New#

Bolt.new é uma ferramenta baseada no navegador para gerar e executar aplicações web full-stack instantaneamente. Construída sobre a tecnologia WebContainer da StackBlitz, oferece aos programadores uma stack limpa e pré-configurada que inclui Next.js (App Router), Tailwind CSS, Supabase, Prisma e ShadCN UI. Todo o ambiente funciona localmente no navegador, sem instalações, sem passos de construção na cloud e sem necessidade de registo.

Ao contrário de ferramentas que se concentram na programação assistida por IA dentro de um projeto existente, o Bolt.new foca-se no início do processo de desenvolvimento. Remove a sobrecarga de configurar a estrutura do projeto, dependências e servidores locais, permitindo que passes da ideia ao protótipo funcional em segundos.

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

Enquanto ferramentas como o Cursor e o Lovable funcionam como copilotos de IA dentro do teu editor de código, o Bolt.new concentra-se noutro objetivo: geração e execução instantânea de projetos full-stack.

• O Cursor melhora os fluxos de trabalho no VS Code com IA, ajudando-te a editar ou gerar código no teu ambiente existente.
• O Bolt.new cria uma aplicação funcional a partir do zero com base num prompt ou template e executa-a instantaneamente no navegador usando WebContainers.

Não há dependência de ferramentas locais nem de VMs remotas em cloud. Tudo corre no navegador com suporte nativo para Node.js, gestão de pacotes e desenvolvimento full-stack. Isto torna-o especialmente indicado para prototipagem rápida e experimentação local, sobretudo em contextos de projetos de IA ou SaaS.

Para quem é o Bolt.new?#

O Bolt.new foi desenhado para programadores que frequentemente começam do zero, tais como:

• Indie hackers a validar ideias de produto
• Criadores de IA a testar fluxos ou a incorporar modelos
• Fundadores a prototipar MVPs
• Engenheiros a criar ferramentas internas ou demonstrações

Estes utilizadores gostam de stacks web modernas e preferem ferramentas rápidas, limpas e não opinativas. O Bolt.new não é um construtor visual de sites nem uma plataforma guiada por tutoriais. Pressupõe conhecimentos práticos em React e desenvolvimento full-stack, mas elimina fricção de configuração.

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

O Bolt.new foi criado pela equipa da StackBlitz, uma empresa fundada em 2017 por Eric Simons e Albert Pai. A StackBlitz inovou com os WebContainers, um runtime nativo no navegador baseado em WebAssembly, capaz de executar ambientes Node.js diretamente no browser. Isto eliminou a necessidade de servidores cloud ou instalações locais para desenvolver aplicações JavaScript modernas.

Em 2023, a StackBlitz atravessou um ponto de viragem. O crescimento tinha abrandado e a equipa investigou uma direção mais radical: combinar WebContainers com IA para gerar aplicações completas a partir de prompts em linguagem natural.

Esta experiência deu origem ao Bolt.new, lançado publicamente em outubro de 2024. Em poucas semanas, ganhou tração significativa entre programadores, pela sua simplicidade e velocidade. A ferramenta juntou tudo o que a StackBlitz construiu ao longo dos anos — isolamento do runtime, instalação rápida de dependências e ambientes partilháveis — a uma interface de IA que compreende os objetivos comuns do desenvolvimento.

O Bolt.new marcou uma mudança nas ferramentas de desenvolvimento: em vez de apenas escrever código mais depressa, os programadores podiam agora começar com código já em execução, adaptado à sua intenção.

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

Regista uma aplicação no console do Logto#

Neste exemplo, usei o Bolt.new para criar uma aplicação CMS. Passei a fase do prompt e fui direto ao assunto: pedi ao agente para criar um CMS com o Logto como fornecedor de autenticação.

Segundo as instruções, eram necessárias duas informações-chave:

1. Endpoint do Logto
2. ID da App

Como a aplicação é uma single-page em React, não é necessário segredo da aplicação. O agente tratou do resto: instalou o mais recente Logto React SDK, configurou os componentes de autenticação e ligou tudo.

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

Depois, configura os URIs de Redirecionamento e os URIs de redireccionamento após logout.

Um detalhe importante: como o Bolt.new funciona no navegador e não num IDE local, não podes usar http://localhost:3000/ como URI de redirecionamento. Em vez disso, certifica-te de usar o URL de pré-visualização mostrado no separador do Bolt.new.

Personalizar a experiência predefinida de login do Logto#

O Logto disponibiliza um fluxo de login predefinido personalizável através do Console. Para começar, vai a Experiência de Início de Sessão > Iniciar sessão & Registar, depois escolhe os métodos de início de sessão preferidos (por exemplo, email, nome de utilizador, número de telefone ou login social).

Depois de configurado, iniciar o fluxo de autenticação irá redirecionar os utilizadores para a página de login do Logto com as opções selecionadas. Todo o processo de autenticação é gerido pelo Logto e, após iniciarem sessão, os utilizadores regressam à tua aplicação.

Criar um painel de login flutuante por cima do teu produto#

Agora quero ir mais longe e construir uma experiência de login ainda mais personalizada, semelhante ao que a Perplexity oferece. Em vez de redirecionar para outra página, vou colocar um painel de login flutuante diretamente por cima do UI do produto. Assim, os utilizadores mantêm o contexto, mas continuam a usar o fluxo de autenticação Logto por trás.

Basta usar este prompt:

Quero que a página de login fique mais apelativa, apenas um fundo simples com dois botões: um para “Iniciar Sessão” e outro para “Criar Conta”. Cada botão deve redirecionar para um ecrã diferente, gerido pelo Logto. Usando a experiência de "primeiro ecrã" documentada no Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

O melhor é que, ao clicar em Iniciar Sessão, vai diretamente para a página de login. Se clicares em Criar Conta, abre imediatamente o ecrã de criação de conta.

Adicionar fluxos sociais#

Podes fornecer ao agente a documentação de login direto do Logto juntamente com um prompt do tipo "adicionar fluxos de login social". Assim, podes saltar o ecrã inicial padrão do Logto. Por exemplo, ao clicar no botão Iniciar Sessão com Google, será iniciado imediatamente o fluxo de autenticação Google, proporcionando uma experiência de login mais rápida e amigável.

Próxima atualização do Logto vai suportar integração auth alimentada por IA#

Este é apenas um exemplo básico. O Logto está atualmente a desenvolver servidores MCP a correr diretamente no teu IDE, permitindo-te interagir com o Logto Console e a Management API sem saíres do teu ambiente de desenvolvimento.

Com esta configuração, vais poder:

1. Criar e gerir utilizadores
2. Ver e filtrar logs
3. Configurar fluxos de login e registo
4. Definir recursos de API, permissões e funções
5. Gerir aplicações e definições de acesso
6. E muito mais

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