Serveur MCP Puppeteer Vision

Que fait le serveur MCP “Puppeteer Vision” ?

Le serveur MCP Puppeteer Vision permet aux assistants IA d’extraire et de convertir des pages web au format Markdown en utilisant Puppeteer, Readability et Turndown. Il propose une interaction avancée pilotée par l’IA pour gérer automatiquement les éléments web comme les bannières cookies, CAPTCHAs, paywalls, etc., garantissant une extraction robuste du contenu même sur des sites interactifs ou protégés. Le serveur expose cette capacité via le Model Context Protocol (MCP), ce qui facilite son intégration dans les workflows de développement IA. Cela permet d’automatiser des tâches telles que l’extraction web, la synthèse de contenu et l’ingestion de données directement par les LLMs. Le serveur est facilement déployable via npx, requiert une configuration minimale, et prend en charge la communication stdio comme SSE pour une intégration flexible.

Liste des prompts

Aucun modèle de prompt n’est mentionné dans le dépôt ou la documentation.

Liste des ressources

Aucune ressource MCP spécifique n’est référencée ou décrite dans le dépôt ou la documentation.

Liste des outils

• scrape-webpage : Extrait une page web à une URL spécifiée, utilise l’IA pour interagir avec et contourner les éléments interactifs (bannières cookies, CAPTCHAs…), extrait le contenu principal via Readability, puis convertit le résultat en Markdown. Les paramètres incluent :
  • url (string, requis) : La page web à extraire.
  • autoInteract (booléen, optionnel, par défaut : true) : Gérer automatiquement les éléments interactifs.
  • maxInteractionAttempts (nombre, optionnel, par défaut : 3) : Nombre maximal de tentatives d’interaction IA.
  • waitForNetworkIdle (booléen, optionnel, par défaut : true) : Attendre l’inactivité réseau avant l’extraction.

Cas d’usage de ce serveur MCP

• Extraction web automatisée pour l’ingestion de connaissances
  Les développeurs peuvent extraire du Markdown lisible et bien formaté à partir de n’importe quelle page web, facilitant l’intégration de contenu à jour dans des workflows IA, bases de données ou bases de connaissances.
• Contournement des barrières interactives
  L’interaction pilotée par l’IA peut automatiquement passer les CAPTCHAs, bannières cookies et autres obstacles interactifs, permettant d’extraire le contenu même depuis des sites qui bloqueraient l’automatisation.
• Résumé et analyse de contenu
  Le Markdown extrait peut être injecté dans des LLMs pour des tâches de résumé, d’analyse de sentiment ou de classification, rationalisant la recherche et le traitement des données.
• Automatisation du navigateur en temps réel
  Les développeurs peuvent exécuter l’outil en mode visible (non-headless) pour le debug, les démonstrations ou lorsque la confirmation visuelle de l’activité du navigateur est nécessaire.
• Intégration dans les pipelines d’orchestration LLM
  En tant que serveur MCP, il peut s’utiliser comme composant dans des orchestrateurs comme Windsurf, Claude, Cursor et Cline, élargissant la capacité des agents IA à interagir avec le web en direct.

Comment le configurer

Windsurf

1. Prérequis : Installez Node.js et npm.

2. Préparation de l’environnement : Créez un fichier .env ou exportez les variables d’environnement requises, dont OPENAI_API_KEY.

3. Modifier la configuration : Trouvez le fichier de configuration de Windsurf.

4. Ajouter Puppeteer Vision MCP : Insérez ce bloc JSON :

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

5. Sauvegarder/Redémarrer : Sauvegardez le fichier et redémarrez Windsurf.

6. Vérifier : Consultez les logs ou l’interface pour confirmer que le serveur MCP fonctionne.

Sécurisation des clés API :
Stockez les secrets dans des variables d’environnement (ex : .env) :

"env": {
  "OPENAI_API_KEY": "${OPENAI_API_KEY}"
}

Claude

1. Prérequis : Vérifiez que Node.js et npm sont installés.

2. Définir l’environnement : Préparez un fichier .env ou exportez OPENAI_API_KEY et autres variables.

3. Modifier la configuration : Ouvrez la configuration MCP de Claude.

4. Ajouter le serveur MCP :

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

5. Redémarrer Claude : Appliquez les changements et redémarrez la plateforme.

6. Vérifier : Confirmez le démarrage réussi.

Cursor

1. Prérequis : Installez Node.js et npm.

2. Environnement : Configurez .env avec la clé API OpenAI.

3. Modifier la config Cursor : Ajoutez le serveur MCP comme ci-dessous :

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

4. Sauvegarder & Redémarrer : Sauvegardez et redémarrez Cursor.

5. Vérifier les logs : Vérifiez le bon fonctionnement du serveur.

Cline

1. Prérequis : Installez Node.js et npm.

2. Environnement : Définissez ou exportez OPENAI_API_KEY.

3. Configuration : Ajoutez à la configuration MCP de Cline :

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

4. Redémarrer Cline : Appliquez et redémarrez.

5. Confirmer : Vérifiez l’accessibilité du serveur.

Remarque : Sécurisez les clés API via des variables d’environnement et ne placez jamais de secrets en dur dans les fichiers de configuration.

Comment utiliser ce MCP dans vos flux

Utiliser MCP dans FlowHunt

Pour intégrer des serveurs MCP dans votre workflow FlowHunt, commencez par ajouter le composant MCP à votre flux et reliez-le à votre agent IA :

Cliquez sur le composant MCP pour ouvrir le panneau de configuration. Dans la section configuration système MCP, insérez les détails de votre serveur MCP avec ce format JSON :

{
  "puppeteer-vision": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Une fois configuré, l’agent IA peut utiliser ce MCP comme outil avec accès à toutes ses fonctions et capacités. Pensez à adapter le nom “puppeteer-vision” à celui de votre serveur MCP et l’URL à celle de votre serveur MCP.

Vue d’ensemble

| Support des Roots | ⛔ | Aucun mention des Roots. |

D’après les éléments ci-dessus, le serveur MCP Puppeteer Vision offre un outil d’extraction web robuste et ciblé, avec une documentation et des recommandations de sécurité solides, mais il manque d’outils multiples, de modèles de prompts, de ressources et de fonctionnalités MCP avancées comme roots ou sampling. Son approche un-outil/un-usage lui confère une fiabilité forte pour son cas d’usage, mais limite son extensibilité.

Notre avis

Score MCP : 5/10
Ce serveur MCP est bien documenté, utile pour son objectif précis et simple à installer, mais son absence de modèles de prompts, de ressources explicites et de fonctions MCP avancées (roots, sampling) limite sa polyvalence et son intégration à l’écosystème.

Score MCP