🌐 MCP Browser Agent [Node.js - Playwright - Claude Desktop]

MCP Browser Agent é uma poderosa integração do Model Context Protocol (MCP) que confere ao Claude Desktop capacidades autônomas de automação de navegador. Este agente permite que o Claude interaja com conteúdo web, manipule elementos DOM, execute JavaScript e realize requisições API, tudo isso através de instruções em linguagem natural.

Demo

Momentos de destaque:

• 00:00 - Pesquisa no Google: Navegação à página inicial do Google e busca pelo termo “Model Context Protocol”.

• 00:33 - Captura de tela: Geração de uma imagem dos resultados da pesquisa com nome personalizado e visualização no Finder. Demonstra como o Claude pode capturar e armazenar conteúdo visual durante a automação.

• 01:00 - Consulta na Wikipedia: Acesso à Wikipedia.org e pesquisa de informações sobre “Model Context Protocol”. Evidencia a capacidade do Claude de interagir com diferentes plataformas web e seus mecanismos de busca.

• 01:38 - Interação com menu suspenso (I): Acesso a um site de testes (the-internet.herokuapp.com/dropdown) e seleção da “Opção 1” a partir de um menu suspenso. Ilustra como o Claude pode manipular elementos de formulários e realizar seleções.

• 01:56 - Interação com menu suspenso (II):
  Alteração da seleção para “Opção 2” no mesmo menu. Demonstra a capacidade de interagir repetidamente com o mesmo elemento e realizar diferentes escolhas.

• 02:09 - Preenchimento de formulário: Navegação a uma página de login (the-internet.herokuapp.com/login) e inserção do nome de usuário “tomsmith” e senha “SuperSecretPassword!”. Mostra a automação de preenchimento de formulários.

• 02:28 - Envio de credenciais: Submissão do formulário de login e conclusão do processo de autenticação. Evidencia a capacidade do Claude de executar envios de formulários e gerenciar processos de múltiplas etapas.

• 02:36 - Execução de requisição API: Realização de uma solicitação GET ao endpoint do JSONPlaceholder. Demonstra como o Claude pode efetuar chamadas API diretas e processar as informações recebidas mediante a integração MCP.

Principais características:

• Automação avançada de navegador: Navegue para qualquer URL, capture telas, interaja com elementos DOM e execute JavaScript diretamente do Claude
• Cliente API poderoso: Execute solicitações HTTP (GET, POST, PUT, PATCH, DELETE) com cabeçalhos e conteúdo de corpo configuráveis
• Gerenciamento de recursos: Acesse logs do console do navegador e capturas de tela através da interface de recursos MCP
• Suporte multi-navegador: Compatível com Chrome, Firefox, Microsoft Edge e WebKit (motor do Safari)
• Sessão persistente: Mantém o estado do navegador através de múltiplos comandos para fluxos de trabalho complexos
• Tratamento de erros: Fornece feedback detalhado e opções de recuperação para desafios de automação

Visão técnica:

• Backend Node.js: Implementação eficiente de servidor com TypeScript
• Model Context Protocol (MCP): Integração perfeita com Claude Desktop
• Framework Playwright: Biblioteca de automação de navegador padrão da indústria
• Suporte multi-navegador: Configure seu motor de navegador preferido
• Exposição de recursos: Logs do navegador e capturas de tela disponíveis como recursos consultáveis
• Gerenciamento de sessão com estado: Contexto de navegador persistente entre comandos

Guia de instalação:

# Clonar repositório
git clone https://github.com/imprvhub/mcp-browser-agent
cd mcp-browser-agent

# Instalar dependências
npm install

# Construir o projeto
npm run build

Configuração do servidor MCP:

Configure o Claude Desktop para integrar com o MCP do Browser Agent:

{
  "mcpServers": {
    "browserAgent": {
      "command": "node",
      "args": [
        "CAMINHO_ABSOLUTO_PARA_DIRETÓRIO/mcp-browser-agent/dist/index.js",
        "--browser",
        "chrome"
      ]
    }
  }
}

Substitua CAMINHO_ABSOLUTO_PARA_DIRETÓRIO com o caminho completo para seu diretório de instalação.

Seleção de navegador:

O MCP Browser Agent suporta múltiplos tipos de navegadores:

• Chrome (padrão): Usa o navegador Chrome instalado
• Firefox: Usa o navegador Firefox Nightly
• Edge: Usa o Microsoft Edge
• WebKit: Usa o motor WebKit (experiência similar ao Safari)

Você pode especificar seu navegador preferido através de:

• Argumento de linha de comando: --browser chrome
• Variável de ambiente: MCP_BROWSER_TYPE=firefox
• Arquivo de configuração: .mcp_browser_agent_config.json

Requisitos do sistema:

• Node.js 16 ou superior
• Aplicação Claude Desktop
• Dependências do Playwright (instalação automática)
• Navegador suportado (Chrome, Firefox, Edge ou WebKit)

Casos de uso:

• Pesquisa web: Direcione o Claude para navegar por sites e extrair informações específicas
• Automação de tarefas: Automatize processos web de múltiplas etapas com fluxo de trabalho guiado por IA
• Assistência em testes: Ajuda com testes e verificação de aplicações web
• Exploração de API: Navegue pela documentação de API e execute solicitações para exploração
• Extração de conteúdo: Recupere conteúdo de sites com navegação complexa
• Automação de formulários: Preencha e envie formulários complexos com lógica de validação
• Demonstrações técnicas: Crie demonstrações interativas de aplicações web
• Coleta de dados: Reúna informações de múltiplas fontes para análise

Implementação técnica:

O MCP Browser Agent consiste em quatro componentes principais:

1. Servidor: Inicializa o servidor MCP com o padrão do Model Context Protocol
2. Registro de ferramentas: Define esquemas de ferramentas de navegador e API com parâmetros
3. Tratadores de solicitações: Gerencia solicitações do protocolo MCP para ferramentas e recursos
4. Executor: Implementa funções de automação de navegador usando Playwright

Diferente das integrações básicas, o MCP Browser Agent funciona como um verdadeiro agente de IA mantendo um estado persistente, capturando logs detalhados, gerenciando sequências de interação complexas e suportando operações encadeadas para fluxos de trabalho complexos.

Esta integração demonstra o poderoso potencial de combinar grandes modelos de linguagem com capacidades de automação de navegador, permitindo que o Claude interaja com a web assim como um humano faria, mas com precisão e velocidade programáticas.

---