ในเหตุการณ์ที่ผ่านมาของ อะไร เราใช้ Firecrawl เพื่อสแกะสลักเนื้อหาของจดหมายข่าวนี้ DB วัตถุเช่น Pinecone เพื่อจัดเก็บการทําเครื่องหมายของบทความและ OpenAI API เพื่อกู้คืนข้อมูลและแนบ contexts ไปยังคําแนะนําของเราเพื่อรับคําตอบที่ดีขึ้น ชุดห้องปฏิบัติการ The Web Scraping คลับ ชุดห้องปฏิบัติการ The Web Scraping คลับ วิธีการนี้มีข้อ จํากัด ขนาดหน้าต่างแง่มุม (ปริมาณข้อมูลที่เราสามารถรวมไว้ในคําแนะนํา) มีข้อ จํากัด ดังนั้นคําตอบไม่ได้ดีเสมอ เนื่องจากภูมิทัศน์ AI จะเปลี่ยนแปลงภายในไม่กี่เดือนดูเหมือนว่าการใช้ RAG และ Pinecone เป็นโรงเรียนเก่า วันนี้คําพูดใหม่คือ ดังนั้นฉันได้ดําเนินการทดลองเล็ก ๆ นี้เพื่อดูว่า MCP สามารถใช้ในการสกัดเว็บได้อย่างไร โมเดลโปรโตคอล contextual protocol (MCP) โมเดลโปรโตคอล contextual protocol (MCP) โมเดลโปรโตคอลคอนเทคคืออะไร โซ เป็นมาตรฐานที่เปิดซึ่งได้รับการพัฒนาครั้งแรกโดย Anthropic ซึ่งช่วยให้โมเดลภาษาขนาดใหญ่ (LLMs) สามารถโต้ตอบกับเครื่องมือและข้อมูลภายนอกผ่านอินเตอร์เฟซมาตรฐาน ระหว่างโมเดล AI และระบบที่ข้อมูลอาศัยอยู่ แทนที่จะสร้างการบูรณาการที่กําหนดเองสําหรับทุกแหล่งข้อมูลหรือเครื่องมือสแก๊สนักพัฒนาสามารถเปิดเผยข้อมูลหรือฟังก์ชั่นผ่านเซิร์ฟเวอร์ MCP ผู้ช่วย AI (ลูกค้า MCP) สามารถขอทรัพยากรเหล่านี้อย่างสม่ําเสมอและการเชื่อมต่อแบบมาตรฐานสองทิศทางนี้ทําให้เนื้อหาดิบอุดมไปด้วยข้อมูลเมตาและคําแนะนําเพื่อให้โมเดล AI สามารถตีความข้อมูลได้อย่างมีประสิทธิภาพมากขึ้น Model Context Protocol (MCP) universal connector แต่มันทํางานได้อย่างไร แต่มันทํางานได้อย่างไร MCP มาตามสถาปัตยกรรมลูกค้า-เซิร์ฟเวอร์: แอปพลิเคชันโฮสต์ (เช่น IDE หรือ AI Assistant) จะเรียกใช้ MCP (Claude, Cursor ฯลฯ) ที่เชื่อมต่อผ่านโปรโตคอล MCP ไปยังหนึ่งหรือมากกว่า MCP เซิร์ฟเวอร์แต่ละเซิร์ฟเวอร์มีอินเตอร์เฟซกับแหล่งข้อมูลหรือเครื่องมือเฉพาะ (เช่นฐานข้อมูลระบบไฟล์หรือเครื่องสกรูเว็บ) บนเครื่องหรือเครือข่ายท้องถิ่นของคุณให้ความสัมพันธ์หรือการกระทําที่โครงสร้างขึ้นให้กับ LLM client servers เซิร์ฟเวอร์ MCP สามารถเปิดเผย (ข้อมูลบรรทัดฐานที่อ่านเท่านั้นที่คล้ายกันกับจุดสิ้นสุด GET) และ (การกระทําหรือฟังก์ชั่นที่รุ่นสามารถอ้างอิงเช่นเดียวกับจุดสิ้นสุด POST) ไปยัง LLM resources tools MCP ที่เปิดแหล่งที่มาของมนุษย์ในช่วงต้นปี 2024 เพื่อส่งเสริมการนํามาใช้ทั่วอุตสาหกรรม วัตถุประสงค์คือการสร้าง ลดการพึ่งพา APIs ที่เป็นเจ้าของและทําให้การบูรณาการ AI มากขึ้น modular และ interoperable common framework for AI-to-tool communication การจัดการแง่มุมแบบโครงสร้างนี้จะปรับปรุงได้ในแง่มุมที่เรียบง่าย โมเดลไม่ได้รับข้อความเพียงครั้งเดียว แต่สามารถโหลดข้อมูลผ่านทรัพยากรและเรียกใช้เครื่องมือด้วยอินพุต / เอาต์พุตที่กําหนดไว้อย่างละเอียด โดยสรุปแล้ว MCP ให้วิธีการมาตรฐานและปลอดภัยในการให้อาหารแง่มุมในรูปแบบ AI และรับการกระทํา / ผลลัพธ์ซึ่งมีประสิทธิภาพโดยเฉพาะอย่างยิ่งในงานที่ซับซ้อนเช่นการสแก๊สเว็บ ทําไมต้องใช้ MCP ดังที่เราได้เห็นในโพสต์ก่อนหน้านี้โดยใช้ RAG หนึ่งความท้าทายคือการเพิ่มบทความที่ดาวน์โหลดลงในบทความที่แนะนําเนื่องจากขนาดแง่มุม จํากัด เราได้ทดสอบโซลูชั่นต่าง ๆ เช่นการแบ่งบทความเป็นชิ้นบน Pinecone แล้วบันทึกเพียงสรุปที่ทําด้วย OpenAI เพื่อลดความยาว ใช้ MCP โดยเฉพาะอย่างยิ่งในกรณีนี้ซึ่งเราใช้ภายใน IDE Cursor เราสามารถสร้างเครื่องมือที่สกัด HTML และบันทึกเป็นไฟล์ที่สามารถอ่านและตัดโดย Cursor และใช้เพื่อสร้าง XPaths อีกประเด็นที่น่าสนใจในการใช้ MCP คือว่าเราผสมการเขียนโปรแกรมและการวิศวกรรมตัวอักษร ในความเป็นจริงการสร้างเครื่องมือ MCP คือการสร้างฟังก์ชั่นในรหัสของเรา: เมื่อเราสร้างตัวอักษรใน IDE นี้จะได้รับการประเมินและเรียกเครื่องมือของเราด้วยเหตุผลที่จําเป็น (เช่น URL เพื่อรับ) ที่คาดเดาจากตัวอักษรของเรา เครื่องมือเองแทนนั้นเป็นฟังก์ชั่นที่เขียนโปรแกรมดังนั้นจึงไม่มีความซับซ้อนของตัวอักษร แต่โดยการป้อนข้อมูลเรารู้ผลลัพธ์ที่เราสามารถคาดหวัง นี่เป็นสิ่งที่ดีเพราะมันลดความไม่แน่นอนของกระบวนการทั้งหมดและในเวลาเดียวกันเปิดตัวกรณีการใช้งานจํานวนมากเพื่อเพิ่มขอบเขตการแชทของคุณด้วย LLM สุดท้าย แต่ไม่น้อยที่สุด MCP เป็นมาตรฐานและในทางทฤษฎีเมื่อเรามีเซิร์ฟเวอร์และทํางานเราสามารถเชื่อมต่อกับรุ่นและเครื่องมือใด ๆ ที่รองรับมัน อย่างไรก็ตามความจริงที่ว่า OpenAI ไม่รองรับมันในขณะนี้ไม่ได้เป็นสัญญาณที่ดีสําหรับการกระจายของโปรโตคอล สิ่งที่เราจะใช้ MCP เราจะใช้เทคโนโลยีหลักสองประการในการใช้โซลูชั่นของเรา: และ . MCP Python SDK Camoufox MCP Python SDK เป็นห้องสมุดอย่างเป็นทางการสําหรับการสร้างเซิร์ฟเวอร์ MCP (และลูกค้า) ใน Python มันใช้ข้อกําหนด MCP เต็มรูปแบบการจัดการข้อความโปรโตคอลพื้นฐานเพื่อให้คุณสามารถมุ่งเน้นการกําหนดทรัพยากรและเครื่องมือที่คุณต้องการ MCP Python SDK. ด้วย SDK นี้คุณสามารถสร้างเซิร์ฟเวอร์ MCP ในเพียงไม่กี่บรรทัดของรหัส คลาสเซิร์ฟเวอร์ที่จัดการการเชื่อมต่อและช่วยให้คุณลงทะเบียนฟังก์ชั่นเป็นเครื่องมือหรือทรัพยากรผ่าน decorators ตัวอย่างเช่นคุณสามารถอธิบายฟังก์ชั่น เพื่อแสดงให้เห็นถึงรูปแบบเป็นเครื่องมือที่สามารถดําเนินการได้ FastMCP @mcp.tool() SDK บรรจุผลลัพธ์ของฟังก์ชั่นและส่งกลับไปยังลูกค้า AI ในรูปแบบที่สอดคล้องกัน โดยสรุปการตั้งค่าเซิร์ฟเวอร์ MCP ที่สามารถให้อาหารเนื้อหาให้กับ LLMs หรือดําเนินการงานในนามของพวกเขาเป็นเรื่องง่าย ในการสแกะสลักเว็บการได้รับ HTML วัตถุดิบจากหน้าเป้าหมาย (โดยเฉพาะอย่างยิ่งผู้ที่มีมาตรการป้องกันการสแกะสลักหรือ JavaScript หนัก) เป็นครึ่งหนึ่งของการต่อสู้ ฉันตัดสินใจที่จะใช้ Camoufox ซึ่งเป็นเครื่องมือเบราว์เซอร์สลักที่ออกแบบมาสําหรับสถานการณ์ดังกล่าวเพื่อให้แน่ใจเกือบจะสามารถรับ HTML จากทุกหน้า นี่เป็นความจริงโดยเฉพาะอย่างยิ่งเนื่องจาก MCP ทํางานในท้องถิ่นบนเครื่องของฉันดังนั้นฉันจึงไม่จําเป็นต้องใช้โปรกซี่ใด ๆ ขึ้นอยู่กับความสามารถในการสลับฉันต้องการใช้ Camoufox เพื่อสร้างกลยุทธ์ MCP จาก 0 หากคุณต้องการประหยัดเวลาคุณสามารถใช้ หรือ พวกเขามีเครื่องมือสําเร็จรูปเช่นการสกัดข้อมูลและการโต้ตอบกับหน้าเว็บทําให้ชีวิตง่ายขึ้นสําหรับเรา Camoufox for HTML retrieval. เซิร์ฟเวอร์ MCP BrowserBase ไฮเปอร์เบราเซอร์ 1 เซิร์ฟเวอร์ MCP BrowserBase ไฮเปอร์เบราเซอร์ 1 การประยุกต์ใช้ทางเทคนิคของเซิร์ฟเวอร์ MCP สําหรับการเขียน Scraper Camoufox ตอนนี้เราจะสร้างเซิร์ฟเวอร์ MCP ที่ช่วยให้เราเขียนเครื่องสกรู Camoufox ในสามขั้นตอน แต่ละขั้นตอนของกระบวนการมีเครื่องมือของตัวเอง: 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 อาจต้องใช้ขั้นตอนเพิ่มเติมเพื่อเรียกเก็บไบนารีเบราว์เซอร์ (เช่นการทํางาน ดาวน์โหลด Stealth Firefox – โปรดดูที่ Camoufox docs สําหรับรายละเอียด) เมื่อติดตั้งแล้วคุณพร้อมที่จะเขียนรหัสเซิร์ฟเวอร์ mcp Camoufox python -m camoufox fetch ขั้นตอนที่ 2: เริ่มต้นเซิร์ฟเวอร์ MCP สร้างสคริปต์ Python ใหม่ (ในตู้เก็บข้อมูลจะ ). ในสคริปต์นี้เราจะเริ่มต้นเซิร์ฟเวอร์ MCP และกําหนดเครื่องมือของเรา การใช้ MCP SDK เป็นเรื่องง่าย: 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 เพื่อทําเช่นนี้อย่างซ่อนอยู่ ลองกําหนด MCP ที่เรียกว่า : 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 ง่ายที่เปิด 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: สร้าง Scraper Camoufox ใหม่ ตอนนี้เรามีตัวเลือกที่เราต้องการรวมเทมเพลต 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 ที่ขับเคลื่อนด้วย AI) คือการสนับสนุนในตัวสําหรับเซิร์ฟเวอร์ MCP เป็นส่วนขยายของความสามารถของ AI เราจะรวมเซิร์ฟเวอร์ MCP ที่สร้างขึ้นใหม่ใน Cursor เพื่อให้ผู้ช่วย AI สามารถใช้เพื่ออัตโนมัติงานสแก๊สเว็บ (เช่นการสร้างตัวเลือก 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 เมื่อเซิร์ฟเวอร์ถูกเพิ่ม สามารถใช้เครื่องมือใหม่โดยอัตโนมัติเมื่อเหมาะสม Cursor’s AI assistant (the “Composer” agent) ในทางปฏิบัติเมื่อคุณถามใน composer "รับ HTML จาก URL นี้แล้วเขียนตัวเลือก XPath โดยใช้ PLP template" assistant จะขอยืนยันเพื่อเรียกใช้ เครื่องมือและจากนั้น หนึ่ง fetch_page_content generate_xpath การทดสอบของเรา หลังจากไม่กี่ชั่วโมงของการโต้ตอบกับคําแนะนําที่จะเข้าใจวิธีการรับข้อมูลที่จําเป็นในทางที่เชื่อถือได้ฉันพบว่านี้ทําส่วนใหญ่ของงานที่ฉันถามเมื่อใช้กับ Cloud 3.7 Sonnet (ยืนยันว่ามันเป็นหนึ่งใน LLMs ที่ดีที่สุดสําหรับการเข้ารหัส ) : ตามที่ Marco Vinciguerra จาก ScrapeGraphAI กล่าวในสัมภาษณ์ล่าสุดของเรา ตามที่ Marco Vinciguerra จาก ScrapeGraphAI กล่าวในสัมภาษณ์ล่าสุดของเรา “Fetch URL @https://www.gucci.com/it/it/ca/women/shoes-for-women-c-women-shoesThen, write the XPath selectors using the template PLP. Use the downloaded HTML (downloaded_page.html file) to write working XPATH selectors.Write the selectors in a file called selectors.txt.Then, given the selectors previously created, Write a Camoufox scraper using the template PLP and the initial URL. If in doubt, read the selectors.txt file to understand how many fields and which selectors you have to use. Use the file Camoufox_template.py to build the scraper and customize with it the fields in output read by the PLP template.” Cursor เปิดแท็บ Camoufox เรียกดู URL ที่ฉันผ่านบันทึก HTML ในไฟล์อ่านแล้วสร้างตัวเลือก XPATH และบันทึกไว้ในไฟล์อื่น ฉันเลือกที่จะบันทึกผลลัพธ์ของแต่ละขั้นตอนภายในไฟล์เพื่อให้ขั้นตอนต่อไปสามารถอ่านพวกเขาและในที่สุดก็ตัดพวกเขาโดยอัตโนมัติแทนที่จะส่งเนื้อหาของพวกเขาในหน้าต่าง contextual ซึ่งอาจเป็นขนาดเล็กเกินไป เครื่องสกัดที่สร้างขึ้นสามารถเรียกใช้ได้ครั้งแรกดังนั้นจึงถูกต้องทางเทคนิคและผลลัพธ์นั้นดีมาก เครื่องสแกะสลักโดยไม่ต้องพูดอะไรเกี่ยวกับเว็บไซต์ก็ประชากรพื้นที่ทั้งหมดอย่างถูกต้องซึ่งเป็นสิ่งที่ดีเยี่ยมและมากกว่าที่ฉันคาดหวังจากทดสอบนี้ ฉันยังคงมีความกังวลเกี่ยวกับความน่าเชื่อถือของโซลูชัน ฉันไม่ได้รับผลลัพธ์เดียวกันทุกครั้งที่ฉันเรียกใช้คําแนะนําเดียวกันซึ่งอาจเป็นความผิดหวังเพราะคุณไม่รู้วิธีแก้ไขกระบวนการถ้าคุณไม่ทราบว่าจะคาดหวังอะไรจากมัน ปัญหาที่สองอาจเป็นปัญหาด้านวิศวกรรมอย่างรวดเร็ว โครงสร้างข้อมูลการส่งออกไม่ได้เป็นสิ่งที่ฉันคาดหวัง แต่เป็นสิ่งที่ผู้ช่วยพบในเทมเพลต Camoufox Scraper ฉันยังไม่ได้คิดถึงวิธีแก้ปัญหานี้ แต่ฉันมั่นใจว่าในทางบางอย่างมันสามารถทําได้ ฉันคิดว่าเราเสร็จสิ้นสําหรับวันนี้ ในส่วนที่ถัดไปเราจะดําเนินการต่อการเดินทางของเราเพื่อให้ Cursor เป็นผู้ช่วย AI ของเราในการสกัดเว็บ บทความนี้เป็นส่วนหนึ่งของซีรีส์ “ห้องปฏิบัติการ” โดย Pierluigi Vinciguerra ตรวจสอบหน้า Substack ของเขาสําหรับข้อมูลเพิ่มเติมเกี่ยวกับ Web Scraping บทความนี้เป็นส่วนหนึ่งของซีรีส์ “ห้องปฏิบัติการ” โดย Pierluigi Vinciguerra ตรวจสอบหน้า Substack ของเขาสําหรับข้อมูลเพิ่มเติมเกี่ยวกับ Web Scraping “ห้องปฏิบัติการ”
