Dans les précédents épisodes de est , nous avons utilisé Firecrawl pour gratter le contenu de cette newsletter, un vecteur DB comme Pinecone pour stocker le marquage des articles, et l'API OpenAI pour récupérer des informations et joindre le contexte à notre demande pour obtenir de meilleures réponses. The Lab series Le web scraping club La série de laboratoire Le web scraping club This approach has limitations. The context window size (the amount of information we can include in the prompt) is limited, so the answers were not always great. Étant donné que le paysage de l'IA va changer dans quelques mois, il semble que l'utilisation de RAG et Pinecone est une vieille école. J'ai donc mené cette petite expérience pour voir comment MCP peut être utilisé pour le scraping web. Modèle de protocole contextuel (MCP) Modèle de protocole contextuel (MCP) Qu’est-ce qu’un protocole contextuel ? Le est une norme ouverte, initialement développée par Anthropic, qui permet aux grands modèles de langue (LLM) d'interagir avec des outils et des données externes à travers une interface normalisée. Au lieu de construire des intégrations personnalisées pour chaque source de données ou outil de scraping, les développeurs peuvent exposer leurs données ou leurs fonctionnalités via un serveur MCP. Les assistants d'IA (les clients MCP) peuvent demander ces ressources de manière cohérente, et cette connexion standardisée et bidirectionnelle enrichit le contenu brut avec des métadonnées, des contextes et des instructions afin que les modèles d'IA puissent interpréter les informations plus efficacement. Model Context Protocol (MCP) universal connector Mais comment ça fonctionne ? Mais comment ça fonctionne ? Le MCP suit une architecture client-serveur : l'application hôte (par exemple, un assistant IDE ou AI) exécute un MCP. (Claude, Cursor, etc.) qui se connecte via le protocole MCP à un ou plusieurs MCP . Each server interfaces with a specific data source or tool (e.g., a database, file system, or web scraper) on your local machine or network, providing structured context or actions to the LLM. client servers Un serveur MCP peut exposer (données contextuelles uniquement lisibles analogues aux endpoints GET) et (actions ou fonctions que le modèle peut invoquer analogiquement aux endpoints POST) au LLM. resources tools Anthropic open-source MCP au début de 2024 pour encourager l'adoption à l'échelle de l'industrie. Réduire la dépendance aux APIs propriétaires et rendre les intégrations d’IA plus modulaires et interopérables. common framework for AI-to-tool communication Ce traitement de contexte structuré s'améliore sur des prompts simples.Le modèle ne reçoit plus seulement un bloc de texte; au lieu de cela, il peut charger des données via des ressources et appeler des outils avec des entrées / sorties bien définies.En résumé, MCP fournit un moyen standardisé et sécurisé d'alimenter le contexte dans des modèles d'IA et de recevoir des actions / résultats, ce qui est particulièrement puissant dans des tâches complexes telles que le scraping web. Why Use MCP? Comme nous l’avons vu dans les messages précédents utilisant RAG, un défi était d’ajouter l’article téléchargé au prompt puisque la taille du contexte est limitée.Nous avons essayé différentes solutions, comme diviser les articles en morceaux sur Pinecone, puis enregistrer uniquement un résumé fait avec OpenAI pour en réduire la longueur. En utilisant MCP, en particulier dans ce cas, où nous l'utilisons à l'intérieur de l'IDE Cursor, nous pouvons créer un outil qui extrait le HTML et le sauvegarde dans un fichier qui peut être lu et tranché par Cursor et utilisé pour générer les XPaths. Un autre aspect intéressant de l'utilisation de MCP est que nous mélangons la programmation et l'ingénierie des prompts. En fait, la création d'un outil MCP est comme la création d'une fonction dans notre code: une fois que nous avons fabriqué le prompt dans l'IDE, cela est évalué et appelle nos outils avec l'argument nécessaire (comme l'URL à récupérer) deviné de notre prompt. L'outil lui-même, au lieu de cela, est une fonction programmée, de sorte qu'il n'y a pas la confusion d'un prompt, mais une entrée donnée, nous savons la sortie que nous pouvons attendre. Enfin, MCP est un standard, et en théorie, une fois que nous avons un serveur en marche, nous pourrions le connecter à n’importe quel modèle et outil qui le prend en charge. Ce que nous allons utiliser MCP Nous utiliserons deux technologies clés pour mettre en œuvre notre solution : la et . MCP Python SDK Camoufox Le MCP Python SDK est la bibliothèque officielle pour la construction de serveurs MCP (et clients) en Python. Il met en œuvre la spécification MCP complète, gérant tous les messages de protocole sous-jacents afin que vous puissiez vous concentrer sur la définition des ressources et des outils dont vous avez besoin. MCP Python SDK. Avec ce SDK, vous pouvez créer un serveur MCP en quelques lignes de code. classe de serveur qui gère les connexions et vous permet d'enregistrer des fonctions en tant qu'outils ou ressources via des décorateurs. de l’exposer au modèle en tant qu’outil actionnel. FastMCP @mcp.tool() Le SDK emballe le résultat de la fonction et l'envoie au client AI dans un format cohérent.En résumé, la mise en place d'un serveur MCP qui peut fournir du contexte aux LLM ou exécuter des tâches en leur nom est simple. Dans le scraping web, obtenir le HTML brut des pages cibles (en particulier celles avec des mesures anti-scraping ou JavaScript lourd) est la moitié de la bataille. J'ai décidé d'utiliser Camoufox, qui est un outil de navigation caché open source conçu pour de tels scénarios, pour être presque sûr de pouvoir obtenir le HTML de chaque page. Cela est particulièrement vrai parce que le MCP fonctionne localement sur ma machine, donc je n'ai pas besoin de proxy. En plus de ses capacités cachées, j'ai voulu utiliser Camoufox pour construire une logique MCP à partir de 0. ou Ils ont des outils prédéfinis tels que l’extraction de données et l’interaction avec la page, ce qui nous facilite la vie. Camoufox for HTML retrieval. the BrowserBase MCP server L’hyperbrowser 1 Utilisation du serveur BrowserBase MCP L’hyperbrowser 1 Implémentation technique d'un serveur MCP pour l'écriture d'un scraper Camoufox Maintenant, nous allons construire le serveur MCP qui nous aide à écrire un scraper Camoufox en trois étapes. will be a tool that opens Camoufox and stores the HTML of the target page on a file. fetch_page_content will be a tool that reads the HTML file and, given a template of output data, creates the selectors, again saving them to a file. That’s why we want it flexible enough to handle different page types (for example, a product listing page vs. a product detail page in e-commerce). generate_xpaths will be a tool that reads the selectors and a template of Camoufox spider ( ) and creates a new one based on that and the selectors just created. write_camoufox_scraper Camoufox_template.py Le code du serveur ( Il sera enregistré dans le répertoire sous le dossier 79.MCP/MCPFiles. xpath_server.py Étape 1 : Définir l’environnement Tout d’abord, assurez-vous d’avoir Nous aurons besoin du MCP SDK et de Camouf, que vous pouvez installer via pip. Python 3.10+ pip install mcp camoufox Le Le package comprend le MCP Python SDK et l’outil CLI. may require an additional step to fetch its browser binary (for example, running pour télécharger le stealth Firefox – consultez les documents Camoufox pour plus de détails).Une fois que ceux-ci sont installés, vous êtes prêt à écrire le code du serveur. mcp Camoufox python -m camoufox fetch Étape 2 : Initialiser le serveur MCP Créer un nouveau script Python (dans le dépôt, il sera Dans ce script, nous initialiserons un serveur MCP et définirons nos outils. xpath_server.py from mcp.server.fastmcp import FastMCP import asyncio from camoufox.async_api import AsyncCamoufox import time import os mcp = FastMCP("Scrapy XPath Generator") ..... coded tools .... if __name__ == "__main__": # Initialize and run the server mcp.run(transport='stdio') Cela suffit pour configurer un serveur MCP vide. Step 3: Implement HTML Retrieval via Camoufox Nous voulons un outil qui, donné une URL, récupère le contenu HTML de la page. Nous allons utiliser Camoufox pour le faire de manière cachée. appelé : tool fetch_page_content HTML_FILE_PATH = "/Users/pierluigivinciguerra/TWSC/Code/TheWebScrapingClub/79.MCP/downloaded_page.html" # File to store the downloaded HTML CAMOUFOX_FILE_PATH = "/Users/pierluigivinciguerra/TWSC/Code/TheWebScrapingClub/79.MCP/camoufox_template.py" @mcp.tool() async def fetch_page_content(url: str) -> str: global latest_html """Fetch page HTML using Camoufox stealth browser.""" print(f"[DEBUG] Fetching URL: {url}") try: async with AsyncCamoufox(humanize=True) as browser: page = await browser.new_page() await page.goto(url) time.sleep(10) latest_html = await page.content() with open(HTML_FILE_PATH, "w", encoding="utf-8") as f: f.write(latest_html) print("[DEBUG] HTML stored for later use") return "HTML fetched and stored successfully." except Exception as e: print(f"[ERROR] {e}") return f"Error fetching page: {str(e)}" À l’exception du décorateur, c’est un simple scraper Camoufox qui ouvre l’URL que nous passerons dans le prompt à l’intérieur de Cursor et stocke le code HTML dans un fichier. Étape 4: Générer des sélecteurs XPath basés sur le modèle Le deuxième outil dont nous avons besoin analyse le HTML et produit des sélecteurs XPath pour les données que nous voulons raser. qui prend un identifiant de modèle (pour indiquer quel type de page ou modèle d'extraction à utiliser) comme argument. generate_xpaths, En fonction du modèle, cette fonction produira les expressions XPath appropriées. Par exemple, nous pouvons avoir un modèle pour une page de liste de produits ( , une page avec plusieurs produits énumérés) et une autre pour une page de détail de produit ( , une page avec les détails d'un seul produit). PLP PDP @mcp.tool() def generate_xpaths(template: str) -> dict: """Write XPATH selectors for the requested fields using the downloaded HTML file.""" if not os.path.exists(HTML_FILE_PATH): return {"error": f"No HTML file found. Run fetch_page_content() first."} if template.lower() == "plp": fields = "product title, product link, product price, product image, product code" elif template.lower() == "pdp": fields = "product title, product price, product description, product image, product color, product size, product code" else: return {"error": "Unknown template type"} # Return the HTML and requested fields so Cursor can analyze them return { "message": "Print the XPath expressions for the requested fields using the variable latest_html.", "requested_fields": fields } Dans ce cas, nous définissons simplement la structure de sortie souhaitée et les champs pour lesquels nous voulons créer les sélecteurs. Étape 5 : Générer le nouveau scraper Camoufox Maintenant que nous avons les sélecteurs, nous voulons combiner un modèle Camoufox Scraper ( J'ai appris que l'utilisation d'un modèle Camoufox Scraper est nécessaire car, sans elle, le code généré est généralement une hallucination et ne fonctionne pas. Camoufox_template.py @mcp.tool() def write_camoufox_scraper(template: str, url: str) -> dict: print(f"[DEBUG] Writing scraper for template: {template} and URL: {url}") """Reads file Camoufox_template.py and uses it to write a new Camoufox scraper with the requested fields and starting from the url""" with open(CAMOUFOX_FILE_PATH, "r", encoding="utf-8") as f: latest_html = f.read() return{"message": "Using this template, write a working scraper with the requested fields and starting URL"} C’est tout ; maintenant, nous avons juste besoin de configurer Cursor pour exécuter ce serveur MCP et écrire une prompt qui utilise ses outils. Étape 6 : Utilisation du serveur MCP dans Cursor Une des grandes choses à propos de Cursor (un IDE alimenté par l’IA) est son support intégré pour les serveurs MCP en tant qu’extension des capacités de l’IA. Nous intégrerons notre serveur MCP nouvellement créé dans Cursor afin que l’assistant AI puisse l’utiliser pour automatiser les tâches de balayage Web (comme la génération de sélecteurs XPath pour nous). Pour connecter le serveur dans Cursor, suivez ces étapes : – In Cursor IDE, go to the settings menu. Open Cursor Settings – Under the Features section, find . (This requires Cursor v0.45.6+ or later, which supports custom MCP server integration.) Navigate to MCP Servers MCP Servers – Click the “+ Add New MCP Server” button. This will prompt you to enter details for the server. Add a New MCP Server – Give it a name like “Scrapy XPath Server” (any friendly name). For , select (since we will run a local command to start the server). For , enter the command to launch your server. For example, if your script is saved at /path/to/xpath_server.py, you might put it in the box. Configure the server Type "command" Command – After entering the details, save the configuration. You should see your MCP server listed in Cursor’s MCP Servers section. Cursor will now launch this server (via the given command) and maintain a connection to it. You might see a green light next to the MCP server’s name. Save and verify Une fois que le serveur est ajouté, Vous pouvez utiliser les nouveaux outils automatiquement, le cas échéant. Cursor’s AI assistant (the “Composer” agent) En pratique, lorsque vous demandez dans le compositeur : « Obtenez le HTML à partir de cette URL, puis écrivez les sélecteurs XPath en utilisant le PLP du modèle », l’assistant vous demandera de confirmer l’exécution du formulaire. L’outil, puis le une . fetch_page_content generate_xpath Nos tests Après quelques heures d’interactions avec le prompt pour comprendre comment obtenir les données nécessaires de manière fiable, j’ai constaté que celui-ci fait la plupart des tâches que j’ai demandées lorsqu’il est utilisé avec Cloud 3.7 Sonnet (confirmant que c’est l’un des meilleurs LLM pour la codage) ) : as Marco Vinciguerra from ScrapeGraphAI said in our latest interviews comme l'a dit Marco Vinciguerra de ScrapeGraphAI dans nos dernières interviews "Fetch l'URL @https://www.gucci.com/it/it/ca/women/shoes-for-women-c-women-shoesThen, écrivez les sélecteurs XPath en utilisant le modèle PLP. Utilisez le fichier HTML téléchargé (downloaded_page.html) pour écrire les sélecteurs XPATH en cours de travail.Écrivez les sélecteurs dans un fichier appelé selectors.txt.Tenez compte des sélecteurs précédemment créés, Écrivez un scraper Camoufox en utilisant le modèle PLP et l'URL initial. Si vous avez un doute, lisez le fichier selectors.txt pour comprendre combien de champs et quels sélecteurs vous devez utiliser. Utilisez le fichier Camoufox_templ Cursor ouvre un onglet Camoufox, navigue vers l'URL que j'ai passé, enregistre le HTML dans un fichier, le lit, puis génère des sélecteurs XPATH et les enregistre dans un autre fichier. j'ai choisi d'enregistrer les résultats de chaque étape à l'intérieur d'un fichier afin que les étapes suivantes puissent les lire et finalement les trancher automatiquement plutôt que de passer leur contenu dans la fenêtre contextuelle, qui pourrait être trop petite. Le scraper créé est exécutable la première fois, il est donc techniquement correct, et les résultats sont assez bons. Le scraper, sans rien dire sur le site, a correctement peuplé tous les champs, ce qui est excellent et plus que ce que j'attendais de ce test. I still have some concerns about the solution's reliability. I don’t get the same results every time I run the same prompt, which can be frustrating because you don’t know how to fix the process if you don’t know what to expect from it. La structure des données de sortie n'est pas celle que j'attendais, mais celle que l'assistant a trouvée sur le modèle de scraper Camoufox. Dans l'épisode suivant, nous continuerons notre voyage pour faire de Cursor notre assistant d'IA pour le scraping web. L'article fait partie de la série "The Lab" de Pierluigi Vinciguerra. Consultez sa page Substack pour plus de connaissances sur le web scraping. L'article fait partie de la série "The Lab" de Pierluigi Vinciguerra. Consultez sa page Substack pour plus de connaissances sur le web scraping. « Le laboratoire »
