Como Usar Ferramentas do Navegador Servidor MCP

Você já se perguntou como poderia trazer a automação de navegador com IA para o seu fluxo de trabalho? Eu me deparei com o Browser tools mcp enquanto trabalhava no Cursor IDE, e ele simplesmente me surpreendeu! Essa ferramenta incrível permite conectar o Cursor IDE ao seu navegador, automatizando tarefas como preenchimento de formulários, extração de dados (data scraping) e desenvolvimento web front-end com facilidade. Neste tutorial, vamos guiá-lo pela configuração do Browser tools mcp com o Cursor IDE, explorando como aproveitar seu poder para automação web. Seja para depurar ou construir, esta é sua chance de subir de nível. Vamos mergulhar juntos nesta configuração empolgante!

💡

Antes de começarmos, um rápido agradecimento ao Apidog—uma ferramenta incrível para entusiastas de API! Ele otimiza o teste e a depuração de APIs, tornando-se um companheiro perfeito para suas aventuras com o Browser tools mcp. Confira em apidog.com! Agora, vamos começar com este projeto legal…

button

O que é Browser tools mcp?

O Browser tools mcp é um servidor Model Context Protocol (MCP) que faz a ponte entre modelos de IA e seu navegador web, permitindo automação perfeita. Desenvolvido pela AgentDeskAI, ele permite que ferramentas como o Cursor IDE (assim como Windsurf, RooCode, Cline e Claude Desktop, para mencionar algumas) controlem ações do navegador—por exemplo, tirar capturas de tela, navegar por páginas, preencher formulários ou extrair dados. Introduzido como parte do ecossistema MCP pela Anthropic em novembro de 2024, ele foi projetado para interações seguras e padronizadas com ferramentas externas.

Com o Browser tools mcp, o Cursor IDE agora pode automatizar tarefas repetitivas do navegador ou buscar dados web em tempo real, tornando sua vida de codificação mais fácil. Imagine pedir ao Cursor IDE para "extrair manchetes" ou "preencher um formulário"—tudo é possível! Vamos configurá-lo e ver a mágica acontecer.

Configurando Seu Ambiente para Browser tools mcp

Vamos preparar seu sistema para usar o Browser tools mcp com o Cursor IDE. É muito fácil, então vamos começar!

1. Verificar Pré-requisitos:

Node.js: Garanta que o Node.js (versão 16 ou superior) esteja instalado. Verifique com node --version no seu terminal, ou baixe em nodejs.org.
Google Chrome ou Chromium: Você precisará de um navegador baseado em Chromium instalado para a extensão.
Cursor IDE: Tenha o Cursor IDE pronto (baixe em cursor.com se necessário—a versão 0.45 ou superior é recomendada).
Habilidades Básicas: Uma pequena familiaridade com comandos de terminal e extensões do Chrome ajudará.
Hardware: Uma CPU com 4+ núcleos, 16GB+ de RAM e 10GB+ de armazenamento livre manterão tudo funcionando sem problemas.

2. Criar uma Pasta de Projeto:

Abra seu terminal e configure seu espaço de trabalho:

mkdir browser-tools-mcp
cd browser-tools-mcp

Esta será sua base para o Browser tools mcp.

Você está pronto para instalar o Browser tools mcp—vamos seguir em frente!

Instalando Browser tools mcp com Cursor IDE

Vamos instalar o Browser tools mcp e conectá-lo ao Cursor IDE. Veja como fazer isso passo a passo.

Passo 1: Instalar a Extensão BrowserTools do Chrome

O Browser tools mcp depende de uma extensão do Chrome para capturar dados do navegador, como logs do console, requisições de rede e elementos DOM.

1. Baixar a Extensão:

Como ela está pendente de aprovação na Chrome Web Store, pegue o código-fonte no GitHub ou clique aqui para baixar a extensão:

git clone https://github.com/AgentDeskAI/browser-tools-mcp.git

2. Carregar a Extensão Descompactada:

Abra o Chrome e vá para chrome://extensions/.

Ative o Modo Desenvolvedor (toggle no canto superior direito).

Clique em “Carregar sem compactação” (Load unpacked) e selecione a pasta chrome-extension dentro do repositório clonado ou selecione a pasta que você baixou anteriormente.

Confirme que “BrowserToolsMCP” aparece na sua lista de extensões—mantenha-o fixado para acesso fácil!

Passo 2: Configurar o Servidor BrowserTools MCP no Cursor

Agora, vamos conectar o servidor MCP ao Cursor IDE para comunicação com o navegador.

Abra as Configurações do Cursor IDE (Ctrl+, ou Cmd+, no Mac).

Navegue até Features → MCP Servers.
Clique em “Add new MCP server”.

Preencha os detalhes:
Name: browser-tools (ou qualquer nome único que você prefira).
Select: command.
Paste the Command:

npx @agentdeskai/browser-tools-mcp@1.2.0

Observação: No Windows, se npx não for reconhecido, execute where npx no seu terminal para encontrar o caminho (por exemplo, C:\Users\SeuNome\AppData\Roaming\npm\npx) e use-o explicitamente.
Salve a configuração. Você deverá ver as ferramentas listadas com um indicador verde ao lado de “browser-tools”. Se não aparecer, atualize o Cursor IDE ou espere alguns segundos.

Passo 3: Executar o Servidor BrowserTools (Opcional, mas Recomendado)

Para recursos extras como captura de tela e logs agregados, execute o servidor BrowserTools separadamente:

No seu terminal, execute:

