Web Scraping en Cline con el servidor MCP de Bright Data

En esta entrada de blog, aprenderá:

• Qué es Cline y por qué está ganando popularidad en la comunidad de programadores.
• Cómo la integración de sus agentes de codificación de IA puede llevar su experiencia de desarrollo al siguiente nivel.
• Cómo conectar Cline con el servidor Bright Data Web MCP para crear agentes de codificación de IA con herramientas de recuperación de datos web.

Sumerjámonos.

¿Qué es Cline?

Cline es una extensión de Visual Studio Code que actúa como asistente autónomo de codificación basado en inteligencia artificial. Se integra tanto en la línea de comandos como en el editor de código para ayudarte durante todo el proceso de desarrollo.

La extensión Cline VS Code va más allá del completado básico de código. Puede analizar estructuras de proyectos, generar y editar código, ejecutar comandos de terminal e incluso ayudar a depurar aplicaciones web.

Cline admite múltiples API de IA, lo que le permite conectarse a diferentes modelos y proveedores. También puede ampliar su funcionalidad añadiendo herramientas personalizadas basadas en IA a través de MCP(Model Context Protocol).

En el momento de escribir este artículo, la extensión Cline tiene más de 48.000 estrellas en GitHub y más de 1,9 millones de descargas en Visual Studio Marketplace.

¿Por qué los agentes de Cline deben poder extraer datos de la web?

Por muy potente que sea el LLM integrado en Cline, sigue enfrentándose a una limitación común a todos los modelos lingüísticos: los conocimientos obsoletos. Un LLM solo puede responder basándose en los datos estáticos con los que fue entrenado, que representan una instantánea del pasado.

Dada la rapidez con la que evoluciona el mundo de la tecnología, el problema es aún mayor. Por eso no es raro que los LLM sugieran enfoques de codificación anticuados, métodos obsoletos o que pasen totalmente por alto funciones introducidas recientemente.

Ahora imagínese que su asistente de codificación Cline AI puede buscar tutoriales, páginas de documentación y guías actualizadas, y aprender de ellas. Esto es posible integrando Cline con una solución que amplía los LLM con capacidades de búsqueda web y acceso a datos.

Eso es exactamente lo que ofrece el servidor Bright Data Web MCP. Este servidor proporciona una colección de más de 60 herramientas preparadas para IA para la recopilación de datos web en tiempo real, impulsadas por la infraestructura de datos de IA de Bright Data.

Para obtener la lista completa de herramientas expuestas por el servidor MCP de Bright Data Web, consulte la documentación.

Otros posibles casos de uso son:

• Recuperación de datos SERP en tiempo real e inserción de enlaces contextuales en sus informes Markdown al utilizar VS Code como editor de texto.
• Pedir tutoriales o documentación basada en el código que estás escribiendo activamente.
• Extraer datos de sitios reales sobre la marcha y guardarlos localmente para realizar simulaciones o análisis posteriores.

Veamos ahora el servidor Bright Data Web MCP en acción dentro de Cline. Repasaremos uno de los casos de uso anteriores para comprender lo que realmente permite esta integración.

Cómo añadir capacidades de recuperación de datos a un agente de codificación de IA en Cline

Aprenda a añadir Cline a Visual Studio Code e integrarlo con el servidor MCP Bright Data Web. El resultado de esta sección paso a paso será un agente de codificación de IA que puede obtener datos de la web e interactuar con ellos. Esto permitirá al agente ofrecer resultados más precisos y resultados de tareas más inteligentes.

En concreto, construirá un agente Cline AI mejorado con capacidades de recuperación de datos y lo utilizará para:

1. Rastrea una página de producto de Amazon.
2. Almacena los datos localmente.
3. Crea un script Node.js para cargar y procesar esos datos.

Siga los pasos que se indican a continuación.

Requisitos previos

Para seguir este tutorial, necesitas

• Node.js instalado localmente (recomendamos la última versión LTS)
• Un relato de Cline
• Una clave API de Bright Data
• (Opcional) Una clave API para su LLM preferido (como la clave API de Google Gemini)

No se preocupe si aún no tiene una clave API de Bright Data o una cuenta de Cline. Le guiaremos para configurarlas en los siguientes pasos.

Paso 1: Instalar Cline en Visual Studio Code

Abra Visual Studio Code, haga clic en el icono Extensiones de la barra lateral izquierda, busque “cline” y seleccione la extensión Cline de la lista. En la pestaña de la extensión Cline, haz clic en el botón “Instalar”:

Si es la primera vez que instala una extensión de Cline, se le pedirá que confíe en el editor. Haga clic en “Confiar en el editor e instalar” para continuar:

