Comment connecter Claude Code au serveur MCP de Bright Data Web

Dans ce tutoriel, vous apprendrez

Ce qu’est Claude Code et pourquoi il est considéré comme l’un des agents de codage CLI les plus populaires et les plus puissants.
Comment l’ajout de capacités d’interaction web et d’extraction de données peut le rendre encore plus efficace.
Comment connecter Claude Code au serveur Bright Data Web MCP pour créer un agent de codage AI amélioré.

Plongeons dans l’aventure !

Qu’est-ce que Claude Code ?

Claude Code est un outil d’interface en ligne de commande développé par Anthropic qui vous donne un accès direct aux modèles Claude dans votre terminal. Il vous permet de déléguer des tâches de codage complexes, d’automatiser des flux de travail et d’intégrer d’autres outils.

En d’autres termes, il agit comme un programmeur de paires d’IA et un agent de codage. Claude Code se distingue par sa capacité à comprendre le contexte du projet, à générer du code, à tester, à déboguer et même à effectuer des opérations Git. Ses principales caractéristiques sont les suivantes

Codage agentique: Il comprend les tâches de codage complexes, propose des solutions et les exécute directement dans votre flux de travail.
Intégration du flux de travail: Intégration avec divers outils et API par l’intermédiaire de MCP.
Compréhension de la base de code: Analyse et comprend la structure et la logique de votre base de code pour une génération de code plus contextuelle.
Génération et édition de code: Génère du nouveau code, remanie le code existant et corrige les bogues en fonction de vos instructions.
Tests et analyses: Exécute des tests et des commandes de linting pour identifier et résoudre les problèmes dans votre code.
Intégration Git: Simplifie les opérations Git telles que la validation, le transfert et la création de demandes d’extraction.

Avec plus de 30k étoiles sur GitHub et plus de 5 millions de téléchargements hebdomadaires, Claude Code est l’une des solutions de programmation en binôme les plus populaires, si ce n’est la plus populaire. Cela n’est pas surprenant, étant donné que les modèles Claude sont actuellement considérés comme l’un des meilleurs LLM disponibles pour le codage.

Pourquoi étendre Claude Code avec un accès Web et des données fraîches ?

Même si Claude Code est alimenté par des modèles Claude avancés, il est confronté à la même limitation que tout LLM : ses connaissances sont statiques. Les données d’apprentissage représentent un instantané dans le temps, qui devient rapidement obsolète. C’est particulièrement vrai dans des domaines qui évoluent rapidement comme le développement de logiciels !

Imaginez maintenant que vous donniez à votre assistant Claude Code CLI la possibilité de :

d’intégrer de nouveaux tutoriels et de la documentation,
de consulter des guides en direct pendant qu’il écrit du code, et
naviguer sur des sites web dynamiques aussi facilement qu’il peut naviguer dans vos fichiers locaux.

C’est exactement ce que vous pouvez faire en le connectant au MCP Web de Bright Data.

Le MCP Web de Bright Data permet d’accéder à plus de 60 outils prêts pour l’IA, conçus pour l’interaction Web en temps réel et la collecte de données. Ces outils sont tous alimentés par la riche infrastructure d’IA de Bright Data.

Voici quelques possibilités d’extension de Claude Code avec le MCP Web de Bright Data :

Récupérer les résultats des moteurs de recherche les plus récents et les intégrer directement dans vos notes ou vos documents.
Ingérer les derniers tutoriels ou les dernières documentations d’API, puis générer du code de travail ou même des projets d’échafaudage à partir de ces documents.
Collectez des données de sites web en direct pour les tester, les simuler ou les analyser plus en profondeur.

Pour obtenir le catalogue complet des outils, consultez la documentation MCP de Bright Data.

Si vous souhaitez voir cette intégration en action, regardez comment Web MCP fonctionne dans Claude Code.

Comment connecter Claude Code à Web MCP de Bright Data

Apprenez à installer et à configurer Claude Code localement et à l’intégrer à Web MCP de Bright Data. L’agent de codage étendu qui en résulte sera utilisé pour :

Scraper une page de profil LinkedIn en temps réel.
Stocker les données localement dans un fichier JSON.
Créer une application Express avec un point de terminaison qui renvoie les données simulées lues dans le fichier JSON.

Suivez les étapes ci-dessous !

Conditions préalables

Avant de commencer, assurez-vous que vous disposez des éléments suivants :

Node.js 18+ installé localement (nous recommandons la dernière version LTS).
Un abonnement Claude ou un compte Anthropic avec des crédits (dans ce tutoriel, nous utiliserons un compte Anthropic).
Un compte Bright Data avec une clé API prête.

