Web Scraping in Cline avec le serveur MCP de Bright Data

Dans cet article de blog, vous apprendrez :

• Ce qu’est Cline et pourquoi il gagne en popularité dans la communauté des codeurs.
• Comment l’intégration de ses agents de codage IA peut faire passer votre expérience de développement au niveau supérieur.
• Comment connecter Cline au serveur Bright Data Web MCP pour construire des agents de codage IA avec des outils de recherche de données Web.

Plongeons dans l’aventure !

Qu’est-ce que Cline ?

Cline est une extension de Visual Studio Code qui sert d’assistant de codage autonome alimenté par l’IA. Il s’intègre à la fois à votre ligne de commande et à votre éditeur de code pour vous assister tout au long du processus de développement.

L’extension Cline VS Code va au-delà de la simple complétion de code. Elle peut analyser la structure des projets, générer et éditer du code, exécuter des commandes de terminal et même aider à déboguer des applications web.

Cline prend en charge plusieurs API d’IA, ce qui vous permet de vous connecter à différents modèles et fournisseurs. Vous pouvez également étendre ses fonctionnalités en ajoutant des outils d’IA personnalisés via leprotocole MCP(Model Context Protocol).

À ce jour, l’extension Cline compte plus de 48 000 étoiles sur GitHub et plus de 1,9 million de téléchargements sur le Visual Studio Marketplace.

Pourquoi les agents de Cline devraient-ils être en mesure d’extraire des données du Web ?

Quelle que soit la puissance du LLM intégré dans Cline, il est toujours confronté à une limitation commune à tous les modèles de langage : des connaissances dépassées. Un LLM ne peut répondre qu’en fonction des données statiques sur lesquelles il a été formé, ce qui représente un instantané du passé.

Étant donné la rapidité avec laquelle le monde de la technologie évolue, le problème est encore plus important. C’est pourquoi il n’est pas rare que les gestionnaires du cycle de vie suggèrent des approches de codage dépassées, des méthodes obsolètes ou qu’ils passent complètement à côté de fonctionnalités récemment introduites.

Imaginez maintenant que vous donniez à votre assistant de codage Cline AI la possibilité d’aller chercher des tutoriels, des pages de documentation et des guides à jour, et d’apprendre grâce à eux. Cela devient possible en intégrant Cline à une solution qui étend les LLM avec des capacités de recherche sur le web et d’accès aux données.

C’est exactement ce qu’offre le serveur Web MCP de Bright Data. Ce serveur propose une collection de plus de 60 outils prêts pour l’IA afin de collecter des données web en temps réel, grâce à l’infrastructure de données d’IA de Bright Data.

Pour obtenir la liste complète des outils exposés par le serveur Bright Data Web MCP, reportez-vous à la documentation.

D’autres cas d’utilisation sont possibles :

• Récupération des données SERP en direct et insertion de liens contextuels dans vos rapports Markdown lorsque vous utilisez VS Code comme éditeur de texte.
• Demander des tutoriels ou de la documentation sur la base du code que vous êtes en train d’écrire.
• Récupérer à la volée des données de sites réels et les enregistrer localement à des fins de simulation ou d’analyse plus poussée.

Voyons maintenant le serveur Bright Data Web MCP en action dans Cline. Nous allons passer en revue l’un des cas d’utilisation ci-dessus pour comprendre ce que cette intégration permet vraiment !

Comment ajouter des capacités de récupération de données à un agent de codage de l’IA dans Cline ?

Apprenez à ajouter Cline à Visual Studio Code et à l’intégrer au serveur Bright Data Web MCP. Le résultat de cette section étape par étape sera un agent de codage IA capable de récupérer des données sur le web et d’interagir avec elles. Cela permettra à l’agent de fournir des résultats plus précis et des tâches plus intelligentes.

En particulier, vous construirez un agent Cline AI amélioré avec des capacités d’extraction de données et l’utiliserez pour :

1. Récupérer une page de produit Amazon.
2. Stocker les données localement.
3. Créez un script Node.js pour charger et traiter ces données.

Suivez les étapes ci-dessous !

Conditions préalables

Pour suivre ce tutoriel, vous avez besoin de :

• Node.js installé localement (nous recommandons la dernière version LTS)
• Un récit de Cline
• Une clé API Bright Data
• (Facultatif) Une clé API pour votre LLM préféré (comme la clé API de Google Gemini)

Ne vous inquiétez pas si vous n’avez pas encore de clé API Bright Data ou de compte Cline. Nous vous aiderons à les configurer dans les étapes suivantes.

Étape 1 : Installer Cline dans Visual Studio Code

Ouvrez Visual Studio Code, cliquez sur l’icône Extensions dans la barre latérale gauche, recherchez “cline” et sélectionnez l’extension Cline dans la liste. Dans l’onglet de l’extension Cline, cliquez sur le bouton “Installer” :

