Navigation
Chrome MCP Server: Real-Time Collaboration & Smart Automation - MCP Implementation

Chrome MCP Server: Real-Time Collaboration & Smart Automation

Chrome MCP Server seamlessly bridges Chrome extensions and Claude AI, enabling real-time collaboration and smart automation for unmatched productivity.

Developer Tools
4.6(72 reviews)
108 saves
50 comments

Users create an average of 52 projects per month with this tool

About Chrome MCP Server

What is Chrome MCP Server: Real-Time Collaboration & Smart Automation?

Imagine a powerhouse that bridges your Chrome DevTools extension with the Cursor AI universe—this is the Chrome MCP Server! 🚀 This Node.js server acts as a middleman, capturing real-time data from your browser and feeding it directly into Cursor’s AI engine. Think of it as your 24/7 digital assistant for debugging, monitoring, and automating workflows with smarts.

How to Use Chrome MCP Server: Step-by-Step Magic

Ready to harness this tech wizardry? Let’s get you set up in minutes:

  1. Quickstart via GitHub:
    Windows: cmd /c npx github:adejaimejr/chrome-mcp-server
    Mac/Linux: npx github:adejaimejr/chrome-mcp-server
  2. Global Installation:
    npm install -g github:adejaimejr/chrome-mcp-server
    Then just type chrome-mcp-server to summon the server!
  3. Local Setup: Clone the repo, build it with npm run build, and point Cursor to your local mcp-server.js—perfect for tweak-happy developers!

Once running, hook it up in Cursor’s settings (Extensions → MCP) with the same command used to start the server. No manual flag-juggling needed anymore!

Chrome MCP Server Features

Key Features of Chrome MCP Server: Beyond Basic Debugging

This isn’t just another logging tool—it’s a Swiss Army knife for modern dev workflows:

  • Real-Time Data Vault: Sniffs out console logs/errors, network requests (successes AND failures), and even screenshots of elements you’ve selected.
  • JSON Purist Mode: Since v1.2.0, every single byte of output is 100% valid JSON—no more messy syntax errors to scrub.
  • Port Juggler: Auto-detects occupied ports and swaps to 3001, 3002, etc.—no more shouting at your machine about "address already in use."
  • Cross-OS Build Love: Windows no longer feels like a second-class citizen; the build scripts play nice with both Unix and Windows quirks.

Use Cases: Where the Magic Happens

Here’s where this tool really shines in the wild:

  • AI-Powered Debugging: Let Cursor’s AI analyze real-time browser data to spot patterns in errors or performance bottlenecks.
  • Automated QA Workflows: Script network request monitoring to flag flaky APIs or track frontend/backend communication.
  • Collaborative Debugging: Share live console outputs and element snapshots with your team in real-time.
  • Security Audits: Monitor network traffic for unexpected requests or sensitive data leaks during dev stages.

Chrome MCP Server FAQ

FAQ: Answers to Your Burning Questions

Got hiccups? Let’s troubleshoot:

  • “Why am I seeing JSON errors?” Easy fix: Ensure you’re on v1.2.0+—we’ve hardened the JSON output to military-grade standards.
  • “Port 3000 is always busy!” Relax! The server now auto-hunts open ports up to 3010. If you prefer control: PORT=3005 node mcp-server.js
  • “Build fails on Windows!” Update to latest code—build scripts now handle Windows like a pro. Still stuck? Manually copy src/index.js to dist/mcp-server.js and prepend the shebang line.
  • “How do I reset logs?” Just call the wipeLogs API endpoint—your debugging slate is clean again.

Content

Chrome MCP Server

Um servidor Node.js que se integra com a extensão Chrome DevTools para fornecer funcionalidades de depuração e monitoramento para o Cursor AI.

Funcionalidade

Este servidor atua como uma ponte entre a extensão Chrome DevTools e o Cursor AI, permitindo:

  • Capturar logs do console
  • Capturar erros do console
  • Monitorar requisições de rede (sucessos e erros)
  • Capturar screenshots
  • Inspecionar elementos selecionados
  • Limpar logs

Instalação e Uso

Existem várias opções para executar o servidor:

Opção 1: Executar diretamente do GitHub

# Windows
cmd /c npx github:adejaimejr/chrome-mcp-server

# Linux/Mac
npx github:adejaimejr/chrome-mcp-server

Opção 2: Instalar globalmente

# Instalar globalmente
npm install -g github:adejaimejr/chrome-mcp-server

# Executar
chrome-mcp-server

Opção 3: Publicar no npm

Se você preferir usar o formato de comando npx @scope/package, você pode publicar este pacote no npm:

Para publicar sem escopo:

npm login
npm publish

Depois poderá usar: npx chrome-mcp-server

Para publicar com escopo:

# Modifique o nome no package.json para "@adejaimejr/chrome-mcp-server"
npm publish --access public

Depois poderá usar: npx @adejaimejr/chrome-mcp-server

Configuração no Cursor

Para configurar o servidor MCP no Cursor:

  1. Abra o Cursor
  2. Vá para Configurações (ícone de engrenagem)
  3. Navegue até "Extensões" > "MCP"
  4. Adicione um novo servidor MCP com o comando:
# Windows
cmd /c npx github:adejaimejr/chrome-mcp-server

# Linux/Mac
npx github:adejaimejr/chrome-mcp-server

Nota : A partir da versão mais recente, o parâmetro --mcp não é mais necessário, pois o servidor agora detecta automaticamente quando está sendo executado pelo Cursor.

Solução Específica para Instalação Local

Se você já tem o código em seu computador (como no caminho C:\Users\Adejaime\Desktop\2025-dev\chrome-mcp-server), use o caminho direto para o arquivo executável:

node C:\Users\Adejaime\Desktop\2025-dev\chrome-mcp-server\dist\mcp-server.js

Importante: No Windows, você pode usar tanto barras invertidas (\) quanto barras normais (/) no caminho.

Passo a Passo para Instalação Local

Se você preferir clonar o repositório e usar localmente:

# 1. Clone o repositório
git clone https://github.com/adejaimejr/chrome-mcp-server.git

# 2. Entre no diretório
cd chrome-mcp-server

# 3. Instale as dependências
npm install

# 4. Construa o executável
npm run build

# 5. Configure o Cursor com o caminho absoluto para o arquivo mcp-server.js
# Exemplo no Windows:
# node C:\caminho\completo\para\chrome-mcp-server\dist\mcp-server.js

# Exemplo no Linux/Mac:
# node /caminho/completo/para/chrome-mcp-server/dist/mcp-server.js

Novidades na Versão Mais Recente (v1.2.0)

1. Solução Radical para Saída em Formato JSON

Na versão 1.2.0, implementamos uma solução radical para garantir ABSOLUTAMENTE que qualquer saída do servidor seja em formato JSON válido, resolvendo definitivamente o erro Unexpected token 'A', "Aguardando"... is not valid JSON.

Esta solução:

  • Intercepta os fluxos de saída stdout e stderr no nível mais baixo possível
  • Garante que TODA saída, inclusive logs gerados antes da inicialização do aplicativo, seja em formato JSON
  • Converte automaticamente qualquer saída não-JSON para o formato JSON válido
  • Torna impossível para o servidor emitir saídas que não sejam em formato JSON

2. Tratamento Automático de Portas

O servidor agora detecta automaticamente quando a porta padrão (3000) está ocupada e tenta portas alternativas (3001, 3002, etc.) até encontrar uma disponível. Isso resolve o erro EADDRINUSE: address already in use que pode ocorrer quando outro serviço já está usando a porta 3000.

Benefícios:

  • Não é necessário encerrar outros serviços que estejam usando a porta 3000
  • O servidor informa automaticamente ao Cursor qual porta está usando
  • Tenta até 10 portas diferentes antes de desistir

3. Script de Build Compatível com Windows

O script de build agora é compatível com Windows e Linux/Mac, usando módulos ES6 para criar diretórios e copiar arquivos em vez de comandos específicos do sistema operacional. Isso resolve o erro mkdir -p que ocorria ao executar npm run build no Windows.

Resolução de Problemas

Erro: "Falha ao analisar a resposta JSON" ou "Unexpected token... is not valid JSON"

Este erro deve estar completamente resolvido na versão 1.2.0. Se ainda encontrar o erro:

  1. Certifique-se de que está usando a versão 1.2.0 ou superior
  2. Atualize o repositório local com git pull e reconstrua com npm run build
  3. Verifique se está usando o caminho correto para o arquivo mcp-server.js

Erro: "EADDRINUSE: address already in use"

Este erro ocorre quando a porta 3000 já está sendo usada por outro processo. A nova versão do servidor resolve isso automaticamente tentando portas alternativas.

Se ainda encontrar problemas:

  1. Verifique se você está usando a versão mais recente do servidor

  2. Tente encerrar manualmente o processo que está usando a porta 3000

  3. Defina uma porta específica usando a variável de ambiente PORT:

    Windows

set PORT=3001 && node C:\caminho\para\mcp-server.js

# Linux/Mac
PORT=3001 node /caminho/para/mcp-server.js

Erro: "mkdir -p" ou "chmod +x" no Windows

Se você encontrar erros relacionados a comandos Unix ao executar npm run build no Windows:

  1. Certifique-se de que está usando a versão mais recente do repositório com o script de build compatível com Windows
  2. Execute git pull para obter as últimas atualizações
  3. Se o problema persistir, você pode criar manualmente o arquivo:
    * Copie o conteúdo de src/index.js para um novo arquivo dist/mcp-server.js
    * Adicione #!/usr/bin/env node no início do arquivo

Erro: "require is not defined in ES module scope"

Se você encontrar este erro ao executar npm run build:

  1. Certifique-se de que está usando a versão mais recente do repositório, que usa a sintaxe de módulos ES6 no script de build

  2. Execute git pull para obter as últimas atualizações

  3. Se o problema persistir, você pode criar manualmente o arquivo:

    1. Crie a pasta dist se não existir

mkdir -p dist

# 2. Copie o arquivo src/index.js para dist/mcp-server.js
# No Windows:
copy src\index.js dist\mcp-server.js

# No Linux/Mac:
cp src/index.js dist/mcp-server.js

# 3. Edite o arquivo dist/mcp-server.js e adicione #!/usr/bin/env node no início

Como Funciona

  1. A extensão Chrome DevTools coleta informações do navegador
  2. A extensão envia esses dados para o servidor MCP local
  3. O servidor armazena os dados e os disponibiliza via API RESTful
  4. O Claude AI no Cursor acessa esses dados através das ferramentas MCP

Ferramentas MCP Disponíveis

  • getConsoleLogs: Obtém logs do console
  • getConsoleErrors: Obtém erros do console
  • getNetworkErrorLogs: Obtém logs de erros de rede
  • getNetworkSuccessLogs: Obtém logs de sucesso de rede
  • takeScreenshot: Captura uma screenshot da página
  • getSelectedElement: Obtém informações sobre o elemento selecionado
  • wipeLogs: Limpa todos os logs armazenados

Requisitos

  • Node.js 14+
  • Chrome 88+
  • Cursor com suporte a MCP

Notas de Segurança

Este servidor é destinado apenas para uso local durante o desenvolvimento. Não exponha este servidor à internet pública sem medidas adicionais de segurança.

Related MCP Servers & Clients