このブログ記事で、あなたは学ぶだろう：
- クラインとは何か、なぜコーディング・コミュニティで人気を集めているのか。
- そのAIコーディングエージェントを統合することで、開発体験を次のレベルに引き上げることができる。
- ClineとBright Data Web MCPサーバーを接続し、Webデータ検索ツールでAIコーディングエージェントを構築する方法。
さあ、飛び込もう！
クラインとは？
ClineはVisual Studio Codeの拡張機能で、自律的なAIを搭載したコーディングアシスタントとして機能する。コマンドラインとコードエディターの両方に統合され、開発プロセス全体を通してあなたをサポートします。
Cline VS Codeエクステンションは、基本的なコード補完にとどまらない。プロジェクト構造の分析、コードの生成と編集、ターミナルコマンドの実行、さらにはウェブアプリケーションのデバッグを支援することもできる。
Clineは複数のAI APIをサポートしており、さまざまなモデルやプロバイダーに接続することができます。また、MCP（モデルコンテキストプロトコル）を介してカスタムAIを搭載したツールを追加することで、機能を拡張することもできます。
この記事を書いている時点で、ClineエクステンションはGitHubで48k以上のスターを獲得し、Visual Studio Marketplaceで190万以上のダウンロードを記録している。
なぜクラインエージェントはウェブからデータを抽出する必要があるのか？
Clineに統合されたLLMがいかに強力であっても、すべての言語モデルに共通する制限、すなわち古い知識に直面する。LLMは、過去のスナップショットである静的なデータに基づいてしか答えられない。
技術世界の進化の速さを考えると、それはさらに大きな問題だ。そのため、LLMが時代遅れのコーディング・アプローチや非推奨の方法を提案したり、最近導入された機能を完全に見逃したりすることは珍しくない。
では、ClineのAIコーディングアシスタントに、最新のチュートリアル、ドキュメンテーションページ、ガイドを取得し、それらから学習する能力を与えることを想像してみてください。これは、ウェブ検索とデータアクセス機能でLLMを拡張するソリューションとClineを統合することで可能になります。
これこそがBright Data Web MCPサーバーが提供するものです。このサーバーは、ブライト・データのAIデータ・インフラストラクチャによって、リアルタイムのウェブデータ収集のための60以上のAI対応ツールのコレクションを提供します。
Bright Data Web MCP サーバが公開するツールの完全なリストについては、ドキュメントを参照してください。
その他の使用例としては、以下のようなものが考えられる：
- VS Codeをテキストエディタとして使用している場合、ライブのSERPデータを取得し、Markdownレポートにコンテキストリンクを挿入します。
- あなたが積極的に書いているコードに基づいたチュートリアルやドキュメントを求めること。
- 実際のサイトからその場でデータをスクレイピングし、モッキングやさらなる分析目的でローカルに保存する。
それでは、Bright Data Web MCPサーバーがClineの中で実際に動いているところを見てみましょう。上記のユースケースの1つを見て、この統合が何を可能にするのかを理解しましょう！
クラインのAIコーディング・エージェントにデータ検索機能を追加する方法
ClineをVisual Studio Codeに追加し、Bright Data Web MCPサーバーと統合する方法をご紹介します。このステップバイステップのセクションの結果は、ウェブからデータを取得し、それと対話できるAIコーディングエージェントになります。これにより、エージェントはより正確な結果と、よりスマートなタスクの成果を提供できるようになります。
特に、データ検索機能を備えた強化型クラインAIエージェントを構築し、それを使用して以下のことを行います：
- アマゾンの商品ページをスクレイピングする。
- データをローカルに保存する。
- そのデータをロードして処理するNode.jsスクリプトを作成する。
以下の手順に従ってください！
前提条件
このチュートリアルに従うには
- ローカルにインストールされたNode.js（最新のLTSバージョンをお勧めします。）
- クラインの証言
- Bright Data APIキー
- (オプション）ご希望のLLMのAPIキー（Google Gemini APIキーなど）
Bright Data APIキーやClineアカウントをまだお持ちでない方もご安心ください。次のステップで設定方法をご案内します。
ステップ1：Visual Studio CodeにClineをインストールする
Visual Studio Codeを開き、左サイドバーの拡張機能アイコンをクリックして「cline」を検索し、リストからCline拡張機能を選択します。Cline拡張機能タブで、「インストール」ボタンをクリックします：
Clineの拡張機能を初めてインストールする場合は、発行元を信頼するかどうかを確認するプロンプトが表示されます。Trust Publisher & Install “をクリックしてください：
インストールされると、左サイドバーにクラインのアイコンが表示されます。クリックするとクラインのパネルが開きます：
注：Clineアイコンが表示されない場合は、Visual Studio Codeをリロードしてみてください。その他の問題については、公式のインストールドキュメントのページを参照してください。
素晴らしい！クラインがVSコードにインストールされた。
ステップ2：クライン接続の設定
あなたのクラインのアカウントと先にインストールしたエクステンションを接続する必要があります。そのためには、”Get Started for Free “ボタンをクリックしてください：
ブラウザで以下のページにリダイレクトされます：
サインアップ（すでにアカウントをお持ちの場合はサインイン）すると、VS Codeウィンドウに戻ります：
Visual Studio Codeでは、以下のようなモーダルが表示されます。Open “をクリックして、Clineエクステンションを認証します：
クライン・エクステンションは次のようになるはずだ：
ブラウザでクラインのアカウントに戻ると、デフォルトで0.50ドルの無料クレジットが付いていることに気づくだろう：
クライン経由でプレミアムLLMを使用する予定がある場合は、クレジットの追加を検討してください。(デフォルトの残高では限られたテストしかできないからだ）。
また、お金をかけたくない場合や、独自のLLMプロバイダーを使用したい場合は、APIキーを直接接続することもできます。これを行うには、Clineパネルの歯車アイコンをクリックします。次に、”API Configuration “を選択し、APIキーを貼り付けてLLMインテグレーションを設定します：
上の例では、クラインをgemini-2.5-flashモデルに統合した。gemini-2.5-flashモデルはAPI経由で無料で利用できる。
素晴らしい！ClineはVS Codeで完全にセットアップされ、ウェブスクレイピング機能を持つAIコーディングエージェントの構築を支援する準備が整った。
ステップ#3: Bright Data MCPサーバーのインストール
まだの方は、Bright Dataアカウントを作成してください。すでにお持ちの場合は、ログインしてください。
その後、公式の指示に従ってBright Data API を取得してください。簡単のため、以下の説明では管理者権限でAPIトークンを使用していると仮定しています。
これでBright Data Web MCPサーバーをNode.js環境にグローバルにインストールすることができます：
npm install -g @brightdata/mcp次に、以下のBashコマンドですべてが動作することをテストする：
API_TOKEN="<YOUR_BRIGHT_DATA_API>" npx -y @brightdata/mcpあるいは、Windowsの場合、同等のPowerShellコマンドは次のようになる：
$env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; npx -y @brightdata/mcp上記のコマンドで プレースホルダーを先ほど取得した実際のBright Data APIに置き換えてください。このコマンドは、必要なAPI_TOKEN環境変数を設定し、@brightdata/mcpnpmパッケージを使用してMCPサーバーを起動します。
すべてが正しくセットアップされていれば、ターミナルには次のように表示されるはずだ：
ご覧のように、初めてコマンドを起動すると、@brightdata/mcpパッケージはアカウント内の必要な Bright Data ゾーンを初期化します。具体的には、Web Unlocker用のゾーンと、Scraping Browser API用のゾーンを作成します。この2つのゾーンによって、MCPサーバーが公開するすべてのツールを実行できるようになります。
これを確認するには、Bright Dataのダッシュボードにログインし、“Proxies & Scraping Infrastructure“ページにアクセスしてください。以下のゾーンが自動的に作成されていることが確認できます：
注：管理者権限を持つAPIトークンを使用していない場合は、手動でゾーンを作成する必要があります。詳細なガイダンスについては、公式ドキュメントを参照してください。
素晴らしい！Bright Data Web MCPサーバーは魅力的に機能します。
ステップ#4: Bright Data MCPサーバーにClineを接続する
Clineエクステンションをローカルで動作しているBright Data Web MCPサーバーと統合します。Clineパネルの “MCP Servers “ボタンをクリックします：
Cline MCPサーバーの設定セクションが表示されます。Installed」タブに切り替え、「Configure MCP Servers」ボタンをクリックします：
cline_mcp_setting.jsonファイルがVisual Studio Codeで開きます。そこで、Cline拡張機能が接続できるMCPサーバーを定義できます。Bright Data Web MCPサーバーと統合する場合は、以下のように設定します：
{
"mcpServers": {
"Bright Data": {
"autoApprove": [],
"disabled": false,
"timeout": 300,
"type": "stdio",
"command": "npx",
"args": [
"@brightdata/mcp"
],
"env": {
"API_TOKEN": "<YOUR_BRIGHT_DATA_API>"
}
}
}
}注：詳細は公式GitHub issueを参照のこと。
つまり、mcpServersフィールド内に “Bright Data “設定を追加します。必ず を実際の Bright Data API トークンに置き換えてください。
このように表示されるはずだ：
完璧です！今、”Installed “タブに入ると、Bright Data Web MCPサーバーのエントリーが表示されます。これを展開すると、サポートしているすべてのツールが表示されます：
ここでは、Bright Data Web MCP サーバーとそのツールを設定できます。このワークフローでは、デフォルトの設定で問題ありません。
詳しくは公式ドキュメントをご覧ください。
素晴らしい！ClineエクステンションがBright Data Web MCPサーバーに接続し、そのツールを利用できるようになりました。
ステップ5：クラインAIエージェントの活用
Bright Data Web MCP サーバーに接続された Cline AI コーディングエージェントを Visual Studio Code でテストする準備ができました。
まずクラインを開きます。次に、右側の矢印をクリックして「自動承認設定」メニューにアクセスします。メニューの中の “Use MCP Servers “にチェックを入れ、設定されたMCPサーバーへの自動接続を許可します：
この設定を有効にすると、クラインは許可を求めずに自動的にMCPサーバーに接続する。ツールを使用する前にプロンプトが表示されるので、それで十分でしょう。
以下のようなプロンプトで、AIコーディングエージェントのデータアクセス機能をテストする：
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.これは、潜在的な実世界のシナリオを記述したもので、分析、モッキング、テストのためのデータ収集に役立つ。
クラインでプロンプトを実行すると、以下のようなインタラクションが表示されるはずだ：
上のGIFはスピードアップされているが、これが起こったことだ：
- Clineエクステンションは、設定したLLM（例えば
gemini-2.5-flash）にプロンプトを送信する。 - LLMは、その仕事に適したMCPツール、つまり
web_data_amazon_productを特定する。 - プロンプトからアマゾンの製品URLを使用して、Bright Data MCP経由でそのツールを実行する許可を求めます（つまり、
https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/）。 - 承認すると、Bright Dataサーバー上でスクレイピングタスクが開始されます。
- その後、クラインはタスク結果へのアクセス許可を求める。
- 舞台裏では、Bright Dataがスクレイピングタスクを実行し、ClineがJSON形式で実際の商品データを受け取る。これがMCPツールの出力で、Clineによって表示される。
data.jsonファイルにデータを保存する許可を求められます。- 承認後、ファイルが作成され、入力される。
- JSONコンテンツを読み込んで印刷するための
index.jsスクリプトを作成するよう促されます。 - 承認されると、ファイルが生成される。
タスクが完了すると、プロジェクトにはこれら2つのファイルが含まれます：
data.jsonには、Bright DataのAmazonスクレイパーによって取得されたJSON形式のAmazon商品データが格納されます：
index.js：そのコンテンツをロードして表示するNode.jsロジックを含みます：
生成されたindex.jsスクリプトを実行する：
node index.jsターミナルには、製品データが印刷されているはずです：
JSONファイルに含まれるデータは、オリジナルのアマゾンの商品ページのデータと一致するため、ワークフローは完璧に機能した：
data.jsonは、LLMからの幻覚的なコンテンツではなく、実際にスクレイピングされたデータを保存していることに注意してほしい。また、アマゾンの厳しいボット対策システム（悪名高いアマゾンCAPTCHAのような）を考えると、アマゾンをスクレイピングすることは並大抵のことではないことを覚えておいてほしい。
これがBright Data + Clineのパワーであり、上記のものは基本的なユースケースに過ぎません。さらに多くのプロンプトを試し、Visual Studio Codeの中で、高度なLLM主導のデータワークフローを探求することができます。
出来上がり！Bright DataのMCP統合とCline AIコーディングエージェントを使用したシームレスなウェブデータ検索をご覧ください。
結論
この記事では、ClineとBright Data Web MCPサーバーを統合し、ウェブにアクセスできるAIコーディングエージェントを構築する方法を学びました。これは、ClineのMCP統合のサポートのおかげで可能になりました。
これは単純な例であることに注意してください。より高度なエージェントを構築するには、Bright Data Web MCPサーバで利用可能なあらゆるツールを検討することをお勧めします。これらのツールは、AIを活用したデータのユースケースのほとんどをサポートすることができます。
無料のBright Dataアカウントを作成し、AI対応のウェブデータツールの検索を開始しましょう！