npx @agentdeskai/browser-tools-server@1.2.0

Este servidor escuta na porta 3025 por padrão. Garanta que nenhum outro processo esteja usando esta porta (verifique com netstat -a -n | find "3025" no Windows ou lsof -i :3025 no Mac/Linux).
Este passo aprimora a comunicação websocket para capturas de tela e modos de auditoria—super útil!

Passo 4: Usar as Ferramentas do Desenvolvedor do Chrome com BrowserTools MCP

Vamos integrar o Browser tools mcp com as Ferramentas do Desenvolvedor do Chrome (DevTools).

Abra qualquer página web no Chrome (por exemplo, https://example.com).
Clique com o botão direito e selecione “Inspecionar” para abrir as DevTools do Chrome.
Navegue até o painel “BrowserTools” (adicionado pela extensão).

A partir daqui, você pode:

Capturar capturas de tela manualmente (colar automaticamente no Cursor IDE é opcional).
Definir caminhos de salvamento para capturas de tela (o padrão é Downloads/mcp-screenshots).
Limpar logs salvos.
Ajustar limites de log e configurações de truncamento.

Importante: Os logs são limpos toda vez que você atualiza a página ou reinicia o servidor MCP.

Passo 5: Verificar se Tudo Está Funcionando

Teste a configuração no Cursor IDE.

No chat do Cursor IDE ("Ctrl" ou "Cmd" + L), tente comandos como “Capture console logs from the current page” (Capturar logs do console da página atual) ou “Take a screenshot of https://example.com.” (Tirar uma captura de tela de https://example.com).
Verifique se os logs aparecem no chat ou terminal e confirme se as capturas de tela são salvas na pasta especificada.
Se nada aparecer, garanta que o servidor MCP está rodando e que a extensão do Chrome está conectada.

Você acabou de configurar o Browser tools mcp com o Cursor IDE—ótimo trabalho!

Usando Browser tools mcp para Automação de Navegador

Com o Browser tools mcp conectado, vamos automatizar algumas tarefas do navegador no Cursor IDE.

1. Testar Navegação Básica:

No chat do Cursor IDE, digite: “Open the website ‘https://example.com’ in Chrome.” (Abrir o site ‘https://example.com’ no Chrome).
O Browser tools mcp abrirá o Chrome (se não estiver aberto) e navegará para o site. O Cursor IDE confirmará: “I’ve opened https://example.com in Chrome.” (Abri https://example.com no Chrome).
Se falhar, verifique a extensão do Chrome e o status do servidor MCP.

2. Automatizar Preenchimento de Formulários:

Tente: “Go to ‘https://example.com/contact’ and fill out the contact form with name ‘Alex Smith’, email ‘alex@example.com’, and message ‘Hello!’” (Ir para ‘https://example.com/contact’ e preencher o formulário de contato com nome ‘Alex Smith’, email ‘alex@example.com’ e mensagem ‘Olá!’).
O Browser tools mcp navegará, localizará o formulário e o preencherá. O Cursor IDE pode responder: “I’ve filled out the contact form with the details you provided.” (Preenchi o formulário de contato com os detalhes que você forneceu). Observe o Chrome em ação—muito legal!

3. Extrair Dados Web (Scraping):

Pergunte: “Scrape the headlines from ‘https://news.example.com’.” (Extrair as manchetes de ‘https://news.example.com’).
O Browser tools mcp visitará a página, extrairá as manchetes (usando dados do DOM) e as retornará no Cursor IDE, como: “Here are the latest headlines: ‘Breaking News 1’, ‘Breaking News 2’.” (Aqui estão as manchetes mais recentes: ‘Notícia Urgente 1’, ‘Notícia Urgente 2’).
Para sites complexos, especifique os alvos (por exemplo, “Extract headlines from class ‘news-title’”—Extrair manchetes da classe ‘news-title’).

O Browser tools mcp abre um mundo de possibilidades de automação no Cursor IDE!

Dicas para Aproveitar ao Máximo o Browser tools mcp

Para aprimorar sua experiência com o Browser tools mcp e o Cursor IDE:

Seja Específico: Use comandos precisos (por exemplo, “Click the button with ID ‘submit-btn’” — Clicar no botão com ID ‘submit-btn’) para automação precisa.
Verificar Permissões: Garanta que a extensão do Chrome tenha acesso às abas ativas e à captura de tela.
Manter o Servidor Rodando: Não feche o terminal com o servidor MCP—reinicie se necessário.
Explorar Recursos: Experimente a captura de tela ou a análise de logs para depuração—verifique o repositório GitHub para mais informações!

Minha Experiência com Browser tools mcp

Trabalhar com o Browser tools mcp no Cursor IDE foi um prazer! A configuração foi tranquila, e automatizar tarefas do navegador pareceu perfeito. As capturas de tela e os logs no Cursor IDE foram de grande ajuda para depuração. Se encontrar um problema, verifique a porta (3025) e a conexão da extensão.

Considerações Finais: Sua Aventura com Browser tools mcp

Você configurou o Browser tools mcp com o Cursor IDE e desbloqueou a magia da automação de navegador! De navegar por sites a extrair dados, você está pronto para encarar tarefas web com facilidade. Experimente mais ideias de automação—como rastrear preços ou tarefas de desenvolvimento web front-end! Para mais informações, confira o repositório browser-tools-mcp no github. Não se esqueça de conferir o Apidog se estiver procurando uma alternativa melhor ao Postman e continue arrasando na sua jornada com o Browser tools mcp!

button