Cómo conectar Claude Code con Bright Data Web MCP Server

En este tutorial aprenderá

Qué es Claude Code y por qué se considera uno de los agentes de codificación CLI más populares y potentes.
Cómo añadir capacidades de interacción web y extracción de datos puede hacerlo aún más eficaz.
Cómo conectar Claude Code con el servidor Bright Data Web MCP para crear un agente de codificación de IA mejorado.

¡Vamos a sumergirnos!

¿Qué es Claude Code?

Claude Code es una herramienta de interfaz de línea de comandos desarrollada por Anthropic que le proporciona acceso directo a los modelos Claude desde su terminal. Permite delegar tareas de codificación complejas, automatizar flujos de trabajo e integrarse con otras herramientas.

En otras palabras, actúa como un programador en pareja de IA y agente de codificación. Claude Code destaca por su capacidad para comprender el contexto del proyecto, generar código, probar, depurar e incluso realizar operaciones Git. Sus principales características son

Codificación agéntica: Comprende tareas de codificación complejas, genera soluciones y las ejecuta directamente dentro de su flujo de trabajo.
Integración del flujo de trabajo: Se integra con varias herramientas y API a través de MCP.
Comprensión de la base de código: Analiza y comprende la estructura y la lógica de su base de código para una generación de código más consciente del contexto.
Generación y edición de código: Genera código nuevo, refactoriza el existente y corrige errores siguiendo sus instrucciones.
Pruebas y linting: Ejecuta pruebas y comandos de linting para identificar y resolver problemas en el código.
Integración con Git: Simplifica las operaciones de Git, como confirmar, enviar y crear solicitudes de extracción.

Con más de 30.000 estrellas en GitHub y más de 5 millones de descargas semanales, Claude Code es una de las soluciones de programación en parejas más populares, si no la más popular. Esto no es sorprendente, dado que los modelos Claude están actualmente considerados entre los mejores LLMs disponibles para codificación.

¿Por qué ampliar Claude Code con acceso web y datos frescos?

Aunque Claude Code funciona con modelos Claude avanzados, se enfrenta a la misma limitación que cualquier LLM: su conocimiento es estático. Los datos de entrenamiento representan una instantánea en el tiempo, que rápidamente queda desfasada. Esto es especialmente cierto en campos tan cambiantes como el desarrollo de software.

Imagínese que su asistente Claude Code CLI pudiera

consultar tutoriales y documentación actualizados,
consultar guías en vivo mientras escribe código, y
navegar por sitios web dinámicos con la misma facilidad con la que navega por sus archivos locales.

Esto es exactamente lo que puede hacer conectándolo al Web MCP de Bright Data.

El MCP web de Bright Data proporciona acceso a más de 60 herramientas preparadas para la IA y creadas para la interacción web y la recopilación de datos en tiempo real. Todas ellas se basan en la rica infraestructura de IA de Bright Data.

Éstas son sólo algunas de las posibilidades al ampliar Claude Code con el MCP Web de Bright Data:

Obtenga resultados actualizados de motores de búsqueda e incrústelos directamente en sus notas o documentos.
Ingerir los últimos tutoriales o documentos de API y, a continuación, generar código de trabajo o incluso proyectos de andamiaje a partir de ellos.
Recopile datos de sitios web en tiempo real para realizar pruebas, simulaciones o análisis más profundos.

Para consultar el catálogo completo de herramientas, explore la documentación de Bright Data MCP.

Si desea ver esta integración en acción, compruebe cómo funciona Web MCP dentro de Claude Code.

Cómo conectar Claude Code a Web MCP de Bright Data

Aprenda cómo instalar y configurar Claude Code localmente e integrarlo con Web MCP de Bright Data. El agente de codificación extendido resultante se utilizará para:

Scrapear una página de perfil de LinkedIn en tiempo real.
Almacenar los datos localmente en un archivo JSON.
Crear una aplicación Express con un endpoint que devuelva datos simulados leídos del archivo JSON.

Sigue estos pasos

Requisitos previos

