Comment donner à Mistral Vibe l’accès au Web via Bright Data

Dans ce tutoriel, vous apprendrez :

• Ce qu’est Mistral Vibe et ce qu’il offre.
• Pourquoi l’étendre avec un accès web vous permet de surmonter ses principales limitations.
• Comment Bright Data prend en charge l’intégration Vibe pour le scraping web, la recherche web et l’automatisation du navigateur.
• Comment connecter Bright Data à l’agent de codage Mistral Vibe via MCP.
• Comment donner à Mistral Vibe la connaissance des solutions Bright Data via Agent Skills.
• Les avantages de l’intégration Bright Data + Mistral Vibe, avec un exemple complet.

Plongeons dans le vif du sujet !

Qu’est-ce que Mistral Vibe ?

Mistral Vibe est un assistant de codage CLI open source alimenté par les modèles IA de Mistral. Plus précisément, il fournit une interface conversationnelle pour explorer, modifier et interagir avec des bases de code en langage naturel.

Vibe aide les développeurs à automatiser les tâches répétitives, refactoriser le code, exécuter des commandes shell et déléguer du travail à des sous-agents. Sa nature open source lui vaut plus de 3,8k étoiles sur GitHub.

Ses principales fonctionnalités incluent :

• Chat interactif avec les modèles IA Mistral pour l’exploration et la modification de code.
• Lecture/écriture de fichiers, recherche/remplacement et exécution de commandes shell.
• Délégation de tâches à des sous-agents pour des flux de travail parallèles.
• Contexte adapté au projet et intégration Git.
• Système de compétences personnalisées et de commandes slash.
• Auto-complétion, historique persistant et thèmes d’interface configurables.
• Fonctionnalités de sécurité comme l’approbation d’exécution d’outils et les dossiers de confiance.

Pourquoi Mistral Vibe a besoin d’un accès au Web

Quel que soit la puissance du modèle Mistral configuré, l’agent de codage Vibe se heurte à une contrainte critique commune à tous les LLM : l’information stagnante ! En définitive, un LLM ne produit que des résultats dérivés des jeux de données utilisés lors de l’entraînement. Le problème réside dans le fait que ce matériel d’entraînement constitue un instantané statique de l’histoire…

Compte tenu de la rapidité avec laquelle le monde technique évolue, cette restriction s’avère substantielle. Les LLM peuvent recommander des pratiques de programmation obsolètes, utiliser des fonctions dépréciées ou ignorer complètement les mises à jour récemment publiées.

Pour remédier à ces limitations, vous devez enrichir votre outil logiciel IA avec un accès web en direct. C’est précisément ce que Bright Data offre !

L’infrastructure d’accès web prête pour l’IA de Bright Data permet à votre agent d’agir de manière autonome :

• Découvrir des informations à jour depuis des sources en ligne pertinentes et effectuer des recherches web sur Google et d’autres moteurs, comme un utilisateur ordinaire.
• S’informer à partir de pages de documentation, Stack Overflow, forums et autres sources pour rester à jour et se corriger si nécessaire.
• Récupérer des données web réelles et structurées pour des tâches comme le remplissage de bases de données ou la simulation de réponses.
• Suggérer des liens pertinents pour des lectures complémentaires ou pour enrichir vos fichiers README.md.
• Gérer un large éventail d’autres cas d’usage réels.

Ce qui distingue Bright Data, c’est sa vaste infrastructure réseau, soutenue par plus de 400 millions d’IPs de proxys résidentiels dans 195 pays. Cela permet une évolutivité illimitée tout en atteignant 99,99 % de disponibilité et un taux de succès de 99,95 %.

Comment étendre Mistral Vibe avec des capacités de scraping web, de recherche et d’exploration

Bright Data prend en charge Mistral Vibe via deux intégrations possibles :

• Bright Data Web MCP : Le serveur MCP officiel de Bright Data, exposant plus de 60 outils pour interagir avec les produits et services basés sur l’API de Bright Data.
• Bright Data skills : Un ensemble de compétences alignées sur le standard Agent Skills, fournissant aux agents IA les connaissances nécessaires pour utiliser efficacement les produits Bright Data.

Important : Ces deux approches ne sont pas mutuellement exclusives. Bien au contraire, elles sont complémentaires et synergiques ! En effet, les Bright Data skills incluent une compétence pour aider les agents de codage IA à tirer le meilleur parti des outils Web MCP.

Bright Data Web MCP

Le Bright Data Web MCP propose plus de 60 outils, prenant en charge la collecte automatisée de données web, l’extraction de données structurées et les interactions avec le navigateur.

