CodingBaby Browser

Um servidor Node.js que permite que assistentes de IA controlem o navegador Chrome via WebSocket. Requer a extensão CodingBaby Chrome.

GitHub
29
Experimente este MCPPatrocinado

Documentação

CodingBaby-Browser-MCP

Visão Geral

O CodingBaby-Browser-MCP é uma ferramenta poderosa que permite que assistentes de IA como o Claude 3.7 Sonnet no Cursor controlem o navegador Chrome para tarefas automatizadas. Esta ferramenta preenche a lacuna entre a IA e a interação com o navegador web por meio de um protocolo de comunicação baseado em WebSocket.

Recursos

  • Automação de Navegador: Controle o navegador Chrome programaticamente para navegar em sites, preencher formulários e realizar cliques
  • Captura de Tela: Tire capturas de tela de páginas inteiras ou áreas específicas
  • Suporte a Múltiplas Abas: Crie, liste, selecione e feche abas do navegador
  • Interação com Formulários: Digite texto, pressione teclas e selecione elementos de formulário
  • Comandos em Lote: Execute múltiplas operações no navegador em sequência
  • Controle de Viewport: Ajuste o tamanho da janela do navegador para testes responsivos

Arquitetura

O projeto consiste em dois componentes principais:

  1. Servidor de Ferramentas MCP: Um servidor Node.js que implementa o Protocolo de Contexto de Modelo (MCP) para se comunicar com assistentes de IA no Cursor
  2. Extensão do Chrome: Uma extensão de navegador que recebe comandos do servidor MCP e controla o navegador

O sistema usa WebSocket (porta 9876 por padrão) para estabelecer um canal de comunicação bidirecional entre o servidor MCP e a extensão do Chrome.

Instalação

Pré-requisitos

  • Node.js (v14 ou superior)
  • Navegador Chrome
  • Editor Cursor com Claude 3.7 Sonnet

Configuração da Ferramenta MCP

  1. No Cursor, vá para Configurações → MCP
  2. Adicione um novo servidor MCP global com a seguinte configuração:
{
  "mcpServers": {
    "CodingBaby-Browser-MCP": {
      "command": "npx",
      "args": ["@sydneyassistent/codingbaby-browser-mcp"]
    }
  }
}

Configuração da Extensão do Chrome

  1. Instale a Extensão CodingBaby da Chrome Web Store
  2. Ative a extensão e garanta que ela tenha as permissões necessárias

Uso

Após a instalação, você pode pedir ao Claude 3.7 no Cursor para controlar seu navegador:

Use the browser to navigate to https://example.com

Comandos Disponíveis

  • navigate: Abrir uma URL no navegador
  • click: Clicar em elementos
  • type: Inserir texto em campos de formulário
  • pressKey: Simular ações de teclado
  • scroll: Rolar em qualquer direção
  • takeScreenshot: Capturar conteúdo do navegador
  • wait: Pausar a execução por um tempo especificado
  • setViewport: Alterar as dimensões da janela do navegador
  • tabNew, tabList, tabSelect, tabClose: Gerenciamento de abas
  • batch: Executar múltiplos comandos em sequência
  • close: Fechar a sessão do navegador

Desenvolvimento e Depuração

Se você baixou o código-fonte, pode configurar o projeto para fins de desenvolvimento e depuração.

Depuração da Extensão do Chrome

Para carregar e depurar a extensão do Chrome a partir do código-fonte:

  1. Abra o Chrome e navegue até chrome://extensions/
  2. Ative o "Modo do desenvolvedor" alternando o interruptor no canto superior direito
  3. Clique no botão "Carregar sem compactação"
  4. Navegue até o diretório chrome-extension no projeto e selecione-o
  5. A extensão agora será carregada no modo de desenvolvedor
  6. Você pode visualizar os logs do console clicando com o botão direito no ícone da extensão, selecionando "Inspecionar" e abrindo a aba Console
  7. Faça alterações no código da extensão e clique no ícone de atualização no cartão da extensão para aplicar as alterações

Depuração do Servidor MCP no Cursor

Para usar o código do servidor MCP local para depuração:

  1. Clone ou baixe o repositório para sua máquina local
  2. Navegue até o diretório do projeto e instale as dependências: 
    cd Browser-MCP
npm install
  3. No Cursor, vá para Configurações → MCP
  4. Adicione um novo servidor MCP com a seguinte configuração: 
    {
  "mcpServers": {
    "CodingBaby-Browser-MCP-Dev": {
      "command": "node",
      "args": ["/absolute/path/to/your/Browser-MCP/index.js"]
    }
  }
}
    Substitua /absolute/path/to/your/ pelo caminho real do projeto baixado
  5. Clique em "Atualizar" para carregar o servidor MCP
  6. Agora você pode fazer alterações no código do servidor MCP e reiniciar o servidor clicando em "Atualizar" nas configurações de MCP do Cursor

Para depuração, você pode:

  • Verificar os logs do MCP no Cursor clicando no ícone de status do MCP
  • Adicionar instruções console.error() ao código para logs mais detalhados
  • Executar o servidor MCP manualmente no terminal para obter saída completa do console

Solução de Problemas

  • Conflito de Porta: Se a porta 9876 já estiver em uso, a ferramenta tentará liberá-la automaticamente
  • Problemas de Conexão: Garanta que a extensão do Chrome esteja instalada e ativada corretamente

Licença

MIT

Links