En los últimos episodios de es , usamos Firecrawl para raspar el contenido de este boletín, un DB vector como Pinecone para almacenar el marcado de los artículos, y la API OpenAI para recuperar información y anexar el contexto a nuestra solicitud para obtener mejores respuestas. La serie de laboratorios The Web Scraping Club La serie de laboratorios El club de rascado web El tamaño de la ventana de contexto (la cantidad de información que podemos incluir en el prompt) es limitada, por lo que las respuestas no siempre fueron grandes. Dado que el paisaje de la IA cambiará en unos meses, parece que usar RAG y Pinecone es la vieja escuela. , así que he llevado a cabo este pequeño experimento para ver cómo se puede usar MCP para el rascado web. Protocolo de modelo de contexto (MCP) Protocolo de modelo de contexto (MCP) ¿Qué es un Protocolo Contextual Modelo? El es un estándar abierto, desarrollado inicialmente por Anthropic, que permite a los grandes modelos de idiomas (LLM) interactuar con herramientas y datos externos a través de una interfaz estandarizada. En lugar de construir integraciones personalizadas para cada fuente de datos o herramienta de rascado, los desarrolladores pueden exponer sus datos o funcionalidad a través de un servidor MCP. Los asistentes de IA (los clientes de MCP) pueden solicitar consistentemente esos recursos, y esta conexión normalizada y bidireccional enriquece el contenido crudo con metadatos, contexto e instrucciones para que los modelos de IA puedan interpretar la información de manera más efectiva. Model Context Protocol (MCP) universal connector Pero ¿cómo funciona? Pero ¿cómo funciona? El MCP sigue una arquitectura cliente-servidor: La aplicación anfitriona (por ejemplo, un IDE o asistente de IA) ejecuta un MCP. (Claude, Cursor, etc.) que se conecta a través del protocolo MCP a uno o más MCP Cada servidor interfiere con una fuente de datos o herramienta específica (por ejemplo, una base de datos, sistema de archivos o rascador web) en su máquina o red local, proporcionando un contexto estructurado o acciones para el LLM. client servers Un servidor MCP puede (Datos contextuales analógicos a los puntos finales de GET) y (acciones o funciones que el modelo puede invocar analógicamente a los endpoints POST) al LLM. resources tools MCP de código abierto antropogénico a principios de 2024 para alentar la adopción en toda la industria. , reduciendo la dependencia de las APIs propietarias y haciendo las integraciones de IA más modulares e interoperables. common framework for AI-to-tool communication Este manejo estructurado de contextos mejora en llamadas simples.El modelo ya no solo recibe un blob de texto; en cambio, puede cargar datos a través de recursos y llamar herramientas con entradas/salidas bien definidas.En resumen, MCP proporciona una forma estandarizada y segura de alimentar el contexto en modelos de IA y recibir acciones/resultados, lo que es especialmente potente en tareas complejas como el rascado web. ¿Por qué utilizar el MCP? Como hemos visto en publicaciones anteriores usando RAG, un reto era agregar el artículo descargado al prompt ya que el tamaño del contexto es limitado.Hemos probado diferentes soluciones, como dividir los artículos en pedazos en Pinecone y luego guardar solo un resumen hecho con OpenAI para reducir su longitud. Usando MCP, especialmente en este caso, donde lo estamos usando dentro de Cursor IDE, podemos crear una herramienta que extrae el HTML y lo guarda en un archivo que puede ser leído y recortado por Cursor y usado para generar los XPaths. Otro aspecto interesante del uso de MCP es que mezclamos la programación y la ingeniería de prompt. De hecho, crear una herramienta de MCP es como crear una función en nuestro código: una vez que hemos elaborado la prompt en el IDE, esto se evalúa y llama a nuestras herramientas con el argumento necesario (como la URL para recoger) adivinado de nuestra prompt. La herramienta misma, en cambio, es una función programada, por lo que no hay la confusión de una prompt, sino dada una entrada, sabemos la salida que podemos esperar. Esto es grande porque reduce la incertidumbre de todo el proceso y, al mismo tiempo, abre una miríada de casos de uso para enriquecer el contexto de su chat con el LLM. Por último, pero no menos importante, MCP es un estándar, y teóricamente, una vez que tengamos un servidor en funcionamiento, podríamos conectarlo a cualquier modelo y herramienta que lo soporte. Lo que vamos a usar MCP Utilizaremos dos tecnologías clave para implementar nuestra solución: la y . MCP Python SDK Camoufox El MCP Python SDK es la biblioteca oficial para construir servidores MCP (y clientes) en Python. implementa la especificación MCP completa, manejando todo el mensaje de protocolo subyacente para que pueda centrarse en definir los recursos y herramientas que necesita. MCP Python SDK. Con este SDK, puede crear un servidor MCP en solo unas pocas líneas de código. clase de servidor que gestiona las conexiones y le permite registrar funciones como herramientas o recursos a través de decoradores. para exponerlo al modelo como una herramienta actuable. FastMCP @mcp.tool() El SDK empaqueta el resultado de la función y lo envía de vuelta al cliente de IA en un formato consistente.En resumen, la configuración de un servidor MCP que pueda alimentar el contexto a los LLM o realizar tareas en su nombre es sencilla. En el rascado web, obtener el HTML crudo de las páginas de destino (especialmente aquellas con medidas anti-rascado o JavaScript pesado) es la mitad de la batalla. Decidí usar Camoufox, que es una herramienta de navegación stealth de código abierto diseñada para tales escenarios, para estar casi seguro de poder obtener el HTML de cada página. Esto es especialmente cierto porque el MCP se ejecuta localmente en mi máquina, así que no necesitaré ningún proxy. Además de sus capacidades stealth, quería usar Camoufox para construir una lógica MCP de 0. Si desea ahorrar tiempo, puede usar o Tienen algunas herramientas prefabricadas como extraer datos e interactuar con la página, haciendo la vida más fácil para nosotros. Camoufox for HTML retrieval. El servidor MCP de BrowserBase El Hyperbrowser 1 El servidor MCP de BrowserBase El Hyperbrowser 1 Implementación técnica de un servidor MCP para escribir un rascador Camoufox Ahora, construiremos el servidor MCP que nos ayuda a escribir un rascador Camoufox en tres pasos.Cada uno de los pasos del proceso tiene su propia herramienta: 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 El código del servidor ( ) se guardará en el repositorio en la carpeta 79.MCP/MCPFiles. xpath_server.py Paso 1: Establecer el entorno En primer lugar, asegúrese de tener Necesitamos el SDK de MCP y Camouf, que puede instalar a través de pip. Python 3.10+ pip install mcp camoufox El El paquete incluye la herramienta MCP Python SDK y CLI. puede requerir un paso adicional para recuperar su navegador binario (por ejemplo, para descargar el stealth Firefox – consulte los documentos de Camoufox para más detalles).Una vez que estos se instalen, está listo para escribir el código del servidor. mcp Camoufox python -m camoufox fetch Paso 2: Iniciar el servidor MCP Crear un nuevo script de Python (en el repositorio, será En este script, inicializaremos un servidor MCP y definiremos nuestras herramientas. 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') Esto es suficiente para configurar un servidor MCP vacío. Paso 3: Implementación de HTML Retrieval a través de Camoufox Queremos una herramienta que, dada una URL, recupere el contenido HTML de la página. Utilizaremos Camoufox para hacer esto de una manera oculta. llamado : 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)}" Excepto para el decorador, es un rascador Camoufox simple que abre la URL que pasaremos en el prompt dentro de Cursor y almacena el código HTML en un archivo. Paso 4: Generar selectores de XPath basados en el modelo La segunda herramienta que necesitamos analiza el HTML y produce selectores XPath para los datos que queremos raspar. que toma un identificador de plantilla (para indicar qué tipo de página o patrón de extracción utilizar) como un argumento. generate_xpaths, En el caso de que el producto no se encuentre en la lista de productos, se recomienda que el producto se encuentre en la lista de productos ( , una página con varios productos enumerados) y otra para una página de detalles del producto ( , una página con los detalles de un solo producto). 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 } En este caso, simplemente estamos definiendo la estructura de salida deseada y los campos para los que queremos crear los selectores. Paso 5: Generar el nuevo rascador Camoufox Ahora que tenemos los selectores, queremos combinar un modelo Camoufox Scraper ( ) con los selectores para escribir un rascador con la estructura de salida deseada. aprendí que el uso de un modelo de Camoufox Scraper es necesario porque, sin él, el código generado suele ser una alucinación y no funciona. 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"} Eso es todo; ahora solo tenemos que configurar Cursor para ejecutar este servidor MCP y escribir un prompt que utilice sus herramientas. Paso 6: Usar el servidor MCP en Cursor Una de las grandes cosas de Cursor (un IDE alimentado por IA) es su soporte integrado para servidores MCP como extensiones de las capacidades de la IA. Integraremos nuestro servidor MCP recién creado en Cursor para que el asistente de IA pueda usarlo para automatizar tareas de rascado web (como generar selectores XPath para nosotros). Para conectar el servidor en Cursor, siga estos pasos: – 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 vez que se añade el servidor, Puede utilizar las nuevas herramientas automáticamente cuando sea necesario. Cursor’s AI assistant (the “Composer” agent) En la práctica, cuando se pregunta en el compositor, "Obtener el HTML de esta URL y luego escribir los selectores de XPath usando el modelo PLP", el asistente le pedirá la confirmación para ejecutar el La herramienta y luego el una . fetch_page_content generate_xpath Nuestros ensayos Después de unas pocas horas de interacciones con el prompt para entender cómo obtener los datos necesarios de una manera confiable, he encontrado que este hace la mayoría de las tareas que pidió cuando se utiliza con Cloud 3.7 Sonnet (confirmando que es uno de los mejores LLMs para la codificación ) de : como dijo Marco Vinciguerra de ScrapeGraphAI en nuestras últimas entrevistas como dijo Marco Vinciguerra de ScrapeGraphAI en nuestras últimas entrevistas “Fetch la URL @https://www.gucci.com/it/it/ca/women/shoes-for-women-c-women-shoesThen, escriba los selectores XPath usando el modelo PLP. Use el HTML descargado (downloaded_page.html archivo) para escribir los selectores XPATH trabajando.Escribe los selectores en un archivo llamado selectors.txt.Tras, dado los selectores previamente creados, escriba un rascador Camoufox usando el modelo PLP y la URL inicial. Si tienes dudas, lee el archivo selectors.txt para entender cuántos campos y qué selectores tienes que usar. Use el archivo Camoufox_template.py para construir el rascador y personalizar con él los campos en la salida leídos por el modelo PLP.” El cursor abre una pestaña de Camoufox, navega a la URL que pasé, guarda el HTML en un archivo, lo lee, y luego genera selectores XPATH y los guarda en otro archivo. El rascador creado es ejecutable la primera vez, por lo que es técnicamente correcto, y los resultados son bastante buenos. El rascador, sin decir nada sobre el sitio web, pobló correctamente todos los campos, lo que es excelente y más de lo que esperaba de esta prueba. Todavía tengo algunas preocupaciones sobre la fiabilidad de la solución. no obtengo los mismos resultados cada vez que ejecuto la misma prompt, lo que puede ser frustrante porque no sabes cómo arreglar el proceso si no sabes qué esperar de él. La estructura de datos de salida no es la que esperaba, sino la que el asistente encontró en el modelo de rascador Camoufox. En el próximo episodio, continuaremos nuestro viaje para hacer de Cursor nuestro asistente de rascado de web de IA. El artículo es parte de la serie “The Lab” de Pierluigi Vinciguerra. Compruebe su página Substack para obtener más información sobre el rascado web. El artículo es parte de la serie “The Lab” de Pierluigi Vinciguerra. Compruebe su página Substack para obtener más información sobre el rascado web. “El laboratorio”