Antes de empezar, asegúrese de que tiene lo siguiente:

Node.js 18+ instalado localmente (recomendamos la última versión LTS).
Una suscripción Claude o una cuenta Anthropic con créditos (en este tutorial, utilizaremos una cuenta Anthropic).
Una cuenta de Bright Data con una clave API lista.

Tenga en cuenta que no necesita crear estas cuentas ahora mismo. Los pasos siguientes le guiarán a través de la configuración cuando sea necesario.

A continuación, los conocimientos previos opcionales pero útiles son:

Comprensión general del funcionamiento de MCP.
Cierta familiaridad con el servidor MCP de Bright Data Web y sus herramientas.

Paso #1: Instalar y Configurar Claude Code

Para empezar a utilizar Claude Code, primero necesita una suscripción Claude o una cuenta Anthropic con algunos fondos.

Una vez que tu cuenta Claude/Anthropic Console esté lista, instala Claude Code globalmente a través del paquete npm oficial @anthropic-ai/claude-code:

npm install -g @anthropic-ai/claude-code

A continuación, navega a la carpeta del proyecto donde quieres que Claude Code funcione e inícialo con

claude

Para configurar el modelo Claude subyacente u otras configuraciones, consulte la documentación oficial.

Si es la primera vez que ejecuta el agente CLI, debería ver la pantalla de configuración inicial:

Seleccione un tema y pulse Intro para pasar a la vista de autorización:

Elija el tipo de autenticación que desea utilizar (“Claude account with subscription” o “Anthropic Console account”). En este ejemplo, supondremos que ha seleccionado la opción 2, aunque el procedimiento es similar para ambas.

La siguiente página le pedirá que conecte Claude Code a su cuenta de la Consola Antrópica:

Authorizing Claude Code in your Anthropic Console account

Pulse el botón “Autorizar” y vuelva a su terminal. En su cuenta de la Consola Antrópica se creará una nueva clave API:

A continuación, Claude Code almacenará automáticamente esa clave API en sus archivos de configuración, por lo que permanecerá conectado a partir de ahora.

Ahora debería ver un aviso preguntándole si confía en la ejecución de Claude Code en el directorio actual:

Trusting Claude Code in the current directory

Seleccione la opción positiva, y ahora tendrá acceso completo a la CLI de Claude Code:

En el rectángulo Pruebe "refactorizar <ruta de archivo>", ahora puede escribir las instrucciones que desea pasar al agente de código.

Muy bien. Claude Code está ahora configurado y listo para usar.

Paso #2: Empezar con el MCP Web de Bright Data

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

A continuación, siga las instrucciones oficiales para generar su clave API de Bright Data. Para simplificar, en este tutorial asumimos que está utilizando una clave API con permisos de administrador.

Instale el Web MCP globalmente a través del paquete @brightdata/mcp utilizando el siguiente comando:

npm install -g @brightdata/mcp

A continuación, prueba que el servidor funciona con este comando Bash:

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

O, en Windows PowerShell, el comando equivalente es:

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

Asegúrese de sustituir <YOUR_BRIGHT_DATA_API> por el token de API real que generó anteriormente. Ambos comandos establecen la variable de entorno API_TOKEN necesaria e inician el servidor MCP a través del paquete npm @brightdata/mcp.

Si todo funciona correctamente, debería ver registros similares a los siguientes:

En el primer inicio, el servidor MCP crea 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 zonas son necesarias para acceder a toda la gama de herramientas del servidor MCP.

Para confirmar que se han creado las zonas, inicie sesión en su panel de Bright Data y vaya a la página“Proxies & Scraping Infrastructure“. Debería ver ambas zonas en la lista:

The mcp_unlocker and mcp_browser zones created by the MCP server at startup

Nota: Si su token de API no tiene permisos de administrador, es posible que estas zonas no se creen automáticamente. En ese caso, puede crearlas manualmente y especificar sus nombres utilizando variables de entorno, como se explica en la documentación oficial.

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

