CodingBaby Browser

Un servidor Node.js que permite a los asistentes de IA controlar el navegador Chrome a través de WebSocket. Requiere la extensión CodingBaby Chrome.

GitHub
29
Prueba este MCPPatrocinado

Documentación

CodingBaby-Browser-MCP

Resumen

CodingBaby-Browser-MCP es una herramienta potente que permite a asistentes de IA como Claude 3.7 Sonnet en Cursor controlar el navegador Chrome para tareas automatizadas. Esta herramienta une la brecha entre la IA y la interacción con el navegador web mediante un protocolo de comunicación basado en WebSocket.

Características

  • Automatización del navegador: Controla Chrome programáticamente para navegar por sitios web, rellenar formularios y realizar clics
  • Captura de pantallas: Toma capturas de pantalla de páginas completas o áreas específicas
  • Soporte multi-pestaña: Crea, lista, selecciona y cierra pestañas del navegador
  • Interacción con formularios: Escribe texto, presiona teclas y selecciona elementos de formularios
  • Comandos por lotes: Ejecuta múltiples operaciones del navegador en secuencia
  • Control de la ventana gráfica: Ajusta el tamaño de la ventana del navegador para pruebas responsivas

Arquitectura

El proyecto consta de dos componentes principales:

  1. Servidor de herramientas MCP: Un servidor Node.js que implementa el Protocolo de Contexto de Modelo (MCP) para comunicarse con asistentes de IA en Cursor
  2. Extensión de Chrome: Una extensión del navegador que recibe comandos del servidor MCP y controla el navegador

El sistema utiliza WebSocket (puerto 9876 por defecto) para establecer un canal de comunicación bidireccional entre el servidor MCP y la extensión de Chrome.

Instalación

Requisitos previos

  • Node.js (v14 o superior)
  • Navegador Chrome
  • Editor Cursor con Claude 3.7 Sonnet

Configuración de la herramienta MCP

  1. En Cursor, ve a Configuración → MCP
  2. Añade un nuevo servidor MCP global con la siguiente configuración:
{
  "mcpServers": {
    "CodingBaby-Browser-MCP": {
      "command": "npx",
      "args": ["@sydneyassistent/codingbaby-browser-mcp"]
    }
  }
}

Configuración de la extensión de Chrome

  1. Instala la Extensión CodingBaby desde Chrome Web Store
  2. Habilita la extensión y asegúrate de que tenga los permisos necesarios

Uso

Una vez instalado, puedes pedirle a Claude 3.7 en Cursor que controle tu navegador:

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

Comandos disponibles

  • navigate: Abre una URL en el navegador
  • click: Haz clic en elementos
  • type: Introduce texto en campos de formulario
  • pressKey: Simula acciones de teclado
  • scroll: Desplázate en cualquier dirección
  • takeScreenshot: Captura el contenido del navegador
  • wait: Pausa la ejecución durante un tiempo especificado
  • setViewport: Cambia las dimensiones de la ventana del navegador
  • tabNew, tabList, tabSelect, tabClose: Gestión de pestañas
  • batch: Ejecuta múltiples comandos en secuencia
  • close: Cierra la sesión del navegador

Desarrollo y depuración

Si has descargado el código fuente, puedes configurar el proyecto para fines de desarrollo y depuración.

Depuración de la extensión de Chrome

Para cargar y depurar la extensión de Chrome desde el código fuente:

  1. Abre Chrome y navega a chrome://extensions/
  2. Habilita el "Modo de desarrollador" activando el interruptor en la esquina superior derecha
  3. Haz clic en el botón "Cargar descomprimida"
  4. Navega al directorio chrome-extension en el proyecto y selecciónalo
  5. La extensión se cargará ahora en modo de desarrollador
  6. Puedes ver los registros de la consola haciendo clic derecho en el icono de la extensión, seleccionando "Inspeccionar" y abriendo la pestaña Consola
  7. Realiza cambios en el código de la extensión y haz clic en el icono de actualización en la tarjeta de la extensión para aplicar los cambios

Depuración del servidor MCP en Cursor

Para usar el código del servidor MCP local para depuración:

  1. Clona o descarga el repositorio en tu máquina local
  2. Navega al directorio del proyecto e instala las dependencias: 
    cd Browser-MCP
npm install
  3. En Cursor, ve a Configuración → MCP
  4. Añade un nuevo servidor MCP con la siguiente configuración: 
    {
  "mcpServers": {
    "CodingBaby-Browser-MCP-Dev": {
      "command": "node",
      "args": ["/absolute/path/to/your/Browser-MCP/index.js"]
    }
  }
}
    Reemplaza /absolute/path/to/your/ con la ruta real al proyecto descargado
  5. Haz clic en "Actualizar" para cargar el servidor MCP
  6. Ahora puedes hacer cambios en el código del servidor MCP y reiniciar el servidor haciendo clic en "Actualizar" en la configuración MCP de Cursor

Para depurar, puedes:

  • Revisar los registros MCP de Cursor haciendo clic en el icono de estado MCP
  • Añadir sentencias console.error() al código para un registro más detallado
  • Ejecutar el servidor MCP manualmente desde la terminal para obtener la salida completa de la consola

Solución de problemas

  • Conflicto de puerto: Si el puerto 9876 ya está en uso, la herramienta intentará liberarlo automáticamente
  • Problemas de conexión: Asegúrate de que la extensión de Chrome esté correctamente instalada y habilitada

Licencia

MIT

Enlaces