Una vez instalado, debería ver un icono de Cline en la barra lateral izquierda. Haz clic en él para abrir el panel de Cline:

Nota: Si el icono de Cline no aparece, intente recargar Visual Studio Code. Para cualquier otro problema, consulte la página oficial de documentación de la instalación.

¡Maravilloso! Cline se ha instalado en VS Code.

Paso 2: Configurar la conexión Cline

Ahora debe conectar su cuenta de Cline a la extensión previamente instalada. Para ello, haga clic en el botón “Empezar gratis”:

Será redirigido a la siguiente página en su navegador:

Regístrate (o inicia sesión si ya tienes una cuenta), y serás redirigido de nuevo a la ventana de VS Code:

En Visual Studio Code, ahora debería ver el siguiente modal. Haga clic en “Abrir” para autenticar la extensión Cline:

La extensión Cline debería tener ahora este aspecto:

Si vuelves a tu cuenta de Cline en el navegador, verás que viene con 0,50 $ en créditos gratuitos por defecto:

Si tiene previsto utilizar LLM premium a través de Cline, considere la posibilidad de añadir créditos. (El motivo es que el saldo por defecto solo permite realizar pruebas limitadas).

Alternativamente, si quieres evitar gastar dinero o prefieres usar tu propio proveedor de LLM, puedes conectar tu clave API directamente. Para ello, haz clic en el icono de engranaje del panel de Cline. A continuación, selecciona “Configuración API” y pega tu clave API para configurar tu integración LLM:

En el ejemplo anterior, hemos integrado Cline con el modelogemini-2.5-flash, de uso gratuito a través de la API.

¡Impresionante! Cline está ahora totalmente configurado en VS Code y listo para ayudarle a construir un agente de codificación AI con capacidades de raspado web.

Paso nº 3: Instalar el servidor MCP de Bright Data

Si aún no lo ha hecho, cree una cuenta de Bright Data. Si ya tiene una, simplemente inicie sesión.

A continuación, siga las instrucciones oficiales para recuperar su Bright Data API. Para simplificar, en las instrucciones siguientes se asume que está utilizando un token de API con permisos de administrador.

Ahora puede instalar el servidor MCP Web de Bright Data de forma global en su entorno Node.js mediante:

npm install -g @brightdata/mcp

A continuación, comprueba que todo funciona con el siguiente comando Bash:

API_TOKEN="<YOUR_BRIGHT_DATA_API>" npx -y @brightdata/mcp

O, en Windows, el comando PowerShell equivalente es:

$env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; npx -y @brightdata/mcp

En el comando anterior, sustituya el marcador de posición por la API real de Bright Data que recuperó anteriormente. Este comando establece la variable de entorno API_TOKEN necesaria e inicia el servidor MCP utilizando el paquete @brightdata/mcp npm.

Si todo está configurado correctamente, tu terminal debería mostrar algo como esto:

Como puede ver, la primera vez que ejecuta el comando, el paquete @brightdata/mcp inicializa las zonas de Bright Data necesarias en su cuenta. Más concretamente, crea una zona para Web Unlocker y otra para Scraping Browser API. Estas dos zonas permiten al servidor MCP ejecutar todas las herramientas que expone.

Para comprobarlo, inicie sesión en su panel de Bright Data y vaya a la página“Proxies & Scraping Infrastructure“. Verá que se han creado automáticamente las siguientes zonas:

Nota: Si no utiliza un token de API con permisos de administrador, deberá crear las zonas manualmente. Consulte la documentación oficial para obtener información detallada.

¡Fantástico! El servidor MCP de Bright Data Web funciona a las mil maravillas.

Paso 4: Conectar Cline al servidor MCP de Bright Data

Ha llegado el momento de integrar la extensión de Cline con el servidor MCP de Bright Data Web que se ejecuta localmente. Comience haciendo clic en el botón “Servidores MCP” del panel de Cline:

Accederás a la sección de configuración de los Servidores MCP de Cline. Cambia a la pestaña “Instalado” y haz clic en el botón “Configurar servidores MCP”:

Se abrirá un archivo cline_mcp_setting.json en Visual Studio Code. En él puede definir a qué servidores MCP puede conectarse la extensión de Cline. Para la integración con el servidor MCP de Bright Data Web, configúrelo del siguiente modo:

{
  "mcpServers": {
    "Bright Data": {
      "autoApprove": [],
      "disabled": false,
      "timeout": 300,
      "type": "stdio",
      "command": "npx",
      "args": [
        "@brightdata/mcp"
      ],
      "env": {
        "API_TOKEN": "<YOUR_BRIGHT_DATA_API>"
      }
    }
  }
}

