Comment Utiliser le Serveur MCP pour Contrôler le Navigateur Chrome (avec Browserbase MCP Server)

Avez-vous déjà souhaité que votre IA puisse naviguer sur le web comme vous ? Eh bien, accrochez-vous car aujourd'hui, nous plongeons dans le monde du Serveur Browserbase MCP—un outil révolutionnaire qui permet aux modèles d'IA comme Claude, GPT et Gemini de contrôler les navigateurs web. Imaginez votre IA naviguant sur des sites web, cliquant sur des boutons, remplissant des formulaires et même prenant des captures d'écran, tout cela de manière autonome. Cela semble futuriste ? C'est en train de se produire, et c'est plus facile que vous ne le pensez à configurer, surtout avec le Serveur Browserbase MCP.

Dans ce guide, je vais vous expliquer ce qu'est le Serveur Browserbase MCP, pourquoi il est indispensable pour les flux de travail basés sur l'IA, et comment le mettre en marche pour contrôler un navigateur Chrome. Que vous soyez développeur, data scientist ou simplement curieux de l'IA, ce tutoriel étape par étape vous fera vous sentir comme un pro. Commençons !

💡

Vous voulez un excellent outil de test d'API qui génère une belle documentation d'API ?

Vous voulez une plateforme intégrée tout-en-un pour que votre équipe de développeurs travaille ensemble avec une productivité maximale ?

Apidog répond à toutes vos exigences et remplace Postman à un prix beaucoup plus abordable !

bouton

Qu'est-ce que le Serveur Browserbase MCP ?

Le Serveur Browserbase MCP est un outil open-source qui utilise le protocole de contexte de modèle (MCP) pour connecter les grands modèles de langage (LLM) aux navigateurs web. Considérez-le comme un pont qui permet à l'IA d'interagir avec les sites web en temps réel. Avec ce serveur, votre IA peut :

Naviguer vers n'importe quelle URL
Cliquer sur des boutons et remplir des formulaires
Extraire des données des pages web
Prendre des captures d'écran
Exécuter du JavaScript sur des sites web
Gérer plusieurs sessions de navigateur simultanément

C'est comme donner à votre IA sa propre paire de mains pour naviguer sur le web. Et le meilleur dans tout ça ? Il fonctionne avec des modèles d'IA populaires comme GPT d'OpenAI, Claude d'Anthropic et Gemini de Google.

Pourquoi utiliser le Serveur Browserbase MCP ?

Avant de nous lancer dans le mode d'emploi, parlons des raisons pour lesquelles le Serveur Browserbase MCP change la donne :

Automatisation basée sur le cloud : Exécutez des tâches de navigateur dans le cloud, sans les tracas de configuration locale.
Prise en charge multi-modèle : Fonctionne avec divers modèles d'IA, vous pouvez donc choisir votre préféré.
Sessions parallèles : Gérez plusieurs tâches de navigateur simultanément pour plus d'efficacité.
Capacités de vision : Prenez des captures d'écran et analysez visuellement les pages web.
Intégration facile : Se connecte de manière transparente avec des clients IA comme Claude Desktop ou Cursor.

Que vous construisiez une application basée sur l'IA, automatisiez des flux de travail ou expérimentiez simplement, le Serveur Browserbase MCP vous fait gagner du temps et ouvre de nouvelles possibilités.

Comment installer et configurer le Serveur Browserbase MCP

Il existe trois façons de commencer : utiliser un serveur distant hébergé, l'exécuter avec npm ou l'exécuter localement. Je couvrirai les trois afin que vous puissiez choisir ce qui vous convient le mieux.

Prérequis

Avant de vous lancer dans l'utilisation du Serveur Browserbase MCP pour contrôler un navigateur Chrome avec l'IA, assurez-vous d'avoir ce qui suit :

Un client IA compatible MCP : Installez un client comme Claude Desktop ou Cursor qui prend en charge le protocole de contexte de modèle (MCP).
Une clé API Browserbase : Obtenez-la auprès de Browserbase pour connecter votre IA à l'automatisation du navigateur.

Pour une installation locale (facultatif)

Si vous prévoyez d'exécuter le serveur localement, vous aurez également besoin de :

Git : Pour cloner le dépôt depuis GitHub.
pnpm : Installez ce gestionnaire de paquets depuis pnpm.io pour gérer les dépendances.
Node.js : Téléchargez-le depuis nodejs.org pour exécuter le serveur.
Une clé API de modèle IA : Obtenez-en une pour le modèle choisi, par exemple Gemini.

Option 1 : Utilisation du serveur distant hébergé de BrowserBase MCP (le plus simple)

Si vous voulez éviter les tracas de configuration, l'option hébergée est votre amie. Voici comment :

Visitez Smithery : Rendez-vous sur smithery.ai pour obtenir vos clés API et une URL MCP distante.

Configurez votre client IA : Ajoutez l'URL fournie aux paramètres MCP de votre client IA. Par exemple, dans Claude Desktop, vous ajouteriez ceci à votre claude_desktop_config.json :

{
  "mcpServers": {
    "browserbase": {
      "url": "https://your-smithery-url.com"
    }
  }
}

Ou, si vous utilisez l'interface de ligne de commande mcp-remote :

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["mcp-remote", "https://your-smithery-url.com"]
    }
  }
}

Redémarrez votre client : Fermez et rouvrez votre client IA pour appliquer les modifications.

C'est tout ! Votre IA peut maintenant contrôler un navigateur Chrome via le Serveur Browserbase MCP.

Option 2 : Exécuter le Serveur BrowserBase MCP sur NPM (Recommandé)