Si c’est la première fois que vous installez une extension de Cline, vous serez invité à faire confiance à l’éditeur. Cliquez sur “Trust Publisher & Install” pour continuer :

Une fois installé, vous devriez voir une icône Cline dans la barre latérale gauche. Cliquez dessus pour ouvrir le panneau Cline :

Note: Si l’icône Cline n’apparaît pas, essayez de recharger Visual Studio Code. Pour tout autre problème, reportez-vous à la page de documentation officielle de l’installation.

Merveilleux ! Cline a été installé dans VS Code.

Étape 2 : Établir votre connexion Cline

Vous devez maintenant connecter votre compte Cline à l’extension précédemment installée. Pour ce faire, cliquez sur le bouton “Get Started for Free” :

Vous serez redirigé vers la page suivante dans votre navigateur :

Inscrivez-vous (ou connectez-vous si vous avez déjà un compte), et vous serez redirigé vers la fenêtre VS Code :

Dans Visual Studio Code, vous devriez maintenant voir la fenêtre modale suivante. Cliquez sur “Ouvrir” pour authentifier l’extension Cline :

L’extension Cline devrait maintenant ressembler à ceci :

Si vous retournez sur votre compte Cline dans le navigateur, vous remarquerez qu’il contient par défaut 0,50 $ de crédits gratuits :

Si vous prévoyez d’utiliser des LLM premium via Cline, pensez à ajouter des crédits. (En effet, le solde par défaut ne permet que des tests limités).

Alternativement, si vous voulez éviter de dépenser de l’argent ou préférez utiliser votre propre fournisseur de LLM, vous pouvez connecter votre clé API directement. Pour ce faire, cliquez sur l’icône de l’engrenage dans le panneau Cline. Ensuite, sélectionnez “API Configuration” et collez votre clé API pour configurer votre intégration LLM :

Dans l’exemple ci-dessus, nous avons intégré Cline au modèlegemini-2.5-flash, dont l’utilisation est gratuite via l’API.

Génial ! Cline est maintenant complètement installé dans VS Code et prêt à vous aider à construire un agent de codage IA avec des capacités de web scraping.

Étape 3 : installation du serveur MCP de Bright Data

Si vous ne l’avez pas encore fait, créez un compte Bright Data. Si vous en avez déjà un, il vous suffit de vous connecter.

Ensuite, suivez les instructions officielles pour récupérer votre API Bright Data. Pour plus de simplicité, les instructions ci-dessous supposent que vous utilisez un jeton API avec des autorisations d’administrateur.

Vous pouvez maintenant installer le serveur Bright Data Web MCP globalement dans votre environnement Node.js en utilisant :

npm install -g @brightdata/mcp

Ensuite, testez que tout fonctionne avec la commande Bash ci-dessous :

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

Ou, sous Windows, la commande PowerShell équivalente est la suivante :

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

Dans la commande ci-dessus, remplacez le caractère générique par l’API Bright Data que vous avez récupérée précédemment. Cette commande définit la variable d’environnement API_TOKEN requise et démarre le serveur MCP à l’aide du package @brightdata/mcp npm.

Si tout est configuré correctement, votre terminal devrait afficher quelque chose comme ceci :

Comme vous pouvez le voir, la première fois que vous lancez la commande, le paquet @brightdata/mcp initialise les zones Bright Data requises dans votre compte. Plus précisément, il crée une zone pour Web Unlocker et une autre pour l’API Scraping Browser. Ces deux zones permettent au serveur MCP d’exécuter tous les outils qu’il expose.

Pour le vérifier, connectez-vous à votre tableau de bord Bright Data et accédez à la page“Proxies & Scraping Infrastructure“. Vous verrez que les zones suivantes ont été créées automatiquement :

Remarque: si vous n’utilisez pas de jeton API avec des autorisations d’administrateur, vous devrez créer les zones manuellement. Reportez-vous à la documentation officielle pour obtenir des conseils détaillés.

Génial ! Le serveur MCP de Bright Data Web fonctionne comme un charme.

Étape 4 : Connecter Cline au serveur MCP de Bright Data

Il est temps d’intégrer l’extension Cline au serveur MCP de Bright Data Web qui fonctionne localement. Commencez par cliquer sur le bouton “MCP Servers” dans le panneau Cline :

Vous accéderez à la section de configuration de Cline MCP Servers. Passez à l’onglet “Installé” et cliquez sur le bouton “Configurer les serveurs MCP” :

Un fichier cline_mcp_setting.json s’ouvrira dans Visual Studio Code. Vous pouvez y définir les serveurs MCP auxquels l’extension Cline peut se connecter. Pour l’intégration avec le serveur MCP Bright Data Web, configurez-le comme suit :

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