Nota: Para más detalles, consulte la edición oficial de GitHub.

En otras palabras, añada la configuración “Bright Data” dentro del campo mcpServers. Asegúrese de sustituir por su token de API de Bright Data real.

Deberías ver algo como esto:

Perfecto. Ahora, si entra en la pestaña “Instalado”, verá una entrada para el servidor Bright Data Web MCP. Despliéguela para ver todas las herramientas que soporta:

Aquí puede configurar el servidor Bright Data Web MCP y sus herramientas. Para este flujo de trabajo, la configuración predeterminada está bien.

Para más información, consulta la documentación oficial.

¡Genial! La extensión Cline ya puede conectarse al servidor MCP de Bright Data Web y utilizar sus herramientas.

Paso 5: Utilizar el agente Cline AI

Ya está listo para probar el agente de codificación de Cline AI conectado al servidor MCP de Bright Data Web en Visual Studio Code.

Empiece por abrir Cline. A continuación, haga clic en la flecha de la derecha para acceder al menú “Configuración de aprobación automática”. En el menú, marque la opción “Usar servidores MCP” para permitir la conexión automática a los servidores MCP configurados:

Con esta opción activada, Cline se conectará automáticamente al servidor MCP sin pedir permiso. Aún así, se le preguntará antes de utilizar una herramienta, por lo que debería ser suficiente.

Pruebe las capacidades de acceso a datos en su agente de codificación de IA con una solicitud como ésta:

Scrape data from "https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/", save it to a local data.json file, and create a Node.js index.js script to load and print its contents.

Esto describe un escenario potencial del mundo real, que resulta útil para recopilar datos para análisis, simulaciones o pruebas.

Ejecute el prompt en Cline, y debería ver la siguiente interacción:

El GIF anterior se ha acelerado, pero esto es lo que ocurrió:

1. La extensión Cline envía el mensaje a su LLM configurado (por ejemplo, gemini-2.5-flash).
2. El LLM identifica la herramienta MCP adecuada para el trabajo, que es web_data_amazon_product.
3. Le pide permiso para ejecutar esa herramienta a través de Bright Data MCP, utilizando la URL del producto Amazon desde el prompt (es decir, https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/)
4. Una vez aprobada, la tarea de scraping se lanza en los servidores de Bright Data.
5. A continuación, Cline pide permiso para acceder al resultado de la tarea.
6. Entre bastidores, Bright Data realiza la tarea de scraping, y Cline recibe los datos reales del producto en formato JSON. Esa es la salida de la herramienta MCP, que muestra Cline.
7. Se le pide permiso para guardar los datos en un archivo data.json.
8. Una vez aprobado, el expediente se crea y se rellena.
9. Se le pedirá que cree un script index.js para leer e imprimir el contenido JSON.
10. Una vez aprobado, se genera el expediente.

Una vez completada la tarea, su proyecto contendrá estos dos archivos:

Donde data.json almacena los datos de productos de Amazon en formato JSON recuperados por Amazon Scraper de Bright Data:

Un index.js: contiene lógica Node.js para cargar e imprimir su contenido:

Ejecute el script index.js producido con:

node index.js

En el terminal, debería ver impresos los datos del producto:

Los flujos de trabajo funcionaron perfectamente, ya que los datos contenidos en el archivo JSON coinciden con los datos de la página de producto original de Amazon:

Ten en cuenta que data.json almacena datos raspados reales, no contenido alucinado del LLM. Además, recuerda que raspar Amazon no es poca cosa, dados sus estrictos sistemas anti-bot (como el famoso Amazon CAPTCHA).

Ese es el poder de Bright Data + Cline, y el anterior era sólo un caso de uso básico. Ahora puede probar más indicaciones y explorar flujos de trabajo de datos avanzados basados en LLM, directamente desde Visual Studio Code.

¡Et voilà! Acaba de presenciar una recuperación de datos web sin fisuras utilizando la integración MCP de Bright Data con el agente de codificación Cline AI.

Conclusión

En este artículo, aprendió a integrar Cline con el servidor MCP de Bright Data Web para construir un agente de codificación de IA que puede acceder a la web. Esto fue posible gracias al soporte de Cline para la integración MCP.

Tenga en cuenta que esto es sólo un ejemplo sencillo. Para crear agentes más avanzados, considere explorar toda la gama de herramientas disponibles en el servidor MCP de Bright Data Web. Estas herramientas pueden dar soporte a la mayoría de sus casos de uso de datos basados en IA.

Cree una cuenta gratuita en Bright Data y empiece a explorar nuestras herramientas de datos web preparadas para la IA.