Même sur le niveau gratuit, il expose des outils intéressants :

Vous avez également accès aux versions batch des outils search_engine et scrape_as_markdown.

Cependant, le mode Pro est là où le Web MCP brille vraiment. Il débloque des outils avancés pour l’extraction de données structurées depuis des plateformes comme Amazon, GitHub, LinkedIn, YouTube, TikTok, Yahoo Finance, Zillow, Google Maps, et bien d’autres. Vous obtenez également des outils d’automatisation du navigateur.

Bright Data Skills

Les Bright Data skills sont :

Étapes communes

Avant de montrer comment intégrer Bright Data dans Vibe via MCP ou skills, il y a quelques actions préliminaires communes dont vous devez vous occuper.

Prérequis

Pour suivre ce tutoriel, assurez-vous d’avoir :

• Un système d’exploitation basé sur Unix, tel que Linux, macOS ou WSL configuré sous Windows.
• Node.js installé localement. Ceci est nécessaire pour configurer MCP localement et installer les skills via le package skills. Si vous prévoyez d’installer les skills manuellement et de vous connecter à distance au Web MCP, vous pouvez ignorer ce prérequis.
• Un compte Mistral, idéalement avec une clé API déjà configurée.
• Un compte Bright Data avec une clé API définie.

Pour générer une clé API Bright Data, suivez le guide officiel.

Étape n°1 : Installer Mistral Vibe

Ouvrez le terminal et exécutez la commande suivante pour télécharger et exécuter le script d’installation de Vibe :

curl -LsSf https://mistral.ai/vibe/install.sh | bash

Cela démarrera l’outil d’installation de Mistral Vibe, qui récupérera et installera tous les packages requis :

Une fois l’installation terminée, vous devriez voir une sortie comme celle-ci :
!Notez les messages “[SUCCESS]”

Maintenant, vous pouvez exécuter Mistral Vibe sur votre système via :

vibe

Bien joué ! Vibe a été installé avec succès.

Étape n°2 : Terminer la configuration

Créez un dossier pour votre projet (ou naviguez vers un dossier existant) dans le terminal. Dans cet exemple, nous supposerons que votre répertoire de projet est mistral-bright-data-example :

mkdir mistral-bright-data-example
cd mistral-bright-data-example

Dans votre dossier de projet, démarrez Mistral Vibe :

vibe

La première fois que vous exécutez l’outil, vous verrez un message de bienvenue comme celui-ci :

Appuyez sur Entrée, et vous serez invité à saisir votre clé API Mistral. Si vous n’en avez pas encore, rendez-vous sur la page CLI Mistral Vibe dans votre compte et cliquez sur le bouton “Generate your API key” sous le menu déroulant “Start for free with your API plan” :

Suivez les instructions, abonnez-vous à un plan (même le plan gratuit “Experiment” fonctionne) et générez votre clé API.

Une fois que vous avez la clé API Mistral, collez-la dans le champ et appuyez sur Entrée :

Après avoir saisi votre clé API, vous accéderez à l’interface terminal de Mistral Vibe :

De là, vous pouvez configurer le modèle, les invites système, et plus encore. C’est également là que vous lancerez vos prompts.

Fantastique ! Mistral Vibe est maintenant configuré et prêt à fonctionner sur votre système.

Connecter Bright Data Web MCP à Mistral Vibe

Cette section vous guidera tout au long du processus de configuration d’une instance locale du Bright Data Web MCP dans Mistral Vibe.

Prérequis

Pour suivre plus facilement cette section, il est recommandé d’avoir :

• Une compréhension de base du fonctionnement de MCP.
• Une certaine connaissance des outils exposés par le Bright Data Web MCP.

N’oubliez pas également que les prérequis listés dans le chapitre “Étapes communes” s’appliquent ici aussi.

Étape n°1 : Démarrer avec le Web MCP de Bright Data

Avant de configurer le Web MCP de Bright Data dans Mistral Vibe, vous devez vérifier que le serveur MCP fonctionne sur votre machine. Vous pouvez également ignorer cette étape et configurer une connexion distante au Bright Data Web MCP.

Commencez par vous connecter à votre compte Bright Data. Pour une configuration rapide, suivez l’assistant dans la section “MCP” du panneau de contrôle :

Sinon, pour des instructions supplémentaires, référez-vous aux instructions ci-dessous.

Tout d’abord, installez le Web MCP globalement via le package @brightdata/mcp :

npm install -g @brightdata/mcp

Vérifiez que le serveur MCP démarre localement avec :

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

