V predchádzajúcich epizódach je , sme použili Firecrawl na škrabanie obsahu tohto bulletinu, vektorovú databázu ako Pinecone na ukladanie označení článkov a OpenAI API na vyhľadávanie informácií a pripojenie kontextu k našej výzve na získanie lepších odpovedí. Laboratórna séria Stránky odkazujúce na „Web Scraping Club“ Laboratórna séria Stránky odkazujúce na „Web Scraping Club“ Veľkosť kontextového okna (množstvo informácií, ktoré môžeme zahrnúť do výzvy) je obmedzené, takže odpovede neboli vždy skvelé. Keďže krajina AI sa za pár mesiacov zmení, zdá sa, že používanie RAG a Pinecone je stará škola. Takže som vykonal tento malý experiment, aby som zistil, ako sa MCP môže použiť na škrabanie webu. Model Context Protocol (MCP) Modelový kontextový protokol (MCP) Čo je modelový kontextový protokol? na je otvorený štandard, pôvodne vyvinutý spoločnosťou Anthropic, ktorý umožňuje veľké jazykové modely (LLM) interagovať s externými nástrojmi a údajmi prostredníctvom štandardizovaného rozhrania. Namiesto vytvárania vlastných integrácií pre každý zdroj údajov alebo škrabanie nástrojov, vývojári môžu vystaviť svoje dáta alebo funkcie prostredníctvom servera MCP. AI asistenti (klienti MCP) môžu konzistentne požiadať o tieto zdroje, a toto štandardizované, obojsmerné pripojenie obohacuje surový obsah s metaúdajmi, kontextom a inštrukciami, aby AI modely mohli efektívnejšie interpretovať informácie. Model Context Protocol (MCP) universal connector Ale ako to funguje? Ale ako to funguje? MCP sa riadi architektúrou klient-server: Hostová aplikácia (napr. IDE alebo AI asistent) spúšťa MCP (Claude, Cursor, atď.) ktoré sa pripája prostredníctvom protokolu MCP k jednému alebo viacerým MCP Každý server prepája s konkrétnym zdrojom údajov alebo nástrojom (napr. databázou, súborovým systémom alebo webovým škrabkou) na vašom lokálnom počítači alebo sieti, čím poskytuje štruktúrovaný kontext alebo akcie pre LLM. client servers MCP server môže vystaviť (kontextové údaje iba na čítanie analogické koncovým bodom GET) a (akcie alebo funkcie, ktoré model môže odvolávať analogicky k koncovým bodom POST) k LLM. resources tools Antropický MCP s otvoreným zdrojovým kódom na začiatku roku 2024 s cieľom podporiť celosvetové prijatie. Zníženie závislosti na vlastných rozhraniach API a zvýšenie modulárnosti a interoperability integrácií AI. common framework for AI-to-tool communication Tento štruktúrovaný spracovanie kontextu zlepšuje na jednoduché výzvy. model už nie je len dostane blob textu; namiesto toho, že môže načítať dáta prostredníctvom zdrojov a volanie nástroje s dobre definované vstupy / výstupy.Zhrnutie, MCP poskytuje štandardizovaný, bezpečný spôsob, ako podávať kontextu do modelov AI a prijímať akcie / výsledky, čo je obzvlášť silné v zložitých úlohách, ako je webové škrabanie. Prečo používať MCP? Ako sme videli v predchádzajúcich príspevkoch s použitím RAG, jednou z výziev bolo pridať stiahnutý článok do výzvy, pretože veľkosť kontextu je obmedzená. Skúšali sme rôzne riešenia, ako je rozdelenie článkov na kúsky na Pinecone a potom uloženie iba súhrnu vytvoreného s OpenAI na zníženie jeho dĺžky. Pomocou MCP, najmä v tomto prípade, kde ho používame v Cursor IDE, môžeme vytvoriť nástroj, ktorý extrahuje HTML a uloží ho do súboru, ktorý môže byť čítaný a rozrezaný Cursorom a použitý na generovanie XPaths. Ďalším zaujímavým aspektom používania MCP je, že miešame programovanie a inžinierstvo príkazov. V skutočnosti, vytváranie nástroja MCP je ako vytváranie funkcie v našom kóde: akonáhle sme vypracovali príkaz v IDE, toto je vyhodnotené a volá naše nástroje s potrebným argumentom (ako je URL na vyzdvihnutie) odhadnutým z nášho príkazu. Nástroj samotný je namiesto toho naprogramovanou funkciou, takže nie je rozmazanosť príkazu, ale vzhľadom na vstup, vieme, aký výstup môžeme očakávať. V neposlednom rade je MCP štandardom a teoreticky, akonáhle máme server nainštalovaný a spustený, môžeme ho pripojiť do akéhokoľvek modelu a nástroja, ktorý ho podporuje. Čo budeme používať MCP Na implementáciu našich riešení použijeme dve kľúčové technológie: a . MCP Python SDK Camoufox MCP Python SDK je oficiálna knižnica pre budovanie serverov MCP (a klientov) v Pythone. Implementuje plnú špecifikáciu MCP, zaobchádza so všetkými podkladovými protokolmi, aby ste sa mohli sústrediť na definovanie zdrojov a nástrojov, ktoré potrebujete. MCP Python SDK. S týmto SDK môžete vytvoriť server MCP v niekoľkých riadkoch kódu. serverová trieda, ktorá spravuje pripojenia a umožňuje zaregistrovať funkcie ako nástroje alebo zdroje prostredníctvom dekorátorov. a vystaviť ho modelu ako použiteľnému nástroju. FastMCP @mcp.tool() SDK balí výsledok funkcie a posiela ho späť klientovi AI v konzistentnom formáte.Zhrnutie: Nastavenie servera MCP, ktorý môže poskytovať kontext LLM alebo vykonávať úlohy v ich mene, je jednoduché. V webovom škrabaní je získavanie surového HTML z cieľových stránok (najmä tých s opatrením proti škrabanie alebo ťažkým JavaScriptom) polovica bitky. Rozhodol som sa použiť Camoufox, ktorý je open-source stealthový prehliadač navrhnutý pre takéto scenáre, aby som bol takmer istý, že môžem získať HTML z každej stránky. To je obzvlášť pravda, pretože MCP beží lokálne na mojom stroji, takže nepotrebujem žiadny proxy. Okrem jeho stealthových schopností som chcel použiť Camoufox na vytvorenie logiky MCP z 0. Ak chcete ušetriť čas, môžete použiť alebo Majú niektoré vopred postavené nástroje, ako je extrahovanie údajov a interakcia so stránkou, čo nám uľahčuje život. Camoufox for HTML retrieval. BrowserBase MCP server Prehľadávač Hyperbrowser 1 BrowserBase MCP server Prehľadávač Hyperbrowser 1 Technická implementácia servera MCP na písanie škrabky Camoufox Teraz vytvoríme server MCP, ktorý nám pomôže napísať škrabku Camoufox v troch krokoch. 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 Kód servera ( Záznam sa uloží do priečinka 79.MCP/MCPFiles. xpath_server.py Krok 1: Vytvorte si prostredie Najprv sa uistite, že máte Budeme potrebovať MCP SDK a Camouf, ktoré môžete nainštalovať cez pip. Python 3.10+ pip install mcp camoufox na balík obsahuje nástroj MCP Python SDK a CLI. môže vyžadovať ďalší krok na získanie binárneho prehliadača (napríklad spustenie na stiahnutie stealth Firefox – pre podrobnosti navštívte Camoufox docs).Akonáhle sú nainštalované, ste pripravení napísať kód servera. mcp Camoufox python -m camoufox fetch Krok 2: Inicializácia servera MCP Vytvorte nový skript Python (v repozitári, bude V tomto skripte budeme inicializovať server MCP a definovať naše nástroje. 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') To stačí na nastavenie prázdneho servera MCP. Krok 3: Implementácia HTML Retrieval cez Camoufox Chceme nástroj, ktorý, s danou adresou URL, zachytí obsah HTML stránky. Použijeme Camoufox, aby sme to urobili tajným spôsobom. volajúci : 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)}" S výnimkou dekorátora, je to jednoduchý Camoufox škrabka, ktorá otvára adresu URL, ktorú prejdeme v príkaze vnútri kurzor a ukladá HTML kód v súbore. Krok 4: Vytvorenie XPath Selectors na základe šablóny Druhý nástroj, ktorý potrebujeme, analyzuje HTML a produkuje XPath selektory pre údaje, ktoré chceme škrabať. ktorý berie identifikátor šablóny (na označenie toho, aký typ stránky alebo vzor extrakcie použiť) ako argument. generate_xpaths, Na základe šablóny bude táto funkcia produkovať príslušné výrazy XPath. Napríklad môžeme mať jednu šablónu pre stránku zoznamu produktov ( , jedna stránka s viacerými produktmi uvedenými) a ďalšia pre stránku s podrobnosťami o produkte ( , stránka s podrobnosťami o jednom produkte). 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 } V tomto prípade jednoducho definujeme požadovanú štruktúru výstupu a polia, pre ktoré chceme vytvoriť výbery. Krok 5: Vytvorte nový škrabka Camoufox Teraz, keď máme selektory, chceme kombinovať šablónu Camoufox Scraper ( Zistil som, že použitie šablóny Camoufox Scraper je potrebné, pretože bez nej je generovaný kód zvyčajne halucinácia a nefunguje. 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"} To je to; teraz musíme len nakonfigurovať Cursor na spustenie tohto servera MCP a napísať výzvu, ktorá používa jeho nástroje. Krok 6: Používanie servera MCP v kurze Jednou z veľkých vecí o Cursore (AI-powered IDE) je jeho vstavaná podpora pre servery MCP ako rozšírenie schopností AI. budeme integrovať náš novo vytvorený server MCP do Cursor tak, aby AI asistent mohol použiť na automatizáciu webových škrabanie úlohy (ako generovanie XPath selektory pre nás). Ak chcete pripojiť server v Cursore, postupujte podľa týchto krokov: – 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 Po pridaní servera, Môžete použiť nové nástroje automaticky, keď je to vhodné. Cursor’s AI assistant (the “Composer” agent) V praxi, keď sa pýtate v skladateľovi, "Získajte HTML z tejto URL a potom napíšte výbery XPath pomocou šablóny PLP", asistent vás požiada o potvrdenie na spustenie Nástroj a potom Jedného fetch_page_content generate_xpath Naše testy Po niekoľkých hodinách interakcií s výzva pochopiť, ako získať údaje potrebné spoľahlivo, som zistil, že tento robí väčšinu úloh, ktoré som požiadal, keď sa používa s Cloud 3.7 Sonnet (potvrdzuje, že je jedným z najlepších LLM pre kódovanie ) podľa : ako povedal Marco Vinciguerra z ScrapeGraphAI v našich najnovších rozhovoroch ako povedal Marco Vinciguerra z ScrapeGraphAI v našich najnovších rozhovoroch “Zadajte adresu URL @https://www.gucci.com/it/it/ca/women/shoes-for-women-c-women-shoesThen, napíšte XPath selektory pomocou šablóny PLP. Použite stiahnutý HTML (downloaded_page.html súbor) napísať fungujúce XPATH selektory.Napíšte selektory do súboru s názvom selectors.txt.Ten, vzhľadom na predtým vytvorené selektory, Napíšte Camoufox škrabka pomocou šablóny PLP a počiatočnej URL. Ak máte pochybnosti, prečítajte si selectors.txt súbor pochopiť, koľko polí a ktoré selektory musíte použiť. Použite súbor Camoufox_template.py pre budovanie škrab Kurzor otvorí kartu Camoufox, prechádza na URL adresu, ktorú som odovzdal, uloží HTML do súboru, prečíta ho a potom generuje výbery XPATH a uloží ich do iného súboru. rozhodol som sa uložiť výsledky každého kroku vo vnútri súboru, aby ich nasledujúce kroky mohli čítať a nakoniec ich automaticky rozdrviť namiesto odovzdania ich obsahu do kontextového okna, ktoré by mohlo byť príliš malé. Vytvorený škrabka je spustiteľný prvýkrát, takže je technicky správny a výsledky sú celkom dobré. Scraper, bez toho, aby povedal nič o webovej stránke, správne obsadil všetky polia, čo je vynikajúce a viac, než som od tohto testu očakával. Nemám rovnaké výsledky zakaždým, keď spustím rovnakú výzvu, čo môže byť frustrujúce, pretože neviete, ako opraviť proces, ak neviete, čo od neho očakávať. Výstupná štruktúra údajov nie je tá, ktorú som očakával, ale tá, ktorú asistent našiel na šablóne škrabky Camoufox. V ďalšej epizóde budeme pokračovať v našej ceste, aby sa Cursor stal naším asistentom pre webové škrabanie AI. Článok je súčasťou série "The Lab" od Pierluigi Vinciguerra. Pozrite sa na jeho stránku Substack pre viac informácií o Web Scraping. Článok je súčasťou série "The Lab" od Pierluigi Vinciguerra. Pozrite sa na jeho stránku Substack pre viac informácií o Web Scraping. „Lab“
