Intégrer Bright Data Web MCP avec Kilo Code dans VS Code

Dans ce tutoriel, vous apprendrez

Ce qu’est Kilo Code et pourquoi il s’agit d’un puissant assistant de codage IA pour VS Code.
Pourquoi l’intégration de capacités de données Web (via le MCP Web de Bright Data) peut rendre Kilo Code encore plus utile.
Comment connecter Kilo Code au Web MCP de Bright Data – étape par étape – pour créer un agent de codage IA amélioré avec un accès Web en direct.

Plongeons dans l’aventure !

Conditions préalables

Pour suivre cette formation, vous aurez besoin de

Visual Studio Code installé sur votre ordinateur (dernière version recommandée).
Node.js et npm installés (le MCP Web de Bright Data est distribué sous la forme d’un package npm).
Un compte Bright Data et une clé API.
Une clé API pour un fournisseur LLM. Kilo Code prend en charge de nombreux fournisseurs (OpenAI, Anthropic, etc.).
(Facultatif) Python installé sur votre machine. Ceci n’est nécessaire que si vous voulez exécuter le script Python d’exemple que Kilo Code générera pendant le test.

Ne vous inquiétez pas si vous n’avez pas encore de clé API Bright Data, nous allons vous aider à en créer une. Mais avant cela, voyons ce qu’est exactement Kilo Code.

Qu’est-ce que Kilo Code (et VS Code avec Kilo Code) ?

Kilo Code est un assistant de codage IA open-source qui fonctionne comme une extension de VS Code, combinant les meilleures fonctionnalités d’outils populaires tels que Cline et Roo Code tout en y ajoutant des améliorations uniques.

Il agit comme une équipe de développement IA à l’intérieur de votre éditeur, vous aidant à générer du code, à le remanier, à le déboguer et même à automatiser des tâches en utilisant le langage naturel. Essentiellement, il peut :

Fonctionner comme un pair programmeur d’IA avec lequel vous discutez en langage naturel pour planifier ou écrire du code.
Lire les fichiers de votre projet, y apporter des modifications et même créer de nouveaux fichiers ou exécuter des commandes de terminal si nécessaire.
Adapter sa “personnalité” grâce à plusieurs modes – par exemple, les modes Architecte, Codeur et Débogueur guident chacun le comportement de l’IA pour la planification, le codage ou le dépannage.
Intégrer divers fournisseurs de modèles d’IA (OpenAI, Anthropic, OpenRouter, LLM locaux comme Ollama, etc.) afin de pouvoir choisir le modèle sous-jacent.
Connexion à des outils externes via le Model Context Protocol (MCP), qui permet à Kilo Code d’utiliser des API web et des services personnalisés pour des fonctionnalités étendues.

Kilo Code est construit sur la base d’autres projets open-source (il a évolué à partir des agents Roo Code et Cline ), mais il a jusqu’à présent réussi à tracer sa propre voie. Il prend en charge plus de 400 modèles d’IA, dont Gemini 2.5 Pro, Claude 4 Sonnet & Opus, et GPT-5, tout en permettant des connexions à des API et à des sources de données externes, ce qui en fait la plateforme idéale pour l’intégration de données Web.

Pourquoi intégrer le Web MCP dans Kilo Code ?

Comme tous les assistants de codage IA, le grand modèle de langage (LLM) qui sous-tend Kilo Code a un problème de connaissances obsolètes.

Les LLM ne peuvent générer des réponses que sur la base des données d’entraînement statiques sur lesquelles ils ont été formés, qui sont essentiellement un instantané du passé. Cela signifie que l’IA peut passer à côté de cadres récents, suggérer des fonctions obsolètes ou produire un code qui ne suit pas les meilleures pratiques les plus récentes.

Imaginez maintenant que vous donniez à votre agent Kilo Code la capacité de récupérer des tutoriels, de la documentation et des exemples actualisés sur le web et d’en tirer des enseignements en temps réel. En intégrant la recherche sur le web et l’extraction de données en direct, Kilo Code pourrait résoudre des problèmes à l’aide d’informations actuelles. Par exemple, l’extraction de la documentation d’une bibliothèque récemment publiée ou des dernières réponses de Stack Overflow pour un message d’erreur.

C’est exactement ce que permet le serveur Web MCP de Bright Data.

