🌐 O que o MCP Browser faz
O MCP Browser da ao Claude a capacidade de abrir um navegador Chrome real, navegar paginas, tirar screenshots, clicar em elementos e extrair dados. Ele usa o Chrome DevTools Protocol para controlar um browser headless ou visivel, transformando o Claude num assistente que "ve" a web.
🎯 Conceito Principal
O Browser MCP e o mais poderoso e caro em termos de tokens. Ele permite:
- •Navegacao: Abrir URLs, clicar em links, preencher formularios
- •Screenshots: Capturar a tela inteira ou elementos especificos
- •Interacao: Clicar botoes, digitar texto, scrollar
- •Extracao: Ler conteudo de paginas, tabelas, listas
💡 Dica Pratica
Use o Browser MCP apenas quando realmente precisar ver algo. Para ler conteudo de APIs, use requests diretos. O Browser e para quando voce precisa da experiencia visual: verificar layout, comparar UI, ou scraping de sites que nao tem API.
⚙️ Instalando Browser MCP
A instalacao do Browser MCP segue o mesmo padrao dos outros MCPs, com um unico comando.
🎯 Conceito Principal
O MCP Browser requer que o Chrome esteja instalado no sistema. Ele usa o Chrome DevTools Protocol para controlar uma instancia do navegador. Em sistemas headless (sem tela), ele roda em modo headless automaticamente.
💡 Dica Pratica
Apos instalar, teste com algo simples: "Abra google.com e tire um screenshot". Se funcionar, voce esta pronto para cenarios mais complexos.
📷 Screenshot + Comparacao Visual
O caso de uso mais valioso do Browser MCP e o loop de verificacao visual: voce implementa algo, o Claude tira um screenshot e compara com o design esperado. Isso elimina o vai-e-vem entre codigo e navegador.
🎯 Conceito Principal
O loop de verificacao visual funciona assim:
- •1. Implemente: Claude escreve o codigo CSS/HTML/React
- •2. Screenshot: Claude tira screenshot da pagina renderizada
- •3. Compare: Claude analisa se esta de acordo com o esperado
- •4. Ajuste: Se necessario, corrige e repete o ciclo
💡 Dica Pratica
Para UI, diga: "Implemente o header, depois abra localhost:3000 e tire um screenshot. Compare com o design e ajuste se necessario." O Claude faz tudo sozinho - e perfeicao visual sem voce abrir o browser.
🕷️ Web Scraping com Claude
Alem de verificacao visual, o Browser MCP e excelente para web scraping. O Claude pode navegar sites, extrair dados estruturados e salvar em formatos uteis como JSON ou CSV.
🎯 Conceito Principal
- •Extrair tabelas: Leia tabelas de qualquer site e converta para JSON/CSV
- •Navegar paginacao: Percorra multiplas paginas automaticamente
- •Formularios: Preencha e submeta formularios de busca
- •Sites dinamicos: Espere carregamento de JavaScript antes de extrair
💡 Dica Pratica
Combine Browser + Sheets para pipelines de scraping completos: "Abra a pagina X, extraia a tabela de precos e salve numa planilha Google Sheets". Dois MCPs trabalhando juntos.
⚠️ Token Impact ALTO
Aviso importante: o Browser MCP tem o maior impacto em tokens de todos os MCPs. Screenshots sao imagens codificadas em base64 que consomem milhares de tokens cada. Uma sessao com muitos screenshots pode esgotar seu contexto rapidamente.
🎯 Conceito Principal
- •Screenshot full page: ~2.000-5.000 tokens por captura
- •Descricao de ferramentas: O Browser MCP expoe muitas ferramentas, cada uma ocupando contexto
- •Sessoes curtas: Planeje sessoes de UI como sprints focados
- •Compactar e focar: Prefira screenshots de elementos especificos em vez de paginas inteiras
💡 Dica Pratica
Monitore com /cost a cada 2-3 screenshots. Se o custo estiver subindo rapido, termine a verificacao visual e desconecte o Browser antes de continuar codando.
🚫 Regra do Operador: Desconectar Quando Nao Usar UI
Esta e a regra mais importante do Browser MCP: desconecte-o quando nao estiver fazendo trabalho visual. Nao faz sentido pagar o custo de contexto do Browser enquanto voce esta escrevendo logica de backend ou configurando banco de dados.
🎯 Conceito Principal
O fluxo ideal com Browser MCP:
- •Precisa de UI?
claude mcp add browser→ faz o trabalho →claude mcp remove browser - •Nao precisa? Nem conecte. Economize tokens para o que importa.
💡 Dica Pratica
Crie um alias no terminal: alias browser-on="claude mcp add browser -- npx @anthropic-ai/mcp-browser" e alias browser-off="claude mcp remove browser". Ligar e desligar em 2 segundos.
Exercicio Pratico
Fazer screenshot + scrape de pagina web com MCP Browser
Instale o Browser MCP, tire um screenshot de um site e extraia dados estruturados dele.
Passo 1: Instale e tire um screenshot
$ claude
> "Abra https://news.ycombinator.com e tire um screenshot"
Passo 2: Extraia dados
Passo 3: Desconecte
Checklist de Conclusao:
📋 Resumo do Modulo
Proximo Modulo:
6.4 - MCP Database (Postgres/Supabase)