Sa mga past events ng ang , ginagamit namin ang Firecrawl upang i-scrape ang nilalaman ng newsletter na ito, isang vector DB tulad ng Pinecone upang i-storage ang mga artikulo's markdown, at ang OpenAI API upang makakuha ng impormasyon at ilagay ang kontekstong sa aming prompt upang makakuha ng mas mahusay na mga solusyon. Mga serye ng lab ang web scraping club Mga serye ng lab ang web scraping club Ang size ng kontekstong window (ang halaga ng impormasyon na maaari naming magbigay sa prompt) ay limitasyong, kaya ang mga solusyon ay hindi kailanman mahusay. Dahil ang AI landscape ay magbabago sa loob ng ilang buwan, ang paggamit ng RAG at Pinecone ay isang old school. , kaya binuksan ko ang maliit na eksperimento na ito upang makita kung paano maaaring gamitin ang MCP para sa web scraping. Mga pahinang tumuturo sa Context Protocol (MCP) Mga pahinang tumuturo sa Context Protocol (MCP) Ano ang isang Model Context Protocol? ang Ito ay isang open standard, na binuo mula sa Anthropic, na nagbibigay ng mga big language models (LLMs) upang makipag-ugnayan sa mga eksternal na mga tool at data sa pamamagitan ng isang standardized interface. Sa gitna ng Pagpatay ng sarili niyang Olympic maskot , Ang Dysfunctional clean up Ng maruming tubig nito, ang Pag-shutdown ng doping lab nito , Ang Deklarasyon ng isang emergency na pinansiyal , Ang Pagkakaroon ng virus Zika , At Iba't ibang mga kalamidad , Ang Olympic ambitions ng Rio ay isang kalamidad. Model Context Protocol (MCP) universal connector Pero paano ito gumagana? Pero paano ito gumagana? Ang MCP ay sumusunod sa isang client-server architecture: Ang application ng host (halimbawa, isang IDE o AI assistant) ay gumagana ng isang MCP. (Claude, Cursor, etc.) na nag-connect sa pamamagitan ng MCP protocol sa isa o higit pa ng MCP Ang bawat server ay nag-interface sa isang tiyak na data source o tool (misyon, isang database, file system, o web scraper) sa iyong local machine o network, na nagbibigay ng estruktural na konteksto o mga aksyon sa LLM. client servers Ang isang MCP server ay maaaring i-expose (context-only context data na analogo sa GET endpoints) at (ang mga aksyon o mga function ang modelo ay maaaring sumalian analog sa POST endpoints) sa LLM. resources tools Anthropic open-source MCP sa simula ng 2024 upang i-encourage ang industriya-wide adoption. , ang pagbabago ng reliance sa proprietary APIs at gumawa ng AI integrations na mas modular at interoperable. common framework for AI-to-tool communication Ang modelo ay hindi lamang makakakuha ng isang blob ng teksto; sa halip, maaaring i-load ang data sa pamamagitan ng mga resource at i-call ng mga tool na may napaka-defined mga input / outputs. Sa pakikipagtulungan, ang MCP ay nagbibigay ng isang standardized, safe na paraan upang i-feed kontekstong sa mga modelo ng AI at makakuha ng mga aksyon / resulta, na lalo na malakas sa mga karaniwang mga gawa tulad ng web scraping. Bakit ginagamit ang MCP? Tulad ng nakita namin sa mga nakaraang mga post na gumagamit ng RAG, ang isa sa mga problema ay ang pagdadala ng artikulong na i-download sa prompt dahil ang size ng kontekstong ito ay limitado. Ipinakilala namin ang iba pang mga solusyon, tulad ng pag-divide ang mga artikulong sa mga bituin sa Pinecone at pagkatapos ay i-save lamang ang isang summary na ginawa sa OpenAI upang mabawasan ang kanyang length. Sa paggamit ng MCP, lalo na sa kaso na ito, kung saan ginagamit namin ito sa Cursor IDE, maaari naming bumuo ng isang tool na i-extract ang HTML at i-save ito sa isang file na maaaring i-read at i-chunked sa pamamagitan ng Cursor at ginagamit upang lumikha ng XPaths. Sa katunayan, paggawa ng isang tool ng MCP ay tulad ng paglikha ng isang function sa aming code: kapag natuklasan namin ang prompt sa IDE, ito ay na-evaluate at tinatawag ang aming mga tool na may ang kinakailangang argumento ( tulad ng ang URL upang makuha) na tinatawag mula sa aming prompt. Ang tool mismo, sa halip, ay isang programmed function, kaya hindi ang kabuuang ng isang prompt, ngunit sa pamamagitan ng isang input, alam namin ang output na maaari naming maghintay. Ito ay mahusay na dahil ito ay mabawasan ang uncertainty ng buong proseso at, sa gayon, binubuo ng isang myriad ng mga kaso ng paggamit para sa pag-enrichment ng konteksto ng iyong chat sa LLM. Last but not least, ang MCP ay isang standard, at sa teorya, kapag mayroon kaming isang server up at mag-execute, maaari naming i-connect ito sa anumang modelo at tool na sumusuporta sa kanya. Ano ang ibig sabihin ng MCP Kami ay gumagamit ng dalawang pangunahing teknolohiya upang i-implementate ang aming solusyon: ang at ang . MCP Python SDK Camoufox Ang MCP Python SDK ay ang opisyal na library para sa pagbuo ng MCP servers (at mga client) sa Python. Ito ay nag-implementate ang buong MCP specification, nagtatrabaho ang lahat ng mga pangunahing protocol messaging upang maaari kang mag-focus sa paglalarawan ng mga resource at mga tool na kailangan mo. MCP Python SDK. Sa pamamagitan ng SDK na ito, maaari mong lumikha ng isang MCP server sa lamang ng ilang mga linya ng code. Ito ay nagbibigay ng isang mataas na antas ang server class na gumagamit ng mga koneksyon at nagbibigay-daan sa iyo upang i-register ang mga function bilang mga tool o mga resource sa pamamagitan ng decorators. I-expose ito sa modelo bilang isang actionable tool. FastMCP @mcp.tool() Ang SDK packages ang resulta ng function at i-send ito sa AI client sa isang consistent na format. Sa kabuuan, ang pag-setup ng isang MCP server na maaaring magbigay ng kontekstong sa LLMs o i-execute mga trabaho sa kanilang pangalan ay simpleng. Sa web scraping, makakuha ng raw HTML mula sa mga target na mga pahina (karamihan ang mga na may anti-scraping measures o heavy JavaScript) ay halos ang batay. Nagpasya ko na gamitin ang Camoufox, na isang open-source stealth browsing tool na dinisenyo para sa mga scenarios na ito, upang maging halos sigurado na makakakuha ng ang HTML mula sa bawat pahina. Ito ay karamihan na katulad dahil ang MCP ay gumagana lokal sa aking machine, kaya hindi ko kailangan ng anumang proxy. Sa ibabaw ng kanyang stealth mga kakayahan, nais kong gamitin ang Camoufox upang bumuo ng isang MCP logic mula sa 0. Kung nais mong i-save ang oras, maaari mong gamitin ang o sa Mayroong ilang pre-built na mga tool tulad ng pag-extract data at pag-interact sa pahina, na gumagawa ng buhay para sa amin. Camoufox for HTML retrieval. Paggamit ng MCP Server Tungkol sa Hyperbrowser One Paggamit ng MCP Server Tungkol sa Hyperbrowser One Technical Implementation ng isang MCP Server para sa pag-writing ng isang Camoufox scraper Ngayon, kami ay bumuo ng ang MCP server na tumutulong sa amin upang i-writing ang isang Camoufox scraper sa tatlong mga hakbang. 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 Mga pahinang tumuturo sa ( Ang mga file na ito ay i-save sa folder 79.MCP/MCPFiles. xpath_server.py Step 1: Ipasok ang Environment Pagkatapos, siguraduhin na ikaw ay Kailangan namin ang MCP SDK at Camouf, na maaari mong i-install sa pamamagitan ng pip. Python 3.10+ pip install mcp camoufox ang Ang pakete ay naglalaman ng MCP Python SDK at CLI tool. maaaring kailangan ng isang karagdagang step upang makuha ang kanyang browser binary (halimbawa, mag-execute upang i-download ang stealth Firefox - tingnan ang Camoufox docs para sa mga detalye). Kapag ang mga ito ay naka-install, ikaw ay nag-script ang server code. mcp Camoufox python -m camoufox fetch Step 2: I-initialize ang MCP Server I-create a new Python script (sa repository, ito ay Sa script na ito, i-initialize ang isang MCP server at i-definite ang aming mga tool. 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') Ito ay para sa pag-set up ng isang empty MCP server. Step 3: Implement ang HTML Retrieval sa pamamagitan ng Camoufox Kailangan namin ng isang tool na, ibinigay ng isang URL, makuha ang HTML na nilalaman ng pahina. Kami ay gumagamit ng Camoufox upang gawin ito sa isang stealthy na paraan. ang call : 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)}" Habang ang decorator, ito ay isang simpleng Camoufox scraper na buksan ang URL na ipasok namin sa prompt sa loob ng Cursor at i-save ang HTML code sa isang file. Step 4: I-generate ang XPath Selectors batay sa template Ang ikalawang tool na kailangan namin ay i-analysis ang HTML at lumikha ng mga selector ng XPath para sa data na nais namin i-scrape. na gumagamit ng isang template identifier ( upang ipakita kung ano ang uri ng pahina o extraction pattern upang gamitin) bilang isang argumento. generate_xpaths, Sa pagitan ng template, ang function na ito ay i-output ang mga katangian ng XPath. Halimbawa, maaari naming magkaroon ng isang template para sa isang Product Listing Page ( , isang pahina na may karagdagang mga produkto na itinatag) at isa para sa isang pahina na detalye ng produkto ( , isang pahina na may mga detalye ng isang produkto). 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 } Sa katunayan na ito, kami ay lamang na-defines ang kinakailangang output structure at ang mga field para sa kung saan nais namin bumuo ang mga selectors. Step 5: I-generate ang bagong Camoufox scraper Kapag bumalik na ako sa bahay namin, i'll start building a new meal. ( ) na may mga selector upang i-writing ang isang scraper na may ang kinakailangang strukturong output. Nagsimula ko na gamitin ang isang Camoufox Scraper template ay kinakailangan dahil, walang ito, ang code generated ay karaniwang isang hallucination at hindi gumagana. 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"} Ito ay ito; ngayon kailangan natin lamang upang i-configure ang Cursor upang i-execute ang MCP server na ito at ilagay ang isang prompt na gumagamit ng mga tool nito. Step 6. Paggamit ng MCP Server sa Cursor Ang isa sa mga mahusay na mga bagay tungkol sa Cursor (ang isang AI-powered IDE) ay ang kanyang built-in suporta para sa mga server ng MCP bilang mga extension ng mga kakayahan ng AI. Kami ay mag-integrate ang aming newly-created MCP server sa Cursor upang ang AI assistant ay maaaring gamitin ito upang automatize web scraping tasks (tulad ng generating XPath selectors para sa amin). Upang i-connect ang server sa Cursor, gawin ang mga patakaran na ito: – 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 Kapag ang server ay idinagdag, Pwede kang mag-hire ng isang mathematician if you like. Cursor’s AI assistant (the “Composer” agent) Sa pangkalahatan, kapag nag-iisip sa composer, "Get the HTML from this URL and then write the XPath selectors using the template PLP", ang assistant ay magtanong sa iyo para sa confirmation upang i-execute ang template. Ang tool at pagkatapos ay isang fetch_page_content generate_xpath ang mga test Pagkatapos ng ilang oras ng pag-interaction sa prompt upang malaman kung paano makakuha ng ang mga data na kinakailangan sa isang reliable na paraan, nakita ko na ang isa na ito ay gumagana sa karamihan ng mga gawain na nangangailangan ko kapag ginagamit sa Cloud 3.7 Sonnet (paliwanag na ito ay isa sa mga pinakamahusay na LLM para sa coding ) ang : bilang sinabi ni Marco Vinciguerra mula sa ScrapeGraphAI sa aming pinakabagong mga interview bilang sinabi ni Marco Vinciguerra mula sa ScrapeGraphAI sa aming pinakabagong mga interview “I-fix ang URL @https://www.gucci.com/it/it/ca/women/shoes-for-women-c-women-shoesThen, i-write ang XPath selectors gamit ang template PLP. Gamitin ang i-download HTML (downloaded_page.html file) upang i-write working XPATH selectors.I-write ang selectors sa isang file na tinatawag na selectors.txt.Then, ibinigay ang mga selectors na lumikha na nakaraang, I-write ang isang Camoufox scraper gamit ang template PLP at ang unang URL. Kung may kailangang mag-download ang selectors.txt file upang malaman kung paano mo gamitin ang maraming mga field at kung ano ang mga selectors na kailangan mo. Gamitin ang file Camoufox_t Ang cursor ay bumubuo ng isang tab ng Camoufox, i-navigate sa URL na ibinigay ko, i-save ang HTML sa isang file, i-read ito, at pagkatapos ay lumikha ng mga selector ng XPATH at i-save ang mga ito sa isang iba pang file. I chose to save the results of each step inside a file so that the following steps could read them and eventually chunk them automatically rather than passing their content in the context window, na maaaring maging mas maliit. Ang scraper na binuo ay maaaring i-execute ang unang beses, kaya ito ay technically correct, at ang mga resulta ay napaka-kakaibang. Ang scraper, nang walang sinabi tungkol sa website, correctly populated ang lahat ng mga fields, na kung saan ay mahusay at higit pa sa kung saan ako ay inaasahan mula sa test na ito. Hindi ko makakuha ng parehong mga resulta sa lahat ng pagkakataon na i-execute ang parehong prompt, na maaaring maging frustrating dahil hindi mo alam kung paano i-fix ang proseso kung hindi mo alam kung ano ang dapat mong maghintay mula sa kanya. Ang ikalawang problema ay maaaring higit sa isang prompt engineering isa. Ang pag-output data structure ay hindi ang isa na inaasahan ko, ngunit ang isa na natagpuan ang assistant sa Camoufox scraper template. Sa susunod na episode, magsimula namin ang aming paglalakbay upang gumawa ng Cursor ang aming web-scraping AI assistant. Ang artikulong ito ay bahagi ng serye ng "The Lab" ng Pierluigi Vinciguerra. Tingnan ang kanyang Substack pahina para sa karagdagang impormasyon sa Web Scraping. Ang artikulo ay bahagi ng Serye ng Tingnan ang kanyang page para sa karagdagang impormasyon sa Web Scraping. “Ang lab” ang napili ng mga taga-hanga: Pierluigi Vinciguerra Mga Substack “Ang lab”