Le serveur Web MCP de Bright Data est une puissante implémentation du protocole Model Context qui fournit une solution tout-en-un pour l’accès public au web, avec un niveau gratuit de 5 000 requêtes mensuelles.

En d’autres termes, il s’agit d’un “navigateur web + gratteur de données” que l’IA de Kilo Code peut contrôler de manière programmatique. Le serveur MCP expose des outils permettant de rechercher sur Internet, de naviguer sur des sites Web et d’extraire des données structurées, le tout par le biais d’une API simple que l’agent d’intelligence artificielle peut appeler. Voici quelques-uns des outils MCP les plus couramment utilisés :

search_engine: Utilisé pour effectuer des recherches en direct sur le web (Google, Bing ou Yandex) et récupérer les résultats de la recherche (titres, extraits, URL) au format JSON/Markdown. Cela permet à l’IA de trouver des pages web ou des réponses pertinentes en temps réel. Pour tous les cas d’utilisation, découvrez comment choisir les meilleurs outils SERP API ici.
scrape_as_markdown: Utilisé pour récupérer le contenu d’une page web donnée, avec des options permettant de contourner les robots et les CAPTCHA, et de renvoyer le texte dans un format Markdown propre. Cela permet à l’IA de lire un article ou une page de documentation et d’utiliser ces informations pour vous aider dans votre tâche.

En connectant Kilo Code au MCP de Bright Data, votre codeur IA a les yeux et les mains sur le web. Il peut rechercher, cliquer et gratter dans le cadre de son flux de travail, ce qui le rend beaucoup plus ingénieux et précis. Nous allons maintenant voir comment configurer cette intégration.

Comment connecter Kilo Code à Web MCP de Bright Data dans Visual Studio Code

Étape 1 : Installer Kilo Code dans VS Code

L’installation de Kilo Code est simple via le marché des extensions VS Code. Commencez par ouvrir Visual Studio Code et accédez au panneau Extensions. Une fois l’installation terminée, vous serez peut-être invité à recharger VS Code pour activer l’extension. Recherchez l’icône Kilo Code qui apparaît maintenant dans la barre latérale de VS Code, généralement sur le côté gauche de l’interface.

Étape 2 : Configurer votre fournisseur LLM

Une fois Kilo Code installé, cliquez sur l’icône Kilo Code dans votre barre latérale pour ouvrir le panneau principal. L’interface apparaîtra sur le côté gauche de votre fenêtre VS Code, donnant accès à toutes les fonctionnalités et options de configuration de Kilo Code.

Kilo Code offre plusieurs voies d’accès aux modèles d’IA, ce qui le rend flexible pour les utilisateurs ayant des préférences et des budgets divers.

Pour les nouveaux utilisateurs, l’option la plus pratique consiste à utiliser le système de crédits intégré. Cliquez sur “Se connecter avec Google” dans le panneau Kilo Code pour authentifier votre compte. Ce processus applique automatiquement 20 $ de crédits gratuits à votre compte, ce qui vous donne un accès immédiat à plus de 400 modèles d’IA sans nécessiter de clés API distinctes.
Si vous préférez utiliser vos propres clés API, cliquez sur l’icône d’engrenage dans la barre latérale de Kilo Code et accédez à la section Fournisseurs de modèles. Vous pouvez y ajouter des clés API pour différents fournisseurs, notamment Anthropic (pour les modèles Claude), OpenAI (pour les modèles GPT), Google (pour les modèles Gemini) ou tout autre service compatible avec OpenRouter.

Une fois que votre fournisseur de modèle est configuré, prenez le temps de définir votre modèle préféré parmi les options disponibles. Vous pouvez choisir GPT-4 pour les tâches de raisonnement complexes, Claude-3 pour l’analyse détaillée du code ou Gemini pour les capacités multimodales.

Pour vérifier que tout fonctionne correctement, envoyez un simple message de test tel que “Bonjour, pouvez-vous m’aider à coder ?” L’IA devrait répondre rapidement, confirmant que votre connexion au modèle fonctionne correctement.

Étape 3 : Installer le MCP Web de Bright Data

Maintenant que Kilo Code est configuré avec un modèle d’IA, vous pouvez étendre ses capacités avec la navigation sur le Web et l’extraction de données.

