Agregando el Web MCP de Bright Data a Roo Code en Visual Studio Code

En este tutorial, aprenderá

1. Qué es Roo Code y por qué es actualmente uno de los agentes de codificación de IA más utilizados para IDEs.
2. Cómo equiparlo con capacidades de interacción web y extracción de datos puede hacerlo aún más útil.
3. Cómo conectar Roo Code con el servidor Bright Data Web MCP en Visual Studio Code para crear un agente de codificación de IA mejorado.

¡Vamos a sumergirnos!

¿Qué es Roo Code?

Roo Code es un agente de codificación autónomo potenciado por IA que vive directamente en su editor. En detalle, puede

• Operar como un programador par potenciado por IA con el que puedes comunicarte en lenguaje natural.
• Leer y escribir archivos directamente en tu espacio de trabajo.
• Ejecutar comandos de terminal.
• Automatizar acciones del navegador a través de una integración de navegador incorporada.
• Integrarse con una amplia gama de API/modelos compatibles con OpenAI o personalizados.
• Adaptar su “personalidad” y capacidades a través de diferentes modos.
• Conectarlo a proveedores de terceros a través de la integración MCP.

Roo Code nació como un fork de Cline y está disponible como una extensión de Visual Studio Code de código abierto. Permite automatizar tareas de codificación y mejorar el flujo de trabajo de desarrollo utilizando IA directamente en VS Code.

A diferencia de Cline, Roo Code no requiere una cuenta para funcionar (aunque existe una plataforma Roo Cloud con funciones adicionales para empresas). Para más detalles, consulte nuestra guía sobre la integración de Cline con el servidor Web MCP de Bright Data.

Actualmente, el proyecto Roo Code tiene más de 18k estrellas en GitHub y 750k instalaciones en el marketplace de Visual Studio Code. Esto significa que es uno de los agentes de codificación de IA más utilizados para IDEs.

Por qué integrar el MCP Web en la extensión Roo Code VS Code

El LLM que configure en Roo Code tiene la limitación común de todos los modelos de lenguaje: conocimiento obsoleto. Un LLM sólo puede generar respuestas basadas en los datos estáticos con los que fue entrenado, que no son más que una instantánea del pasado.

Dada la rapidez con la que evoluciona el mundo de la tecnología, esta limitación no puede ignorarse. Los LLM pueden sugerir fácilmente enfoques de codificación obsoletos, métodos obsoletos o pasar por alto características recién introducidas.

Ahora, imagina darle a tu asistente de codificación Roo Code la capacidad de buscar tutoriales, páginas de documentación y guías actualizadas, y aprender de ellas en tiempo real. Esto es posible integrando Roo Code con una solución que amplíe los LLM con capacidades de búsqueda web y acceso a datos.

Esto es precisamente lo que puede encontrar en el servidor Web MCP de Bright Data. Este servidor MCP de código abierto(ahora con un nivel gratuito) ofrece más de 60 herramientas preparadas para la IA para la interacción web y la recopilación de datos en tiempo real.

Las dos herramientas más utilizadas en el servidor MCP son:

Además, existen más de 55 herramientas especializadas para interactuar con páginas web (por ejemplo, scraping_browser_click) y recopilar datos estructurados de una amplia gama de sitios web, como Amazon, Yahoo Finance, TikTok, LinkedIn, etc. Por ejemplo, la herramienta web_data_amazon_product recupera información detallada y estructurada de productos de Amazon aceptando como entrada una URL de producto válida.

Entre los posibles casos de uso de Bright Data Web MCP + Roo Code se incluyen:

• Recuperar datos SERP en directo e insertar enlaces contextuales en sus informes Markdown directamente en VS Code.
• Solicitar tutoriales o documentación basados en el código que está escribiendo activamente.
• Extraer datos públicos recientes de sitios web y guardarlos localmente para burlarse de ellos, analizarlos o procesarlos posteriormente.

Veamos ahora el MCP Web en acción dentro de Roo Code.

Cómo conectar Roo Code al MCP Web de Bright Data en Visual Studio Code

En esta sección guiada, aprenderá cómo añadir Roo Code a Visual Studio Code e integrarlo con el Web MCP de Bright Data. El resultado final será un agente de codificación de IA capaz de acceder e interactuar con la web. Estas capacidades harán que el agente sea más ingenioso y preciso.

Específicamente, construirá un agente Roo Code AI mejorado con capacidades de recuperación de datos y lo utilizará para:

1. Raspar una página de productos de Amazon en tiempo real.
2. Almacenar los datos localmente.
3. Crear un script Python para cargar y procesar los datos recogidos.

Sigue los siguientes pasos para empezar.

Requisitos previos

Para seguir este tutorial, necesita

• Una clave API de Bright Data
• Una clave API de uno de los proveedores LLM soportados (en esta guía, utilizaremos una clave API de OpenRouter)

No se preocupe si aún no dispone de una clave API de Bright Data. Le ayudaremos a configurarla en los siguientes pasos.

Para ejecutar la salida generada, también necesitará Python instalado localmente.

Paso #1: Instalar Roo Code en Visual Studio Code

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

Si es la primera vez que instala una extensión del proveedor Roo Code, se le pedirá que confíe en el editor. Pulse “Confiar en el editor e instalar” para continuar.

Una vez completada la instalación, verá un icono de Roo Code en la barra lateral izquierda. Haga clic en él para abrir la extensión:

Nota: Si el icono Roo Code no aparece, intente recargar Visual Studio Code. Para cualquier otro problema, consulte la guía oficial de instalación.

¡Listo! Roo Code ya está disponible en VS Code.

Paso #2: Configure su conexión OpenRouter

Ahora que Roo Code está instalado, el siguiente paso es conectarlo a un proveedor LLM. Roo Code soporta una amplia gama de proveedores, incluyendo Anthropic, Claude Code, AWS Bedrock, DeepSeek, Google Gemini, Groq, Hugging Face, LiteLLM, Mistral AI, Ollama, OpenAI, OpenRouter, Requesty, xAI (Grok), y muchos más.

En esta guía, conectaremos Roo Code a un OpenRouter y utilizaremos el modelo qwen/qwen3-coder:free. Esta configuración es completamente gratuita, lo que significa que no se requieren fondos ni créditos.

Nota: Si prefiere otro proveedor o ya dispone de claves API diferentes, siga la guía de integración específica en la documentación de Roo Code.

Cree una cuenta OpenRouter y recupere su clave API. Si no está familiarizado con este proceso, eche un vistazo a lo que hicimos en nuestro tutorial sobre Qwen-Agent.

En el panel de extensiones de Roo Code, desplácese hacia abajo hasta que vea el botón “OpenRouter”. Haga clic en él:

Se abrirá una ventana del navegador que le pedirá que inicie sesión en su cuenta OpenRouter y autorice Roo Code. Pulse “Autorizar” para continuar:

De vuelta en VS Code, se le pedirá que confirme la conexión. Pulse “Abrir” para completar el proceso de autorización:

Esto es lo que debería ver ahora en Visual Studio Code:

Como puede ver, la autorización ha funcionado correctamente y Roo Code está listo para usarse.

Por defecto, Roo Code utiliza el modelo Claude Opus 4 (que requiere una cuenta OpenRouter financiada para ser utilizado). Para cambiar a un modelo libre (o a cualquier otro modelo), haga clic en el icono de engranaje del menú superior:

En la pestaña “Configuración”, desplácese hasta el desplegable “Modelo” y seleccione el modelo que desea configurar:

Por ejemplo, selecciona qwen/qwen3-coder:free, un modelo de uso gratuito optimizado para escenarios de codificación. Una vez hecho esto, haz clic en el botón “Hecho” para confirmar los cambios.

¡Fantástico! Roo Code ya está totalmente configurado en VS Code. Es hora de convertirlo en un agente de codificación con capacidades de interacción y recuperación de datos web a través de la integración MCP.

Paso #3: Instalar el MCP Web de Bright Data

Si aún no lo ha hecho, empiece por crear una cuenta Bright Data. Si ya tiene una, inicie sesión.

Siga las instrucciones oficiales para generar su clave API de Bright Data. Asegúrese de guardarla en un lugar seguro. Asumiremos que está utilizando una clave API con permisos de administrador, ya que esto facilita la integración.

Abra el terminal e instale el Web MCP globalmente mediante el paquete @brightdata/mcp:

npm install -g @brightdata/mcp

Verifica que el servidor MCP local funciona con este comando Bash:

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

O, de forma equivalente, en Windows PowerShell:

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

Sustituya el marcador de posición <YOUR_BRIGHT_DATA_API> por el token real de la API de Bright Data. Los dos comandos anteriores establecen la variable de entorno API_TOKEN necesaria y, a continuación, inician el servidor MCP a través del paquete npm @brightdata/mcp.

