AI

Donnez à Pi Agent les outils pour explorer et interagir avec le Web via Bright Data MCP

Découvrez comment Bright Data Web MCP permet à Pi Agent d’explorer et d’interagir avec le web, débloquant des capacités avancées pour vos workflows CLI.
16 min de lecture
Give Pi Agent the Tools to Explore and Interact with the Web via Bright Data MCP

Dans cet article de blog, vous apprendrez :

  • Ce qu’est Pi et ce qu’il apporte en tant que solution d’agent CLI.
  • Pourquoi l’étendre avec des outils d’accès web le rend nettement plus puissant.
  • Comment activer ces fonctionnalités dans Pi Agent grâce à l’intégration Bright Data MCP.

Allons-y !

Qu’est-ce que Pi ?

Pi

Pi, également connu sous le nom de Pi Agent ou Pi Coding Agent, est un agent CLI extensible. Son objectif est de vous aider à exécuter des workflows de codage pilotés par IA directement dans le terminal.

Contrairement à d’autres agents CLI qui vous enferment dans des fonctionnalités fixes comme les modes de planification ou les sous-agents, Pi reste léger dans son cœur. Il vous permet plutôt de tout étendre via des extensions TypeScript, des compétences, des modèles de prompts et des plugins.

Ce qui rend Pi spécial, c’est sa flexibilité : vous pouvez façonner son comportement, ses outils et même son interface. Il prend en charge plusieurs fournisseurs de LLM, des arbres de sessions et des primitives de personnalisation qui en font davantage un runtime d’agent programmable qu’un assistant CLI fixe.

Croissance des étoiles de Pi sur GitHub

Cette approche minimaliste des agents CLI a été largement appréciée par la communauté, le projet atteignant plus de 63 000 étoiles GitHub. Il a également dépassé 1,7 million de téléchargements hebdomadaires sur npm.

Principales fonctionnalités

Les capacités clés fournies par Pi Agent sont :

  • Modèle d’extensibilité complet : Modifiez presque chaque couche (par ex., outils, gestion de l’historique, compactage, interface et injection de contexte) pour créer des comportements d’agent entièrement personnalisés.
  • Prise en charge multi-fournisseurs de LLM : Fonctionne avec OpenAI, Anthropic, Google, Azure, Bedrock et bien d’autres, avec une commutation facile entre les modèles en cours de session.
  • Agent CLI interactif : Un agent de codage entièrement basé sur le terminal avec utilisation d’outils en temps réel, conscience du contexte et contrôle conversationnel.
  • Gestion des arbres de sessions : Stocke les conversations sous forme de branches, vous permettant de revenir en arrière, de bifurquer et d’explorer des chemins d’exécution alternatifs.
  • Système de compétences : Chargez dynamiquement des compétences d’agent pour étendre l’agent sans surcharger la fenêtre de contexte.
  • Modèles de prompts et commandes personnalisées : Définissez des prompts réutilisables pouvant être déclenchés via des commandes slash pour des workflows plus rapides.
  • Modes Print, RPC et SDK : Utilisez Pi dans des scripts, des services backend ou des applications embarquées via une sortie structurée ou des API programmatiques.

Pourquoi Pi Coding Agent a besoin d’un accès web fiable

Quel que soit le LLM configuré dans Pi, l’agent de codage sous-jacent fait face à une limitation courante des modèles de langage : des connaissances obsolètes. Un LLM ne peut générer des réponses qu’à partir des données statiques sur lesquelles il a été entraîné, qui constituent essentiellement un instantané du passé.

Étant donné la rapidité d’évolution du paysage technologique, cette limitation devient critique. Les modèles peuvent suggérer des patterns de codage obsolètes, s’appuyer sur des méthodes dépréciées ou manquer entièrement les nouvelles fonctionnalités publiées.