Avant d’installer le serveur MCP, vous devez obtenir votre clé API Bright Data. Rendez-vous sur brightdata.com et créez un compte gratuit, qui comprend une allocation généreuse de 5 000 requêtes gratuites par mois pendant les trois premiers mois. Après avoir créé votre compte, vérifiez votre adresse électronique comme demandé.
Une fois connecté, accédez aux paramètres de votre compte pour localiser et copier votre jeton API. Ce jeton sert de justificatif d’authentification pour le serveur MCP et sera nécessaire lors de la prochaine étape de configuration. Conservez ce jeton en lieu sûr et à portée de main, car vous devrez y faire référence au cours du processus de configuration.
Une fois votre clé API sécurisée, ouvrez votre terminal ou votre invite de commande pour installer le package Bright Data Web MCP globalement sur votre système. Exécutez la commande :

npm install -g @brightdata/mcp

Cette installation globale garantit que le serveur MCP est disponible sur l’ensemble du système et qu’il est accessible par Kilo Code quel que soit votre répertoire de projet actuel.

Pour vérifier que l’installation a réussi, exécutez la commande : npx @brightdata/mcp

npx @brightdata/mcp --version

Vous devriez voir s’afficher la version 2.5.0 ou une version supérieure, confirmant que la dernière version du serveur MCP est correctement installée et prête à l’emploi.

Etape #4 : Connecter Kilo Code au Web MCP

Vient maintenant l’étape cruciale de la connexion de Kilo Code à votre serveur Web MCP de Bright Data nouvellement installé. Kilo Code prend en charge les méthodes de transport STDIO et SSE pour les connexions au serveur MCP, mais nous utiliserons la méthode STDIO pour des performances locales et une fiabilité optimales.

Dans le panneau Kilo Code, cliquez sur l’icône d’engrenage et naviguez jusqu’à la section MCP Servers. Recherchez l’option “Edit Global MCP” qui ouvre le fichier de configuration dans lequel vous définirez les connexions de votre serveur. Ce fichier utilise le format JSON et vous permet de spécifier plusieurs serveurs MCP si nécessaire.

Ajoutez la configuration suivante pour vous connecter au MCP Web de Bright Data :

{
  "mcpServers" : {
    "Bright Data Web" : {
      "command" : "npx",
      "args" : ["@brightdata/mcp"],
      "env" : {
        "API_TOKEN" : "YOUR_BRIGHT_DATA_API_TOKEN_HERE"
      },
      "disabled" : faux,
      "alwaysAllow" : ["search_engine", "scrape_as_markdown"],
      "timeout" : 180
    }
  }
}

Remplacez "YOUR_BRIGHT_DATA_API_TOKEN_HERE" par la clé API que vous avez copiée depuis votre compte Bright Data. Le tableau "alwaysAllow" permet de pré-approuver les outils de recherche et de scraping de base afin de réduire les frictions lors d’une utilisation normale, tandis que le paramètre timeout de 180 secondes permet d’éviter les dépassements prématurés lors d’opérations de scraping Web plus lentes.

Pour les utilisateurs qui souhaitent contrôler davantage le comportement de leur serveur MCP, Bright Data propose plusieurs options de configuration avancée. Cette configuration étendue offre une flexibilité supplémentaire aux utilisateurs en entreprise ou à ceux qui ont des besoins spécifiques :

{
  "mcpServers" : {
    "Bright Data Web" : {
      "command" : "npx",
      "args" : ["@brightdata/mcp"],
      "env" : {
        "API_TOKEN" : "YOUR_BRIGHT_DATA_API_TOKEN_HERE",
        "RATE_LIMIT" : "100/1h",
        "PRO_MODE" : "false",
        "WEB_UNLOCKER_ZONE" : "optional_custom_zone",
        "BROWSER_ZONE" : "optional_custom_browser_zone"
      },
      "disabled" : faux,
      "timeout" : 180
    }
  }
}

La fonction de limitation du taux vous permet de contrôler la fréquence des demandes en utilisant des formats tels que "100/1h" pour 100 demandes par heure, "50/30m" pour 50 demandes par 30 minutes, ou "10/5s" pour 10 demandes par 5 secondes. En définissant PRO_MODE sur "true", l’accès aux 60 outils avancés est déverrouillé, bien que cela puisse entraîner des frais supplémentaires par rapport à la version gratuite. Les configurations de zone sont facultatives et principalement utiles pour les entreprises ayant des besoins de proxy personnalisés.