En caso de éxito, debería ver registros como los de la imagen siguiente:

En el primer lanzamiento, el paquete configura automáticamente dos zonas predeterminadas en su cuenta de Bright Data:

• mcp_unlocker: Una zona para Web Unlocker.
• mcp_browser: Una zona para Browser API.

Estas dos zonas son necesarias para acceder a todas las herramientas expuestas por el MCP Web.

Para confirmar que se han creado las zonas anteriores, inicie sesión en su panel de Bright Data. Navegue a la página“Proxies & Scraping Infrastructure“, y debería ver las dos zonas listadas:

Nota: Si su token de API no tiene permisos de administrador, es posible que estas zonas no se configuren automáticamente. En este caso, puede crearlas manualmente en el panel de control y especificar sus nombres mediante variables de entorno, como se documenta en la página de GitHub del paquete.

Por defecto, el servidor MCP sólo expone las herramientas search_engine y scrape_as_markdown, que pueden utilizarse de forma gratuita.

Para desbloquear funciones avanzadas como la automatización del buscador y la extracción de datos estructurados de una larga lista de dominios, es necesario activar el modo Pro. Para ello, establezca la variable de entorno PRO_MODE=true antes de iniciar el servidor MCP:

API_TOKEN="<TU_BRIGHT_DATA_API>" PRO_MODE="true" npx -y @brightdata/mcp

O, en PowerShell

$Env:API_TOKEN="<TU_BRIGHT_DATA_API>"; $env:PRO_MODE="true"; npx -y @brightdata/mcp

Importante: Si elige utilizar el modo Pro, tendrá acceso a las más de 60 herramientas. Por otro lado, el modo Pro no está incluido en el nivel gratuito y supondrá un coste adicional.

Perfecto. Ha verificado que el servidor Web MCP funciona en su máquina. Finalice el proceso del servidor, ya que ahora configurará Roo Code para que lo inicie automáticamente y se conecte a él.

Paso #4: Conectar Roo Code al Web MCP

Es hora de conectar la extensión Roo Code al MCP Web de Bright Data. En el panel de Roo Code, en el menú superior, seleccione la opción “Servidores MCP”:

Llegará a la sección de configuración “Servidores MCP”. Aquí puede configurar los servidores MCP, ya sean servidores MCP globales (disponibles en todos los proyectos) o servidores MCP locales (disponibles sólo en el proyecto actual).

El procedimiento de configuración es casi idéntico, así que haga clic en el botón “Editar MCP global”. Esto abrirá un archivo mcp_settings.json, que contiene una entrada mcpServers vacía:

Ese archivo de configuración es donde debe especificar los detalles para conectarse al MCP de Bright Data Web. Asegúrese de que contiene el siguiente código

{
  "mcpServers": {
    "brightData": {
      "comando": "npx",
      "args": [
        "-y",
        "@brightdata/mcp"
      ],
      "env": {
        "API_TOKEN": "<SU_CLAVE_API_BRIGHT_DATA>",
        "PRO_MODE": "true"
      }
    }
  }
}

En esta configuración:

• El objeto mcpServers indica a Roo Code cómo iniciar servidores MCP externos.
• La entrada brightData define el comando(npx) y las variables de entorno necesarias para iniciar el Web MCP. PRO_MODE es opcional, pero al activarlo se desbloquea todo el conjunto de herramientas disponibles.

Esto es lo que debería ver:

Sustituya el marcador de posición <YOUR_BRIGHT_DATA_API_KEY> por su clave API de Bright Data recuperada anteriormente.

Esta configuración indica a Roo Code que ejecute el mismo comando npx con las variables de entorno vistas en el paso anterior. En otras palabras, Roo Code ya puede iniciar y conectarse al servidor MCP Web de Bright Data. (Habilitar PRO_MODE es opcional pero recomendable).

Una vez que añada la entrada brightData en mcpServers, Roo Code se conectará inmediatamente al servidor Web MCP y mostrará las herramientas disponibles:

Desde que establecimos la variable de entorno PRO_MODE en true, Roo Code proporciona ahora acceso a más de 60 herramientas. Sin PRO_MODE, sólo 2 herramientas estarían disponibles: scrape_as_markdown y search_engine.

Pulse el botón “Hecho”, y habrá integrado con éxito el MCP Web en Roo Code. ¡Fantástico!

Paso #5: Probar el Agente de Roo Code

Por defecto, Roo Code se ejecuta en modo Arquitecto, que actúa como un “líder técnico experimentado y planificador que ayuda a diseñar sistemas y crear planes de implementación”.

