--- title: "ブライトデータのMCPサーバーを使ったClineでのウェブスクレイピング" slug: web-scraping-in-cline-with-bright-data date: 2025-08-24T10:57:48+00:00 modified: 2025-11-04T08:46:53+00:00 permalink: https://brightdata.jp/blog/ai/web-scraping-in-cline-with-bright-data type: blog --- [ ブログ ](https://brightdata.jp/blog "ブログ") / [AI](https://brightdata.jp/blog/ai) [AI](https://brightdata.jp/blog/ai) # ブライトデータのMCPサーバーを使ったClineでのウェブスクレイピング Bright Data MCPを統合することで、Cline AIコーディングエージェントのWebスクレイピング機能をアンロックし、VS Codeでよりスマートなデータ駆動型開発を可能にします。 2 分読 [ ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) ](https://brightdata.com/blog/authors/antonello-zanini) [Antonello Zanini Technical Writer ](https://brightdata.com/blog/authors/antonello-zanini) ![Cline × Bright Data MCP](https://media.brightdata.jp/2025/07/Cline%E2%80%AF%C3%97%E2%80%AFBright%E2%80%AFData-MCP.png) このブログ記事で、あなたは学ぶだろう： - クラインとは何か、なぜコーディング・コミュニティで人気を集めているのか。 - そのAIコーディングエージェントを統合することで、開発体験を次のレベルに引き上げることができる。 - ClineとBright Data MCPサーバーを接続し、Webデータ検索ツールでAIコーディングエージェントを構築する方法。 さあ、飛び込もう！ ## クラインとは？ [Clineは](https://cline.bot/)Visual Studio Codeの拡張機能で、自律的なAIを搭載したコーディングアシスタントとして機能する。コマンドラインとコードエディターの両方に統合され、開発プロセス全体を通してあなたをサポートします。 Cline VS Codeエクステンションは、基本的なコード補完にとどまらない。プロジェクト構造の分析、コードの生成と編集、ターミナルコマンドの実行、さらにはウェブアプリケーションのデバッグを支援することもできる。 Clineは複数のAI APIをサポートしており、さまざまなモデルやプロバイダーに接続することができます。また、MCP[（モデルコンテキストプロトコル](https://www.anthropic.com/news/model-context-protocol)）を介してカスタムAIを搭載したツールを追加することで、機能を拡張することもできます。 この記事を書いている時点で、Clineエクステンションは[GitHubで48k以上のスターを](https://github.com/cline/cline)獲得し、[Visual Studio Marketplaceで190万以上のダウンロードを](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev)記録している。 ## なぜクラインエージェントはウェブからデータを抽出する必要があるのか？ Clineに統合されたLLMがいかに強力であっても、すべての言語モデルに共通する制限、すなわち古い知識に直面する。LLMは、過去のスナップショットである[静的なデータに基づいてしか](/blog/ウェブデータ/llm-training-data)答えられない。 技術世界の進化の速さを考えると、それはさらに大きな問題だ。そのため、LLMが時代遅れのコーディング・アプローチや非推奨の方法を提案したり、最近導入された機能を完全に見逃したりすることは珍しくない。 では、ClineのAIコーディングアシスタントに、最新のチュートリアル、ドキュメンテーションページ、ガイドを取得し、それらから学習する能力を与えることを想像してみてください。これは、ウェブ検索とデータアクセス機能でLLMを拡張するソリューションとClineを統合することで可能になります。 これこそが[Bright Data MCPサーバーが](/ai/mcp-server)提供するものです。このサーバーは、[ブライト・データのAIデータ・インフラストラクチャによって](/ai)、リアルタイムのウェブデータ収集のための60以上のAI対応ツールのコレクションを提供します。 Bright Data MCP サーバが公開するツールの完全なリストについては、[ドキュメントを参照してください](https://github.com/brightdata-com/brightdata-mcp/blob/main/assets/Tools.md)。 その他の使用例としては、以下のようなものが考えられる： - VS Codeをテキストエディタとして使用している場合、ライブのSERPデータを取得し、Markdownレポートにコンテキストリンクを挿入します。 - あなたが積極的に書いているコードに基づいたチュートリアルやドキュメントを求めること。 - 実際のサイトからその場でデータをスクレイピングし、モッキングやさらなる分析目的でローカルに保存する。 それでは、Bright Data MCPサーバーがClineの中で実際に動いているところを見てみましょう。上記のユースケースの1つを見て、この統合が何を可能にするのかを理解しましょう！ ## クラインのAIコーディング・エージェントにデータ検索機能を追加する方法 ClineをVisual Studio Codeに追加し、Bright Data MCPサーバーと統合する方法をご紹介します。このステップバイステップのセクションの結果は、ウェブからデータを取得し、それと対話できるAIコーディングエージェントになります。これにより、エージェントはより正確な結果と、よりスマートなタスクの成果を提供できるようになります。 特に、データ検索機能を備えた強化型クラインAIエージェントを構築し、それを使用して以下のことを行います： 1. アマゾンの商品ページをスクレイピングする。 2. データをローカルに保存する。 3. そのデータをロードして処理するNode.jsスクリプトを作成する。 以下の手順に従ってください！ ### 前提条件 このチュートリアルに従うには - ローカルにインストールされたNode.js（[最新のLTSバージョンを](https://nodejs.org/en/download)お勧めします。） - [クラインの証言](https://app.cline.bot/) - [Bright Data APIキー](https://docs.brightdata.com/api-reference/authentication#generating-an-api-key%3A) - (オプション）ご希望のLLMのAPIキー（[Google Gemini APIキーなど）](https://ai.google.dev/gemini-api/docs/api-key) Bright Data APIキーやClineアカウントをまだお持ちでない方もご安心ください。次のステップで設定方法をご案内します。 ### ステップ1：Visual Studio CodeにClineをインストールする Visual Studio Codeを開き、左サイドバーの拡張機能アイコンをクリックして「cline」を検索し、リストから[Cline拡張機能を](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev)選択します。Cline拡張機能タブで、「インストール」ボタンをクリックします： ![インストール」ボタンをクリックして、VS CodeにClineをインストールする。](https://media.brightdata.com/2025/07/Clicking-the-Install-button-to-install-Cline-in-VS-Code-1-1024x608.png)Clineの拡張機能を初めてインストールする場合は、発行元を信頼するかどうかを確認するプロンプトが表示されます。Trust Publisher & Install “をクリックしてください： ![](https://media.brightdata.com/2025/07/image-116-1024x608.png)インストールされると、左サイドバーにクラインのアイコンが表示されます。クリックするとクラインのパネルが開きます： ![VSコードで活性化されたクライン](https://media.brightdata.com/2025/07/image-117-1024x608.png)**注**：Clineアイコンが表示されない場合は、Visual Studio Codeをリロードしてみてください。その他の問題については、[公式のインストールドキュメントのページを](https://docs.cline.bot/getting-started/installing-cline)参照してください。 素晴らしい！クラインがVSコードにインストールされた。 ### ステップ2：クライン接続の設定 あなたのクラインのアカウントと先にインストールしたエクステンションを接続する必要があります。そのためには、”Get Started for Free “ボタンをクリックしてください： ![無料で始める」ボタンをクリックする](https://media.brightdata.com/2025/07/image-118-462x1024.png)ブラウザで以下のページにリダイレクトされます： ![クラインのログイン／アカウント作成ページ](https://media.brightdata.com/2025/07/The-Cline-login-and-account-creation-page-1-1024x547.png)サインアップ（すでにアカウントをお持ちの場合はサインイン）すると、VS Codeウィンドウに戻ります： ![クラインのVSコードへのリダイレクトページ](https://media.brightdata.com/2025/07/image-119-1024x547.png)Visual Studio Codeでは、以下のようなモーダルが表示されます。Open “をクリックして、Clineエクステンションを認証します： ![開く」をクリックしてクラインのエクステンションを認証する](https://media.brightdata.com/2025/07/image-120-1024x461.png)クライン・エクステンションは次のようになるはずだ： ![VSコードのクライン拡張パネル](https://media.brightdata.com/2025/07/image-121-417x1024.png)ブラウザでクラインのアカウントに戻ると、デフォルトで0.50ドルの無料クレジットが付いていることに気づくだろう： ![クラインのデフォルト・クレジット](https://media.brightdata.com/2025/07/image-122-1024x544.png)クライン経由でプレミアムLLMを使用する予定がある場合は、クレジットの追加を検討してください。(デフォルトの残高では限られたテストしかできないからだ）。 また、お金をかけたくない場合や、独自のLLMプロバイダーを使用したい場合は、APIキーを直接接続することもできます。これを行うには、Clineパネルの歯車アイコンをクリックします。次に、”API Configuration “を選択し、APIキーを貼り付けてLLMインテグレーションを設定します： ![クラインのLLMを設定する](https://media.brightdata.com/2025/07/image-123-660x1024.png)上の例では、クラインを[`gemini-2.5-flash`モデルに](https://cloud.google.com/vertex-ai/generative-ai/docs/models/gemini/2-5-flash)統合した。[`gemini-2.5-flash`](https://cloud.google.com/vertex-ai/generative-ai/docs/models/gemini/2-5-flash)モデルはAPI経由で無料で利用できる。 素晴らしい！ClineはVS Codeで完全にセットアップされ、ウェブスクレイピング機能を持つAIコーディングエージェントの構築を支援する準備が整った。 ### ステップ#3: Bright Data MCPサーバーのインストール まだの方は、[Bright Dataアカウントを作成して](/?hs_signup=1)ください。すでにお持ちの場合は、ログインしてください。 その後、[公式の指示に従って](https://docs.brightdata.com/api-reference/authentication#generating-an-api-key%3A)Bright Data API を取得してください。簡単のため、以下の説明では管理者権限でAPIトークンを使用していると仮定しています。 これで[Bright Data MCPサーバーを](https://github.com/brightdata/brightdata-mcp)Node.js環境にグローバルにインストールすることができます： ```none npm install -g @brightdata/mcp ``` 次に、以下のBashコマンドですべてが動作することをテストする： ```none API_TOKEN="" npx -y @brightdata/mcp ``` あるいは、Windowsの場合、同等のPowerShellコマンドは次のようになる： ```none $env:API_TOKEN=""; npx -y @brightdata/mcp ``` 上記のコマンドで ``プレースホルダーを先ほど取得した実際のBright Data APIに置き換えてください。このコマンドは、必要な`API_TOKEN`環境変数を設定し、[`@brightdata/mcp`](https://www.npmjs.com/package/@brightdata/mcp)npmパッケージを使用してMCPサーバーを起動します。 すべてが正しくセットアップされていれば、ターミナルには次のように表示されるはずだ： ![Bright Data MCP サーバーの起動ログ](https://media.brightdata.com/2025/07/image-124-1024x157.png)ご覧のように、初めてコマンドを起動すると、`@brightdata/mcp`パッケージはアカウント内の必要な Bright Data ゾーンを初期化します。具体的には、[Web Unlocker](/products/web-unlocker)用のゾーンと、[Scraping Browser API](/products/scraping-browser)用のゾーンを作成します。この2つのゾーンによって、MCPサーバーが公開するすべてのツールを実行できるようになります。 これを確認するには、Bright Dataのダッシュボードにログインし、[“Proxies & Scraping Infrastructure](/cp/zones)“ページにアクセスしてください。以下のゾーンが自動的に作成されていることが確認できます： ![ブライトデータのダッシュボードに新しいゾーンを作成](https://media.brightdata.com/2025/07/image-125-1024x539.png)**注**：管理者権限を持つAPIトークンを使用していない場合は、手動でゾーンを作成する必要があります。[詳細なガイダンスについては、公式ドキュメントを](https://github.com/brightdata/brightdata-mcp?tab=readme-ov-file#-account-setup)参照してください。 素晴らしい！Bright Data MCPサーバーは魅力的に機能します。 ### ステップ#4: Bright Data MCPサーバーにClineを接続する Clineエクステンションをローカルで動作しているBright Data MCPサーバーと統合します。Clineパネルの “MCP Servers “ボタンをクリックします： ![クラインの右上メニューの「MCPサーバー」をクリック](https://media.brightdata.com/2025/07/image-126.png)Cline MCPサーバーの設定セクションが表示されます。Installed」タブに切り替え、「Configure MCP Servers」ボタンをクリックします： ![MCPサーバーの設定」ボタンをクリックする。](https://media.brightdata.com/2025/07/image-127.png)`cline_mcp_setting.json`ファイルがVisual Studio Codeで開きます。そこで、Cline拡張機能が接続できるMCPサーバーを定義できます。Bright Data MCPサーバーと統合する場合は、以下のように設定します： ```none { "mcpServers": { "Bright Data": { "autoApprove": [], "disabled": false, "timeout": 300, "type": "stdio", "command": "npx", "args": [ "@brightdata/mcp" ], "env": { "API_TOKEN": "" } } } } ``` **注**：詳細は[公式GitHub issueを参照の](https://github.com/cline/mcp-marketplace/issues/263)こと。 つまり、`mcpServers`フィールド内に “Bright Data “設定を追加します。必ず ``を実際の Bright Data API トークンに置き換えてください。 このように表示されるはずだ： ![MCPサーバー接続のJSONコード](https://media.brightdata.com/2025/07/image-128-1024x451.png)完璧です！今、”Installed “タブに入ると、Bright Data MCPサーバーのエントリーが表示されます。これを展開すると、サポートしているすべてのツールが表示されます： ![Bright Data MCPサーバーに接続](https://media.brightdata.com/2025/07/image-129-715x1024.png)ここでは、Bright Data MCP サーバーとそのツールを設定できます。このワークフローでは、デフォルトの設定で問題ありません。 詳しくは[公式ドキュメントをご覧](https://docs.brightdata.com/api-reference/MCP-Server)ください。 素晴らしい！ClineエクステンションがBright Data MCPサーバーに接続し、そのツールを利用できるようになりました。 ### ステップ5：クラインAIエージェントの活用 Bright Data MCP サーバーに接続された Cline AI コーディングエージェントを Visual Studio Code でテストする準備ができました。 まずクラインを開きます。次に、右側の矢印をクリックして「自動承認設定」メニューにアクセスします。メニューの中の “Use MCP Servers “にチェックを入れ、設定されたMCPサーバーへの自動接続を許可します： ![設定でMCPサーバーの使用をオンにする](https://media.brightdata.com/2025/07/image-130-725x1024.png)この設定を有効にすると、クラインは許可を求めずに自動的にMCPサーバーに接続する。ツールを使用する前にプロンプトが表示されるので、それで十分でしょう。 以下のようなプロンプトで、AIコーディングエージェントのデータアクセス機能をテストする： ```none Scrape data from "https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/", save it to a local data.json file, and create a Node.js index.js script to load and print its contents. ``` これは、潜在的な実世界のシナリオを記述したもので、分析、モッキング、テストのためのデータ収集に役立つ。 クラインでプロンプトを実行すると、以下のようなインタラクションが表示されるはずだ： ![あなたが見るはずの交流](https://media.brightdata.com/2025/07/image-131-1024x607.png)上のGIFはスピードアップされているが、これが起こったことだ： 1. Clineエクステンションは、設定したLLM（例えば`gemini-2.5-flash`）にプロンプトを送信する。 2. LLMは、その仕事に適したMCPツール、つまり[`web_data_amazon_productを`](https://github.com/brightdata/brightdata-mcp/blob/main/assets/Tools.md)特定する。 3. プロンプトからアマゾンの製品URLを使用して、Bright Data MCP経由でそのツールを実行する許可を求めます（つまり、`https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/）。` 4. 承認すると、Bright Dataサーバー上でスクレイピングタスクが開始されます。 5. その後、クラインはタスク結果へのアクセス許可を求める。 6. 舞台裏では、Bright Dataがスクレイピングタスクを実行し、ClineがJSON形式で実際の商品データを受け取る。これがMCPツールの出力で、Clineによって表示される。 7. `data.json`ファイルにデータを保存する許可を求められます。 8. 承認後、ファイルが作成され、入力される。 9. JSONコンテンツを読み込んで印刷するための`index.js`スクリプトを作成するよう促されます。 10. 承認されると、ファイルが生成される。 タスクが完了すると、プロジェクトにはこれら2つのファイルが含まれます： ![クラインがタスクを終了した後のフォルダ内のファイル](https://media.brightdata.com/2025/07/image-132.png)`data.jsonには`、[Bright DataのAmazonスクレイパーによって](/products/web-scraper/amazon)取得されたJSON形式のAmazon商品データが格納されます： ![スクレイピングされたアマゾンのページのデータ](https://media.brightdata.com/2025/07/image-133-1024x584.png)`index.js`：そのコンテンツをロードして表示するNode.jsロジックを含みます： ![](https://media.brightdata.com/2025/07/image-134-1024x584.png)生成された`index.js`スクリプトを実行する： ```none node index.js ``` ターミナルには、製品データが印刷されているはずです： ![](https://media.brightdata.com/2025/07/image-135-1024x433.png)JSONファイルに含まれるデータは、オリジナルのアマゾンの商品ページのデータと一致するため、ワークフローは完璧に機能した： ![](https://media.brightdata.com/2025/07/image-136-1024x549.png)`data.jsonは`、LLMからの幻覚的なコンテンツではなく、実際にスクレイピングされたデータを保存していることに注意してほしい。また、アマゾンの厳しいボット対策システム（悪名高い[アマゾンCAPTCHAの](/blog/ウェブデータ/bypass-amazon-captcha)ような）を考えると、アマゾンをスクレイピングすることは並大抵のことではないことを覚えておいてほしい。 これがBright Data + Clineのパワーであり、上記のものは基本的なユースケースに過ぎません。さらに多くのプロンプトを試し、Visual Studio Codeの中で、[高度なLLM主導のデータワークフローを](/ai/web-access)探求することができます。 出来上がり！Bright DataのMCP統合とCline AIコーディングエージェントを使用したシームレスなウェブデータ検索をご覧ください。 ## 結論 この記事では、ClineとBright Data MCPサーバーを統合し、ウェブにアクセスできるAIコーディングエージェントを構築する方法を学びました。これは、ClineのMCP統合のサポートのおかげで可能になりました。 これは単純な例であることに注意してください。より高度なエージェントを構築するには、[Bright Data MCPサーバで](/ai/mcp-server)利用可能なあらゆるツールを検討することをお勧めします。これらのツールは、AIを活用したデータのユースケースのほとんどをサポートすることができます。 無料のBright Dataアカウントを作成し、AI対応のウェブデータツールの検索を開始しましょう！ お問い合わせ無料トライアル![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg) 目次 Data for AI Supercharge your AI with instant and reliable access to web data. No blockers. No hassle. Talk to an expert Bright Data MCP Get started with Bright Data’s Web MCP Server today with 5000 free monthly requests and unlock your AI’s full potential. Start free now [ ](https://news.ycombinator.com/submitlink?t=%E3%83%96%E3%83%A9%E3%82%A4%E3%83%88%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AEMCP%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9FCline%E3%81%A7%E3%81%AE%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0&u=https://brightdata.jp/blog/ai/web-scraping-in-cline-with-bright-data) [ ](https://www.linkedin.com/shareArticle?mini=true&title=%E3%83%96%E3%83%A9%E3%82%A4%E3%83%88%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AEMCP%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9FCline%E3%81%A7%E3%81%AE%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0&url=https://brightdata.jp/blog/ai/web-scraping-in-cline-with-bright-data) [ ](http://www.reddit.com/submit?title=%E3%83%96%E3%83%A9%E3%82%A4%E3%83%88%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AEMCP%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9FCline%E3%81%A7%E3%81%AE%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0&url=https://brightdata.jp/blog/ai/web-scraping-in-cline-with-bright-data) ## あなたは下記にもご興味がおありかもしれません [ ![OpenHuman with Bright Data](https://media.brightdata.jp/2026/09/OpenHuman-with-Bright-Data.png) ](https://brightdata.jp/blog/ai/openhuman-with-bright-data "Bright Data CLIを通じたOpenHumanにおける本番対応ウェブアクセス") [AI ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Bright Data CLIを通じたOpenHumanにおける本番対応ウェブアクセス Bright Data CLIをOpenHumanに統合して、AIエージェント向けの本番対応ウェブアクセスとデータ収集を実現します。 09-Sep-2026 3 分読 ](https://brightdata.jp/blog/ai/openhuman-with-bright-data) [ ![Multimodal Web Scraping with MiniMax](https://media.brightdata.jp/2026/09/Multimodal-Web-Scraping-with-MiniMax.png) ](https://brightdata.jp/blog/%e3%82%a6%e3%82%a7%e3%83%96%e3%83%87%e3%83%bc%e3%82%bf/multimodal-web-scraping-with-minimax "MiniMaxによるマルチモーダルウェブスクレイピング") [ウェブデータ ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### MiniMaxによるマルチモーダルウェブスクレイピング Bright Data Web UnlockerとMiniMax M3ビジョンを組み合わせて、画像やウェブページのスクリーンショットから構造化データを抽出します。 09-Sep-2026 1 分読 ](https://brightdata.jp/blog/%e3%82%a6%e3%82%a7%e3%83%96%e3%83%87%e3%83%bc%e3%82%bf/multimodal-web-scraping-with-minimax) [ ![The 10 Best CLI Tools for Codex in 2026](https://media.brightdata.jp/2026/08/The-10-Best-CLI-Tools-for-Codex-in-2026.png) ](https://brightdata.jp/blog/ai/best-cli-tools-for-codex "2026年版 Codex向けCLIツール10選 – テスト＆ランキング") [AI ![Daniel Shashko](https://media.brightdata.jp/2022/04/Daniel-Shashko-2-50x50.png) Daniel Shashko Web Data & AI Expert ### 2026年版 Codex向けCLIツール10選 – テスト＆ランキング Codexをより速く、より有能にする10のCLIツール。サンドボックス内から実際のウェブアクセスを提供するBright Data CLIから始まります。 06-Sep-2026 4 分読 ](https://brightdata.jp/blog/ai/best-cli-tools-for-codex)