Ajouter le Web MCP de Bright Data à Roo Code dans Visual Studio Code

Dans ce tutoriel, vous apprendrez

1. Ce qu’est Roo Code et pourquoi il est actuellement l’un des agents de codage IA les plus utilisés pour les IDE.
2. Comment l’équiper de capacités d’interaction web et d’extraction de données peut le rendre encore plus utile.
3. Comment connecter Roo Code au serveur Bright Data Web MCP dans Visual Studio Code pour créer un agent de codage IA amélioré.

Plongeons dans l’aventure !

Qu’est-ce que Roo Code ?

Roo Code est un agent de codage autonome alimenté par l’IA qui vit directement dans votre éditeur. En détail, il peut

• Fonctionner comme un programmeur en binôme alimenté par l’IA avec lequel vous pouvez communiquer en langage naturel.
• Lire et écrire des fichiers directement dans votre espace de travail.
• Exécuter des commandes de terminal.
• Automatiser les actions du navigateur grâce à une intégration de navigateur intégrée.
• S’intégrer à un large éventail d’API/modèles compatibles avec OpenAI ou personnalisés.
• Adapter sa “personnalité” et ses capacités grâce à différents modes.
• Le connecter à des fournisseurs tiers via l’intégration MCP.

Roo Code est né d’un fork de Cline et est disponible en tant qu’extension open-source de Visual Studio Code. Il vous permet d’automatiser des tâches de codage et d’améliorer votre flux de développement en utilisant l’IA directement dans VS Code.

Contrairement à Cline, Roo Code ne nécessite pas de compte pour fonctionner (bien qu’une plateforme Roo Cloud soit disponible avec des fonctionnalités supplémentaires pour les entreprises). Pour plus de détails, consultez notre guide sur l’intégration de Cline avec le serveur Web MCP de Bright Data.

Actuellement, le projet Roo Code compte plus de 18 000 étoiles sur GitHub et 750 000 installations sur la place de marché Visual Studio Code. Cela signifie qu’il s’agit de l’un des agents de codage d’IA les plus largement utilisés pour les IDE.

Pourquoi intégrer le Web MCP dans l’extension VS Code de Roo Code ?

Le LLM que vous configurez dans Roo Code présente la limite commune à tous les modèles de langage : des connaissances obsolètes. Un LLM peut uniquement générer des réponses basées sur les données statiques sur lesquelles il a été formé, ce qui n’est rien de plus qu’un instantané du passé.

Étant donné la rapidité avec laquelle le monde de la technologie évolue, cette limitation ne peut être ignorée. Les LLM peuvent facilement suggérer des approches de codage dépassées, des méthodes obsolètes, ou passer complètement à côté de nouvelles fonctionnalités.

Imaginez maintenant que vous donniez à votre assistant de codage Roo Code AI la possibilité d’aller chercher des tutoriels, des pages de documentation et des guides à jour, et d’en tirer des enseignements en temps réel. Cela devient possible en intégrant Roo Code à une solution qui étend les LLM avec des capacités de recherche sur le web et d’accès aux données.

C’est précisément ce que vous pouvez trouver dans le serveur Web MCP de Bright Data. Ce serveur MCP open-source(désormais avec un niveau gratuit) offre plus de 60 outils prêts pour l’IA pour l’interaction web en temps réel et la collecte de données.

Les deux outils les plus couramment utilisés dans le serveur MCP sont les suivants :

En outre, il existe plus de 55 outils spécialisés pour interagir avec les pages web (par exemple, scraping_browser_click) et collecter des données structurées à partir d’un large éventail de sites web, y compris Amazon, Yahoo Finance, TikTok, LinkedIn, et plus encore. Par exemple, l’outil web_data_amazon_product récupère des informations détaillées et structurées sur les produits d’Amazon en acceptant une URL de produit valide en entrée.

Les cas d’utilisation possibles de Bright Data Web MCP + Roo Code sont les suivants :

• Récupération des données SERP en direct et insertion de liens contextuels dans vos rapports Markdown directement dans VS Code.
• Demander des tutoriels ou de la documentation basés sur le code que vous êtes en train d’écrire.
• Récupérer des données publiques fraîches sur des sites web et les enregistrer localement pour les simuler, les analyser ou les traiter ultérieurement.

Voyons maintenant le Web MCP en action dans Roo Code !

Comment connecter Roo Code au Web MCP de Bright Data dans Visual Studio Code ?

