--- title: "Web Scraping in Cline avec le serveur MCP de Bright Data" slug: web-scraping-in-cline-with-bright-data date: 2025-08-24T10:57:11+00:00 modified: 2025-11-04T08:46:53+00:00 permalink: https://brightdata.fr/blog/ai/web-scraping-in-cline-with-bright-data type: blog --- [ Blog ](https://brightdata.fr/blog "Blog") / [AI](https://brightdata.fr/blog/ai) [AI](https://brightdata.fr/blog/ai) # Web Scraping in Cline avec le serveur MCP de Bright Data Débloquez les capacités de web scraping dans votre agent de codage Cline AI en intégrant Bright Data MCP, ce qui permet un développement plus intelligent et axé sur les données dans VS Code. 13 min de lecture [ ![Antonello Zanini](https://media.brightdata.fr/2022/12/Antonello-Zanini-2-50x50.jpg) ](https://brightdata.com/blog/authors/antonello-zanini) [Antonello Zanini Technical Writer ](https://brightdata.com/blog/authors/antonello-zanini) ![Cline × Bright Data MCP](https://media.brightdata.fr/2025/07/Cline%E2%80%AF%C3%97%E2%80%AFBright%E2%80%AFData-MCP.png) 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 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](https://cline.bot/) 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 le[protocole](https://www.anthropic.com/news/model-context-protocol) MCP[(Model Context Protocol](https://www.anthropic.com/news/model-context-protocol)). À ce jour, l’extension Cline compte [plus de 48 000 étoiles sur GitHub](https://github.com/cline/cline) et [plus de 1,9 million de téléchargements sur le Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev). ## 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é](/blog/donnees-web/llm-training-data), 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 Bright Data MCP de Bright Data](/ai/mcp-server). 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](/ai). Pour obtenir la liste complète des outils exposés par le serveur Bright Data MCP, [reportez-vous à la documentation.](https://github.com/brightdata-com/brightdata-mcp/blob/main/assets/Tools.md) 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 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 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](https://nodejs.org/en/download)) - Un [récit de Cline](https://app.cline.bot/) - Une [clé API Bright Data](https://docs.brightdata.com/api-reference/authentication#generating-an-api-key%3A) - (Facultatif) Une clé API pour votre LLM préféré (comme la [clé API de Google Gemini](https://ai.google.dev/gemini-api/docs/api-key)) 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](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev) dans la liste. Dans l’onglet de l’extension Cline, cliquez sur le bouton “Installer” : ![Cliquer sur le bouton "Installer" pour installer Cline dans VS Code](https://media.brightdata.com/2025/07/Clicking-the-Install-button-to-install-Cline-in-VS-Code-1-1024x608.png)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 : ![](https://media.brightdata.com/2025/07/image-116-1024x608.png)Une fois installé, vous devriez voir une icône Cline dans la barre latérale gauche. Cliquez dessus pour ouvrir le panneau Cline : ![Cline activée dans VS Code](https://media.brightdata.com/2025/07/image-117-1024x608.png)**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](https://docs.cline.bot/getting-started/installing-cline). 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” : ![Cliquer sur le bouton "Get Started for Free" (Commencer gratuitement)](https://media.brightdata.com/2025/07/image-118-462x1024.png)Vous serez redirigé vers la page suivante dans votre navigateur : ![La page de connexion / création de compte de Cline](https://media.brightdata.com/2025/07/The-Cline-login-and-account-creation-page-1-1024x547.png)Inscrivez-vous (ou connectez-vous si vous avez déjà un compte), et vous serez redirigé vers la fenêtre VS Code : ![Page de redirection de Cline vers VS Code](https://media.brightdata.com/2025/07/image-119-1024x547.png)Dans Visual Studio Code, vous devriez maintenant voir la fenêtre modale suivante. Cliquez sur “Ouvrir” pour authentifier l’extension Cline : ![Cliquer sur "Ouvrir" pour authentifier l'extension Cline](https://media.brightdata.com/2025/07/image-120-1024x461.png)L’extension Cline devrait maintenant ressembler à ceci : ![Le panneau d'extension Cline dans VS Code](https://media.brightdata.com/2025/07/image-121-417x1024.png)Si vous retournez sur votre compte Cline dans le navigateur, vous remarquerez qu’il contient par défaut 0,50 $ de crédits gratuits : ![Le crédit par défaut offert par Cline](https://media.brightdata.com/2025/07/image-122-1024x544.png)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 : ![Configurez votre propre LLM à Cline](https://media.brightdata.com/2025/07/image-123-660x1024.png)Dans l’exemple ci-dessus, nous avons intégré Cline au [modèle`gemini-2.5-flash`](https://cloud.google.com/vertex-ai/generative-ai/docs/models/gemini/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](/?hs_signup=1). Si vous en avez déjà un, il vous suffit de vous connecter. Ensuite, [suivez les instructions officielles](https://docs.brightdata.com/api-reference/authentication#generating-an-api-key%3A) 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 MCP](https://github.com/brightdata/brightdata-mcp) globalement dans votre environnement Node.js en utilisant : ```none npm install -g @brightdata/mcp ``` Ensuite, testez que tout fonctionne avec la commande Bash ci-dessous : ```none API_TOKEN="" npx -y @brightdata/mcp ``` Ou, sous Windows, la commande PowerShell équivalente est la suivante : ```none $env:API_TOKEN=""; 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`](https://www.npmjs.com/package/@brightdata/mcp) npm. Si tout est configuré correctement, votre terminal devrait afficher quelque chose comme ceci : ![Les journaux de démarrage du serveur Bright Data MCP](https://media.brightdata.com/2025/07/image-124-1024x157.png)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](/products/web-unlocker) et une autre pour l’[API Scraping Browser](/products/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](/cp/zones)“. Vous verrez que les zones suivantes ont été créées automatiquement : ![Nouvelles zones créées dans le tableau de bord de Bright Data](https://media.brightdata.com/2025/07/image-125-1024x539.png)**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](https://github.com/brightdata/brightdata-mcp?tab=readme-ov-file#-account-setup). 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 : ![En cliquant sur "MCP Servers" dans le menu en haut à droite sur Cline](https://media.brightdata.com/2025/07/image-126.png)Vous accéderez à la section de configuration de Cline MCP Servers. Passez à l’onglet “Installé” et cliquez sur le bouton “Configurer les serveurs MCP” : ![Cliquer sur le bouton "Configurer les serveurs MCP".](https://media.brightdata.com/2025/07/image-127.png)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 : ```none { "mcpServers": { "Bright Data": { "autoApprove": [], "disabled": false, "timeout": 300, "type": "stdio", "command": "npx", "args": [ "@brightdata/mcp" ], "env": { "API_TOKEN": "" } } } } ``` **Note**: Pour plus de détails, [voir le numéro officiel de GitHub](https://github.com/cline/mcp-marketplace/issues/263). 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 : ![Le code JSON pour la connexion au serveur MCP](https://media.brightdata.com/2025/07/image-128-1024x451.png)C’est parfait ! Maintenant, si vous entrez dans l’onglet “Installé”, vous verrez une entrée pour le serveur Bright Data MCP. Développez-la pour afficher tous les outils qu’elle prend en charge : ![Le serveur Bright Data MCP connecté](https://media.brightdata.com/2025/07/image-129-715x1024.png)Ici, vous pouvez configurer le serveur Bright Data MCP et ses outils. Pour ce flux de travail, les paramètres par défaut conviennent. Pour plus d’informations, [consultez les documents officiels](https://docs.brightdata.com/api-reference/MCP-Server). Génial ! L’extension Cline peut maintenant se connecter au serveur Bright Data 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 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 : ![Activer l'utilisation du serveur MCP dans les paramètres](https://media.brightdata.com/2025/07/image-130-725x1024.png)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 : ```none 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 : ![L'interaction que vous êtes censé voir](https://media.brightdata.com/2025/07/image-131-1024x607.png)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`](https://github.com/brightdata/brightdata-mcp/blob/main/assets/Tools.md). 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 : ![Les fichiers dans votre dossier après que Cline a terminé la tâche](https://media.brightdata.com/2025/07/image-132.png)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 :](/products/web-scraper/amazon) ![Les données de la page Amazon récupérée](https://media.brightdata.com/2025/07/image-133-1024x584.png)Un `index.js`: contient la logique Node.js pour charger et imprimer son contenu : ![](https://media.brightdata.com/2025/07/image-134-1024x584.png)Exécutez le script `index.js` produit avec : ```none node index.js ``` Dans le terminal, vous devriez voir les données du produit imprimées : ![](https://media.brightdata.com/2025/07/image-135-1024x433.png)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 : ![](https://media.brightdata.com/2025/07/image-136-1024x549.png)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](/blog/donnees-web/bypass-amazon-captcha)). 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](/ai/web-access), 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 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 MCP](/ai/mcp-server). 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 ! Contacter ventesEssai gratuit![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg) Table des matières Data for AI Supercharge your AI with instant and reliable access to web data. No blockers. No hassle. Talk to an expert Bright Data MCP Get started with Bright Data’s Web MCP Server today with 5000 free monthly requests and unlock your AI’s full potential. Start free now [ ](https://news.ycombinator.com/submitlink?t=Web+Scraping+in+Cline+avec+le+serveur+MCP+de+Bright+Data&u=https://brightdata.fr/blog/ai/web-scraping-in-cline-with-bright-data) [ ](https://www.linkedin.com/shareArticle?mini=true&title=Web+Scraping+in+Cline+avec+le+serveur+MCP+de+Bright+Data&url=https://brightdata.fr/blog/ai/web-scraping-in-cline-with-bright-data) [ ](http://www.reddit.com/submit?title=Web+Scraping+in+Cline+avec+le+serveur+MCP+de+Bright+Data&url=https://brightdata.fr/blog/ai/web-scraping-in-cline-with-bright-data) ## Vous pourriez aussi être intéressé par [ ![OpenHuman with Bright Data](https://media.brightdata.fr/2026/09/OpenHuman-with-Bright-Data.png) ](https://brightdata.fr/blog/ai/openhuman-with-bright-data "Accès Web Prêt pour la Production dans OpenHuman via le CLI Bright Data") [AI ![Antonello Zanini](https://media.brightdata.fr/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Accès Web Prêt pour la Production dans OpenHuman via le CLI Bright Data Intégrez le CLI Bright Data avec OpenHuman pour permettre un accès web prêt pour la production et la collecte de données pour les agents IA. 09-Sep-2026 14 min de lecture ](https://brightdata.fr/blog/ai/openhuman-with-bright-data) [ ![Multimodal Web Scraping with MiniMax](https://media.brightdata.fr/2026/09/Multimodal-Web-Scraping-with-MiniMax.png) ](https://brightdata.fr/blog/donnees-web/multimodal-web-scraping-with-minimax "Scraping Web Multimodal avec MiniMax") [Données Web ![Antonello Zanini](https://media.brightdata.fr/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Scraping Web Multimodal avec MiniMax Associez Bright Data Web Unlocker avec la vision MiniMax M3 pour extraire des données structurées à partir d’images et de captures d’écran de pages web. 09-Sep-2026 5 min de lecture ](https://brightdata.fr/blog/donnees-web/multimodal-web-scraping-with-minimax) [ ![The 10 Best CLI Tools for Codex in 2026](https://media.brightdata.fr/2026/08/The-10-Best-CLI-Tools-for-Codex-in-2026.png) ](https://brightdata.fr/blog/ai/best-cli-tools-for-codex "Les 10 meilleurs outils CLI pour Codex en 2026 – Testés & Classés") [AI ![Daniel Shashko](https://media.brightdata.fr/2022/04/Daniel-Shashko-2-50x50.png) Daniel Shashko Web Data & AI Expert ### Les 10 meilleurs outils CLI pour Codex en 2026 – Testés & Classés Les 10 outils CLI qui rendent Codex plus rapide et plus capable, en commençant par le Bright Data CLI pour un accès web réel depuis l’intérieur du sandbox. 06-Sep-2026 24 min de lecture ](https://brightdata.fr/blog/ai/best-cli-tools-for-codex)