Tutoriais
Bolt.new: Tutorial Completo para Iniciantes
Bolt.new é uma IDE no browser com IA integrada. Você descreve o que quer, a IA escreve o código, e você pode editar, instalar pacotes e fazer deploy.
DevDoido
Carregando
Bolt.new é uma IDE no browser com IA integrada. Você descreve o que quer, a IA escreve o código, e você pode editar, instalar pacotes e fazer deploy.
Bolt.new é uma IDE no browser com IA integrada. Você descreve o que quer, a IA escreve o código, e você pode editar, instalar pacotes e fazer deploy. Tudo sem sair do navegador.
Bolt.new é uma plataforma de desenvolvimento criada pela StackBlitz — a mesma empresa por trás do StackBlitz IDE online que muitos devs usam para testar código. Mas o Bolt vai muito além disso. É um ambiente de desenvolvimento completo que roda no browser, com IA que não só escreve código mas entende o contexto do projeto inteiro.
A tecnologia central se chama WebContainers. É uma forma de rodar Node.js no browser via WebAssembly, o que significa que você tem um ambiente de desenvolvimento de verdade — com sistema de arquivos, terminal, servidor de desenvolvimento — sem instalar nada na sua máquina. Isso é tecnicamente impressionante e genuinamente útil.
O que diferencia o Bolt dos outros geradores de código com IA é que ele mantém o projeto inteiro em contexto. Quando você pede uma mudança, ele vê todos os seus arquivos, entende a arquitetura, e faz a edição de forma coerente. Não é um gerador de snippet isolado — é um co-desenvolvedor que conhece o projeto.
Para que serve? Para validar ideias rápido. Para criar MVPs. Para aprender experimentando. Para criar projetos pessoais sem configurar ambiente. Para devs que querem prototipar sem overhead. Para não-devs que querem criar produtos web funcionais. O Bolt serve pra muita coisa diferente dependendo de quem usa.
Acessa bolt.new e cria sua conta com GitHub ou Google — demora 30 segundos. O plano gratuito dá uma quantidade de tokens diários suficiente para explorar e criar projetos pequenos. Se você vai usar sério, considera o Pro ($20/mês) logo de cara para evitar frustração com limites.
A interface do Bolt tem 4 áreas principais. No lado esquerdo: o chat onde você conversa com a IA e descreve o que quer. No centro: o editor de código com syntax highlighting e as opções de editar manualmente se quiser. À direita: o preview ao vivo do projeto — atualiza em tempo real conforme o código muda. E embaixo: o terminal integrado onde você vê os logs, pode rodar comandos npm e ver erros.
O explorador de arquivos fica no lado esquerdo, acima do chat. Você clica em qualquer arquivo para ver e editar o código. A IA pode editar múltiplos arquivos de uma vez — e você vai ver as mudanças aparecendo em tempo real, arquivo por arquivo, como um diff animado. É visualmente satisfatório e deixa claro o que mudou.
Para o primeiro projeto, vamos criar uma landing page simples mas profissional. No campo de chat, digita algo como: 'Cria uma landing page para uma ferramenta de gerenciamento de tarefas chamada TaskFlow. Inclui hero section com headline impactante e CTA, seção de features com 3 cards, seção de depoimentos com 3 clientes e seção de pricing com plano Free e Pro ($29/mês). Design moderno com Tailwind, cores azul e branco, fonte sans-serif limpa.'
Aperta Enter e assiste a mágica acontecer. O Bolt vai começar a criar os arquivos — você vai ver o explorador de arquivos sendo populado, o código aparecendo no editor, e o preview carregando à direita. Pode levar uns 30-60 segundos para projetos simples. O resultado vai ser uma landing page decente que você pode iterar.
Após o primeiro projeto, você entende a dinâmica básica. Agora vamos construir algo com mais substância: um aplicativo de gerenciamento de tarefas com funcionalidade real.
No chat, descreve o projeto completo de uma vez. 'Cria um app React de lista de tarefas (To-Do) com as seguintes funcionalidades: adicionar tarefas com título e prioridade (alta/média/baixa), marcar como concluída, deletar, filtrar por status (todas/pendentes/concluídas), filtrar por prioridade. Interface limpa com Tailwind, sidebar com filtros à esquerda, lista de tarefas à direita. Cada tarefa é um card com checkbox, título, badge de prioridade colorido e botão de deletar. Estado salvo no localStorage.' Esse nível de detalhe gera um resultado muito mais próximo do que você quer.
Quando o projeto base estiver pronto, você itera via chat. 'Adiciona a funcionalidade de arrastar e soltar para reordenar tarefas.' 'Adiciona um contador de tarefas pendentes no título da aba do browser.' 'Quando não há tarefas, mostra uma ilustração de caixa vazia com texto encorajador.' Cada pedido muda o projeto e o preview atualiza. É uma experiência de desenvolvimento incrivelmente rápida.
O Bolt consegue integrar APIs externas. Por exemplo: 'Adiciona uma funcionalidade de clima na sidebar que mostra a temperatura atual usando a API do OpenMeteo (é gratuita, não precisa de key). Localização fixa em São Paulo inicialmente, com botão para pegar localização do usuário.' O Bolt vai escrever o código de fetch, tratar erros e atualizar a UI. Funciona de primeira na maioria dos casos.
O terminal no Bolt é funcional de verdade. Você pode rodar npm install de pacotes que a IA não instalou automaticamente. Pode executar scripts de build, de teste, de geração de arquivos. Pode ver logs de erros em tempo real. Para quem tem algum conhecimento técnico, isso dobra a utilidade da ferramenta — você não precisa pedir tudo para a IA, pode executar operações diretamente.
Dá pra importar projetos do GitHub diretamente no Bolt. Na tela inicial, tem a opção 'Import from GitHub' — você cola a URL do repositório e ele clona, instala dependências e abre tudo pronto para editar. Isso é especialmente útil para pegar um projeto open source e customizar, ou para continuar um projeto que você começou localmente.
Para projetos que precisam persistir dados além do localStorage, o Supabase é a integração mais simples. Cria uma conta no Supabase (free tier é generoso), cria um projeto, pega a URL e a anon key. Nas configurações do projeto no Bolt, você adiciona essas variáveis de ambiente. Daí no chat: 'Migra o armazenamento das tarefas para o Supabase. Usa a tabela tasks com campos id, title, priority, completed, user_id e created_at. Cria as migrations necessárias.' O Bolt escreve toda a integração.
Com Supabase conectado, auth fica fácil. 'Adiciona autenticação com email e senha usando Supabase Auth. Cria uma tela de login e cadastro. Usuários não autenticados não veem as tarefas. Cada usuário vê apenas suas próprias tarefas.' O Bolt implementa o fluxo completo — páginas de login/cadastro, proteção de rotas, associação de dados ao usuário logado. Isso que levaria dias para um iniciante agora leva minutos.
O deploy é a parte mais satisfatória do Bolt. No canto superior direito, tem o botão 'Deploy'. Clica, conecta sua conta Netlify (cria uma se não tiver — é gratuita), e em 2-3 minutos o projeto está no ar com uma URL no formato seu-projeto.netlify.app. A Netlify trata do build, do CDN global, do HTTPS automático. Zero configuração adicional necessária.
Toda vez que você faz mudanças no Bolt e quer atualizar o site ao vivo, você clica em Deploy novamente. O processo é o mesmo e leva os mesmos 2-3 minutos. Para projetos de produção com atualizações frequentes, você vai querer configurar um repositório GitHub e CI/CD automático — mas para começar, o fluxo manual é perfeito.
Com o projeto no Netlify, adicionar um domínio custom é straightforward. Você compra o domínio onde quiser (Cloudflare tem os melhores preços), vai nas configurações do site no Netlify, clica em 'Domain management' e adiciona seu domínio. O Netlify te dá os nameservers para configurar no seu registrador. Em 10-30 minutos o domínio propaga e você tem HTTPS gratuito automático via Let's Encrypt.
Prompts específicos batem prompts genéricos sempre. Em vez de 'cria um site bonito', tente 'cria uma landing page com hero section com headline em 2 linhas, parágrafo de 3 frases, botão CTA azul, imagem mockup do produto à direita. Cores: fundo branco, texto escuro, acentos em #3B82F6. Grid de 3 features com ícone, título e 2 linhas de descrição. Responsivo para mobile com imagem escondida em telas pequenas.'
Outra dica: descreve o que você não quer. 'Sem animações excessivas. Sem gradientes coloridos. Sem fontes serif.' Isso evita que a IA 'criativa' vá em direção de estilos que você não gosta. Negativas são tão poderosas quanto positivas em prompts.
Para mudanças pequenas e pontuais — trocar uma cor, ajustar um tamanho de fonte, mudar um texto — edite diretamente no editor de código. É mais rápido do que esperar a IA processar e reescrever tudo. Para mudanças estruturais — adicionar uma feature, refatorar um componente, integrar uma API — use o chat. A IA vai fazer melhor e mais rápido do que você ajustando manualmente.
Tokens são o 'combustível' do Bolt — cada prompt consome uma quantidade. Projetos grandes consomem mais porque a IA precisa processar mais contexto. Para economizar tokens: faça perguntas mais específicas, evite pedir que a IA 'refaça tudo', prefira iterações pontuais a reformulações completas. Se você chegou no limite diário do plano gratuito, espera até meia-noite (UTC) para recarregar ou considera o plano Pro se vai usar regularmente.
O Bolt tem um teto claro e é honesto reconhecer isso. Para projetos muito grandes — mais de 20-30 arquivos com lógica complexa — a qualidade do código gerado começa a cair. A IA perde consistência entre as partes do projeto, cria duplicações, e às vezes desfaz mudanças anteriores sem querer. É o limite atual da tecnologia, não falha do Bolt especificamente.
Se você precisa de performance de produção, segurança rigorosa, ou lógica de negócio muito específica, o código gerado vai precisar de revisão e refatoração por um dev. Pensa no Bolt como um 'scaffolding inteligente' — ele cria a estrutura, você (ou um dev) refina para produção.
Alternativas para considerar: se você quer qualidade visual melhor, tenta o Lovable. Se você é dev e quer IA no seu editor local, usa Cursor ou Windsurf. Se você precisa só de componentes React, o v0 da Vercel é melhor. O Bolt é o mais flexível e poderoso para uso geral, mas não é a ferramenta certa para todo caso de uso.
Bugs que custaram bilhões