C'est l'approche recommandée en raison de sa compatibilité avec la plupart des clients MCP. Rendez-vous dans votre fichier JSON de configuration MCP et collez la configuration du serveur Browserbase :

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["@browserbasehq/mcp"],
      "env": {
        "BROWSERBASE_API_KEY": "",
        "BROWSERBASE_PROJECT_ID": "",
        "GEMINI_API_KEY": ""
      }
    }
  }
}

Option 3 : Installer et exécuter le Serveur BrowserBase MCP localement (pour un contrôle total)

Vous voulez bricoler sous le capot ? L'exécution du serveur localement vous offre plus de flexibilité. Voici comment :

Cloner le dépôt :

Ouvrez votre terminal et exécutez :

git clone https://github.com/browserbase/mcp-server-browserbase.git
cd mcp-server-browserbase

Installer les dépendances :

Assurez-vous d'avoir pnpm installé. Puis exécutez :

pnpm install && pnpm build

Démarrer le serveur :

Vous pouvez exécuter le serveur en utilisant le transport STDIO ou HTTP.
Pour STDIO (processus local) :
Ajoutez ceci à la configuration de votre client MCP :

{
  "mcpServers": {
    "browserbase": {
      "command": "node",
      "args": ["path/to/mcp-server-browserbase/cli.js"],
      "env": {
        "BROWSERBASE_API_KEY": "your_api_key",
        "BROWSERBASE_PROJECT_ID": "your_project_id",
        "GEMINI_API_KEY": "your_gemini_key"
      }
    }
  }
}

Pour le transport HTTP :
Démarrez le serveur avec :

node cli.js --port 3000

Configurez votre client pour qu'il se connecte à http://localhost:3000.

Ajouter les clés API : Remplacez les espaces réservés dans la configuration par vos véritables clés API Browserbase et de modèle.

Redémarrez votre client : Comme précédemment, redémarrez votre client IA pour activer le serveur.

Personnalisation du serveur

Le Serveur Browserbase MCP propose des drapeaux pour ajuster son comportement. En voici quelques-uns pratiques :

--proxies : Active les proxys Browserbase pour une meilleure confidentialité.
--advancedStealth : Utilise le mode furtif pour éviter la détection (Plan Scale requis).
--browserWidth et --browserHeight : Définit la taille de la fenêtre du navigateur.
--modelName : Choisit un modèle d'IA différent pour Stagehand.

Vous pouvez ajouter ces drapeaux au tableau args dans votre configuration MCP. Par exemple :

"args": ["path/to/cli.js", "--proxies", "--browserWidth=1920"]

Comment utiliser le Serveur Browserbase MCP pour contrôler Chrome

Maintenant que votre serveur est configuré, mettons-le au travail ! Voici comment utiliser le Serveur Browserbase MCP pour contrôler un navigateur Chrome.

Étape 1 : Connectez votre client IA

Assurez-vous que votre client IA (comme Claude Desktop ou Cursor) est connecté au Serveur Browserbase MCP en utilisant l'une des trois méthodes ci-dessus.

Étape 2 : Donnez des commandes

Dans votre client IA, vous pouvez maintenant émettre des commandes en langage naturel pour contrôler le navigateur. Voici quelques exemples :

Naviguer vers une URL :

https://example.com

Cliquer sur un bouton :

"Cliquez sur le bouton 'S'inscrire'"

Remplir un formulaire :

user@example.com

Prendre une capture d'écran :

"Prenez une capture d'écran de la page d'accueil"

Extraire des données :

"Extrayez tous les titres de produits de cette page"

L'IA traduira ces invites en actions de navigateur à l'aide du Serveur Browserbase MCP.

Étape 3 : Afficher les résultats

Selon la commande, l'IA renverra des résultats tels que :

Confirmation des actions (par exemple, "Navigué vers https://example.com")
Données extraites (par exemple, une liste de titres de produits)
Captures d'écran (enregistrées ou affichées, selon votre configuration)

Par exemple, si vous demandez une capture d'écran, l'IA pourrait répondre :

"Capture d'écran effectuée et enregistrée sous le nom 'homepage.png'"

Tester le Serveur Browserbase MCP

Testons-le avec un exemple concret. Supposons que vous vouliez automatiser une recherche sur un site web.

Ouvrez votre client IA : Pour cet exemple, utilisons Claude Desktop.
Émettez une commande :

https://google.com

3. Observez le navigateur : Si vous exécutez localement avec le transport HTTP, vous pourriez voir le navigateur s'ouvrir et effectuer les actions.

4. Vérifiez la réponse : Claude devrait confirmer les actions et peut-être extraire le titre ou le contenu de la page.

Ce test simple montre comment le Serveur Browserbase MCP permet à l'IA de contrôler Chrome pour effectuer des tâches web.

Conseils de dépannage

Le serveur ne démarre pas ? Assurez-vous d'avoir les bonnes clés API et que pnpm build s'est terminé avec succès.
Le client ne se connecte pas ? Vérifiez à nouveau la configuration MCP et redémarrez votre client IA.
Les actions ne fonctionnent pas ? Vérifiez la structure du site web ; certains sites peuvent nécessiter un mode furtif avancé ou des proxys.
Problèmes de modèle ? Assurez-vous que votre clé API de modèle est valide et que le modèle prend en charge les capacités requises.

Conclusion

Et voilà ! Vous avez appris à utiliser le Serveur Browserbase MCP pour contrôler un navigateur Chrome avec l'IA. Que vous ayez choisi l'option hébergée pour la simplicité, npm ou la configuration locale pour le contrôle, vous êtes maintenant équipé pour automatiser les tâches web comme un pro. Le Serveur Browserbase MCP est un outil puissant qui réunit l'IA et l'automatisation web, ouvrant des possibilités infinies d'innovation.

Prêt à explorer davantage ? Essayez d'automatiser vos tâches web quotidiennes ou de l'intégrer à votre prochain projet d'IA.

💡

bouton