Remplacez <YOUR_BRIGHT_DATA_API> par votre clé API Bright Data réelle. Cette commande définit la variable d’environnement API_TOKEN requise et lance le serveur Web MCP localement.

En cas de succès, vous devriez voir une sortie similaire à :

Au premier lancement, le package @brightdata/mcp crée automatiquement deux zones dans votre compte Bright Data :

• mcp_unlocker : Une zone pour le Web Unlocker.
• mcp_browser : Une zone pour l’API Browser.

Ces deux zones alimentent les plus de 60 outils disponibles dans le Web MCP. Notez que vous pouvez également configurer vos propres zones personnalisées, comme expliqué dans la documentation.

Pour confirmer que les zones standard ont été créées, rendez-vous sur la page “Proxies & Scraping Infrastructure” dans le panneau de contrôle Bright Data. Vous devriez voir les deux zones listées dans le tableau :

Sur le niveau gratuit du Web MCP, seuls les outils search_engine et scrape_as_markdown (+ leurs versions batch), ainsi que l’outil discover, sont disponibles.

Pour débloquer tous les 60+ outils, activez le mode Pro en définissant la variable d’environnement PRO_MODE="true" :

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

Remarque : Le mode Pro n’est pas inclus dans le niveau gratuit et entraîne des frais supplémentaires.

Parfait ! Vous venez de vérifier que le serveur Web MCP peut fonctionner sur votre machine. Ensuite, vous configurerez Mistral Vibe pour démarrer le serveur de manière autonome et s’y connecter.

Étape n°2 : Configurer le Web MCP dans Mistral Vibe

Dans votre répertoire de projet, créez un fichier config.toml dans le répertoire .vibe :

mistral-bright-data-example/
├── .vibe/
│   └── config.toml
└── ...

Cela représente le fichier de configuration locale de Mistral Vibe dans votre projet. Pour configurer la connexion Web MCP, assurez-vous que le fichier ./.vibe/config.toml contient ce qui suit :

[[mcp_servers]]
name = "bright-data"
transport = "stdio"
command = "npx"
args = ["@brightdata/mcp"]
env = { "API_TOKEN" = "<YOUR_BRIGHT_DATA_API_KEY>", "PRO_MODE" = "true" }

Cette configuration reproduit la commande npx testée précédemment, en utilisant des variables d’environnement pour les identifiants et la configuration :

• API_TOKEN : Obligatoire. Définissez-le sur votre clé API Bright Data.
• PRO_MODE : Optionnel. Supprimez-le (ou définissez-le sur "false") si vous ne prévoyez pas d’utiliser le mode Pro.

Si vous souhaitez configurer le Web MCP globalement pour tous les projets, ajoutez la même configuration à votre fichier ~/.vibe/config.toml.

Remarque : Avec une configuration similaire (transport = "http"), vous pouvez vous connecter au Bright Data Web MCP distant via Streamable HTTP. Cette approche est mieux adaptée aux scénarios de niveau entreprise.

Fantastique ! Le Web MCP devrait maintenant être disponible dans Mistral Vibe.

Étape n°3 : Vérifier la connexion

Lancez à nouveau Mistral Vibe :

vibe

Cette fois, vous devriez voir qu’un serveur MCP est connecté :

Comme il n’existe pas de commande directe pour vérifier les connexions MCP, posez une question comme :

Which MCP tools do you have access to?

En mode Rapid (niveau gratuit) (PRO_MODE omis ou défini sur false), vous verrez les cinq outils gratuits :

En mode Pro, vous aurez accès à plus de 60 outils :

Félicitations ! Cela confirme que le Bright Data Web MCP expose correctement les outils à Mistral Vibe. (Plus loin dans cet article de blog, nous présenterons le Web MCP en action avec les Bright Data skills.)

Ajouter les Bright Data Skills à Mistral Vibe

Ici, vous serez guidé pour ajouter les Bright Data skills à votre projet Vibe via l’expérience guidée fournie par l’outil skills de Vercel.

Remarque : Pour une approche manuelle, clonez le dépôt Bright Data Skills. Ensuite, copiez simplement le contenu du dossier skills/skills/ dans le répertoire .vibe/skills de votre projet :