Dans cette section guidée, vous apprendrez comment ajouter Roo Code à Visual Studio Code et l’intégrer au Web MCP de Bright Data. Le résultat final sera un agent de codage IA capable d’accéder et d’interagir avec le Web. Ces capacités rendront l’agent plus ingénieux et plus précis.

Plus précisément, vous construirez un agent d’IA de codage Roo amélioré avec des capacités de récupération de données et l’utiliserez pour :

1. récupérer une page de produit Amazon en temps réel.
2. Stocker les données localement.
3. Créer un script Python pour charger et traiter les données collectées.

Suivez les étapes ci-dessous pour commencer !

Conditions préalables

Pour suivre ce tutoriel, vous avez besoin

• Une clé API Bright Data
• Une clé API de l’un des fournisseurs LLM pris en charge (dans ce guide, nous utiliserons une clé API OpenRouter).

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

Pour exécuter la sortie générée, vous aurez également besoin d’installer Python localement.

Étape 1 : Installation du code Roo dans Visual Studio Code

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

Si vous installez pour la première fois une extension du fournisseur Roo Code, il vous sera demandé de faire confiance à l’éditeur. Cliquez sur “Trust Publisher & Install” pour continuer.

Une fois l’installation terminée, vous verrez une icône Roo Code dans la barre latérale gauche. Cliquez dessus pour ouvrir l’extension :

Remarque: si l’icône Roo Code ne s’affiche pas, essayez de recharger Visual Studio Code. Pour tout autre problème, reportez-vous au guide d’installation officiel.

C’est fait ! Roo Code est maintenant disponible dans VS Code.

Etape #2 : Configurer votre connexion OpenRouter

Maintenant que Roo Code est installé, la prochaine étape est de le connecter à un fournisseur LLM. Roo Code supporte un large éventail de fournisseurs, y compris Anthropic, Claude Code, AWS Bedrock, DeepSeek, Google Gemini, Groq, Hugging Face, LiteLLM, Mistral AI, Ollama, OpenAI, OpenRouter, Requesty, xAI (Grok), et bien d’autres.

Dans ce guide, nous allons connecter Roo Code à un OpenRouter et utiliser le modèle qwen/qwen3-coder:free. Cette configuration est entièrement gratuite, ce qui signifie qu’aucun fonds ou crédit n’est requis.

Note: Si vous préférez un autre fournisseur ou si vous avez déjà des clés API différentes, suivez le guide d’intégration spécifique dans la documentation de Roo Code.

Créez un compte OpenRouter et récupérez votre clé API. Si vous n’êtes pas familier avec ce processus, jetez un coup d’œil à ce que nous avons fait dans notre tutoriel sur Qwen-Agent.

Dans le panneau d’extension de Roo Code, faites défiler vers le bas jusqu’à ce que vous voyiez le bouton “OpenRouter”. Cliquez dessus :

Une fenêtre de navigateur s’ouvre, vous invitant à vous connecter à votre compte OpenRouter et à autoriser Roo Code. Cliquez sur “Autoriser” pour continuer :

De retour dans VS Code, il vous sera demandé de confirmer la connexion. Cliquez sur “Ouvrir” pour terminer le processus d’autorisation :

Voici ce que vous devriez maintenant voir dans Visual Studio Code :

Comme vous pouvez le constater, l’autorisation a fonctionné correctement et Roo Code est prêt à être utilisé !

Par défaut, Roo Code utilise le modèle Claude Opus 4 (qui nécessite un compte OpenRouter financé pour être utilisé). Pour passer à un modèle gratuit (ou à tout autre modèle), cliquez sur l’icône de l’engrenage dans le menu supérieur :

Dans l’onglet “Settings”, descendez jusqu’au menu déroulant “Model” et choisissez le modèle que vous souhaitez configurer :

Par exemple, sélectionnez qwen/qwen3-coder:free, un modèle gratuit optimisé pour les scénarios de codage. Une fois que vous avez terminé, cliquez sur le bouton “Terminé” pour confirmer les modifications.

C’est fantastique ! Roo Code est maintenant entièrement configuré dans VS Code. Il est temps d’en faire un agent de codage avec des capacités de récupération de données web et d’interaction via l’intégration MCP.

Étape 3 : Installer le MCP Web de Bright Data

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

Suivez les instructions officielles pour générer votre clé d’API Bright Data. Veillez à la conserver en lieu sûr. Nous supposerons que vous utilisez une clé d’API avec des autorisations d’administrateur, car cela facilite l’intégration.

Ouvrez le terminal et installez globalement le Web MCP via le paquet @brightdata/mcp:

npm install -g @brightdata/mcp

Vérifiez que le serveur MCP local fonctionne avec cette commande Bash :

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

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

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

Remplacez le caractère générique <YOUR_BRIGHT_DATA_API> par le jeton d’API Bright Data. Les deux commandes ci-dessus définissent la variable d’environnement API_TOKEN requise, puis lancent le serveur MCP via le paquetage npm @brightdata/mcp.

En cas de succès, vous devriez voir des journaux comme dans l’image ci-dessous :

Lors du premier lancement, le package configure automatiquement deux zones par défaut dans votre compte Bright Data :

• mcp_unlocker: Une zone pour Web Unlocker.
• mcp_browser: Une zone pour l’API du navigateur.

Ces deux zones sont nécessaires pour accéder à tous les outils exposés par le MCP Web.

Pour confirmer que les zones ci-dessus ont été créées, connectez-vous à votre tableau de bord Bright Data. Naviguez jusqu’à la page“Proxies & Scraping Infrastructure“, et vous devriez voir les deux zones listées :

Remarque: si votre jeton API ne dispose pas d’autorisations d’administration, il se peut que ces zones ne soient pas configurées automatiquement. Dans ce cas, vous pouvez les créer manuellement dans le tableau de bord et spécifier leurs noms à travers des variables d’environnement, comme documenté sur la page GitHub du paquet.

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

Pour débloquer des fonctionnalités avancées comme l’automatisation du navigateur et l’extraction de données structurées à partir d’une longue liste de domaines, 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, en PowerShell :

$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 revanche, le mode Pro n’est pas inclus dans la version gratuite et entraîne des frais supplémentaires.

Parfait ! Vous avez vérifié que le serveur Web MCP fonctionne sur votre machine. Terminez le processus du serveur, car vous allez maintenant configurer Roo Code pour qu’il le lance automatiquement pour vous et qu’il s’y connecte.

Etape #4 : Connecter Roo Code au Web MCP

Il est temps de connecter l’extension Roo Code au MCP Web de Bright Data. Dans le panneau Roo Code, dans le menu supérieur, sélectionnez l’option “MCP Servers” :

Vous arrivez dans la section de configuration “MCP Servers”. Ici, vous pouvez configurer des serveurs MCP, soit des serveurs MCP globaux (disponibles dans tous les projets), soit des serveurs MCP locaux (disponibles uniquement dans le projet en cours).

La procédure de configuration est presque identique, cliquez donc sur le bouton “Edit Global MCP”. Cela ouvrira un fichier mcp_settings.json, qui contient une entrée mcpServers vide :

C’est dans ce fichier de configuration que vous devez spécifier les détails de la connexion au MCP Web de Bright Data. Assurez-vous qu’il contient le code suivant :

