Plataforma de desenvolvimento web full-stack com IA da StackBlitz que gera, executa e implanta aplicações inteiramente no navegador.
| Comando | Descrição |
|---|
Navegar para bolt.new | Abrir o Bolt.new no navegador |
| Entrar com GitHub ou Google | Criar conta para persistência de projetos |
| Digitar um prompt no chat | Começar a construir uma aplicação |
| Clicar em “Deploy” quando pronto | Implantar no Netlify ou outros hosts |
| Fork para StackBlitz | Continuar editando na IDE do StackBlitz |
| Baixar projeto | Obter o código-fonte como zip |
Bolt.new Architecture:
1. You describe what you want in natural language
2. AI generates the full project (frontend + backend + config)
3. WebContainer runs the app in-browser (no server needed)
4. Live preview updates as AI makes changes
5. You iterate by chatting — AI modifies code in real-time
6. Deploy directly to Netlify or download source
Technology: Runs on StackBlitz WebContainers
- Node.js runs IN the browser (not a remote server)
- npm install, build, and dev server all run locally
- No Docker, no VMs, no cloud compute
| Estilo de Prompt | Descrição |
|---|
| ”Build a todo app with React and Tailwind” | Especificar framework e estilização |
| ”Create a REST API with Express and MongoDB” | Prompt focado em backend |
| ”Make a landing page for a SaaS product” | Prompt focado em design |
| ”Add authentication with email/password” | Adicionar funcionalidades ao projeto existente |
| ”Fix the bug where the form doesn’t submit” | Depurar problemas existentes |
| ”Change the color scheme to dark mode” | Modificações de estilo |
| ”Add a dashboard page with charts” | Solicitação de nova página/funcionalidade |
| ”Refactor the code to use TypeScript” | Melhorias na qualidade do código |
Good prompts:
"Build a blog platform with Next.js, Tailwind CSS,
and MDX support. Include a homepage listing posts,
individual post pages, and a tag filtering system."
"Create a weather dashboard using React that fetches
from the OpenWeatherMap API. Show current weather,
5-day forecast, and a search by city feature."
Bad prompts:
"Make me a website" → Too vague
"Build Facebook" → Too broad
"Fix everything" → No specific target
Tips:
- Specify the tech stack (React, Vue, Svelte, etc.)
- Describe the features you need
- Mention styling preferences (Tailwind, CSS modules)
- Reference specific APIs or data sources
- Break large apps into incremental prompts
| Framework | Descrição |
|---|
| React | Biblioteca de UI baseada em componentes |
| Next.js | Framework React com SSR/SSG |
| Vue.js | Framework JavaScript progressivo |
| Nuxt | Framework Vue com SSR/SSG |
| Svelte | Framework reativo em tempo de compilação |
| SvelteKit | Framework full-stack Svelte |
| Astro | Construtor de sites estáticos focado em conteúdo |
| Solid.js | Biblioteca de UI reativa de granularidade fina |
| Angular | Framework TypeScript completo |
| Framework | Descrição |
|---|
| Express.js | Framework web minimalista para Node.js |
| Fastify | Framework web rápido para Node.js |
| Hono | Framework leve edge-first |
| NestJS | Framework empresarial TypeScript |
| tRPC | APIs com tipagem segura de ponta a ponta |
| Remix | Framework React full-stack |
| Biblioteca | Descrição |
|---|
| Tailwind CSS | Framework CSS utilitário |
| shadcn/ui | Biblioteca de componentes React |
| DaisyUI | Biblioteca de componentes Tailwind |
| Material UI | Sistema de design do Google para React |
| Chakra UI | Componentes React acessíveis |
| Radix UI | Componentes acessíveis sem estilo |
| Comando | Descrição |
|---|
| Clicar no arquivo na barra lateral | Abrir arquivo no editor |
| Editar código diretamente | Alterações manuais no código |
Ctrl + S | Salvar alterações no arquivo |
| Clique direito no arquivo → Novo Arquivo | Criar novo arquivo |
| Clique direito no arquivo → Excluir | Remover arquivo |
| Clique direito na pasta → Nova Pasta | Criar diretório |
| Alterações de arquivo detectadas automaticamente | Hot reload atualiza a visualização |
| Comando | Descrição |
|---|
| Clicar no painel do terminal na parte inferior | Acessar o terminal do WebContainer |
npm install package | Instalar pacotes npm |
npm run dev | Iniciar servidor de desenvolvimento |
npm run build | Compilar para produção |
npx prisma migrate dev | Executar migrações do Prisma |
node script.js | Executar scripts Node.js |
| Comando | Descrição |
|---|
| ”Add a navbar with logo and links” | Adicionar novos componentes |
| ”Make the button bigger and blue” | Modificações de estilo |
| ”Add form validation for email” | Adicionar funcionalidade |
| ”The page crashes when I click submit” | Relatórios de bugs |
| ”Show loading spinner while data fetches” | Melhorias de UX |
| ”Add error handling for the API call” | Robustez |
| ”Make it responsive for mobile” | Design responsivo |
| ”Add dark mode toggle” | Alternância de tema |
| Comando | Descrição |
|---|
| Histórico do chat mostra todas as alterações | Rastrear o que a IA modificou |
| ”Undo the last change” | Reverter modificações da IA |
| ”Go back to the version with the blue header” | Referenciar estados anteriores |
| Baixar projeto a qualquer momento | Salvar snapshots localmente |
| Fork para StackBlitz para git | Integração completa com git |
| Comando | Descrição |
|---|
| Clicar no botão “Deploy” | Iniciar processo de implantação |
| Conectar conta Netlify | Autorizar acesso ao Netlify |
| Compilação e implantação automáticas | Obtém uma URL ativa em segundos |
| Suporte a domínio personalizado | Configurar no painel do Netlify |
| HTTPS incluído | Certificados SSL automáticos |
| Comando | Descrição |
|---|
| Baixar projeto → implantar manualmente | Qualquer provedor de hospedagem |
| Fork para StackBlitz → conectar CI/CD | Implantação baseada em GitHub |
| Fork para GitHub → auto-deploy Vercel/Netlify | Fluxos de trabalho baseados em Git |
Baixar → npm run build → fazer upload de dist/ | Hospedagem estática manual |
Deployment workflow:
1. Click "Deploy" in Bolt.new
2. Select Netlify (or connect account)
3. Bolt.new builds the project
4. Uploads to Netlify automatically
5. Get your live URL: https://your-app.netlify.app
For custom domains:
1. Deploy first to get Netlify URL
2. Go to Netlify dashboard → Domain settings
3. Add your custom domain
4. Update DNS records at your registrar
| Recurso | Descrição |
|---|
| Node.js executa no navegador | Nenhum servidor remoto necessário |
| Suporte a npm/yarn/pnpm | Gerenciamento completo de pacotes |
| Sistema de arquivos no navegador | Sistema de arquivos virtual |
| Servidor de desenvolvimento no navegador | Hot reload com URLs locais |
| Docker não é necessário | Tudo executa no lado do cliente |
| Funciona offline (após o carregamento) | Internet contínua não é necessária |
What runs in WebContainers:
✓ Node.js (most recent LTS)
✓ npm, yarn, pnpm
✓ TypeScript compilation
✓ Vite, Webpack, esbuild
✓ Express, Fastify, Hono
✓ SQLite (in-memory)
✓ Prisma (with SQLite)
✓ File system operations
What does NOT run:
✗ Docker containers
✗ PostgreSQL / MySQL / MongoDB
✗ Native binary dependencies
✗ Python / Ruby / Go
✗ System-level operations
✗ Long-running background processes
| Banco de Dados | Descrição |
|---|
| SQLite (em memória) | Funciona diretamente no WebContainer |
| Prisma + SQLite | ORM com banco de dados local |
| Supabase (remoto) | PostgreSQL via API |
| Firebase (remoto) | NoSQL via Firebase SDK |
| Turso (remoto) | SQLite de borda via libSQL |
| PlanetScale (remoto) | MySQL via API |
For local development in Bolt.new:
SQLite + Prisma is the best combo
- Runs entirely in WebContainer
- No external services needed
- Full ORM with migrations
For production:
Connect to a hosted database
- Supabase (free tier: 500MB)
- Turso (free tier: 9GB)
- PlanetScale (free tier: 5GB)
Set connection strings as environment variables
| Template | Descrição |
|---|
| ”React + Vite + Tailwind starter” | SPA React moderno |
| ”Next.js app with shadcn/ui” | React full-stack |
| ”Express API with Prisma + SQLite” | Backend com API REST |
| ”Vue + Nuxt + Tailwind” | Vue full-stack |
| ”Svelte + SvelteKit” | Svelte full-stack |
| ”Astro blog with MDX” | Site de conteúdo |
| ”Landing page with Tailwind” | Página de marketing |
-
Comece com um prompt claro e específico — Descreva o tech stack, funcionalidades e preferências de design logo no início. “Build a task manager with React, Tailwind, and localStorage persistence” obtém resultados melhores do que “make a todo app.”
-
Construa incrementalmente — Comece com a funcionalidade principal, verifique se funciona e depois adicione funcionalidades uma de cada vez. Cada prompt deve focar em uma coisa em vez de solicitar tudo de uma vez.
-
Referencie o código ao depurar — Em vez de “it doesn’t work”, diga “the handleSubmit function in ContactForm.tsx doesn’t send the POST request” para correções mais direcionadas.
-
Use o terminal para verificação — Verifique a saída do terminal para erros de compilação, dependências faltando ou problemas em tempo de execução antes de pedir à IA para depurar.
-
Baixe backups regularmente — Baixe seu projeto periodicamente como rede de segurança. Projetos baseados em navegador podem ser perdidos se você limpar os dados do navegador.
-
Especifique versões de pacotes quando necessário — Se você precisa de uma versão específica de biblioteca, mencione: “Use react-query v5” ou “Use Tailwind CSS v3, not v4.”
-
Faça fork para o StackBlitz para edição avançada — Quando precisar de git, múltiplos terminais ou fluxos de trabalho mais complexos, faça fork do projeto para a IDE completa do StackBlitz.
-
Use variáveis de ambiente para segredos — Nunca inclua chaves de API diretamente nos prompts. Peça à IA para usar variáveis de ambiente e configure-as na plataforma de implantação.
-
Escolha SQLite para bancos de dados no navegador — Como os WebContainers não conseguem executar PostgreSQL ou MySQL, use SQLite com Prisma para desenvolvimento local e troque para um banco de dados hospedado para produção.
-
Aproveite a paleta de comandos — Pressione Ctrl + K para pesquisar arquivos rapidamente, executar comandos e navegar no seu projeto sem clicar pelos menus.