git clone https://github.com/brightdata/skills
cp -r skills/skills/* <PATH_TO_YOUR_PROJECT>/.vibe/skills/

Voyons maintenant une procédure simplifiée et plus fiable !

Prérequis

Pour progresser dans cette section du tutoriel, assurez-vous d’avoir :

• Une compréhension du fonctionnement des standards Agent Skills.
• Une familiarité de base avec l’outil skills de Vercel, un CLI dédié à la gestion des skills dans les solutions d’agents de codage IA.
• Une certaine connaissance des Bright Data skills.

En plus des prérequis listés dans le chapitre “Étapes communes”, vous aurez également besoin de :

• Une zone Web Unlocker API configurée dans votre compte Bright Data.
• Le package jq installé localement.

Pour installer jq (un outil de traitement JSON, similaire à sed) sur les systèmes d’exploitation basés sur Debian, exécutez :

sudo apt-get install curl jq

De manière équivalente, sur macOS, exécutez :

brew install curl jq

Pour une configuration rapide de la zone Web Unlocker API, référez-vous au guide “Créez votre première Unlocker API“. Sinon, suivez le chapitre suivant.

Étape n°1 : Ajouter une zone Web Unlocker API dans votre compte Bright Data

Connectez-vous à votre compte Bright Data. Depuis le panneau de contrôle, naviguez vers la page “Proxies & Scraping” et vérifiez le tableau “My Zones” :

Si une zone Web Unlocker API (par exemple, web_unlocker) existe déjà, vous pouvez passer à l’étape suivante.

Si elle n’existe pas, créez-en une en faisant défiler jusqu’à la carte “Unblocker API” et en cliquant sur le bouton “Create zone” :

Choisissez un nom clair pour votre zone et terminez l’assistant de configuration jusqu’à ce que la zone devienne active. Parfait !

Étape n°2 : Terminer la configuration des Bright Data Skills

Les Bright Data Skills nécessitent les deux variables d’environnement suivantes pour fonctionner :

• BRIGHTDATA_API_KEY : Utilisée pour authentifier les requêtes aux API Bright Data.
• BRIGHTDATA_UNLOCKER_ZONE : Spécifie votre zone Web Unlocker API, permettant le scraping web (et les capacités de recherche, agissant comme une API SERP).

Définissez ces variables dans votre système avec :

export BRIGHTDATA_API_KEY="<YOUR_BRIGHT_DATA_API_KEY>"
export BRIGHTDATA_UNLOCKER_ZONE="<YOUR_BRIGHT_DATA_WEB_UNLOCKER_API_ZONE_NAME>"

Remplacez les espaces réservés par les valeurs que vous venez de configurer, et vous êtes prêt à continuer !

Étape n°3 : Installer les Bright Data Skills

Dans votre dossier de projet, exécutez la commande suivante :

npx skills add brightdata/skills -a mistral-vibe

Cette commande installe le package skills et lance le processus de configuration, qui va :

• Télécharger les Bright Data skills depuis le répertoire officiel Agent Skills.
• Les configurer pour une utilisation dans Mistral Vibe.

Initialement, vous verrez un écran où vous pouvez sélectionner les skills à installer :

Pour les installer tous, activez chacun en utilisant la barre d’espace, puis appuyez sur Entrée.

Ensuite, sélectionnez la portée d’installation et continuez :

Vous verrez ensuite les rapports “Installation Summary” et “Security Risk Assessment”. Examinez-les et appuyez sur Entrée pour confirmer. Enfin, vous obtiendrez un message de confirmation comme celui-ci :

Les Bright Data skills seront copiés dans le répertoire .vibe/skills :

mistral-bright-data-example/
├── .vibe/
│   ├── config.toml
│   └── skills/
│       ├── brd-browser-debug/
│       ├── bright-data-best-practices/
│       ├── bright-data-mcp/
│       ├── brightdata-cli/
│       ├── competitive-intel/
│       ├── data-feeds/
│       ├── design-mirror/
│       ├── python-sdk-best-practices/
│       ├── scrape/
│       ├── scraper-builder/
│       └── search/
└── ...

Excellent ! Les Bright Data skills sont maintenant installés et disponibles dans Mistral Vibe.

Étape n°4 : Vérifier la configuration

Exécutez à nouveau Mistral Vibe :

vibe

Vous devriez remarquer que l’agent de codage a maintenant accès à 11 skills :

Ceux-ci correspondent aux 11 Bright Data Skills. Confirmez-le en exécutant le prompt suivant :

Which skills do you have access to?

La réponse devrait ressembler à ceci :

Remarquez comment les skills listés correspondent aux noms de dossiers dans votre répertoire .vibe/skills.

Mission accomplie ! Dans le prochain chapitre, vous verrez comment tirer pleinement parti du Bright Data Web MCP et de la configuration des skills dans Vibe.

Mistral Vibe + Bright Data : L’expérience de codage agentique ultime

Maintenant que Bright Data est intégré dans Mistral Vibe via MCP et skills, explorez ce que cette configuration vous permet d’accomplir ! Nous utiliserons un exemple concret spécifique, bien que d’innombrables autres scénarios soient possibles.

Imaginez que vous souhaitez découvrir et analyser les meilleures bibliothèques de visualisation de données JavaScript pour votre prochain projet. Au lieu de rechercher manuellement en ligne et d’analyser chaque bibliothèque, vous pouvez demander à votre assistant de codage de s’en charger avec un prompt comme celui-ci :

On Google, search for the top 5 most popular open-source libraries for data visualization in JavaScript. For each library, gather its main information from the official NPM package page. Then, from the discovered GitHub page of each library, scrape the main information in Markdown. Save the collected data in a structured JSON file.
Then, create a Python notebook project with a virtual environment. The notebook should read the JSON data file, create relevant plots and tables in dedicated cells, and include explanatory comments for each visualization to help make informed decisions.

C’est intéressant car le résultat n’est pas simplement un rapport Markdown traditionnel. Il produit un notebook Jupyter interactif que vous pouvez exécuter et développer. Vous pourriez ensuite réutiliser ce modèle pour analyser d’autres bibliothèques, en laissant votre agent de codage récupérer les données sources requises via Bright Data.

Ce qui est clair, c’est qu’un modèle Mistral standard ou la plupart des LLM seuls ne pourraient pas accomplir cette tâche. La raison est que la tâche implique la recherche web et le scraping, à la fois via des flux de données structurés et la récupération de contenu Markdown générique.

Exécutez le prompt, et vous obtiendrez quelque chose comme :

Voici comment l’agent de codage Mistral Vibe a géré la tâche :

1. Recherche sur Google des 5 meilleures bibliothèques open source de visualisation de données en JavaScript à l’aide de l’outil search_engine de Bright Data.
2. Collecte d’informations structurées sur les packages NPM depuis les pages officielles à l’aide de l’outil Pro web_data_npm_package.
3. Scraping des informations des dépôts GitHub en Markdown à l’aide de l’outil scrape_as_markdown.
4. Sauvegarde des données collectées dans un fichier JSON structuré (data_visualization_libraries.json).
5. Création d’un environnement virtuel Python avec les packages nécessaires.
6. Développement d’un notebook Jupyter (data_visualization_analysis.ipynb) qui :
   • Lit le fichier JSON.
   • Crée des graphiques et tableaux pertinents dans des cellules dédiées.
   • Inclut des commentaires explicatifs pour chaque visualisation.
   • Fournit des recommandations basées sur les données.
7. Création d’un fichier README.md avec des instructions de configuration et la documentation du projet.
8. L’analyse comprend :
   • Tableau d’informations de base.
   • Comparaison des versions.
   • Analyse de popularité à l’aide des étoiles GitHub.
   • Engagement communautaire à l’aide des forks GitHub.
   • Distribution des licences.
   • Résumé et recommandations.

Le projet généré est prêt à l’emploi. Suivez simplement les instructions du fichier README.md pour activer l’environnement virtuel, lancer Jupyter Notebook et exécuter l’analyse.

Remarque : Mistral IA a sélectionné les outils Bright Data parfaits pour chaque tâche. Cette connaissance provient des skills configurés, qui aident l’agent de codage IA à prendre des décisions éclairées.

Tout d’abord, inspectez les données scrapées stockées dans data_visualization_libraries.json :

Remarquez comment celui-ci contient des données réelles, contextuelles et à jour scrapées depuis NPM et GitHub comme prévu.

Ensuite, ouvrez le Jupyter Notebook pour explorer toutes les visualisations et informations. Voyez à quel point l’analyse est détaillée, combinant graphiques et texte explicatif :

Et voilà ! Cela démontre clairement les avantages d’avoir les outils Bright Data intégrés dans Mistral Vibe.

Conclusion

Dans cet article de blog, vous avez appris ce qu’est Mistral Vibe et ce qu’il apporte. En particulier, vous avez vu pourquoi et comment l’étendre en le connectant à Bright Data via Web MCP et Agent Skills.

Cette intégration dote l’agent de codage IA Vibe de nouvelles capacités puissantes, rendant ses aptitudes de codage bien plus efficaces. Celles-ci incluent la recherche web, l’extraction de données structurées, la récupération de données web en direct et les interactions web automatisées.

Pour des flux de travail encore plus avancés, explorez la gamme complète de services prêts pour l’IA dans l’écosystème de Bright Data.

Inscrivez-vous gratuitement à Bright Data dès aujourd’hui et commencez à expérimenter avec nos outils de données web !