Cela crée un goulot d’étranglement clair pour les tâches de codage et d’automatisation dans votre configuration Pi Agent. Et même lorsque vous ajoutez des outils de recherche web basiques, ceux-ci sont souvent peu fiables à grande échelle et peuvent être bloqués par les protections anti-bot utilisées sur de nombreux sites web.

Imaginez maintenant Pi Coding Agent capable de récupérer de manière fiable des tutoriels, documentations et guides à jour, et d’en apprendre en temps réel. Il pourrait également prendre des captures d’écran de pages web pour les analyser visuellement, interagir avec des sites et exécuter des workflows bien plus complexes directement depuis le CLI.

C’est exactement ce que rend possible le serveur Bright Data MCP de Bright Data !

Bright Data MCP comme solution

Bright Data MCP expose plus de 70 outils. En coulisses, ces outils interagissent avec les produits basés sur l’API de Bright Data.

Bright Data MCP est disponible en [deux modes](https://github.com/brightdata/brightdata-mcp?tab=readme-ov-file#-pricing, modes) :

  • Mode Rapid : Un niveau gratuit avec jusqu’à 5 000 requêtes par mois et un ensemble limité d’outils pour la recherche web, le Scraping web et la découverte.
  • Mode Pro : Un niveau payant qui débloque tous les 70+ outils, notamment l’extraction de données structurées depuis des plateformes comme Amazon, LinkedIn, Yahoo Finance, YouTube, Zillow, Google Maps et plus de 40 autres, ainsi que des capacités complètes d’automatisation du navigateur.

Les outils Bright Data MCP les plus pertinents sont :

Outil Description Produit Bright Data sous-jacent
search_engine Effectue des recherches web (Google, Bing, Yandex) et retourne les SERP analysées API SERP
scrape_as_markdown Extrait une page web complète et la convertit en Markdown propre API Unlocker
scraping_browser_navigate Ouvre une session de navigateur réel et navigue vers une URL API Navigateur
scraping_browser_snapshot Capture un snapshot ARIA de la structure de la page et des éléments interactifs API Navigateur
scraping_browser_click_ref Clique sur des éléments en utilisant des références d’un snapshot API Navigateur
scraping_browser_screenshot Prend une capture d’écran de la page actuelle (optionnellement en pleine page) API Navigateur

Ce qui rend Bright Data unique, c’est son réseau mondial de plus de 400 millions d’IPs résidentielles dans 195 pays. Cette infrastructure est le fondement de tous ses produits, conçue pour offrir une fiabilité de niveau entreprise avec un support de la concurrence illimitée, une évolutivité massive et une disponibilité garantie par SLA de 99,99 %.

Comment configurer Bright Data MCP dans Pi Agent

Dans cette section tutoriel étape par étape, vous serez guidé à travers la configuration de l’intégration Bright Data MCP dans Pi Agent. Ainsi, l’agent de codage sous-jacent gagnera accès aux capacités de découverte web, de Scraping web et d’automatisation du navigateur.

Suivez les instructions ci-dessous !

Prérequis

Pour suivre cette section, assurez-vous d’avoir :

Bien que non strictement requis, il est également utile de se familiariser avec le fonctionnement de MCP et avec les outils Bright Data MCP.

Étape #1 : Installer Pi

Installez Pi via npm en exécutant la commande suivante :

npm install -g, ignore-scripts @earendil-works/pi-coding-agent

Cela installe le package @earendil-works/pi-coding-agent globalement, ce qui enregistre la commande pi sur votre système.

Si vous préférez une méthode d’installation différente, comme PowerShell, l’installateur cURL, pnpm, Yarn ou Bun, référez-vous à la documentation officielle.

Une fois l’installation terminée, lancez Pi Coding Agent avec :

pi

La première fois que vous exécutez la commande, vous devriez voir quelque chose comme ceci :

Le message retourné indique qu’aucun fournisseur d’IA n’est actuellement configuré dans Pi. Dans l’étape suivante, vous apprendrez comment en connecter et en configurer un !

Étape #2 : Configurer un LLM

Configurez un LLM dans Pi Coding Agent en exécutant :

/login

Pi vous invitera à sélectionner une méthode d’authentification pour votre fournisseur de LLM préféré. Dans ce cas, sélectionnez « Use an API key » :

Sélection de la méthode « Use an API key »

Ensuite, choisissez votre fournisseur d’IA. Dans ce guide, nous utiliserons OpenAI :

Choix de l'option « OpenAI »

Collez votre clé API OpenAI lorsque vous y êtes invité :

Collage de votre clé API OpenAI

Si tout se passe comme prévu, Pi s’authentifiera auprès d’OpenAI et stockera de manière sécurisée votre clé API dans sa configuration. Ensuite, il sélectionnera automatiquement un modèle par défaut pour vous (gpt-5.4 dans cet exemple).

Vous devriez alors voir un message de confirmation similaire au suivant :

Notez le message d'authentification réussie

Pour changer de modèle ultérieurement, exécutez :

/model

Puis sélectionnez le modèle que vous souhaitez utiliser parmi les options disponibles :

Sélection d'un autre modèle

Très bien ! Pi est maintenant installé et configuré sur votre machine.

Étape #3 : Ajouter l’extension Pi MCP Adapter

Par défaut, Pi est livré avec une configuration minimale et n’inclut pas la prise en charge MCP d’emblée. Pour activer l’intégration MCP, installez l’extension pi-mcp-adapter avec cette commande :

pi install npm:pi-mcp-adapter

Une fois l’extension installée, redémarrez Pi. L’extension pi-mcp-adapter attend un fichier de configuration MCP situé dans :

  • .mcp.json dans votre répertoire de projet, ou
  • ~/.config/mcp/mcp.json (%USERPROFILE%/.config/mcp/mcp.json sur Windows).

Ce fichier contient la configuration de vos serveurs MCP. Vous pouvez créer le fichier de configuration manuellement, ou laisser Pi le générer pour vous en exécutant :

/mcp setup

Puis, sélectionnez l’option « Scaffold project .mcp.json » :

Sélection de l'option "Scaffold project .mcp.json"

Pi créera un fichier .mcp.json dans votre répertoire de projet. Ouvrez-le, et vous verrez :

{
  "mcpServers": {}
}

Parfait ! Pi Coding Agent peut maintenant agir en tant que client MCP et exposer les outils MCP à l’agent IA sous-jacent.

Étape #4 : Démarrer avec Bright Data MCP de Bright Data

Avant de connecter Bright Data MCP de Bright Data à Pi Agent, vérifiez que le serveur MCP fonctionne correctement sur votre machine. Pour plus de détails, référez-vous à la documentation Bright Data MCP.

Commencez par installer Bright Data MCP globalement avec :

npm install -g @brightdata/mcp

Sur Linux, macOS ou WSL, démarrez le serveur Bright Data MCP avec :

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

Alternativement, dans PowerShell :

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

Remplacez <YOUR_BRIGHT_DATA_API> par votre clé API Bright Data. Cette commande définit la variable d’environnement API_TOKEN requise et lance le serveur Bright Data MCP localement via le package @brightdata/mcp.

Si tout est correctement configuré, vous devriez voir une sortie similaire à la suivante :

Messages de démarrage du Bright Data MCP de Bright Data

Lors du premier démarrage, le package @brightdata/mcp crée automatiquement deux APIs dans votre compte Bright Data :

Ensemble, ces APIs alimentent les 70+ outils disponibles via Bright Data MCP. Si nécessaire, vous pouvez également définir des noms d’API personnalisés, comme décrit dans le dépôt officiel.

Pour confirmer que les APIs ont été créées, accédez à la page « Web Access > Web Access API » dans le panneau de contrôle Bright Data. Vous devriez trouver les deux APIs répertoriées dans le tableau « My APIs » :

Notez les APIs « mcp_unlocker » et « mcp_browser » créées par Bright Data MCP au démarrage

Gardez à l’esprit que le niveau gratuit de Bright Data MCP (mode Rapid) ne donne accès qu’à un sous-ensemble d’outils.

Pour débloquer l’ensemble complet des 70+ 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

Ou, sur Windows :

$Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; $Env: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](https://github.com/brightdata/brightdata-mcp?tab=readme-ov-file#-pricing, modes).

Excellent ! Vous avez confirmé que Bright Data MCP fonctionne sur votre machine. Dans l’étape suivante, vous le connecterez à Pi Agent.

Étape #5 : Configurer Bright Data MCP dans Pi Agent

Pour configurer l’intégration Bright Data MCP dans Pi, ajoutez la configuration suivante à votre fichier .mcp.json (ou ~/.config/mcp/mcp.json) :

{
  "mcpServers": {
    "bright-data-web-mcp": {
      "command": "npx",
      "args": ["-y", "@brightdata/mcp"],
      "env": {
        "API_TOKEN": "<YOUR_BRIGHT_DATA_API_KEY>",
        "PRO_MODE": "true"
      }
    }
  }
}

Au démarrage, l’extension pi-mcp-adapter lira le fichier. Ensuite, elle démarrera le serveur Bright Data MCP local en exécutant la commande npx -y @brightdata/mcp tout en définissant ces variables d’environnement :

  • API_TOKEN (requis) : Votre clé API Bright Data.
  • PRO_MODE (optionnel) : Définissez-le sur true pour activer les fonctionnalités Pro. Définissez-le sur false ou supprimez-le entièrement pour exécuter Bright Data MCP en mode Rapid (gratuit).

Désormais, Pi se connectera à une instance locale de Bright Data MCP. Parfait !

Étape #6 : Vérifier l’intégration Bright Data MCP

Vérifiez que les outils exposés par Bright Data MCP sont disponibles en redémarrant Pi et en exécutant :

/mcp tools

Si vous avez configuré Bright Data MCP en mode Pro, vous devriez voir la liste complète des outils disponibles :

Notez tous les outils Bright Data MCP Pro

Notez que la liste inclut tous les 70+ outils. Si vous utilisez le mode Rapid, seuls les outils inclus dans le niveau gratuit apparaîtront. Cela confirme que Pi peut se connecter avec succès à votre instance Bright Data MCP locale et accéder aux outils qu’elle expose.

Excellent ! Votre intégration Pi Agent + Bright Data MCP est maintenant entièrement configurée. Il ne reste plus qu’à la voir en action.

Étape #7 : Tester l’agent IA amélioré

Supposons que vous souhaitiez créer un site web e-commerce et avez besoin d’inspiration pour son design. Une bonne approche consiste à commencer par une maquette basée sur une boutique en ligne performante.

Par exemple, vous pouvez demander à votre agent IA de visiter une page de catégorie de produits Nike, de capturer une capture d’écran, puis de générer une maquette HTML/CSS statique inspirée de la mise en page et des patterns de design de la page.

Pour ce faire, rédigez le prompt suivant :

Search online for the Nike men's shoes & sneakers page. Open the page and take a full viewport screenshot from a US IP. Then, create a mock e-commerce webpage using plain HTML and CSS that replicates the same visual style, layout structure, and overall design patterns shown in the screenshot. Do not copy brand assets or proprietary text,only reproduce general layout, spacing, and styling.

C’est un excellent test des capacités web ajoutées via Bright Data MCP, car il implique la recherche web et l’automatisation du navigateur. Ces capacités sont fournies par Bright Data MCP (en mode Pro).

Remarque : Le prompt demande explicitement une adresse IP américaine pour éviter les bannières de cookies RGPD de l’UE, qui peuvent limiter la vue dans la capture d’écran et rendre plus difficile pour l’agent IA d’analyser correctement la structure de la page.

Ouvrez Pi et exécutez le prompt. L’exécution devrait ressembler à ceci :

Exécution du prompt

Voici ce que Pi Coding Agent a fait en coulisses :

  1. Utilisé l’outil Bright Data MCP search_engine pour localiser la page Nike « Men’s Shoes & Sneakers » via une requête de recherche Google basée aux États-Unis. En coulisses, cette requête est alimentée par l’API SERP de Bright Data.
  2. Ouvert la page en utilisant l’outil Bright Data MCP scraping_browser_navigate avec une géolocalisation américaine. Cette capacité est fournie par l’API Navigateur de Bright Data.
  3. Vérifié que la page s’est chargée avec succès et confirmé le titre et l’URL de la page.
  4. Capturé une capture d’écran de la page en utilisant l’outil Bright Data MCP scraping_browser_screenshot.
  5. Analysé la capture d’écran pour comprendre la mise en page, la structure et les patterns de design du site.
  6. Planifié une maquette e-commerce neutre en termes de marque inspirée de la page originale, tout en évitant l’utilisation de branding propriétaire et d’assets.
  7. Conçu une structure de page responsive avec une barre utilitaire, un menu de navigation, une bannière promotionnelle, une barre latérale de filtres et une grille de produits.
  8. Généré un fichier src/index.html autonome en HTML et CSS simples.

Ce workflow met en évidence la puissance des agents activés par Bright Data MCP. Un LLM autonome ne peut pas effectuer ces tâches car il n’a pas accès direct aux moteurs de recherche et aux navigateurs web cloud. De plus, des sites comme Nike.com utilisent des systèmes anti-bot sophistiqués qui bloquent le trafic automatisé.

Un autre avantage majeur de Bright Data MCP est qu’il est construit sur l’infrastructure Proxy de Bright Data. Cela permet à l’agent de router les requêtes via des pays spécifiques et même des localisations au niveau des villes. En conséquence, l’agent peut accéder et analyser les versions régionales des sites web avec une bien plus grande fiabilité.

Fantastique ! Examinons maintenant la sortie générée.

Étape #8 : Analyser les résultats

Une fois que l’agent a terminé la tâche, la structure de votre projet devrait ressembler à ceci :

├── .mcp.json
└── src/
    └── index.html

Ouvrez le fichier src/index.html généré dans votre navigateur, et vous verrez un résultat similaire au suivant :

Le fichier « src/index.html » produit par Pi Agent

Comparez-le à la page Nike « Men’s Shoes & Sneakers » originale utilisée comme inspiration :

La page Nike « Men's Shoes & Sneakers » originale

Remarquez comment la page générée correspond étroitement à la mise en page originale, l’espacement, la structure de navigation, la grille de produits et la hiérarchie visuelle globale, tout en évitant l’utilisation du branding Nike, du contenu propriétaire et des assets protégés par droits d’auteur.

Et voilà ! Cet exemple simple démontre à quel point Pi Agent devient plus capable lorsqu’il est connecté à Bright Data MCP.

En combinant la recherche web, le Scraping web et l’automatisation du navigateur avec la génération de code alimentée par l’IA, l’agent peut accomplir des workflows complexes qui seraient impossibles pour un LLM standard.

C’est maintenant votre tour d’expérimenter. Essayez différents prompts et explorez les nombreux cas d’usage rendus possibles par les 70+ outils disponibles via Bright Data MCP !

Conclusion

Dans cet article de blog, vous avez appris ce qu’est Pi et les capacités qu’il offre. En détail, vous avez vu comment l’étendre en l’intégrant avec le Bright Data MCP de Bright Data.

Cette intégration donne à Pi Agent les outils nécessaires pour gérer des scénarios de recherche web, de découverte, de Scraping web et d’automatisation du navigateur. Ces capacités l’aident à gérer des workflows d’automatisation et de codage plus complexes. Explorez la gamme complète des services web pour l’IA dans l’écosystème de Bright Data.

Créez un compte Bright Data dès aujourd’hui et commencez à explorer nos outils web prêts pour l’IA !