Firecrawl MCP: Como Clonar Qualquer Site

Galera, se você já tentou clonar um site usando IA e ficou frustrado com o resultado genérico, provavelmente tava faltando uma peça no quebra-cabeça: o Firecrawl MCP. Essa ferramenta muda completamente o jogo porque, em vez de a IA chutar como o site é baseado numa descrição vaga, ela lê o HTML real da página e gera código a partir disso.

Nesse tutorial, vou te mostrar como instalar e configurar o Firecrawl MCP no Cursor e no Claude Code, clonar sua primeira página, lidar com sites difíceis e otimizar os resultados. Tudo com exemplos que eu testei de verdade.

O que é Firecrawl MCP e por que você deveria usar

MCP significa Model Context Protocol. É um padrão que conecta ferramentas externas a editores de código com IA. O Firecrawl MCP especificamente conecta o Firecrawl -- um serviço de web scraping inteligente -- ao seu editor. Na prática, quando você pede pro Cursor ou Claude Code clonar um site, a IA chama o Firecrawl nos bastidores, recebe o conteúdo estruturado da página, e usa isso pra gerar o código.

Sem o MCP, a IA trabalha no escuro. Você descreve o site por texto ou manda um screenshot, e ela tenta reproduzir baseado no que entende. Com o Firecrawl MCP, ela lê a estrutura real: tags HTML, classes CSS, textos, links, imagens. O resultado fica absurdamente mais fiel ao original.

Instalação no Cursor: passo a passo

Primeiro, você precisa de uma API key do Firecrawl. Vai em firecrawl.dev, cria uma conta gratuita e copia a chave na aba de API Keys. O plano free vem com 500 créditos por mês, que é o bastante pra uns 500 scrapes.

Se o indicador do MCP não ficar verde, o problema mais comum é a versão do Node. O Firecrawl MCP precisa do Node 18 ou superior. Roda node --version no terminal pra conferir.

Instalação no Claude Code

No Claude Code a instalação é um pouco diferente porque a configuração fica num arquivo JSON. Você precisa editar (ou criar) o arquivo de configuração MCP do Claude Code.

{
  "mcpServers": {
    "firecrawl": {
      "command": "npx",
      "args": ["-y", "firecrawl-mcp"],
      "env": {
        "FIRECRAWL_API_KEY": "fc-sua-chave-aqui"
      }
    }
  }
}

Coloca isso no arquivo ~/.claude/mcp.json (cria o arquivo se não existir). Depois reinicia o Claude Code. Pra testar, pede: 'Use o Firecrawl pra scrappear https://example.com'. Se ele retornar o conteúdo da página em Markdown, tá funcionando.

Clonando sua primeira página

Agora que o MCP tá configurado, vamos clonar uma página de verdade. Vou usar como exemplo uma landing page simples pra ficar didático. O processo é sempre o mesmo: scrape, analise, gere código.

O prompt que dá bons resultados

No Cursor Composer (ou no Claude Code), manda isso: 'Use o Firecrawl pra ler a página https://url-do-site.com. Analise a estrutura, cores, tipografia e layout. Depois, crie uma réplica fiel usando React + Tailwind CSS. Mantenha os mesmos textos e a mesma organização visual.' Simples assim.

A IA vai chamar o Firecrawl automaticamente, receber o conteúdo da página em formato Markdown estruturado, e usar essas informações pra gerar os componentes. Você vai ver a chamada do MCP acontecendo no log -- é transparente.

Refinando o resultado

O primeiro resultado nunca sai 100%. Mas como a IA já tem o conteúdo real do site, os ajustes são menores. Geralmente precisa corrigir espaçamentos, tamanhos de fonte e posicionamento de imagens. Pede os ajustes direto no chat: 'O header tá com padding demais, diminui pra 16px vertical. O botão CTA deveria ser azul #2563eb, não roxo.'

Clonando sites complexos: SPA, autenticação e conteúdo dinâmico