Note: Pour plus de détails, voir le numéro officiel de GitHub.

En d’autres termes, ajoutez la configuration “Bright Data” dans le champ mcpServers. Veillez à remplacer par votre véritable clé API Bright Data.

Vous devriez voir quelque chose comme ceci :

C’est parfait ! Maintenant, si vous entrez dans l’onglet “Installé”, vous verrez une entrée pour le serveur Bright Data Web MCP. Développez-la pour afficher tous les outils qu’elle prend en charge :

Ici, vous pouvez configurer le serveur Bright Data Web MCP et ses outils. Pour ce flux de travail, les paramètres par défaut conviennent.

Pour plus d’informations, consultez les documents officiels.

Génial ! L’extension Cline peut maintenant se connecter au serveur Bright Data Web MCP et utiliser ses outils.

Étape 5 : Utiliser l’agent Cline AI

Vous êtes prêt à tester l’agent de codage Cline AI connecté au serveur Bright Data Web MCP dans Visual Studio Code.

Commencez par ouvrir Cline. Ensuite, cliquez sur la flèche à droite pour accéder au menu “Auto-approve Settings”. Dans le menu, cochez l’option “Utiliser les serveurs MCP” pour permettre la connexion automatique aux serveurs MCP configurés :

Avec ce paramètre activé, Cline se connectera automatiquement au serveur MCP sans demander la permission. Vous serez toujours invité à le faire avant l’utilisation d’un outil, ce qui devrait suffire.

Testez les capacités d’accès aux données de votre agent de codage IA à l’aide d’une invite comme celle-ci :

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.

Il décrit un scénario potentiel du monde réel, utile pour collecter des données à des fins d’analyse, de simulation ou de test.

Exécutez l’invite dans Cline, et vous devriez voir l’interaction suivante :

Le GIF ci-dessus a été accéléré, mais c’est ce qui s’est passé :

1. L’extension Cline envoie l’invite à votre LLM configuré (par exemple, gemini-2.5-flash).
2. Le LLM identifie l’outil MCP approprié pour le travail, à savoir web_data_amazon_product.
3. Il vous demande l’autorisation d’exécuter cet outil via Bright Data MCP, en utilisant l’URL du produit Amazon à partir de l’invite (c’est-à-dire https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/).
4. Une fois que vous avez donné votre accord, la tâche de scraping est lancée sur les serveurs de Bright Data.
5. Cline demande ensuite l’autorisation d’accéder au résultat de la tâche.
6. En coulisses, Bright Data effectue la tâche de scraping, et Cline reçoit les données réelles du produit au format JSON. C’est le résultat de l’outil MCP, qui est affiché par Cline.
7. Il vous est demandé l’autorisation d’enregistrer les données dans un fichier data.json.
8. Après approbation, le dossier est créé et alimenté.
9. Vous êtes invité à créer un script index.js pour lire et imprimer le contenu JSON.
10. Une fois approuvé, le fichier est généré.

Une fois la tâche terminée, votre projet contiendra ces deux fichiers :

Où data.json stocke les données des produits Amazon au format JSON récupérées par l’outil Amazon Scraper de Bright Data :

Un index.js: contient la logique Node.js pour charger et imprimer son contenu :

Exécutez le script index.js produit avec :

node index.js

Dans le terminal, vous devriez voir les données du produit imprimées :

Les flux de travail ont parfaitement fonctionné, car les données contenues dans le fichier JSON correspondent à celles de la page produit Amazon d’origine :

Notez que data.json stocke de vraies données scrappées, et non du contenu halluciné provenant du LLM. N’oubliez pas non plus que gratter Amazon n’est pas une mince affaire, compte tenu de leurs systèmes anti-bots très stricts (comme le fameux CAPTCHA d’Amazon).

C’est la puissance de Bright Data + Cline, et l’exemple ci-dessus n’était qu’un cas d’utilisation de base. Vous pouvez maintenant essayer d’autres invites et explorer des flux de données avancés pilotés par LLM, directement dans Visual Studio Code.

Et voilà ! Vous venez d’assister à une récupération transparente de données Web grâce à l’intégration MCP de Bright Data avec l’agent de codage Cline AI.

Conclusion

Dans cet article, vous avez appris à intégrer Cline avec le serveur Bright Data Web MCP pour construire un agent de codage IA qui peut accéder au Web. Cela a été possible grâce à la prise en charge de l’intégration MCP par Cline.

N’oubliez pas qu’il ne s’agit que d’un exemple simple. Pour créer des agents plus avancés, envisagez d’explorer la gamme complète d’outils disponibles dans le serveur Bright Data Web MCP. Ces outils peuvent prendre en charge la plupart de vos cas d’utilisation de données pilotées par l’IA.

Créez un compte Bright Data gratuit et commencez à explorer nos outils de données web prêts pour l’IA !