# Integración con MCP

Esta guía explica cómo integrar [**Oxylabs Headless Browser**](https://oxylabs.io/products/headless-browser) con MCP (Model Context Protocol) para permitir que los sistemas de IA interactúen y controlen navegadores remotos.

{% hint style="success" %}
Visita el repositorio de GitHub de Oxylabs para ver un ejemplo completo y funcional de [**Integración de MCP con Oxylabs Headless Browser**](https://github.com/oxylabs/oxylabs-hb-mcp)**.**
{% endhint %}

## Resumen

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**](https://oxylabs.io/products/unblocking-browser) con MCP, puedes implementar sistemas de IA para realizar **navegación web, recuperación de datos y automatización** de tareas usando navegadores remotos con capacidades avanzadas de sigilo y [**Residential Proxy**](https://oxylabs.io/products/residential-proxy-pool) integración.

El host MCP (como [**Claude Desktop**](https://claude.ai/download) o [**Cursor**](https://www.cursor.com/)) incluye un cliente MCP integrado. Playwright-MCP actúa como servidor MCP y, en lugar de usar un navegador local, se conecta a Headless Browser mediante una conexión WebSocket segura (WSS).

<figure><img src="/files/d09e972a824f63f3d04ec6c748cdf036b630286d" alt=""><figcaption></figcaption></figure>

## Primeros pasos

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.&#x20;

{% hint style="info" %}
Por ahora, puedes obtener Headless Browser a través de nuestro equipo de ventas en [**hello@oxylabs.io**](mailto:hello@oxylabs.io)**.**
{% endhint %}

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

* **Windows**: descarga e instala desde [**nodejs.org**](https://nodejs.org/)
* **macOS**: usa Homebrew (`brew install node`) o descarga desde [**nodejs.org**](https://nodejs.org/)
* **Linux**:
  * Ubuntu/Debian: `sudo apt update && sudo apt install nodejs npm`
  * Fedora: `sudo dnf install nodejs npm`
  * O descarga desde [**nodejs.org**](https://nodejs.org/)

3. **Host MCP**: Claude Desktop o Cursor instalado.

## Configurar servidor MCP

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

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

### Opción 1: integración con Cursor

1. Abre Cursor
2. Abre la configuración de Cursor
3. Selecciona MCP
4. Añade la configuración preparada del servidor MCP
5. Reinicia Cursor

### Opción 2: integración con Claude Desktop

1. Abre Claude Desktop
2. Abre la configuración de Claude Desktop
3. Ve a Developer
4. Pulsa Edit Config
5. Edita el `claude_desktop_config.json` archivo
6. Añade la configuración preparada del servidor MCP
7. Reinicia Claude Desktop

## Opciones avanzadas de configuración

### Selección de país

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

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

Reemplaza `US` con el código de país ISO-3166 que desees. Si no se especifica ningún país, el sistema asignará uno automáticamente según la disponibilidad.&#x20;

{% hint style="success" %}
Puedes encontrar la lista de **códigos de país ISO-3166** [**aquí**](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes).
{% endhint %}

### Infraestructura basada en EE. UU.

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

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

{% hint style="warning" %}
Esta solución principalmente reduce el tiempo de respuesta para usuarios basados en EE. UU. y no debe confundirse con la selección de geolocalización de proxy.
{% endhint %}

### Argumentos del navegador (solo Chrome)

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

```json
"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 admitidos incluyen:

* `force-color-profile:<profile>`: Fuerza a 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 para habilitar
* `disable-notifications`: Desactiva la Web Notification y las API de 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 basados 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é instalado correctamente
   * Reinicia la aplicación host MCP


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.oxylabs.io/products/es/headless-browser/integration-with-mcp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