Sites simples com HTML estático são triviais pro Firecrawl. Mas e quando o site é uma SPA (Single Page Application) em React ou Vue? E quando tem conteúdo protegido por login? Aqui as coisas ficam mais interessantes.

SPAs e conteúdo renderizado por JavaScript

O Firecrawl usa um navegador headless por baixo dos panos, então ele executa JavaScript e espera o conteúdo renderizar antes de capturar. Isso significa que SPAs em React, Vue e Angular funcionam normalmente. O conteúdo que aparece pro usuário é o que o Firecrawl captura.

O problema aparece quando o conteúdo carrega por scroll infinito ou interação. Nesse caso, o Firecrawl só pega o que aparece no carregamento inicial. Pra contornar, você pode scrappear páginas específicas em vez da home inteira, ou usar a opção de wait do Firecrawl pra dar tempo do conteúdo carregar.

Sites com autenticação

Dá pra passar cookies e headers customizados nas chamadas do Firecrawl. Se o site exige login, você faz o login manualmente no navegador, copia o cookie de sessão pelo DevTools (Application > Cookies), e passa pro Firecrawl via headers. Não é o processo mais elegante, mas funciona.

Otimizando os resultados do clone

Depois de algumas dezenas de clones, identifiquei padrões que fazem o resultado sair muito melhor. A maioria dos problemas vem de prompts mal elaborados ou de tentar clonar página demais de uma vez.

Firecrawl MCP vs scraping manual

Limitações que você precisa conhecer

O Firecrawl MCP é uma ferramenta poderosa, mas não faz milagre. Aqui vão as limitações reais que encontrei depois de usar por meses.

Primeiro, imagens. O Firecrawl retorna URLs de imagens, mas a IA não baixa nem replica essas imagens. Você vai precisar substituir manualmente ou usar placeholders. Segundo, animações CSS e efeitos de scroll são completamente ignorados -- o scrape pega o estado estático da página.

Terceiro, fontes custom. O Firecrawl identifica o nome da fonte usada no CSS, mas a IA nem sempre instala e configura a fonte corretamente no projeto. Quarto, componentes interativos como carrosséis, modais e dropdowns saem com a estrutura visual mas sem a lógica de interação. Você precisa adicionar o comportamento depois.

Quinto e mais importante: sites com mais de 50 componentes na mesma página vão gerar um contexto grande demais pro editor de IA. A qualidade cai porque a IA não consegue manter coerência em projetos muito extensos. A solução é dividir em partes e montar depois.

Firecrawl MCP precisa de Node.js instalado?

Sim. O Firecrawl MCP roda como um processo Node via npx, então você precisa do Node 18 ou superior. Se você já usa Cursor ou Claude Code, provavelmente já tem o Node instalado. Confere com node --version no terminal.

Quantas páginas dá pra clonar no plano gratuito?

O plano free do Firecrawl vem com 500 créditos por mês. Cada scrape de página simples consome 1 crédito. Então dá pra clonar umas 500 páginas por mês sem pagar nada. Se cada projeto de clone usa entre 3 e 10 scrapes (página principal + subpáginas + iterações), dá pra fazer entre 50 e 150 projetos por mês de graça.

O Firecrawl MCP funciona no VS Code?

O VS Code puro não tem suporte a MCP nativamente. Você precisa do Cursor (que é baseado no VS Code mas com IA integrada) ou do Claude Code (que é CLI). Se você usa VS Code com extensões de IA como Continue ou Cody, alguns deles já suportam MCP, mas a integração não é tão suave quanto no Cursor.

Dá pra combinar Firecrawl MCP com screenshot?

Não só dá como é a técnica que mais recomendo pra resultados de alta fidelidade. O scrape do Firecrawl traz a estrutura e o conteúdo textual, enquanto o screenshot traz a referência visual exata. Manda os dois pro Cursor: 'Use os dados do Firecrawl pra estrutura e textos, e esse screenshot como referência visual pra cores e layout.' O resultado fica bem mais preciso do que usar apenas um dos dois.