Como Usar Servidor MCP para Controlar Navegador Chrome (com Browserbase MCP Server)

Já desejou que sua IA pudesse navegar na web como você? Bem, prepare-se porque hoje vamos mergulhar no mundo do Browserbase MCP Server—uma ferramenta revolucionária que permite que modelos de IA como Claude, GPT e Gemini controlem navegadores da web. Imagine sua IA navegando em sites, clicando em botões, preenchendo formulários e até mesmo tirando capturas de tela, tudo por conta própria. Parece futurista? Está acontecendo agora, e é mais fácil do que você pensa configurar, especialmente com o Browserbase MCP Server.

Neste guia, vou te guiar sobre o que é o Browserbase MCP Server, por que é indispensável para fluxos de trabalho impulsionados por IA e como colocá-lo em funcionamento para controlar um navegador Chrome. Seja você um desenvolvedor, um cientista de dados ou apenas uma alma curiosa por IA, este tutorial passo a passo fará você se sentir um profissional. Vamos começar!

💡

Quer uma ótima ferramenta de Teste de API que gera documentação de API bonita?

Quer uma plataforma integrada e completa para sua Equipe de Desenvolvedores trabalharem juntos com máxima produtividade?

Apidog entrega todas as suas demandas e substitui o Postman por um preço muito mais acessível!

button

O Que É o Browserbase MCP Server?

O Browserbase MCP Server é uma ferramenta de código aberto que usa o Model Context Protocol (MCP) para conectar grandes modelos de linguagem (LLMs) a navegadores da web. Pense nele como uma ponte que permite à IA interagir com sites em tempo real. Com este servidor, sua IA pode:

Navegar para qualquer URL
Clicar em botões e preencher formulários
Extrair dados de páginas da web
Tirar capturas de tela
Executar JavaScript em sites
Lidar com múltiplas sessões de navegador simultaneamente

É como dar à sua IA seu próprio par de mãos para navegar na web. E a melhor parte? Funciona com modelos de IA populares como GPT da OpenAI, Claude da Anthropic e Gemini do Google.

Por Que Usar o Browserbase MCP Server?

Antes de mergulharmos no "como fazer", vamos falar sobre por que o Browserbase MCP Server é um divisor de águas:

Automação Baseada em Nuvem: Execute tarefas do navegador na nuvem, sem dores de cabeça com configuração local.
Suporte Multi-Modelo: Funciona com vários modelos de IA, para que você possa escolher o seu favorito.
Sessões Paralelas: Lide com múltiplas tarefas do navegador simultaneamente para maior eficiência.
Recursos de Visão: Tire capturas de tela e analise páginas da web visualmente.
Integração Fácil: Conecta-se perfeitamente com clientes de IA como Claude Desktop ou Cursor.

Seja você construindo um aplicativo com IA, automatizando fluxos de trabalho ou apenas experimentando, o Browserbase MCP Server economiza tempo e abre novas possibilidades.

Como Instalar e Configurar o Browserbase MCP Server

Existem três maneiras de começar: usando um servidor remoto hospedado, executando com npm ou executando localmente. Cobrirei todas as três para que você possa escolher o que funciona melhor para você.

Pré-requisitos

Antes de mergulhar no uso do Browserbase MCP Server para controlar um navegador Chrome com IA, certifique-se de ter o seguinte:

Um cliente de IA compatível com MCP: Instale um cliente como Claude Desktop ou Cursor que suporte o Model Context Protocol (MCP).
Uma chave de API do Browserbase: Obtenha-a no Browserbase para conectar sua IA à automação do navegador.

Para Configuração Local (Opcional)

Se você planeja executar o servidor localmente, também precisará de:

Git: Para clonar o repositório do GitHub.
pnpm: Instale este gerenciador de pacotes de pnpm.io para lidar com dependências.
Node.js: Baixe-o de nodejs.org para executar o servidor.
Uma chave de API de modelo de IA: Obtenha uma para o modelo escolhido, por exemplo, Gemini.

Opção 1: Usando o Servidor Remoto Hospedado do BrowserBase MCP Server (Mais Fácil)

Se você quer pular a complicação da configuração, a opção hospedada é sua amiga. Veja como:

Visite Smithery: Vá para smithery.ai para obter suas chaves de API e uma URL MCP remota.

Configure Seu Cliente de IA: Adicione a URL fornecida às configurações MCP do seu cliente de IA. Por exemplo, no Claude Desktop, você adicionaria isso ao seu claude_desktop_config.json:

{
  "mcpServers": {
    "browserbase": {
      "url": "https://your-smithery-url.com"
    }
  }
}

Ou, se você estiver usando o CLI mcp-remote:

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["mcp-remote", "https://your-smithery-url.com"]
    }
  }
}

Reinicie Seu Cliente: Feche e reabra seu cliente de IA para aplicar as alterações.

É isso! Sua IA agora pode controlar um navegador Chrome através do Browserbase MCP Server.

Opção 2: Executar o BrowserBase MCP Server no NPM (Recomendado)

Esta é a abordagem recomendada devido à sua compatibilidade com a maioria dos clientes mcp. Vá para o seu arquivo JSON de Configuração MCP e cole a configuração do Browserbase Server:

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["@browserbasehq/mcp"],
      "env": {
        "BROWSERBASE_API_KEY": "",
        "BROWSERBASE_PROJECT_ID": "",
        "GEMINI_API_KEY": ""
      }
    }
  }
}

