🌐 O que o Browser MCP Faz
🎯 Navegacao Web Programatica
O Browser MCP da ao Claude a capacidade de abrir paginas web reais, interagir com elementos da pagina, tirar screenshots e extrair conteudo. Ele usa Puppeteer/Playwright por tras para controlar um navegador Chrome real em modo headless.
- • navigate: Abre qualquer URL no navegador controlado
- • click / fill: Clica em elementos e preenche formularios
- • screenshot: Captura screenshot da pagina atual (consome muitos tokens!)
- • get_text / evaluate_js: Extrai texto da pagina ou executa JavaScript
📊 O Unico MCP Com 'Olhos'
- Nenhum outro MCP permite verificacao visual de UI
- Pode navegar sites JavaScript-heavy (SPAs, React apps)
- Interage como usuario real: clica, preenche, scrolls
💡 Dica Pratica
Sempre prefira get_text sobre screenshot quando possivel. get_text retorna texto puro (poucos tokens) enquanto screenshot envia uma imagem inteira (milhares de tokens). Use screenshot apenas quando a verificacao VISUAL e necessaria - layout, cores, posicionamento.
✓ O que FAZER
- ✓ Usar get_text quando precisa de conteudo textual
- ✓ Usar screenshot apenas para verificacao visual
- ✓ Desconectar apos concluir tarefas web
✗ O que NAO fazer
- ✗ Pedir screenshots 'para ver como esta' sem necessidade
- ✗ Manter Browser ligado durante coding backend
- ✗ Navegar sites pesados sem necessidade
👑 Por Que e Elite
🎯 Poder Insubstituivel
Browser e classificado como 'elite' porque oferece uma capacidade que NENHUM outro MCP replica: acesso visual e interativo a web. Para tarefas de QA visual, web scraping e verificacao de deploy, nao existe alternativa.
- • QA Visual: verifica se o deploy esta renderizando corretamente
- • Web Scraping: extrai dados estruturados de qualquer site
- • Testing: testa flows de usuario (login, checkout, forms)
- • Competitive Intel: analisa sites de concorrentes
📊 Quando O Custo Vale
- Vale quando: a tarefa REQUER ver a web (QA, scraping, UI testing)
- Nao vale quando: voce so precisa de codigo ou dados de API
- Regra: se pode fazer sem ver uma pagina web, nao precisa de Browser
💡 Dica Pratica
O caso de uso com melhor ROI do Browser MCP e QA pos-deploy: 'navegue para meusite.com e verifique se o header, footer e pagina principal estao corretos'. Um unico comando substitui 5-10 minutos de verificacao manual e captura bugs visuais que voce poderia nao notar.
✓ O que FAZER
- ✓ Usar para QA visual apos deploys
- ✓ Usar para scraping de dados nao disponiveis via API
- ✓ Avaliar ROI antes de conectar (custo alto!)
✗ O que NAO fazer
- ✗ Manter conectado 'por precaucao' (custo altissimo)
- ✗ Usar para tarefas que nao requerem acesso web
- ✗ Confiar apenas em screenshots sem validar dados com get_text
⚙️ Instalacao
🎯 Setup com Puppeteer
A instalacao requer Chrome/Chromium instalado no sistema. O MCP usa Puppeteer para controlar o navegador em modo headless (sem interface visual). Se Chrome nao estiver disponivel, a instalacao falhara.
- • Pre-requisito: Chrome ou Chromium instalado no sistema
-
•
Comando:
claude mcp add browser -- npx -y @anthropic/mcp-puppeteer - • Verificacao: Rode /status e confirme que Browser aparece como connected
- • Teste: Peca ao Claude 'navegue para google.com e diga o titulo da pagina'
📊 Troubleshooting da Instalacao
- Se falhar: verifique se Chrome esta instalado (google-chrome --version)
- Em Linux sem GUI: instale chromium-browser (apt install chromium-browser)
- Em Docker: adicione --no-sandbox ao puppeteer args
💡 Dica Pratica
Se voce esta em um servidor sem interface grafica (VPS, Docker), o Chrome headless funciona normalmente mas pode precisar de flags extras. Teste com: npx -y @anthropic/mcp-puppeteer diretamente para ver se ha erros antes de adicionar ao Claude.
✓ O que FAZER
- ✓ Verificar Chrome instalado antes de instalar MCP
- ✓ Testar com navegacao simples apos instalacao
- ✓ Usar headless mode (padrao) em servidores
✗ O que NAO fazer
- ✗ Instalar sem Chrome/Chromium disponivel
- ✗ Ignorar erros de instalacao
- ✗ Tentar usar em ambientes sem suporte a Chrome
💼 Casos de Uso
🎯 Workflows de Alto Valor
O Browser MCP transforma o Claude em um agente web completo. Os casos de uso mais valiosos sao aqueles onde verificacao visual ou interacao web e obrigatoria e nao pode ser substituida por APIs.
- • QA Visual: 'navegue para localhost:3000 e verifique se o layout esta correto'
- • Web Scraping: 'extraia nome e email de todas empresas listadas em diretorio.com/sp'
- • Deploy Check: 'abra producao.com e confirme que a nova feature esta visivel'
- • Competitive: 'compare o pricing de concorrente-a.com vs concorrente-b.com'
📊 ROI por Caso de Uso
- QA Visual: salva 5-10 min por deploy, captura bugs visuais
- Web Scraping: salva horas de coleta manual de dados
- Deploy Check: confianca automatizada que o deploy funcionou
💡 Dica Pratica
Para web scraping em escala, combine Browser MCP com Google Sheets MCP: Browser extrai dados de paginas, Sheets armazena em planilha organizada. Workflow: 'para cada empresa em diretorio.com/lista, extraia nome, email e telefone, e salve na planilha Leads'.
✓ O que FAZER
- ✓ Combinar com Sheets MCP para scraping em escala
- ✓ Usar get_text para dados e screenshot para verificacao visual
- ✓ Desconectar imediatamente apos a tarefa web
✗ O que NAO fazer
- ✗ Scrape sites com proteção anti-bot agressiva
- ✗ Pedir screenshots de paginas inteiras (foque em secoes)
- ✗ Usar para tarefas que nao envolvem web
🔴 Token Impact: HIGH (~5.000+ tokens)
🎯 O MCP Mais Caro
Browser MCP tem o maior token tax do ecossistema: ~5.000+ tokens de overhead fixo por mensagem, MAIS tokens extras para cada screenshot ou conteudo de pagina extraido. Um unico screenshot pode custar 10.000+ tokens adicionais.
- • Overhead fixo: ~5.000 tokens por mensagem (10x mais que Filesystem)
- • Screenshot: +5.000-15.000 tokens dependendo da resolucao e complexidade
- • Conteudo de pagina (get_text): +1.000-5.000 tokens dependendo do tamanho
- • Em 20 mensagens sem usar: 100.000 tokens desperdicados so com overhead fixo
📊 Por Que e Tao Caro
- Browser expoe 10+ tools complexas com muitos parametros
- Cada tool tem descricao longa para o Claude entender como usar
- Screenshots sao imagens codificadas em base64 - muito pesadas em tokens
💡 Dica Pratica
REGRA DE OURO DO BROWSER MCP: conecte apenas quando for usar, use o que precisa, desconecte imediatamente. O fluxo correto e: claude mcp add browser → use → claude mcp remove browser. NUNCA deixe Browser conectado durante sessoes de coding. Os 5.000 tokens por mensagem se multiplicam rapidamente.
✓ O que FAZER
- ✓ Conectar APENAS quando precisar de acesso web
- ✓ Desconectar IMEDIATAMENTE apos usar
- ✓ Monitorar /cost durante uso do Browser
✗ O que NAO fazer
- ✗ NUNCA manter Browser 'always on'
- ✗ NUNCA esquecer Browser conectado durante coding
- ✗ NUNCA pedir screenshots desnecessarios
🔌 Desconecte Quando Nao For UI
🎯 Disciplina Operacional Obrigatoria
A regra mais importante do Browser MCP e: desconecte quando nao estiver trabalhando em UI ou web. Backend puro? Desconecte. Refatorando API? Desconecte. Escrevendo testes? Desconecte. So precisa verificar UI? Conecte, verifique, desconecte.
-
•
Conectar:
claude mcp add browser -- npx -y @anthropic/mcp-puppeteer - • Usar: Faca suas tarefas web (QA, scraping, teste)
-
•
Desconectar:
claude mcp remove browser - • Ciclo completo: Menos de 30 segundos entre add → use → remove
📊 O Impacto da Disciplina
- Browser ligado 30 msgs desnecessarias = 150.000 tokens desperdicados
- Browser ligado apenas 5 msgs necessarias = 25.000 tokens (economia de 83%)
- A diferenca entre operador profissional e amador esta nessa disciplina
💡 Dica Pratica
Salve os comandos de add/remove do Browser num alias do shell: alias br-on='claude mcp add browser -- npx -y @anthropic/mcp-puppeteer' e alias br-off='claude mcp remove browser'. Assim, conectar e desconectar vira dois caracteres + Enter. Zero friccao para manter a disciplina.
✓ O que FAZER
- ✓ Criar aliases para add/remove rapido
- ✓ Desenvolver o reflexo de desconectar apos usar
- ✓ Tratar Browser como ferramenta pontual, nao permanente
✗ O que NAO fazer
- ✗ Deixar Browser conectado 'para depois'
- ✗ Esquecer de desconectar ao mudar de tarefa
- ✗ Tratar Browser como MCP que pode ficar 'always on'
📋 Resumo do Modulo
Proximo:
6.6 - MCP #4: Database/Supabase