Negli ultimi episodi di è , abbiamo usato Firecrawl per raschiare il contenuto di questa newsletter, un DB vettore come Pinecone per memorizzare il marchio degli articoli e l'API OpenAI per recuperare informazioni e allegare il contesto alla nostra richiesta per ottenere risposte migliori. La serie di laboratorio Il web scraping club La serie di laboratorio Il web scraping club La dimensione della finestra di contesto (la quantità di informazioni che possiamo includere nel prompt) è limitata, quindi le risposte non sono sempre state grandi. Dal momento che il paesaggio AI cambierà tra pochi mesi, sembra che l'uso di RAG e Pinecone sia una vecchia scuola. Così ho condotto questo piccolo esperimento per vedere come MCP può essere utilizzato per il web scraping. Modello di protocollo di contesto (MCP) Modello di protocollo di contesto (MCP) Che cos'è un protocollo di contesto? Il è uno standard aperto, sviluppato inizialmente da Anthropic, che consente ai grandi modelli linguistici (LLM) di interagire con strumenti esterni e dati attraverso un'interfaccia standardizzata. Invece di costruire integrazioni personalizzate per ogni fonte di dati o strumento di scraping, gli sviluppatori possono esporre i loro dati o funzionalità tramite un server MCP. Gli assistenti AI (i client MCP) possono richiedere costantemente queste risorse, e questa connessione standardizzata e bidirezionale arricchisce il contenuto crudo con metadati, contesti e istruzioni in modo che i modelli AI possano interpretare le informazioni in modo più efficace. Model Context Protocol (MCP) universal connector Ma come funziona? Ma come funziona? Il MCP segue un'architettura client-server: l'applicazione host (ad esempio, un IDE o un assistente AI) esegue un MCP. (Claude, Cursor, ecc.) che si connette tramite il protocollo MCP a uno o più MCP Ogni server interfaccia con una specifica fonte di dati o strumento (ad esempio, un database, un sistema di file o un web scraper) sulla tua macchina o rete locale, fornendo un contesto o azioni strutturate al LLM. client servers Un server MCP può esponere (dati di contesto solo per la lettura analoghi agli endpoint GET) e (azioni o funzioni il modello può invocare analogamente a POST endpoints) al LLM. resources tools Antropico open-source MCP all'inizio del 2024 per incoraggiare l'adozione in tutto il settore. Ridurre la dipendenza dalle API proprietarie e rendere le integrazioni AI più modulari e interoperabili. common framework for AI-to-tool communication Il modello non riceve più solo un blocco di testo; invece, può caricare dati tramite risorse e chiamare strumenti con entrate/uscite ben definite. In sintesi, MCP fornisce un modo standardizzato e sicuro per alimentare il contesto nei modelli AI e ricevere azioni/resultati, che è particolarmente potente in compiti complessi come il web scraping. Perché usare il MCP? Come abbiamo visto in precedenti post utilizzando RAG, una sfida era quella di aggiungere l'articolo scaricato al prompt poiché la dimensione del contesto è limitata. Abbiamo provato diverse soluzioni, come la divisione degli articoli in pezzi su Pinecone e poi salvare solo un riassunto fatto con OpenAI per ridurne la lunghezza. Utilizzando MCP, specialmente in questo caso, dove lo stiamo usando all'interno di Cursor IDE, possiamo creare uno strumento che estrae l'HTML e lo salva in un file che può essere letto e tagliato da Cursor e usato per generare i XPaths. Un altro aspetto interessante dell'utilizzo di MCP è che mescoliamo la programmazione e l'ingegneria dei prompt. In realtà, creare uno strumento MCP è come creare una funzione nel nostro codice: una volta che abbiamo elaborato il prompt nell'IDE, questo viene valutato e chiama i nostri strumenti con l'argomento necessario (come l'URL da raccogliere) indovinato dal nostro prompt. Lo strumento stesso, invece, è una funzione programmata, quindi non c'è la confusione di un prompt, ma dato un input, sappiamo la uscita che possiamo aspettarci. Questo è grande perché riduce l'incertezza dell'intero processo e, allo stesso tempo, apre una miriade di casi di utilizzo per arricchire il contesto della tua chat con il LLM. Ultimo ma non meno importante, MCP è uno standard, e teoricamente, una volta che abbiamo un server in esecuzione, possiamo collegarlo a qualsiasi modello e strumento che lo supporta. Quello che stiamo per utilizzare MCP Utilizzeremo due tecnologie chiave per implementare la nostra soluzione: la e . MCP Python SDK Camoufox Il MCP Python SDK è la libreria ufficiale per la costruzione di server MCP (e client) in Python. Implementa la specifica MCP completa, gestendo tutti i messaggi sottostanti del protocollo in modo da poter concentrarsi sulla definizione delle risorse e degli strumenti di cui hai bisogno. MCP Python SDK. Con questo SDK, è possibile creare un server MCP in poche righe di codice. classe di server che gestisce le connessioni e consente di registrare funzioni come strumenti o risorse tramite decoratori. per esporlo al modello come strumento azionabile. FastMCP @mcp.tool() Il SDK imballerà il risultato della funzione e lo invierà indietro al client AI in un formato coerente.In sintesi, la configurazione di un server MCP che possa fornire contesto ai LLM o eseguire attività per loro conto è semplice. Nel web scraping, ottenere l'HTML crudo dalle pagine di destinazione (specialmente quelle con misure anti-scraping o JavaScript pesante) è la metà della battaglia. Ho deciso di utilizzare Camoufox, che è uno strumento di navigazione stealth open source progettato per tali scenari, per essere quasi sicuro di poter ottenere l'HTML da ogni pagina. Questo è particolarmente vero perché il MCP funziona localmente sulla mia macchina, quindi non avrò bisogno di alcun proxy. Oltre alle sue capacità di stealth, volevo utilizzare Camoufox per costruire una logica MCP da 0. o Hanno alcuni strumenti prefabbricati come estrarre i dati e interagire con la pagina, rendendo la vita più facile per noi. Camoufox for HTML retrieval. Il server MCP di BrowserBase Iperbrowser 1 Il server MCP di BrowserBase Iperbrowser 1 Implementazione tecnica di un server MCP per la scrittura di un raschiatore Camoufox Ora, costruiremo il server MCP che ci aiuta a scrivere un raschiatore Camoufox in tre passaggi. 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 Il codice del server ( ) sarà salvato nel repository sotto la cartella 79.MCP/MCPFiles. xpath_server.py Passo 1: Impostare l’ambiente Prima di tutto, assicurati di avere Avremo bisogno del MCP SDK e Camouf, che è possibile installare tramite pip. Python 3.10+ pip install mcp camoufox Il Il pacchetto include lo strumento MCP Python SDK e CLI. può richiedere un ulteriore passo per recuperare il suo browser binario (ad esempio, eseguire per scaricare il stealth Firefox – si prega di consultare i documenti Camoufox per i dettagli). Una volta installati, sei pronto a scrivere il codice del server. mcp Camoufox python -m camoufox fetch Passo 2: inizializzare il server MCP Creare un nuovo script Python (nel repository, sarà In questo script, inizializzeremo un server MCP e definiremo i nostri strumenti. 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') Questo è sufficiente per impostare un server MCP vuoto. Passo 3: Implementazione di HTML Retrieval tramite Camoufox Vogliamo uno strumento che, dato un URL, raccoglie il contenuto HTML della pagina. Utilizzeremo Camoufox per farlo in modo nascosto. chiamato : 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)}" Ad eccezione del decoratore, è un semplice raschiatore Camoufox che apre l'URL che passeremo nel prompt all'interno di Cursor e memorizza il codice HTML in un file. Passo 4: Generare selettori XPath in base al template Il secondo strumento di cui abbiamo bisogno analizza l'HTML e produce selettori XPath per i dati che vogliamo raschiare. che prende un identificatore di modello (per indicare quale tipo di pagina o modello di estrazione usare) come argomento. generate_xpaths, In base al modello, questa funzione produrrà le espressioni XPath appropriate. Ad esempio, potremmo avere un modello per una pagina di elenco dei prodotti ( , una pagina con più prodotti elencati) e un'altra per una pagina dettagliata del prodotto ( , una pagina con i dettagli di un singolo prodotto). 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 } In questo caso, stiamo semplicemente definendo la struttura di uscita desiderata e i campi per i quali vogliamo creare i selettori. Passo 5: Generare il nuovo raschiatore Camoufox Ora che abbiamo i selettori, vogliamo combinare un modello Camoufox Scraper ( Ho imparato che l'uso di un modello Camoufox Scraper è necessario perché, senza di esso, il codice generato è di solito un'allucinazione e non funziona. 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"} Questo è tutto; ora abbiamo solo bisogno di configurare Cursor per eseguire questo server MCP e scrivere un prompt che utilizza i suoi strumenti. Passo 6: Utilizzo del server MCP in Cursor Una delle grandi cose di Cursor (un IDE alimentato da AI) è il suo supporto integrato per i server MCP come estensioni delle capacità dell'IA. Integreremo il nostro server MCP appena creato in Cursor in modo che l'assistente AI possa usarlo per automatizzare le attività di scraping web (come generare selettori XPath per noi). Per collegare il server in Cursor, seguire questi passaggi: – 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 Una volta aggiunto il server, Può utilizzare i nuovi strumenti automaticamente quando necessario. Cursor’s AI assistant (the “Composer” agent) In pratica, quando si chiede nel compositore, "Prendi l'HTML da questo URL e poi scrivi i selettori XPath utilizzando il modello PLP", l'assistente ti chiederà la conferma per eseguire il Lo strumento e poi il di uno. fetch_page_content generate_xpath I nostri test Dopo poche ore di interazioni con il prompt per capire come ottenere i dati necessari in modo affidabile, ho scoperto che questo fa la maggior parte dei compiti che ho chiesto quando utilizzato con Cloud 3.7 Sonnet (confirmando che è uno dei migliori LLM per la codifica ) di : Come ha detto Marco Vinciguerra di ScrapeGraphAI nelle nostre ultime interviste Come ha detto Marco Vinciguerra di ScrapeGraphAI nelle nostre ultime interviste “Fetch l’URL @https://www.gucci.com/it/it/ca/women/shoes-for-women-c-women-shoesThen, scrivere i selettori XPath utilizzando il modello PLP. Utilizzare il file HTML scaricato (downloaded_page.html) per scrivere selettori XPATH funzionanti.Scrivi i selettori in un file chiamato selectors.txt.Then, dato i selettori creati in precedenza, Scrivi un scraper Camoufox utilizzando il modello PLP e l’URL iniziale. Se hai dubbi, leggi il file selectors.txt per capire quanti campi e quali selettori hai da usare. Usa il file Camoufox_template.py per costruire il scraper e personalizzare con esso Il cursore apre una scheda Camoufox, naviga all'URL che ho passato, salva l'HTML in un file, lo legge, e poi genera selettori XPATH e li salva in un altro file. ho scelto di salvare i risultati di ogni passo all'interno di un file in modo che i passaggi seguenti potessero leggerli e infine schiacciarli automaticamente piuttosto che passare il loro contenuto nella finestra di contesto, che potrebbe essere troppo piccola. Il raschiatore creato è eseguibile la prima volta, quindi è tecnicamente corretto e i risultati sono abbastanza buoni. Il raschiatore, senza dire nulla sul sito web, ha popolato correttamente tutti i campi, che è eccellente e più di quanto mi aspettavo da questo test. Non otto gli stessi risultati ogni volta che esegui la stessa prompt, il che può essere frustrante perché non sai come risolvere il processo se non sai cosa aspettarti da esso. La struttura dei dati di uscita non è quella che mi aspettavo, ma quella che l'assistente ha trovato sul template del raschiatore Camoufox. Nel prossimo episodio, continueremo il nostro viaggio per rendere Cursor il nostro assistente AI per il web-scraping. L'articolo fa parte della serie "The Lab" di Pierluigi Vinciguerra. Consulta la sua pagina Substack per ulteriori conoscenze sul Web Scraping. L'articolo fa parte della serie "The Lab" di Pierluigi Vinciguerra. Consulta la sua pagina Substack per ulteriori conoscenze sul Web Scraping. “Il laboratorio”
