Integración con MCP

Headless Browser puede usarse con MCP, permitiendo a sistemas de IA controlar navegadores remotos. Aprende más sobre esta integración.

Esta guía explica cómo integrar Oxylabs Headless Browser con MCP (Model Context Protocol) para permitir que los sistemas de IA interactúen con y controlen navegadores remotos.

Visita el repositorio de Oxylabs en GitHub para un ejemplo completo y funcional de integración de MCP con Oxylabs Headless Browser.

Descripción general

Model Control Protocol (MCP) permite a sistemas de IA como Claude interactuar con navegadores y realizar tareas basadas en la web. Al integrar Oxylabs Headless Browser con MCP, puedes aprovechar sistemas de IA para realizar navegación web, recuperación de datos y automatización tareas usando navegadores remotos con capacidades avanzadas de sigilo y integración de Residential Proxy integración.

El host MCP (como Claude Desktop o Cursor) incluye un cliente MCP integrado. Playwright-MCP actúa como un servidor MCP y, en lugar de usar un navegador local, se conecta a Headless Browser mediante una conexión WebSocket segura (WSS).

Comenzando

Antes de configurar la integración, asegúrate de tener:

1. Cuenta de Oxylabs: obtén tu nombre de usuario y contraseña para Oxylabs Headless Browser.

Por ahora, puedes obtener Headless Browser a través de nuestro equipo de ventas en [email protected].

1. Node.js: versión 18.0.0 o superior (incluye npm/npx)

• Windows: descarga e instala desde nodejs.org

• macOS: usa Homebrew (brew install node) o descarga desde nodejs.org

• Linux:

  • Ubuntu/Debian: sudo apt update && sudo apt install nodejs npm

  • Fedora: sudo dnf install nodejs npm

  • O descarga desde nodejs.org

1. Host MCP: tener instalado Claude Desktop o Cursor.

Configurar el servidor MCP

Crea un bloque de configuración del servidor MCP con tus credenciales de Oxylabs. Sustituye <username> y <password> por tus credenciales reales de Oxylabs:

"oxylabs_headless_browser": {
  "command": "npx",
  "args": [
    "@playwright/mcp@latest",
    "--cdp-endpoint",
    "wss://<username>:<password>@ubc.oxylabs.io"
  ]
}

Opción 1: integración con Cursor

1. Abre Cursor

2. Abre la configuración de Cursor

3. Selecciona MCP

4. Agrega la configuración del servidor MCP preparada

5. Reinicia Cursor

Opción 2: integración con Claude Desktop

1. Abre Claude Desktop

2. Abre la configuración de Claude Desktop

3. Navega a Developer

4. Presiona Edit Config

5. Edita el claude_desktop_config.json archivo

6. Agrega la configuración del servidor MCP preparada

7. Reinicia Claude Desktop

Opciones de configuración avanzada

Selección de país

Puedes especificar un país para tu sesión del navegador añadiendo el ?p_cc parámetro a tu URL de conexión:

"oxylabs_headless_browser": {
  "command": "npx",
  "args": [
    "@playwright/mcp@latest",
    "--cdp-endpoint",
    "wss://<username>:<password>@ubc.oxylabs.io?p_cc=US"
  ]
}

Sustituye US por el código de país SO-3166 que desees. Si no se especifica un país, el sistema asignará uno automáticamente según la disponibilidad.

Puedes encontrar la lista de ISO-3166 country codes aquí.

Infraestructura basada en EE. UU.

Para usuarios que operan principalmente en EE. UU., puedes conectarte directamente a la infraestructura con base en EE. UU. para tiempos de carga más rápidos:

"oxylabs_headless_browser": {
  "command": "npx",
  "args": [
    "@playwright/mcp@latest",
    "--cdp-endpoint",
    "wss://<username>:<password>@ubc-us.oxylabs.io"
  ]
}

Esta solución acorta principalmente el tiempo de respuesta para usuarios en EE. UU. y no debe confundirse con la selección de geo-ubicación de proxies.

Argumentos del navegador (solo Chrome)

Para Headless Browser basado en Chrome, puedes especificar argumentos adicionales del navegador usando el bargs parámetro:

"oxylabs_headless_browser": {
  "command": "npx",
  "args": [
    "@playwright/mcp@latest",
    "--cdp-endpoint",
    "wss://<username>:<password>@ubc.oxylabs.io/?bargs=force-color-profile:srgb&bargs=window-position:100,100"
  ]
}

Los argumentos compatibles incluyen:

• force-color-profile:<profile>: Forzar que todos los monitores se traten como si tuvieran el perfil de color especificado

• window-position:X,Y: Especifica la posición inicial de la ventana

• hide-scrollbars: Evita crear barras de desplazamiento para el contenido web

• enable-features:<feature1>,<feature2>,<feature3>: Lista separada por comas de nombres de funciones a habilitar

• disable-notifications: Deshabilita las APIs Web Notification y Push

Solución de problemas

Si encuentras problemas con la integración:

1. Problemas de conexión:

   • Verifica tus credenciales de Oxylabs

   • Comprueba tu conexión de red

   • Asegúrate de que los firewalls no estén bloqueando las conexiones WebSocket

2. Problemas de rendimiento:

   • Para usuarios en EE. UU., prueba los endpoints específicos de EE. UU.

   • Aumenta los timeouts en tu configuración si es necesario

3. El navegador no carga:

   • Comprueba la versión de Node.js (debe ser 18.0.0 o superior)

   • Verifica que npx esté correctamente instalado

   • Reinicia la aplicación host MCP