Pour une sécurité renforcée et une gestion plus facile, envisagez d’utiliser des variables d’environnement pour stocker votre jeton API plutôt que de le coder en dur dans le fichier de configuration. Créez un fichier .env à la racine de votre projet contenant les éléments suivants

API_TOKEN=votre_jeton_d'API_actuel_ici
RATE_LIMIT=100/1h
PRO_MODE=false

Faites ensuite référence à ces variables dans votre configuration MCP en utilisant le format ${VARIABLE_NAME}. Cette approche permet de conserver les informations d’identification sensibles en dehors de vos fichiers de configuration et facilite la gestion des différents jetons dans les environnements de développement, d’essai et de production.

Pour les collaborations d’équipe ou les environnements de développement à distance où l’installation d’un serveur MCP local peut s’avérer difficile, Bright Data propose également une option de transport SSE à distance:

{
  "mcpServers" : {
    "Bright Data Remote" : {
      "command" : "npx",
      "args" : [
        "mcp-remote",
        "https://mcp.brightdata.com/mcp?token=YOUR_API_TOKEN_HERE"
      ],
      "disabled" : faux,
      "timeout" : 300
    }
  }
}

Cette configuration se connecte directement au point d’extrémité MCP hébergé de Bright Data, ce qui évite l’installation d’un serveur local tout en offrant les mêmes fonctionnalités.

La configuration par défaut utilise le niveau gratuit de Bright Data, qui comprend l’accès à des outils de base tels que search_engine et scrape_as_markdown. Ces outils sont suffisants pour répondre à la plupart des besoins en matière d’intégration de données Web et offrent une excellente valeur dans la limite des 5 000 requêtes mensuelles.

Si vous activez le PRO_MODE, vous aurez accès à l’ensemble des 60 outils spécialisés, y compris l’automatisation avancée du navigateur et les capacités d’extraction de données structurées, bien que des frais supplémentaires puissent s’appliquer au-delà des limites du niveau gratuit.

Une fois que vous avez enregistré votre fichier de configuration en utilisant Ctrl+S ou Cmd+S, redémarrez complètement VS Code pour vous assurer que le nouveau serveur MCP est correctement chargé. Après le redémarrage, vérifiez le panneau des paramètres MCP de Kilo Code, où vous devriez voir “Bright Data Web” listé avec un statut “Running”, indiquant une connexion réussie.

Étape 5 : Testez l’agent Kilo Code amélioré

L’intégration des MCP Kilo Code et Bright Data Web étant terminée, il est temps de vérifier que tout fonctionne correctement.

Ouvrez le panneau Kilo Code et assurez-vous que vous pouvez voir que la connexion au serveur MCP est active. Recherchez les indicateurs de connexion ou les messages d’état qui confirment que le serveur Bright Data Web fonctionne correctement.

Pour un test plus avancé de la fonctionnalité de scraping, essayez cette requête : “Obtenir le prix actuel du Bitcoin à partir de CoinGecko” et créez un guide de référence rapide pour la bibliothèque de requêtes. Ce test fait appel à l’outil scrape_as_markdown et démontre la puissance de l’accès à la documentation en temps réel.

Vous devriez voir une demande d’approbation de l’outil pour la fonction de scraping, suivie par l’extraction du contenu du site web de CoinGecko, et enfin un guide de référence rapide généré avec des exemples actuels et des signatures de fonctions.

Cas d’utilisation avancés et exemples

L’intégration permet une résolution dynamique des problèmes en permettant à votre assistant IA d’extraire des solutions actuelles de Stack Overflow, de la documentation API en direct et des discussions récentes sur GitHub. Vous pouvez utiliser cette combinaison de Kilo Code et de Bright Data pour réaliser des choses comme :

Intégration de la documentation dynamique de l’API
Analyse des données de marché en direct
Automatisation de l’analyse concurrentielle

Les équipes d’entreprise peuvent automatiser la veille stratégique grâce à une intégration puissante des données. Les services financiers peuvent surveiller les données du marché en temps réel avec des requêtes telles que “Suivre les prix des crypto-monnaies sur les principaux échanges et créer un tableau de bord de négociation”. Les équipes marketing peuvent automatiser l’analyse concurrentielle en demandant de “surveiller les pages de tarification des concurrents et d’alerter sur les changements”.