Para la mayoría de los escenarios, usted querrá utilizarlo como un programador par de AI en su lugar. Para ello, cambie el modo Roo Code a Code, como se muestra a continuación:

Ahora, prueba las capacidades de recuperación de datos web de tu agente de codificación de IA con una solicitud como la siguiente:

Extrae datos de "https://www.amazon.com/Owala-FreeSip-Insulated-Stainless-BPA-Free/dp/B0F354MWSL/", guárdalos en un archivo local "product.json" y crea un script Python "script.py" para cargar e imprimir su contenido.

Esto simula un caso de uso en el mundo real, recuperando datos para análisis, visualización, simulación u otros flujos de trabajo.

Ejecute la solicitud en Roo Code, y debería ver un resultado similar a este:

El GIF anterior se ha acelerado, pero esto es lo que sucede paso a paso:

1. Roo Code divide la tarea en un plan de 3 pasos.
2. Determina que la mejor forma de obtener los datos de los productos de Amazon es utilizar la herramienta web_data_amazon_product del MCP Web.
3. Se te pide que apruebes la ejecución de la herramienta.
4. La herramienta se ejecuta y los datos de los productos de Amazon se recuperan en formato JSON.
5. Se le pregunta si los datos deben guardarse en un archivo local product.json.
6. Tras la aprobación, se crea y rellena el archivo JSON.
7. Roo Code solicita permiso para generar un archivo script.py que lea e imprima el contenido de product.json.
8. El archivo se crea con el código Python generado.
9. Se le pide que ejecute el script con python script.py.
10. El script falla debido a problemas de codificación.
11. Roo Code sugiere actualizar el script con manejo UTF-8.
12. Tras la aprobación, el script actualizado se ejecuta correctamente y produce el resultado esperado.

Observe cómo Roo Code sugirió proactivamente la ejecución del script, a pesar de que su solicitud original no lo pedía explícitamente. Esto fue útil, ya que ayudó al agente a detectar fallos y refinar su propia salida.

Después de completar el flujo, su directorio de trabajo debería contener estos dos archivos:

├── product.json
└── script.py

Abra product.json en VS Code:

Este archivo contiene datos reales de productos de Amazon-no salida alucinada o fabricada. En concreto, los datos fueron capturados por Bright Data utilizando la herramienta web_data_amazon_product (que aprovecha internamente Amazon Scraper) de la página del producto de destino que se muestra a continuación:

Nota: El raspado de Amazon es notoriamente difícil debido a sus estrictas protecciones anti-bot (por ejemplo, el famoso CAPTCHA de Amazon). Un LLM estándar por sí solo no puede manejar esta tarea de forma fiable. Es por ello que la combinación de Roo Code con el MCP Web de Bright Data hace que su agente de codificación tenga una potencia única.

Este archivo contiene datos reales de Amazon, no contenido alucinado o inventado generado por el LLM elegido. En concreto, los datos fueron capturados por Bright Data utilizando la herramienta web_data_amazon_product (que internamente llama Amazon Scraper).

A continuación, el archivo script.py generado contiene la lógica para leer e imprimir los datos JSON del producto:

Ejecute el script Python anterior con:

python script.py

El resultado serán los datos del producto cargados desde product.json:

Ese es el poder de Bright Data + Roo Code. Recuerde que el ejemplo anterior era sólo un caso de uso simple, así que experimente con más indicaciones. Explore flujos de trabajo de datos avanzados basados en LLM, dentro de Visual Studio Code.

¡Et voilà! Ha completado la integración MCP de Bright Data en Roo Code.

Conclusión

En esta entrada de blog, ha visto cómo conectar Roo Code con el servidor Bright Data Web MCP(¡que ahora ofrece un nivel gratuito!) en Visual Studio Code. El resultado es un agente de codificación de IA rico en funciones capaz de obtener datos de la web e interactuar con ellos de forma inteligente.

Hemos utilizado este agente mejorado para generar un sencillo script en Python con acceso a los datos de productos de Amazon. Para proyectos más complejos o inspiración, recuerde que las herramientas expuestas por el Web MCP pueden soportar una amplia variedad de flujos de trabajo y escenarios agénticos.

Para crear potentes agentes de IA, explore toda la gama de servicios disponibles en la infraestructura de IA de Bright Data.

Cree una cuenta gratuita en Bright Data y empiece a experimentar con nuestras herramientas web preparadas para la IA.