Σε προηγούμενα επεισόδια της είναι , χρησιμοποιήσαμε το Firecrawl για να σκουπίσετε το περιεχόμενο αυτού του ενημερωτικού δελτίου, ένα vector DB όπως το Pinecone για να αποθηκεύσετε τη σήμανση των άρθρων και το OpenAI API για να ανακτήσετε πληροφορίες και να επισυνάψετε το πλαίσιο στην προειδοποίηση μας για να πάρετε καλύτερες απαντήσεις. Το εργαστήριο της σειράς Η ιστοσελίδα Scraping Club Το εργαστήριο της σειράς Η ιστοσελίδα Scraping Club Το μέγεθος του παραθύρου πλαισίου (η ποσότητα των πληροφοριών που μπορούμε να συμπεριλάβουμε στην προτροπή) είναι περιορισμένη, οπότε οι απαντήσεις δεν ήταν πάντα μεγάλες. Δεδομένου ότι το τοπίο της τεχνητής νοημοσύνης θα αλλάξει σε λίγους μήνες, φαίνεται ότι η χρήση του RAG και του Pinecone είναι παλιά σχολή. , έτσι έχω διεξαγάγει αυτό το μικρό πείραμα για να δούμε πώς το MCP μπορεί να χρησιμοποιηθεί για το web scraping. Model Context Protocol (MCP) Πρωτόκολλο μοντέλου περιβάλλοντος (MCP) Τι είναι ένα πρωτόκολλο πλαίσιο; Η είναι ένα ανοικτό πρότυπο, που αναπτύχθηκε αρχικά από την Anthropic, το οποίο επιτρέπει στα μεγάλα γλωσσικά μοντέλα (LLMs) να αλληλεπιδρούν με εξωτερικά εργαλεία και δεδομένα μέσω μιας τυποποιημένης διεπαφής. Αντί να δημιουργούν προσαρμοσμένες ενοποιήσεις για κάθε πηγή δεδομένων ή εργαλείο αποσυναρμολόγησης, οι προγραμματιστές μπορούν να εκθέτουν τα δεδομένα ή τη λειτουργικότητά τους μέσω ενός διακομιστή MCP. οι βοηθοί AI (οι πελάτες MCP) μπορούν να ζητούν συνεχώς αυτούς τους πόρους και αυτή η τυποποιημένη, αμφίδρομη σύνδεση εμπλουτίζει το ακατέργαστο περιεχόμενο με μεταδεδομένα, πλαίσιο και οδηγίες, ώστε τα μοντέλα AI να μπορούν να ερμηνεύουν τις πληροφορίες πιο αποτελεσματικά. Model Context Protocol (MCP) universal connector Αλλά πώς λειτουργεί; Αλλά πώς λειτουργεί; Το MCP ακολουθεί μια αρχιτεκτονική client-server: Η εφαρμογή host (π.χ. ένα IDE ή ένας βοηθός AI) εκτελεί ένα MCP. (Claude, Cursor, κ.λπ.) που συνδέεται μέσω του πρωτοκόλλου MCP σε ένα ή περισσότερα MCP Κάθε διακομιστής διασυνδέεται με μια συγκεκριμένη πηγή δεδομένων ή εργαλείο (π.χ. βάση δεδομένων, σύστημα αρχείων ή web scraper) στο τοπικό σας μηχάνημα ή δίκτυο, παρέχοντας δομημένο πλαίσιο ή ενέργειες στο LLM. client servers Ένας server MCP μπορεί να εκθέσει (δεδομένα περιβάλλοντος ανάγνωσης μόνο ανάλογα με τα τερματικά σημεία GET) και (δράσεις ή λειτουργίες που το μοντέλο μπορεί να επικαλεστεί ανάλογα με τα τερματικά σημεία POST) στο LLM. resources tools Ανθρωπογενής MCP ανοιχτού κώδικα στις αρχές του 2024 για να ενθαρρύνει την υιοθέτηση σε ολόκληρη τη βιομηχανία. , μειώνοντας την εξάρτηση από ιδιόκτητα API και καθιστώντας τις ολοκληρώσεις AI πιο αρθρωτές και διαλειτουργικές. common framework for AI-to-tool communication Αυτό το δομημένο χειρισμό του πλαισίου βελτιώνεται σε απλές ειδοποιήσεις.Το μοντέλο δεν λαμβάνει πλέον μόνο ένα μπλομπ κειμένου. αντ 'αυτού, μπορεί να φορτώσει δεδομένα μέσω πόρων και να καλέσει εργαλεία με καλά καθορισμένες εισροές / εξόδους.Συνοψίζοντας, το MCP παρέχει έναν τυποποιημένο, ασφαλή τρόπο τροφοδοσίας του πλαισίου σε μοντέλα AI και λήψης ενεργειών / αποτελεσμάτων, το οποίο είναι ιδιαίτερα ισχυρό σε πολύπλοκες εργασίες όπως το web scraping. Γιατί να χρησιμοποιήσετε το MCP; Όπως είδαμε σε προηγούμενες δημοσιεύσεις χρησιμοποιώντας το RAG, μια πρόκληση ήταν η προσθήκη του κατεβασμένου άρθρου στο prompt, καθώς το μέγεθος του πλαισίου είναι περιορισμένο. δοκιμάσαμε διαφορετικές λύσεις, όπως η διαίρεση των άρθρων σε κομμάτια στο Pinecone και στη συνέχεια η αποθήκευση μόνο μιας περίληψης που έγινε με το OpenAI για να μειωθεί το μήκος του. Χρησιμοποιώντας το MCP, ειδικά σε αυτή την περίπτωση, όπου το χρησιμοποιούμε μέσα στο Cursor IDE, μπορούμε να δημιουργήσουμε ένα εργαλείο που εξάγει την HTML και το αποθηκεύει σε ένα αρχείο που μπορεί να διαβαστεί και να τσακιστεί από το Cursor και να χρησιμοποιηθεί για να δημιουργήσει τα XPaths. Μια άλλη ενδιαφέρουσα πτυχή της χρήσης του MCP είναι ότι αναμιγνύουμε τον προγραμματισμό και την μηχανική παραπομπών. Στην πραγματικότητα, η δημιουργία ενός εργαλείου MCP είναι σαν να δημιουργούμε μια λειτουργία στον κώδικα μας: μόλις επεξεργαστούμε την παραπομπή στο IDE, αυτό αξιολογείται και καλεί τα εργαλεία μας με το απαραίτητο επιχείρημα (όπως η διεύθυνση URL για να πάρει) που μαντεύεται από την παραπομπή μας. Το ίδιο το εργαλείο, αντίθετα, είναι μια προγραμματισμένη λειτουργία, οπότε δεν υπάρχει η αμβλύτητα μιας παραπομπής, αλλά δεδομένη μια είσοδος, γνωρίζουμε την έξοδο που μπορούμε να περιμένουμε. Αυτό είναι μεγάλο επειδή μειώνει την αβεβαιότητα ολόκληρης της διαδικασίας και, ταυτόχρο Τελευταίο αλλά όχι λιγότερο σημαντικό, το MCP είναι ένα πρότυπο και θεωρητικά, μόλις έχουμε έναν διακομιστή σε λειτουργία, μπορούμε να το συνδέσουμε σε οποιοδήποτε μοντέλο και εργαλείο που το υποστηρίζει. Τι θα χρησιμοποιήσουμε το MCP Θα χρησιμοποιήσουμε δύο βασικές τεχνολογίες για την εφαρμογή της λύσης μας: την και . MCP Python SDK Camoufox Το MCP Python SDK είναι η επίσημη βιβλιοθήκη για την κατασκευή διακομιστών MCP (και πελατών) στην Python. Εφαρμόζει την πλήρη προδιαγραφή MCP, χειρίζοντας όλα τα υποκείμενα μηνύματα πρωτοκόλλου, ώστε να μπορείτε να επικεντρωθείτε στον καθορισμό των πόρων και των εργαλείων που χρειάζεστε. MCP Python SDK. Με αυτό το SDK, μπορείτε να δημιουργήσετε έναν διακομιστή MCP σε λίγες μόνο γραμμές κώδικα. κλάση διακομιστή που διαχειρίζεται τις συνδέσεις και σας επιτρέπει να καταχωρείτε λειτουργίες ως εργαλεία ή πόρους μέσω διακομιστών. να το εκθέσουμε στο μοντέλο ως ενεργό εργαλείο. FastMCP @mcp.tool() Το SDK συσκευάζει το αποτέλεσμα της λειτουργίας και το στέλνει πίσω στον πελάτη AI σε συνεπή μορφή.Συνοψίζοντας, η δημιουργία ενός διακομιστή MCP που μπορεί να τροφοδοτήσει το πλαίσιο σε LLMs ή να εκτελέσει εργασίες για λογαριασμό τους είναι απλή. Στην απόξεση ιστού, η απόκτηση της πρώτης HTML από τις σελίδες στόχου (ειδικά εκείνες με μέτρα κατά της απόξεσης ή βαριά JavaScript) είναι η μισή μάχη. Αποφάσισα να χρησιμοποιήσω το Camoufox, το οποίο είναι ένα εργαλείο περιήγησης κρυφής πλοήγησης ανοιχτού κώδικα σχεδιασμένο για τέτοια σενάρια, για να είμαι σχεδόν σίγουρος ότι θα μπορώ να πάρω την HTML από κάθε σελίδα. Αυτό ισχύει ιδιαίτερα επειδή το MCP τρέχει τοπικά στη μηχανή μου, οπότε δεν χρειάζομαι κανένα proxy. Πάνω από τις δυνατότητες κρυφής πλοήγησης, ήθελα να χρησιμοποιήσω το Camoufox για να δημιουργήσω μια λογική MCP από 0. ή Έχουν μερικά προκατασκευασμένα εργαλεία όπως η εξαγωγή δεδομένων και η αλληλεπίδραση με τη σελίδα, καθιστώντας τη ζωή ευκολότερη για εμάς. Camoufox for HTML retrieval. Διακομιστής BrowserBase MCP Το Hyperbrowser 1 Διακομιστής BrowserBase MCP Το Hyperbrowser 1 Τεχνική υλοποίηση ενός διακομιστή MCP για τη σύνταξη ενός scraper Camoufox Τώρα, θα χτίσουμε τον διακομιστή MCP που μας βοηθά να γράψουμε ένα Camoufox scraper σε τρία βήματα. 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 Ο κώδικας του υπολογιστή ( ) θα αποθηκευτεί στο αποθετήριο στο φάκελο 79.MCP/MCPFiles. xpath_server.py Βήμα 1: Δημιουργήστε το περιβάλλον Πρώτα βεβαιωθείτε ότι έχετε Θα χρειαστούμε το MCP SDK και το Camouf, τα οποία μπορείτε να εγκαταστήσετε μέσω pip. Python 3.10+ pip install mcp camoufox Η Το πακέτο περιλαμβάνει το MCP Python SDK και το εργαλείο CLI. μπορεί να απαιτήσει ένα πρόσθετο βήμα για να πάρει το δυαδικό του προγράμματος περιήγησης (για παράδειγμα, εκτέλεση για να κατεβάσετε το κρυφό Firefox – ανατρέξτε στο Camoufox docs για λεπτομέρειες).Μόλις εγκατασταθούν, είστε έτοιμοι να γράψετε τον κώδικα του διακομιστή. mcp Camoufox python -m camoufox fetch Βήμα 2: Εισαγωγή στο MCP Server Δημιουργήστε ένα νέο σενάριο Python (στο αποθετήριο, θα είναι Σε αυτό το σενάριο, θα ξεκινήσουμε έναν διακομιστή MCP και θα ορίσουμε τα εργαλεία μας. 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') Αυτό είναι αρκετό για να δημιουργήσετε έναν κενό διακομιστή MCP. Βήμα 3: Εφαρμογή HTML Retrieval μέσω του Camoufox Θέλουμε ένα εργαλείο που, δεδομένης μιας διεύθυνσης URL, παίρνει το περιεχόμενο HTML της σελίδας. θα χρησιμοποιήσουμε το Camoufox για να το κάνουμε αυτό με κρυφό τρόπο. Καλέστε : 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)}" Εκτός από τον διακοσμητή, είναι ένα απλό Camoufox scraper που ανοίγει τη διεύθυνση URL που θα περάσουμε στο κουμπί μέσα στο Cursor και αποθηκεύει τον κώδικα HTML σε ένα αρχείο. Βήμα 4: Δημιουργία επιλογών XPath με βάση το πρότυπο Το δεύτερο εργαλείο που χρειαζόμαστε αναλύει την HTML και παράγει επιλογείς XPath για τα δεδομένα που θέλουμε να σκουπίσουμε. που λαμβάνει ένα αναγνωριστικό προτύπου (για να υποδείξει ποιο είδος σελίδας ή μοτίβο εξαγωγής θα χρησιμοποιηθεί) ως επιχείρημα. generate_xpaths, Με βάση το πρότυπο, αυτή η συνάρτηση θα παράγει τις κατάλληλες εκφράσεις XPath. Για παράδειγμα, μπορεί να έχουμε ένα πρότυπο για μια σελίδα καταχώρισης προϊόντων ( , μια σελίδα με πολλαπλά προϊόντα που αναφέρονται) και μια άλλη για μια σελίδα λεπτομερειών προϊόντων ( , μια σελίδα με λεπτομέρειες ενός προϊόντος). 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 } Σε αυτή την περίπτωση, απλά καθορίζουμε την επιθυμητή δομή εξόδου και τα πεδία για τα οποία θέλουμε να δημιουργήσουμε τους επιλογείς. Βήμα 5: Δημιουργήστε το νέο Camoufox scraper Τώρα που έχουμε τους επιλογείς, θέλουμε να συνδυάσουμε ένα πρότυπο Camoufox Scraper ( Έμαθα ότι η χρήση ενός προτύπου Camoufox Scraper είναι απαραίτητη επειδή, χωρίς αυτό, ο κώδικας που παράγεται είναι συνήθως μια ψευδαίσθηση και δεν λειτουργεί. 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"} Αυτό είναι, τώρα απλά πρέπει να ρυθμίσετε το Cursor για να εκτελέσετε αυτόν τον διακομιστή MCP και να γράψετε μια ειδοποίηση που χρησιμοποιεί τα εργαλεία του. Βήμα 6: Χρήση του διακομιστή MCP στο Cursor Ένα από τα μεγάλα πράγματα για το Cursor (ένα IDE που βασίζεται στην τεχνητή νοημοσύνη) είναι η ενσωματωμένη υποστήριξη για τους διακομιστές MCP ως επέκταση των δυνατοτήτων της τεχνητής νοημοσύνης. θα ενσωματώσουμε τον νεοσυσταθέντα διακομιστή MCP στο Cursor έτσι ώστε ο βοηθός τεχνητής νοημοσύνης να μπορεί να το χρησιμοποιήσει για να αυτοματοποιήσει εργασίες απόξεσης ιστού (όπως η δημιουργία επιλογών XPath για εμάς). Για να συνδέσετε τον διακομιστή στο Cursor, ακολουθήστε αυτά τα βήματα: – 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 Μετά την προσθήκη του server, Μπορείτε να χρησιμοποιήσετε τα νέα εργαλεία αυτόματα όταν είναι σκόπιμο. Cursor’s AI assistant (the “Composer” agent) Στην πράξη, όταν ρωτάτε στον συνθέτη, "Πάρτε το HTML από αυτή τη διεύθυνση URL και στη συνέχεια γράψτε τους επιλέκτες XPath χρησιμοποιώντας το πρότυπο PLP", ο βοηθός θα σας ζητήσει επιβεβαίωση για να εκτελέσετε το Το εργαλείο και μετά το μία fetch_page_content generate_xpath Οι δοκιμές μας Μετά από μερικές ώρες αλληλεπίδρασης με την ειδοποίηση για να καταλάβω πώς να πάρω τα δεδομένα που χρειάζομαι με αξιόπιστο τρόπο, έχω διαπιστώσει ότι αυτό το κάνει τα περισσότερα από τα καθήκοντα που ζήτησα όταν χρησιμοποιείται με το Cloud 3.7 Sonnet (επιβεβαιώνοντας ότι είναι ένα από τα καλύτερα LLMs για την κωδικοποίηση ) : όπως δήλωσε ο Marco Vinciguerra από το ScrapeGraphAI στις τελευταίες μας συνεντεύξεις όπως δήλωσε ο Marco Vinciguerra από το ScrapeGraphAI στις τελευταίες μας συνεντεύξεις «Καταγράψτε τη διεύθυνση URL @https://www.gucci.com/it/it/ca/women/shoes-for-women-c-women-shoesΤότε, γράψτε τους επιλογείς XPath χρησιμοποιώντας το πρότυπο PLP. Χρησιμοποιήστε το κατεβασμένο αρχείο HTML (downloaded_page.html) για να γράψετε τους επιλογείς XPATH που εργάζονται.Γράψτε τους επιλογείς σε ένα αρχείο που ονομάζεται selectors.txt.Τότε, δεδομένων των επιλογών που δημιουργήθηκαν προηγουμένως, Γράψτε ένα Camoufox scraper χρησιμοποιώντας το πρότυπο PLP και την αρχική διεύθυνση URL. Εάν έχετε αμφιβολίες, διαβάστε το αρχείο selectors.txt για να κατανοήσετε πό Το Cursor ανοίγει μια καρτέλα Camoufox, περιηγείται στην διεύθυνση URL που πέρασα, αποθηκεύει το HTML σε ένα αρχείο, το διαβάζει και στη συνέχεια δημιουργεί επιλογείς XPATH και τα αποθηκεύει σε άλλο αρχείο. επέλεξα να αποθηκεύσω τα αποτελέσματα κάθε βήματος μέσα σε ένα αρχείο έτσι ώστε τα επόμενα βήματα να μπορούν να τα διαβάσουν και τελικά να τα τσακίσουν αυτόματα αντί να περάσουν το περιεχόμενό τους στο παράθυρο πλαισίου, το οποίο θα μπορούσε να είναι πολύ μικρό. Ο γραφίτης που δημιουργήθηκε είναι εκτελέσιμος την πρώτη φορά, οπότε είναι τεχνικά σωστός και τα αποτελέσματα είναι αρκετά καλά. Ο γρατζουνιστής, χωρίς να λέει τίποτα για την ιστοσελίδα, πληθυσμού σωστά όλα τα πεδία, το οποίο είναι εξαιρετικό και περισσότερο από ό, τι περίμενα από αυτή τη δοκιμή. Δεν παίρνω τα ίδια αποτελέσματα κάθε φορά που εκτελώ την ίδια προειδοποίηση, η οποία μπορεί να είναι απογοητευτική επειδή δεν ξέρετε πώς να διορθώσετε τη διαδικασία αν δεν ξέρετε τι να περιμένετε από αυτήν. Η δομή των δεδομένων εξόδου δεν είναι αυτή που περίμενα, αλλά αυτή που ο βοηθός βρήκε στο πρότυπο του Camoufox scraper. Στο επόμενο επεισόδιο, θα συνεχίσουμε το ταξίδι μας για να κάνουμε το Cursor τον βοηθό μας για το web-scraping AI. Το άρθρο είναι μέρος της σειράς "The Lab" από τον Pierluigi Vinciguerra. Ελέγξτε τη σελίδα του Substack για περισσότερες πληροφορίες σχετικά με το Web Scraping. Το άρθρο είναι μέρος της σειράς "The Lab" από τον Pierluigi Vinciguerra. Ελέγξτε τη σελίδα του Substack για περισσότερες πληροφορίες σχετικά με το Web Scraping. «Το Εργαστήριο»
