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

MCP Browser Agent es una integración del Model Context Protocol (MCP) que dota a Claude Desktop de capacidades autónomas para automatizar navegadores web. Esta servidor permite a Claude navegar por sitios web, manipular elementos DOM, ejecutar código JavaScript y realizar llamadas API como un agente de IA, todo mediante instrucciones expresadas en lenguaje natural.

Demo

Momentos destacados:

• 00:00 - Búsqueda en Google: Navegación a la página principal de Google y búsqueda del término “Model Context Protocol”.

• 00:33 - Captura de pantalla: Realización de una captura con nombre personalizado y visualización en Finder. Demuestra que puede guardar contenido visual durante la navegación automatizada.

• 01:00 - Consulta en Wikipedia: Acceso a Wikipedia.org y búsqueda específica. Demuestra como interactuar con diferentes plataformas web y sus funcionalidades de búsqueda.

• 01:38 - Manejo de menú desplegable (I): Acceso a un sitio de pruebas (the-internet.herokuapp.com/dropdown) y selección de “Option 1”. Ilustra la interacción con elementos de formulario y capacidades de selección.

• 01:56 - Manejo de menú desplegable (II):
  Modificación de la selección previa a “Option 2”. Evidencia la capacidad para manipular repetidamente el mismo elemento con diferentes resultados.

• 02:09 - Rellenado de formulario: Navegación a una página de inicio de sesión y rellenado de campos de usuario (“tomsmith”) y contraseña (“SuperSecretPassword!”). Demuestra la automatización en formularios.

• 02:28 - Envío de credenciales: Envío del formulario y finalización del proceso de autenticación. Muestra la capacidad para gestionar procesos secuenciales de múltiples pasos.

• 02:36 - Ejecución de petición API: Realización de una solicitud GET al endpoint de JSONPlaceholder. Ilustra la comunicación directa con APIs y el procesamiento de datos mediante la integración MCP.

Características principales:

• Automatización avanzada de navegador: Navega a cualquier URL, captura pantallas, interactúa con elementos DOM y ejecuta JavaScript directamente desde Claude
• Potente cliente API: Ejecuta solicitudes HTTP (GET, POST, PUT, PATCH, DELETE) con encabezados y contenido del cuerpo configurables
• Gestión de recursos: Accede a registros de consola del navegador y capturas de pantalla a través de la interfaz de recursos MCP
• Soporte multi-navegador: Compatible con Chrome, Firefox, Microsoft Edge y WebKit (motor de Safari)
• Sesión persistente: Mantiene el estado del navegador a través de múltiples comandos para flujos de trabajo complejos
• Manejo de errores: Proporciona información detallada y opciones de recuperación para resolver desafíos de automatización

Descripción técnica:

• Backend Node.js: Implementación eficiente del servidor con TypeScript
• Model Context Protocol (MCP): Integración perfecta con Claude Desktop
• Framework Playwright: Biblioteca de automatización de navegador estándar de la industria
• Soporte multi-navegador: Configura tu motor de navegador preferido
• Exposición de recursos: Registros del navegador y capturas de pantalla disponibles como recursos consultables
• Gestión de sesión con estado: Contexto de navegador persistente entre comandos

Guía de instalación:

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

# Instalar dependencias
npm install

# Construir el proyecto
npm run build

Configuración del servidor MCP:

Configura Claude Desktop para integrarse con el MCP de Browser Agent:

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

Reemplaza RUTA_ABSOLUTA_AL_DIRECTORIO con la ruta completa a tu directorio de instalación.

Selección de navegador:

El MCP Browser Agent admite múltiples tipos de navegadores:

• Chrome (predeterminado): Utiliza el navegador Chrome instalado
• Firefox: Utiliza el navegador Firefox Nightly
• Edge: Utiliza Microsoft Edge
• WebKit: Utiliza el motor WebKit (experiencia similar a Safari)

Puedes especificar tu navegador preferido a través de:

• Argumento de línea de comandos: --browser chrome
• Variable de entorno: MCP_BROWSER_TYPE=firefox
• Archivo de configuración: .mcp_browser_agent_config.json

Requisitos del sistema:

• Node.js 16 o superior
• Aplicación Claude Desktop
• Dependencias de Playwright (instalación automática)
• Navegador compatible (Chrome, Firefox, Edge o WebKit)

Casos de uso:

• Investigación web: Dirige a Claude para navegar por sitios web y extraer información específica
• Automatización de tareas: Automatiza procesos web de múltiples pasos con flujo de trabajo guiado por IA
• Asistencia en pruebas: Ayuda con pruebas y verificación de aplicaciones web
• Exploración de API: Navega por documentación de API y ejecuta solicitudes para exploración
• Extracción de contenido: Recupera contenido de sitios web con navegación compleja
• Automatización de formularios: Rellena y envía formularios complejos con lógica de validación
• Demostraciones técnicas: Crea demostraciones interactivas de aplicaciones web
• Recopilación de datos: Reúne información de múltiples fuentes para análisis

Implementación técnica:

El MCP Browser Agent consta de cuatro componentes principales:

1. Servidor: Inicializa el servidor MCP con el estándar del Model Context Protocol
2. Registro de herramientas: Define esquemas de herramientas de navegador y API con parámetros
3. Manejadores de solicitudes: Gestiona solicitudes del protocolo MCP para herramientas y recursos
4. Ejecutor: Implementa funciones de automatización de navegador usando Playwright

A diferencia de las integraciones básicas, MCP Browser Agent funciona como un verdadero agente de IA manteniendo un estado persistente, capturando registros detallados, gestionando secuencias de interacción complejas y soportando operaciones encadenadas para flujos de trabajo complejos.

Esta integración demuestra el potencial de combinar modelos de lenguaje avanzados con capacidades de automatización de navegador, permitiendo a Claude interactuar con la web tal como lo haría un humano, pero con precisión y velocidad programáticas.

---