Opção 3: Instalar e Executar o BrowserBase MCP Server Localmente (Para Controle Total)

Quer mexer nos bastidores? Executar o servidor localmente oferece mais flexibilidade. Veja como:

Clonar o Repositório:

Abra seu terminal e execute:

git clone https://github.com/browserbase/mcp-server-browserbase.git
cd mcp-server-browserbase

Instalar Dependências:

Certifique-se de ter o pnpm instalado. Em seguida, execute:

pnpm install && pnpm build

Iniciar o Servidor:

Você pode executar o servidor usando transporte STDIO ou HTTP.
Para STDIO (processo local):
Adicione isso à sua configuração de cliente MCP:

{
  "mcpServers": {
    "browserbase": {
      "command": "node",
      "args": ["path/to/mcp-server-browserbase/cli.js"],
      "env": {
        "BROWSERBASE_API_KEY": "your_api_key",
        "BROWSERBASE_PROJECT_ID": "your_project_id",
        "GEMINI_API_KEY": "your_gemini_key"
      }
    }
  }
}

Para transporte HTTP:
Inicie o servidor com:

node cli.js --port 3000

Configure seu cliente para conectar-se a http://localhost:3000.

Adicionar Chaves de API: Substitua os marcadores de posição na configuração pelas suas chaves de API reais do Browserbase e do modelo.

Reinicie Seu Cliente: Assim como antes, reinicie seu cliente de IA para habilitar o servidor.

Personalizando o Servidor

O Browserbase MCP Server oferece flags para ajustar seu comportamento. Aqui estão algumas úteis:

--proxies: Habilita proxies do Browserbase para melhor privacidade.
--advancedStealth: Use o modo furtivo para evitar detecção (Plano Scale necessário).
--browserWidth e --browserHeight: Defina o tamanho da janela do navegador.
--modelName: Escolha um modelo de IA diferente para o Stagehand.

Você pode adicionar essas flags ao array args na sua configuração MCP. Por exemplo:

"args": ["path/to/cli.js", "--proxies", "--browserWidth=1920"]

Como Usar o Browserbase MCP Server para Controlar o Chrome

Agora que seu servidor está configurado, vamos colocá-lo para funcionar! Veja como usar o Browserbase MCP Server para controlar um navegador Chrome.

Passo 1: Conecte Seu Cliente de IA

Certifique-se de que seu cliente de IA (como Claude Desktop ou Cursor) esteja conectado ao Browserbase MCP Server usando um dos três métodos acima.

Passo 2: Dê Comandos

No seu cliente de IA, você pode agora emitir comandos em linguagem natural para controlar o navegador. Aqui estão alguns exemplos:

Navegar para uma URL:

https://example.com

Clicar em um botão:

"Clique no botão 'Sign Up'"

Preencher um formulário:

user@example.com

Tirar uma captura de tela:

"Tire uma captura de tela da página inicial"

Extrair dados:

"Extraia todos os títulos de produtos desta página"

A IA traduzirá esses prompts em ações do navegador usando o Browserbase MCP Server.

Passo 3: Ver Resultados

Dependendo do comando, a IA retornará resultados como:

Confirmação de ações (por exemplo, "Navegou para https://example.com")
Dados extraídos (por exemplo, uma lista de títulos de produtos)
Capturas de tela (salvas ou exibidas, dependendo da sua configuração)

Por exemplo, se você pedir uma captura de tela, a IA pode responder com:

"Captura de tela feita e salva como 'homepage.png'"

Testando o Browserbase MCP Server

Vamos testá-lo com um exemplo do mundo real. Suponha que você queira automatizar uma busca em um site.

Abra Seu Cliente de IA: Para este exemplo, vamos usar o Claude Desktop.
Emita um Comando:

https://google.com

3. Observe o Navegador: Se você estiver executando localmente com transporte HTTP, poderá ver o navegador abrir e realizar as ações.

4. Verifique a Resposta: Claude deve confirmar as ações e talvez extrair o título ou o conteúdo da página.

Este teste simples mostra como o Browserbase MCP Server permite que a IA controle o Chrome para realizar tarefas da web.

Dicas de Solução de Problemas

Servidor Não Iniciando? Certifique-se de ter as chaves de API corretas e de que pnpm build foi concluído com sucesso.
Cliente Não Conectando? Verifique novamente a configuração do MCP e reinicie seu cliente de IA.
Ações Não Funcionando? Verifique a estrutura do site; alguns sites podem exigir stealth avançado ou proxies.
Problemas com o Modelo? Certifique-se de que sua chave de API do modelo é válida e que o modelo suporta os recursos necessários.

Conclusão

E aí está! Você aprendeu como usar o Browserbase MCP Server para controlar um navegador Chrome com IA. Seja você escolhendo a rota hospedada para simplicidade, npm ou a configuração local para controle, agora você está equipado para automatizar tarefas da web como um profissional. O Browserbase MCP Server é uma ferramenta poderosa que une IA e automação web, abrindo infinitas possibilidades para inovação.

Pronto para explorar mais? Tente automatizar suas tarefas diárias da web ou integrá-lo em seu próximo projeto de IA.

💡

button