Para desbloquear funciones avanzadas como la automatización del navegador y la extracción de datos estructurados, tienes que 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 Windows

$Env:API_TOKEN="<YOUR_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. Al mismo tiempo, el modo Pro no está incluido en el nivel gratuito e incurrirá en cargos adicionales.

¡Impresionante! Ha comprobado que el servidor Web MCP funciona correctamente en su máquina. Ahora puede detener el servidor, ya que el siguiente paso será configurar Claude Code para que lo inicie automáticamente por usted.

Paso 3: Configurar Web MCP en Claude Code

Claude Code soporta varias formas de conectarse a un servidor MCP. En este tutorial, cubriremos dos métodos:

Utilizando el comando mcp add.
Utilizando un archivo de configuración MCP .json.

Para configurar el servidor Web MCP globalmente en su instalación de Claude Code, ejecute

claude mcp add brightData 
  --env API_TOKEN=<SU_CLAVE_API_BRIGHT_DATA> _env PRO_MODE=<SU_CLAVE_API_BRIGHT_DATA
  --env PRO_MODE=true
  -- npx -y @brightdata/mcp

O, de forma equivalente, en Windows PowerShell:

claude mcp add brightData --env API_TOKEN=<TU_CLAVE_API_BRIGHT_DATA> --env PRO_MODE=true -- -- npx -y @brightdata/mcp

Ambos comandos ordenan a Claude Code que añada un servidor MCP personalizado llamado brightData. Éste se lanzará a través del comando npx especificado con las variables de entorno. En otras palabras, Claude Code puede ahora conectarse automáticamente al servidor MCP Bright Data Web. (Recuerde que no es necesario activar el entorno PRO_MODE ).

Después de ejecutar el comando, debería ver una salida similar a ésta:

The output produced by the mcp add command

Esto confirma que el servidor MCP se ha añadido al archivo de configuración global de Claude Code.

Si en lugar de esto prefiere mantener la configuración MCP local a un proyecto, cree un archivo llamado mcp_servers.json con el contenido de abajo:

{
  "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 Claude Code cómo iniciar servidores MCP externos.
La entrada brightData define el comando y las variables de entorno necesarias para ejecutar el Web MCP. La configuración de PRO_MODE es opcional pero recomendable.

A continuación, indique a Claude Code que cargue el archivo de configuración anterior mediante la opción --``mcp-config:

claude --mcp-config mcp_servers.json

Importante: Sustituya <YOUR_BRIGHT_DATA_API_KEY> por su token real de Bright Data API para habilitar la autenticación.

Perfecto. Ya está listo para probar la integración MCP en Claude Code.

Paso #4: Verificar la Conexión MCP

Tanto si ha configurado la integración MCP utilizando mcp add como --mcp-config, debe verificar que Claude Code puede conectarse realmente al servidor MCP de Bright Data Web.

Para comprobar la conexión, inicie la CLI de Claude Code y escriba el comando /mcp. Si todo funciona correctamente, debería ver una salida como ésta:

Claude Code successfully connected to the brightData MCP

Como puede ver, la instancia CLI local se ha conectado correctamente al servidor MCP brightData configurado. Así se ha hecho.

Paso #5: Ejecute una Tarea en Claude Code

Para probar las capacidades de su agente de codificación Claude Code, ejecute una tarea como la siguiente:

Raspe los datos de "https://it.linkedin.com/in/antonello-zanini" y guarde la salida como JSON en un archivo local llamado "profile.json". A continuación, cree un sencillo proyecto Express.js con un endpoint que tome un slug que represente el perfil de LinkedIn y devuelva el contenido de "profile.json".

Esto representa un caso de uso del mundo real, ya que recoge datos del mundo real para simular una API Express.

Pega la solicitud en Claude Code y pulsa Intro para ejecutarla. Debería ver un comportamiento similar al siguiente:

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

Claude Code descompone el mensaje en una tarea de cuatro pasos.
El LLM selecciona la herramienta MCP apropiada(web_data_linkedin_person_profile) con los argumentos correctos extraídos del prompt(url: "https://it.linkedin.com/in/antonello-zanini").
Se le pide que acepte la ejecución de la herramienta.
Una vez aprobada, la tarea de scraping se lanza a través de la integración MCP.
Los datos resultantes se muestran en formato bruto (es decir, JSON).
Claude Code solicita permiso para guardar los datos en un archivo local denominado profile.json.
Tras la aprobación, el archivo se crea y se rellena.
Se le pide que cree el archivo package. json para el proyecto Node.js Express.
Tras la aprobación, el archivo package. json se añade al directorio actual.
Se le muestra el código para server.js, definiendo el servidor Express con el punto final de API requerido, y se le pide permiso para crearlo.
Una vez aprobado, se crea el archivo server. js.
Se te muestran los comandos para instalar las dependencias del proyecto e iniciar el servidor Express.

En este ejemplo, la salida final producida por la tarea tiene este aspecto:

The final instructions produced by Claude Code

Al final de la interacción, tu directorio de trabajo debería contener estos tres archivos:

├── package.json
├── profile.json
└── server.js

¡¡¡Maravilloso!!! Comprobemos ahora si los archivos generados funcionan como esperábamos.

Paso #6: Explorar la salida

Abre el directorio del proyecto en Visual Studio Code y empieza por inspeccionar el archivo profile.json:

Este archivo contiene datos reales de LinkedIn, no contenido alucinado o inventado generado por el LLM de Claude. En concreto, los datos fueron capturados por Bright Data utilizando la herramienta web_data_linkedin_person_profile (que internamente llama LinkedIn Scraper) de la siguiente página pública de perfil de LinkedIn:

Nota: El raspado de LinkedIn es notoriamente difícil debido a sus sólidas protecciones anti-bot. Un LLM normal no puede realizar esta tarea de forma fiable, lo que demuestra lo potente que se ha vuelto su agente de codificación gracias a la integración con Bright Data Web MCP.

A continuación, inspeccione el archivo package.json:

Este archivo enumera las dependencias necesarias (por ejemplo, express) para definir su proyecto Node.js.

Por último, revise el archivo server.js:

Observa que el código define el punto final de la API necesario, tal y como se especifica en la solicitud. En concreto, el punto final /profile/:slug carga los datos del perfil de LinkedIn desde profile.json y devuelve el perfil correcto basándose en el ID de LinkedIn (utilizado aquí como slug).

¡Increíble! Los archivos generados tienen un aspecto sólido. El paso final es probar la aplicación Express para asegurarse de que se comporta como usted desea.

Paso #7: Probar el Proyecto Generado

Siga las instrucciones proporcionadas por Claude Code en la salida. Comienza instalando las dependencias del proyecto:

npm install

A continuación, inicie el servidor Express con

npm start

Tu servidor debería estar ahora escuchando en localhost. Pruebe el punto final de la API /profile/:slug utilizando curl:

curl http://localhost/profile/antonello-zanini

O en un cliente HTTP visual como Postman:

Testing the target API endpoint in Postman

Nota: El resultado debe incluir los datos correctos de LinkedIn leídos de profile.json.

¡Et voilà! La API ha sido imitada con éxito, gracias a la integración Claude Code + Bright Data Web MCP.

Este ejemplo demuestra la potencia de combinar Claude Code con el Web MCP. Ahora, pruebe a experimentar con diferentes solicitudes y explore flujos de trabajo de datos avanzados basados en LLM directamente en la CLI.

Conclusión

En este artículo ha aprendido a conectar Claude Code con el servidor Web MCP de Bright Data(¡que ahora ofrece un nivel gratuito!). El resultado es un potente agente de codificación de IA capaz de acceder e interactuar con la web.

Esta integración fue posible gracias al soporte incorporado de Claude Code para MCP. Para crear agentes de codificación más avanzados, explore toda la gama de servicios disponibles en la infraestructura de IA de Bright Data. Estas herramientas pueden soportar una amplia variedad de escenarios de agentes.

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

Prueba gratuita Inicia sesión con Google