Notez que vous n’avez pas besoin de créer ces comptes maintenant. Les étapes ci-dessous vous guideront dans la configuration si nécessaire.

Ensuite, les connaissances de base facultatives mais utiles sont les suivantes :

Une compréhension générale du fonctionnement de MCP.
Une certaine familiarité avec le serveur MCP de Bright Data Web et ses outils.

Étape 1 : Installation et configuration de Claude Code

Pour commencer à utiliser Claude Code, vous devez d’abord avoir un abonnement Claude ou un compte Anthropic avec des fonds.

Une fois que votre compte Claude/Anthropic Console est prêt, installez Claude Code globalement via le paquetage npm officiel @anthropic-ai/claude-code:

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

Ensuite, naviguez jusqu’au dossier du projet dans lequel vous voulez que Claude Code fonctionne et démarrez-le avec :

claude

Pour configurer le modèle Claude sous-jacent ou d’autres configurations, reportez-vous à la documentation officielle.

Si c’est la première fois que vous lancez l’agent CLI, vous devriez voir l’écran de configuration initiale :

Sélectionnez un thème et appuyez sur Entrée pour passer à la vue d’autorisation :

Choisissez le type d’authentification que vous souhaitez utiliser (“compte Claude avec abonnement” ou “compte Anthropic Console”). Dans cet exemple, nous supposerons que vous avez choisi l’option 2, bien que la procédure soit similaire pour les deux.

La page suivante vous invite à connecter Claude Code à votre compte Anthropic Console :

Authorizing Claude Code in your Anthropic Console account

Appuyez sur le bouton “Autoriser” et retournez à votre terminal. Dans votre compte Anthropic Console, cela créera une nouvelle clé API :

Ensuite, Claude Code stockera automatiquement cette clé API dans ses fichiers de configuration, de sorte que vous resterez connecté à partir de maintenant.

Vous devriez maintenant voir une invite vous demandant si vous faites confiance à l’exécution de Claude Code dans le répertoire courant :

Trusting Claude Code in the current directory

Sélectionnez l’option positive, et vous aurez maintenant un accès complet à la CLI de Claude Code :

Dans le rectangle "refactor <filepath>", vous pouvez maintenant écrire les invites à passer à l’agent de code.

Super ! Claude Code est maintenant configuré et prêt à être utilisé.

Étape 2 : Démarrer avec le MCP Web de Bright Data

Si vous ne l’avez pas encore fait, créez un compte Bright Data. Sinon, si vous en avez déjà un, connectez-vous simplement.

Ensuite, suivez les instructions officielles pour générer votre clé d’API Bright Data. Par souci de simplicité, dans ce tutoriel, nous supposons que vous utilisez une clé d’API avec des autorisations d’administrateur.

Installez le Web MCP globalement via le paquet @brightdata/mcp à l’aide de la commande suivante :

npm install -g @brightdata/mcp

Ensuite, testez que le serveur fonctionne avec cette commande Bash :

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

Ou, sur Windows PowerShell, la commande équivalente est :

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

Veillez à remplacer <YOUR_BRIGHT_DATA_API> par le jeton API que vous avez généré précédemment. Les deux commandes définissent la variable d’environnement API_TOKEN requise et lancent le serveur MCP via le paquetage npm @brightdata/mcp.

Si tout fonctionne correctement, vous devriez voir des journaux similaires à ceux qui suivent :

Lors du premier lancement, le serveur MCP crée automatiquement deux zones par défaut dans votre compte Bright Data :

mcp_unlocker: Une zone pour Web Unlocker.
mcp_browser: Une zone pour Browser API.

Ces zones sont nécessaires pour accéder à l’ensemble des outils du serveur MCP.

Pour confirmer que les zones ont été créées, connectez-vous à votre tableau de bord Bright Data et accédez à la page“Proxies & Scraping Infrastructure“. Les deux zones doivent être répertoriées :

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

Remarque: si votre jeton API ne dispose pas d’autorisations d’administration, il se peut que ces zones ne soient pas créées automatiquement. Dans ce cas, vous pouvez les créer manuellement et spécifier leurs noms en utilisant des variables d’environnement, comme expliqué dans la documentation officielle.

Par défaut, le serveur MCP n’expose que les outils search_engine et scrape_as_markdown, qui peuvent même être utilisés gratuitement.