Ces applications transforment les tâches routinières de l’entreprise en processus automatisés, pilotés par l’IA, qui fournissent des informations exploitables.

Dépannage et conseils

Même avec une configuration bien documentée, il est courant de rencontrer de petits problèmes la première fois que vous connectez Kilo Code au Web MCP de Bright Data. La bonne nouvelle, c’est que la plupart des problèmes sont faciles à diagnostiquer et à résoudre une fois que vous savez ce qu’il faut chercher.

Problèmes d’installation courants

Si le panneau Kilo Code n’apparaît pas après l’installation, la première chose à faire est de redémarrer Visual Studio Code. Assurez-vous que vous utilisez la dernière version de VS Code, car les versions obsolètes peuvent parfois empêcher les extensions de se charger correctement.
Une autre pierre d’achoppement fréquente est la configuration de l’API. Si vous collez votre clé de fournisseur LLM de manière incorrecte ou si vous choisissez un modèle auquel vous n’avez pas accès, Kilo Code peut échouer silencieusement. Vérifiez toujours votre clé API et exécutez une requête de test rapide comme “Hello” pour vérifier que le modèle répond.
Du côté de MCP, les problèmes les plus fréquents concernent la connectivité et l’authentification du serveur MCP. Si votre serveur affiche le statut “Failed”, vérifiez que Node.js 18+ est installé avec node --version, puis réinstallez le serveur MCP en utilisant :

npm uninstall -g @brightdata/mcp && npm install -g @brightdata/mcp

Les erreurs d’authentification proviennent généralement de jetons d’API incorrects ; assurez-vous qu’il n’y a pas d’espaces supplémentaires lors de la copie et vérifiez que votre compte Bright Data dispose d’un quota disponible.

Lesutilisateurs de Windows peuvent avoir besoin d’une configuration alternative : remplacez la commande par "cmd" et les args par ["/c", "npx", "-y", "@brightdata/mcp"].
Pour les problèmes de délai d’attente sur les sites complexes, augmentez le délai d’attente à 300 secondes et envisagez d’activer le mode Pro pour les pages contenant beaucoup de JavaScript.

Optimisation des performances

Une fois que tout fonctionne, vous devez affiner les performances.

N’oubliez pas que chaque appel MCP implique un aller-retour vers le web, de sorte que des tâches telles que l’extraction de plusieurs pages prendront naturellement plus de temps que la génération de code statique. Pour que les choses restent rapides, soyez précis dans vos invites. Au lieu de demander à Kilo Code de “rechercher sur le web tout ce qui concerne Python”, limitez-le à “rechercher sur le web les notes de mise à jour officielles de Python 3.12“.
Vous pouvez encore optimiser votre configuration en utilisant l’approbation automatique sélective pour les outils courants. Par exemple, en définissant "alwaysAllow" : ["search_engine", "scrape_as_markdown"] réduit les frictions tout en maintenant la sécurité.
Choisissez également le transport STDIO pour le développement local (plus rapide) et le transport SSE pour les environnements distants (plus fiable).
Gardez un œil sur l’utilisation des ressources. L’exécution locale du MCP signifie que c’est votre machine qui fait le gros du travail. Si vous constatez des ralentissements lors de tâches de scraping importantes, vous pouvez passer au service MCP hébergé de Bright Data, qui décharge le traitement dans le nuage.

Et n’oubliez pas de maintenir l’extension Kilo Code et le package MCP à jour : lesdéveloppeurs apportent fréquemment des améliorations et des corrections de bogues qui peuvent améliorer considérablement la stabilité.

Récapitulation

La connexion de Kilo Code avec le MCP Web de Bright Data permet à votre assistant de codage d’accéder à des données Web en direct au sein même de VS Code. Cette configuration vous aide à travailler avec des informations actualisées pour améliorer le codage et la résolution des problèmes.

Bright Data propose également de puissants services proxy, des ensembles de données prêts à l’emploi et de nombreuses autres solutions pour l’IA. Explorez toutes les solutions Bright Data pour trouver les outils les mieux adaptés à votre flux de travail.

Commencez dès aujourd’hui et améliorez vos capacités en matière de données web.

Contacter Ventes Essai gratuit