{
  "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 à Roo Code comment démarrer les serveurs MCP externes :

• L’objet mcpServers indique à Roo Code comment démarrer les serveurs MCP externes.
• L’entrée brightData définit la commande(npx) et les variables d’environnement nécessaires au lancement du MCP Web. PRO_MODE est facultatif, mais son activation permet de débloquer l’ensemble des outils disponibles.

Voici ce que vous devriez voir :

Remplacez l’espace réservé <YOUR_BRIGHT_DATA_API_KEY> par votre clé d’API Bright Data récupérée précédemment.

Cette configuration indique à Roo Code d’exécuter la même commande npx avec les variables d’environnement vues à l’étape précédente. En d’autres termes, Roo Code peut maintenant lancer le serveur MCP Web de Bright Data et s’y connecter. (L’activation de PRO_MODE est facultative mais recommandée).

Une fois que vous avez ajouté l’entrée brightData dans mcpServers, Roo Code se connectera immédiatement au serveur Web MCP et affichera les outils disponibles :

Depuis que nous avons mis la variable d’environnement PRO_MODE à true, Roo Code donne maintenant accès à plus de 60 outils. Sans PRO_MODE, seuls 2 outils seraient disponibles : scrape_as_markdown et search_engine.

Cliquez sur le bouton “Done”, et vous avez intégré avec succès le Web MCP dans Roo Code. C’est formidable !

Etape #5 : Tester l’agent Roo Code

Par défaut, Roo Code fonctionne en mode Architecte, qui agit comme un “leader technique expérimenté et un planificateur qui aide à concevoir des systèmes et à créer des plans de mise en œuvre”.

Pour la plupart des scénarios, vous voudrez plutôt l’utiliser comme un programmeur de paires d’IA. Pour ce faire, passez du mode Roo Code au mode Code, comme indiqué ci-dessous :

Testez ensuite les capacités de recherche de données Web de votre agent de codage IA à l’aide d’une invite telle que la suivante :

Récupérez les données de "https://www.amazon.com/Owala-FreeSip-Insulated-Stainless-BPA-Free/dp/B0F354MWSL/", enregistrez-les dans un fichier local "product.json" et créez un script Python "script.py" pour charger et imprimer son contenu.

Cela simule un cas d’utilisation réel, la récupération de données pour l’analyse, la visualisation, le mocking ou d’autres flux de travail.

Exécutez l’invite dans Roo Code et vous devriez obtenir un résultat similaire à celui-ci :

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

1. Roo Code décompose la tâche en un plan en trois étapes.
2. Il détermine que la meilleure façon de récupérer les données du produit Amazon est d’utiliser l’outil web_data_amazon_product du MCP Web.
3. Vous êtes invité à approuver l’exécution de l’outil de récupération.
4. L’outil s’exécute et les données sur les produits Amazon sont récupérées au format JSON.
5. Il vous est demandé si les données doivent être enregistrées dans un fichier local product.json.
6. Après approbation, le fichier JSON est créé et alimenté.
7. Roo Code demande l’autorisation de générer un fichier script.py qui lit et imprime le contenu de product.json.
8. Le fichier est créé avec le code Python généré.
9. Vous êtes invité à exécuter le script avec python script.py.
10. Le script échoue en raison de problèmes d’encodage.
11. Roo Code suggère de mettre à jour le script avec la gestion UTF-8.
12. Après approbation, le script mis à jour s’exécute correctement et produit le résultat attendu.

Remarquez que Roo Code a suggéré de manière proactive l’exécution du script, même si votre invite originale ne le demandait pas explicitement. C’est utile, car cela aide l’agent à détecter les failles et à affiner sa propre sortie.

Après avoir complété le flux, votre répertoire de travail devrait contenir ces deux fichiers :

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

Ouvrez product.json dans VS Code :

Ce fichier contient de vraies données sur les produits Amazon, et non des résultats hallucinés ou fabriqués. En particulier, les données ont été capturées par Bright Data à l’aide de l’outil web_data_amazon_product (qui exploite en interne l’Amazon Scraper) à partir de la page de produit cible ci-dessous :

Remarque: il est notoirement difficile de scraper Amazon en raison de ses strictes protections anti-bots (par exemple, le fameux CAPTCHA d’Amazon). Un LLM standard ne peut pas gérer cette tâche de manière fiable. C’est pourquoi la combinaison de Roo Code avec le Web MCP de Bright Data rend votre agent de codage particulièrement puissant.

Ce fichier contient de vraies données Amazon, et non un contenu halluciné ou inventé généré par le LLM choisi. Plus précisément, les données ont été capturées par Bright Data à l’aide de l’outil web_data_amazon_product (qui s’appelle en interne Amazon Scraper).

Ensuite, le fichier script.py généré contient la logique permettant de lire et d’imprimer les données JSON du produit :

Exécutez le script Python ci-dessus avec :

python script.py

Le résultat sera les données du produit chargées à partir de product.json:

Telle est la puissance de Bright Data + Roo Code. N’oubliez pas que l’exemple ci-dessus n’était qu’un cas d’utilisation simple, alors expérimentez avec plus d’invites. Explorez les flux de données avancés pilotés par LLM, directement dans Visual Studio Code.

Et voilà ! Vous avez terminé l’intégration MCP de Bright Data dans Roo Code.

Conclusion

Dans cet article de blog, vous avez vu comment connecter Roo Code au serveur MCP de Bright Data Web(qui offre maintenant un niveau gratuit !) dans Visual Studio Code. Le résultat est un agent de codage IA riche en fonctionnalités, capable de récupérer des données sur le web et d’interagir avec elles de manière intelligente.

Nous avons utilisé cet agent amélioré pour générer un simple script Python ayant accès aux données des produits Amazon. Pour des projets plus complexes ou pour vous inspirer, rappelez-vous que les outils exposés par le MCP Web peuvent prendre en charge une grande variété de flux de travail et de scénarios agentiques.

Pour créer des agents d’IA puissants, explorez la gamme complète de services disponibles dans l’infrastructure d’IA de Bright Data.

Créez un compte Bright Data gratuitement et commencez à expérimenter avec nos outils Web prêts pour l’IA !