Pour débloquer des fonctionnalités avancées telles que l’automatisation du navigateur et l’extraction de données structurées, vous devez activer le mode Pro. Pour ce faire, définissez la variable d’environnement PRO_MODE=true avant de lancer le serveur MCP :

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

Ou, sous Windows :

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

Important: si vous choisissez d’utiliser le mode Pro, vous aurez accès à l’ensemble des 60+ outils. En même temps, le mode Pro n’est pas inclus dans le niveau gratuit et entraînera des frais supplémentaires.

Génial ! Vous avez vérifié que le serveur Web MCP fonctionne correctement sur votre machine. Vous pouvez maintenant arrêter le serveur, car la prochaine étape consistera à configurer Claude Code pour qu’il le lance automatiquement pour vous.

Étape #3 : Configurer le Web MCP dans Claude Code

Claude Code supporte plusieurs façons de se connecter à un serveur MCP. Dans ce tutoriel, nous couvrirons deux méthodes :

Utiliser la commande mcp add.
En utilisant un fichier de configuration MCP .json.

Pour configurer le serveur Web MCP globalement dans votre installation de Claude Code, exécutez :

claude mcp add brightData N--env API_TOKEN
  --env API_TOKEN=<Votre_clé_API_BRIGHT_DATA> N- --env PRO_MODE=<Votre_client_BRIGHT_DATA_API_KEY
  --env PRO_MODE=true N- -npx -y @bright_DATA_API_KEY
  -- npx -y @brightdata/mcp

Ou, de manière équivalente, sur Windows PowerShell :

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

Ces deux commandes indiquent à Claude Code d’ajouter un serveur MCP personnalisé appelé brightData. Celui-ci sera lancé via la commande npx spécifiée avec les variables d’environnement. En d’autres termes, Claude Code peut maintenant se connecter automatiquement au serveur MCP Bright Data Web. (Rappelez-vous que l’activation de PRO_MODE env n’est pas nécessaire).

Après avoir exécuté la commande, vous devriez voir une sortie similaire à celle-ci :

The output produced by the mcp add command

Ceci confirme que le serveur MCP a été ajouté au fichier de configuration globale de Claude Code.

Si vous préférez garder la configuration MCP locale à un projet, créez un fichier nommé mcp_servers.json avec le contenu ci-dessous :

{
  "mcpServers" : {
    "brightData" : {
      "command" : "npx",
      "args" : [
        "-y",
        "@brightdata/mcp"
      ],
      "env" : {
        "API_TOKEN" : "<VOTRE_CLÉ_D'API_BRIGHT_DATA>",
        "PRO_MODE" : "true"
      }
    }
  }
}

Dans cette configuration, l’objet mcpServers indique à Claude Code comment démarrer les serveurs MCP externes :

L’objet mcpServers indique à Claude Code comment démarrer les serveurs MCP externes.
L’entrée brightData définit la commande et les variables d’environnement nécessaires à l’exécution du Web MCP. La définition de PRO_MODE est facultative mais recommandée.

Ensuite, demandez à Claude Code de charger le fichier de configuration ci-dessus via l’option --``mcp-config:

claude --mcp-config mcp_servers.json

Important: Remplacez <YOUR_BRIGHT_DATA_API_KEY> par votre véritable clé API Bright Data pour permettre l’authentification.

C’est parfait ! Vous êtes maintenant prêt à tester l’intégration de MCP dans Claude Code.

Etape #4 : Vérifier la connexion MCP

Que vous ayez configuré l’intégration MCP en utilisant mcp add ou --mcp-config, vous devez vérifier que Claude Code peut se connecter au serveur MCP de Bright Data Web.

Pour vérifier la connexion, démarrez le CLI de Claude Code et tapez la commande /mcp. Si tout fonctionne correctement, vous devriez voir une sortie comme celle-ci :

Claude Code successfully connected to the brightData MCP

Comme vous pouvez le voir, l’instance CLI locale s’est connectée avec succès au serveur MCP configuré de brightData. C’est très bien !

Etape #5 : Exécuter une tâche dans Claude Code

Pour tester les capacités de votre agent de codage Claude Code, lancez une invite comme la suivante :

Scraper les données de "https://it.linkedin.com/in/antonello-zanini" et enregistrer la sortie en JSON dans un fichier local nommé "profile.json". Ensuite, créez un simple projet Express.js avec un point de terminaison qui prend un slug représentant le profil LinkedIn et renvoie le contenu de "profile.json".

Cela représente un cas d’utilisation réel, car il recueille des données réelles pour simuler une API Express.

