過去のエピソードでは、 は , we used Firecrawl to scrape the content of this newsletter, a vector DB like Pinecone to store the articles' markdown, and the OpenAI API to retrieve information and attach the context to our prompt to get better answers. このニュースレターのコンテンツをスクラップするために、私たちはFirecrawlを使用し、記事のマークダウンを保存するためにPineconeのようなベクターDB、およびOpenAI APIを使用して情報を取得し、より良い回答を得るために私たちのプロンプトに文脈を添付しました。 ラボシリーズ 「Web Scraping Club」 ラボシリーズ 「Web Scraping Club」 このアプローチには限界があります。コンテキストウィンドウのサイズ(プロンプトに含めることができる情報の量)は限られていますので、答えは常に素晴らしいものではありません。 AIの風景が数ヶ月で変わるので、RAGとPineconeを使用することは古い学校です。 したがって、私はMCPがウェブスクラップにどのように使用されるかを見るためにこの小さな実験を実施しました。 Model Context Protocol (MCP) モデル・コンテキスト・プロトコル(MCP) モデル・コンテキスト・プロトコルとは? THE Anthropicが最初に開発したオープン・スタンダードで、大規模な言語モデル(LLM)が標準化されたインターフェイスを介して外部ツールやデータと相互作用することを可能にします。 AI モデルとデータが存在するシステムの間で、各データソースまたはスキャンツールのためのカスタマイズされた統合を構築するのではなく、開発者はMCP サーバを通じてデータや機能を露出することができます。AI アシスタント(MCP クライアント)はこれらのリソースを一貫して要求することができます。 Model Context Protocol (MCP) universal connector しかし、どうやって機能するのか。 しかし、どうやって機能するのか。 MCPはクライアントサーバーアーキテクチャに従います: ホストアプリケーション(例えば、IDEまたはAIアシスタント)は MCP を実行します。 (Claude, Cursor, etc.) that connects via the MCP protocol to one or more MCP 各サーバーは、ローカルマシンまたはネットワーク上で特定のデータソースまたはツール(データベース、ファイルシステム、またはウェブスクレーパーなど)と接続し、LLMに構造化された文脈またはアクションを提供します。 client servers MCP サーバーは、Expose (GETエンドポイントと同様に読むだけのコンテキストデータ) and (モデルがPOSTエンドポイントに類似して呼び出せるアクションまたは機能) to the LLM. (actions or functions the model can invoke analog to POST endpoints) to the LLM. resources tools 2024年初頭に人類型のオープンソースMCPを導入し、業界全体の採用を奨励する。 独自のAPIへの依存を減らし、AI統合をよりモジュール化し、相互運用可能にする。 common framework for AI-to-tool communication この構造化されたコンテキスト処理は、単純なプロンプトで改善されます。モデルはもはや単にテキストのブロブを受け取るのではなく、リソースを介してデータをロードし、正確に定義された入力/出力でツールを呼び出すことができます。 なぜMCPを使うのか? 以前の投稿でRAGを使用して見たように、問題の1つは、文脈のサイズが制限されているため、ダウンロードした記事をプロンプトに追加することでした。Pineconeで記事をブロックに分割し、OpenAIで作成された概要だけを保存してその長さを減らすように、さまざまなソリューションを試しました。 MCP を使用して、特にこの場合、Cursor IDE 内で使用している場合、HTML を抽出し、Cursor によって読み取ることができ、XPaths を生成するために使用できるファイルに保存するツールを作成できます。 MCPを使用するもう一つの興味深い側面は、私たちがプログラミングとプロンプトエンジニアリングを組み合わせていることです。実際、MCPツールを作成することは、私たちのコードに機能を作成するのと同じです: IDE でプロンプトを作成した後、これは評価され、プロンプトから推測した必要な論点(URL を取得する)で私たちのツールを呼び出すことです。代わりに、ツール自体はプログラミングされた機能です、プロンプトの曖昧さはありませんが、入力があるので、私たちは私たちが期待できる出力を知っています。 最後に、MCPは標準であり、理論的には、サーバーを起動して実行すると、それをサポートするモデルやツールに接続できますが、OpenAIが現在それをサポートしていないという事実は、プロトコルの普及の良い兆候ではありません。 What We're Going to Use MCP 私たちは、私たちのソリューションを実装するために2つの主要な技術を使用します: The そして . MCP Python SDK Camoufox MCP Python SDK は、Python で MCP サーバー (およびクライアント) を構築するための公式なライブラリです. It implements the full MCP specification, handling all the underlying protocol messaging so you can focus on defining the resources and tools you need. MCP Python SDK. この SDK を使用すると、わずか数行のコードで MCP サーバを作成できます。 接続を管理するサーバークラスで、機能をツールまたはリソースとして登録できます。 行動可能なツールとしてモデルに暴露する。 FastMCP @mcp.tool() SDK は、関数の結果をパッケージ化し、一貫した形式で AI クライアントに送信します. 要するに、LLM にコンテキストを供給したり、それらの代わりにタスクを実行したりできる MCP サーバーの設定は簡単です。 Web スクラップでは、ターゲット ページから原色の HTML を取得する (特に、アンチスクラップ対策または重い JavaScript を持つもの) は、戦いの半分です。私は、このようなシナリオのために設計されたオープンソースの隠れたブラウジングツールである Camoufox を使用することに決めました。これは、MCP が私のマシンでローカルに実行されているため、私はプロキシを必要としません。その隠れた機能の上に、私はCamoufox を使用して、MCP ロジックを 0 から構築したいです。 または 彼らはデータを抽出し、ページと相互作用し、私たちの人生を容易にします。 Camoufox for HTML retrieval. ブラウザベースMCPサーバー ハイパーブラウザ 1 ブラウザベースMCPサーバー ハイパーブラウザ 1 Camoufox scraper を書くための MCP サーバーの技術的実装 今、私たちは3つのステップでCamoufoxスクレーパーを書くのに役立つMCPサーバを構築します。 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を必要とします。 Python 3.10+ pip install mcp camoufox THE パッケージには、MCP Python SDK および CLI ツールが含まれています。 ブラウザのバイナリを取得するための追加のステップを必要とする場合があります(例えば、実行 stealth Firefox をダウンロードする - 詳細については Camoufox ドキュメントを参照してください)。これらがインストールされると、あなたはサーバーコードを書く準備ができています。 mcp Camoufox python -m camoufox fetch ステップ2:MCPサーバの初期化 新しい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サーバを設定するのに十分です。 Step 3: Implement HTML Retrieval via 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の簡単なスクレーパーは、Cursor内のプロンプトで送信するURLを開き、HTMLコードをファイルに保存します。 ステップ 4: Template に基づいて XPath Selectors を生成する 私たちが必要とする2番目のツールはHTMLを分析し、私たちがスクラップしたいデータのためのXPathセレクターを生成します。 テンプレート識別子 (どのタイプのページまたは抽出パターンを使用するかを示す) を論点として使用します。 generate_xpaths, たとえば、このタイトルに基づいて、この機能は、適切なXPath表現を生成します。 たとえば、製品リストページのための1つのテンプレートがあります( 複数の製品をリストアップしたページ)と製品詳細ページのための別のページ( (単一の製品の詳細を含むページ) 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スクレーパーを生成する トップ > トップ > トップ > トップ > トップ > トップ > トップ > トップ > トップ > トップ > トップ > トップ > トップ > トップ > トップ > トップ > トップ > トップ > ) 選択器を使用して、望ましい出力構造を持つスクラッパーを書くことにしました. I learned that using a Camoufox Scraper template is necessary because, without it, the code generated is usually a hallucination and does not work. 私は、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"} それはそれで、今はこのMCPサーバを実行するためにCursorを構成し、そのツールを使用するプロンプトを書く必要があります。 ステップ6:Cursor で MCP Server を使用する Cursor(AI駆動型のIDE)の素晴らしい点の1つは、AIの機能の拡張としてMCPサーバーへの内蔵サポートです。我々は、AIアシスタントがWebスクラップタスクを自動化するために使用できるように、Cursorに新しく作成されたMCPサーバーを統合します(私たちのために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) 実際には、コンポーネーターで「この URL から HTML を取得して、テンプレート PLP を使用して XPath セレクターを書く」と尋ねると、アシスタントは実行するための確認を求めます。 ツールとその後 1位 fetch_page_content generate_xpath 私たちのテスト 信頼性の高い方法で必要なデータを取得する方法を理解するためのプロンプトとの数時間の相互作用の後、私はこのプロンプトは、Cloud 3.7 Sonnetで使用されたときに私が要求したほとんどのタスクを実行していることを発見しました(これはコードのための最高のLLMの1つであることを確認します。 ) : ScrapeGraphAIのMarco Vinciguerraが最新のインタビューで述べたように ScrapeGraphAIのMarco Vinciguerraが最新のインタビューで述べたように 「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 for building the scraper and customize with it the fields in output read by the PLP template." Cursor は Camoufox タブを開き、私が渡した URL にアクセスし、ファイルに HTML を保存し、それを読んで、XPATH 選択子を生成し、別のファイルに保存します。 作成されたスクラッパーは初めて実行可能なので、技術的に正しいので、結果はかなり良いです。 スクレーパーは、ウェブサイトについて何も言わずに、このテストから期待していたよりも優れたすべてのフィールドを正しく埋め込んだ。 私は、同じプロンプトを実行するたびに同じ結果を得ることはありません、それはあなたがプロセスを修正する方法を知らないので、失望する可能性があります。 出力データの構造は私が期待していたものではなく、アシスタントがCamoufoxのスクレーパーテンプレートで見つけたものである。 次のエピソードでは、Cursorが私たちのWebスクラップ AIアシスタントになるための旅を続けます。 この記事は、Pierluigi Vinciguerraによる「The Lab」シリーズの一部です。Web Scrapingに関するより多くの知識のための彼のサブスタックページをご覧ください。 この記事は、Pierluigi Vinciguerraによる「The Lab」シリーズの一部です。Web Scrapingに関するより多くの知識のための彼のサブスタックページをご覧ください。 「ラボ」