Collez l’invite dans Claude Code et appuyez sur Entrée pour l’exécuter. Vous devriez voir un comportement similaire à celui-ci :

Le GIF a été accéléré, mais voici ce qui se passe étape par étape :

Claude Code décompose l’invite en une tâche en quatre étapes.
Le LLM sélectionne l’outil MCP approprié(web_data_linkedin_person_profile) avec les arguments corrects extraits de l’invite(url : "https://it.linkedin.com/in/antonello-zanini").
Vous êtes invité à accepter l’exécution de l’outil.
Une fois approuvée, la tâche de scraping est lancée via l’intégration MCP.
Les données résultantes sont affichées en format brut (c.-à-d. JSON).
Claude Code demande la permission d’enregistrer les données dans un fichier local nommé profile.json.
Après approbation, le fichier est créé et alimenté.
Vous êtes invité à créer le fichier package.json pour le projet Node.js Express.
Après approbation, le fichier package.json est ajouté au répertoire actuel.
Le code de server.js, qui définit le serveur Express avec le point de terminaison API requis, est affiché et l’autorisation de le créer vous est demandée.
Après approbation, le fichier server.js est créé.
Les commandes permettant d’installer les dépendances du projet et de démarrer le serveur Express vous sont présentées.

Dans cet exemple, la sortie finale produite par la tâche ressemble à ceci :

The final instructions produced by Claude Code

À la fin de l’interaction, votre répertoire de travail devrait contenir ces trois fichiers :

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

Merveilleux ! Vérifions maintenant si les fichiers générés fonctionnent comme prévu.

Étape 6 : Explorer la sortie

Ouvrez le répertoire du projet dans Visual Studio Code et commencez par inspecter le fichier profile.json:

Ce fichier contient de vraies données LinkedIn, pas un contenu halluciné ou inventé généré par le Claude LLM. Plus précisément, les données ont été capturées par Bright Data à l’aide de l’outil web_data_linkedin_person_profile (qui s’appelle en interne LinkedIn Scraper) à partir de la page de profil LinkedIn publique suivante :

Remarque: il est notoirement difficile de gratter LinkedIn en raison de ses solides protections anti-bots. Un LLM ordinaire ne peut pas effectuer cette tâche de manière fiable, ce qui prouve à quel point votre agent de codage est devenu puissant grâce à l’intégration du MCP Web de Bright Data.

Ensuite, inspectez le fichier package.json:

Ce fichier répertorie les dépendances requises (par exemple, express) pour définir votre projet Node.js.

Enfin, examinez le fichier server.js:

Remarquez que le code définit le point de terminaison API requis, comme indiqué dans l’invite. En détail, le point de terminaison /profile/:slug charge les données du profil LinkedIn à partir de profile.json et renvoie le profil correct en fonction de l’ID LinkedIn (utilisé comme slug ici).

Incroyable ! Les fichiers générés ont l’air solides. La dernière étape consiste à tester l’application Express pour s’assurer qu’elle se comporte comme vous le souhaitez.

Étape 7 : Tester le projet généré

Suivez les instructions fournies par Claude Code dans le résultat. Commencez par installer les dépendances du projet :

npm install

Ensuite, démarrez le serveur Express avec :

npm start

Votre serveur devrait maintenant écouter sur localhost. Testez le point d’arrivée de l’API /profile/:slug en utilisant curl:

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

Ou, dans un client HTTP visuel comme Postman :

Testing the target API endpoint in Postman

Note: Le résultat doit inclure les données LinkedIn correctes lues dans profile.json.

Et voilà ! L’API a été simulée avec succès, grâce à l’intégration Claude Code + Bright Data Web MCP.

Cet exemple démontre la puissance de la combinaison de Claude Code avec le Web MCP. Maintenant, essayez d’expérimenter avec différentes invites et explorez les flux de données avancés pilotés par LLM directement dans le CLI !

Conclusion

Dans cet article, vous avez appris à connecter Claude Code au serveur Web MCP de Bright Data(qui offre maintenant un niveau gratuit !). Le résultat est un puissant agent de codage IA capable d’accéder et d’interagir avec le web.

Cette intégration a été possible grâce à la prise en charge intégrée de MCP par Claude Code. Pour construire des agents de codage plus avancés, explorez la gamme complète de services disponibles dans l’infrastructure d’IA de Bright Data. Ces outils peuvent prendre en charge une grande variété de scénarios agentiques.

Créez un compte Bright Data gratuitement et commencez à expérimenter avec des outils web prêts pour l’IA dès aujourd’hui !

Essai gratuit S’inscrire avec Google