このチュートリアルでは、以下のことを学びます：
- Roo Codeとは何か、なぜ現在IDEで最も広く使われているAIコーディングエージェントの一つなのか。
- Roo Codeにウェブインタラクションやデータ抽出機能を持たせることで、さらに便利になる方法。
- Roo CodeをVisual Studio CodeのBright Data Web MCPサーバーと接続し、拡張AIコーディングエージェントを作成する方法。
さっそく見ていきましょう！
Roo Codeとは？
Roo CodeはAIを搭載した自律型コーディングエージェントで、エディタに直接常駐します。具体的には、以下のことが可能です：
- 自然言語でコミュニケーションできるAI搭載のペアプログラマーとして動作します。
- ワークスペースに直接ファイルを読み書きできます。
- ターミナルコマンドの実行
- 組み込みのブラウザ統合により、ブラウザのアクションを自動化。
- 幅広いOpenAI互換またはカスタムAPI/モデルとの統合。
- 様々なモードを通じて、その「個性」と能力を適応させる。
- MCP統合により、サードパーティプロバイダーと接続。
Roo CodeはClineのフォークとして生まれ、オープンソースのVisual Studio Code拡張機能として利用可能です。Roo CodeはClineのフォークとして誕生し、オープンソースのVisual Studio Code拡張機能として提供されている。VS Code内で直接AIを使ってコーディング作業を自動化し、開発ワークフローを強化することができる。
Clineとは異なり、Roo Codeはアカウントを必要としません（ただし、企業向けの追加機能を備えたRoo Cloudプラットフォームが利用可能です）。詳細については、ClineとBright DataのWeb MCPサーバーの統合に関するガイドをご覧ください。
現在、Roo Codeプロジェクトは、GitHubで18k以上のスターを獲得し、Visual Studio Codeマーケットプレイスで750kインストールされています。これは、IDE用のAIコーディングエージェントとして最も広く使われていることを意味します。
Web MCPをRoo Code VS Codeエクステンションに統合する理由
Roo Codeで設定するLLMには、すべての言語モデルに共通する限界があります。LLMは、過去のスナップショットに過ぎない静的なデータに基づいてしか答えを生成することができません。
技術世界の進化の速さを考えると、この限界は無視できない。LLMは簡単に、時代遅れのコーディング・アプローチや非推奨の方法を提案したり、新しく導入された機能を完全に見逃してしまう可能性があります。
では、Roo CodeのAIコーディング・アシスタントに、最新のチュートリアル、ドキュメンテーション・ページ、ガイドを取得し、リアルタイムでそれらから学習する能力を与えることを想像してみてください。これは、ウェブ検索とデータアクセス機能でLLMを拡張するソリューションとRoo Codeを統合することで可能になります。
これはまさに、Bright DataのWeb MCPサーバーにあります。このオープンソースのMCPサーバーは、リアルタイムのウェブインタラクションとデータ収集のための60以上のAI対応ツールを提供しています。
MCPサーバーで最もよく使用されるツールは2つです：
| ツール | ツールの説明 |
|---|---|
scrape_as_markdown |
1つのウェブページURLから高度な抽出オプションを使ってコンテンツをスクレイピングし、結果をMarkdownとして返す。ボット検知やCAPTCHAを回避することができる。 |
サーチエンジン |
Google、Bing、Yandexから検索結果を抽出し、JSONまたはMarkdown形式でSERPデータを返す。 |
さらに、ウェブページと対話し（例：scraping_browser_click）、Amazon、Yahoo Finance、TikTok、LinkedInなど、幅広いウェブサイトから構造化データを収集するための55以上の専用ツールがある。例えば、web_data_amazon_productツールは、有効な商品URLを入力として受け取ることで、Amazonから詳細で構造化された商品情報を取得します。
Bright Data Web MCP + Roo Codeの使用例としては、以下が考えられます：
- ライブのSERPデータを取得し、VS Codeで直接Markdownレポートにコンテキストリンクを挿入する。
- 今書いているコードに基づいたチュートリアルやドキュメントのリクエスト。
- ウェブサイトから新鮮な公開データをスクレイピングし、モッキング、分析、またはさらなる処理のためにローカルに保存する。
それでは、Roo CodeでWeb MCPを実際に使ってみましょう！
Visual Studio CodeでRoo CodeをBright DataのWeb MCPに接続する方法
このガイドセクションでは、Visual Studio CodeにRoo Codeを追加し、Bright DataのWeb MCPと統合する方法を学びます。最終的な結果は、ウェブにアクセスし対話できるAIコーディングエージェントになります。これらの機能により、エージェントはより臨機応変で正確なものとなります。
具体的には、データ検索機能を持つ強化されたRoo Code AIエージェントを構築し、それを使用して以下のことを行います：
- アマゾンの商品ページをリアルタイムでスクレイピングする。
- データをローカルに保存する。
- 収集したデータをロードして処理するPythonスクリプトを作成する。
以下のステップに従って開始してください！
前提条件
このチュートリアルに従うには、以下が必要です：
- Bright Data API キー
- サポートされているLLMプロバイダーのAPIキー（このガイドでは、OpenRouter APIキーを使用します。）
まだ Bright Data API キーをお持ちでない方もご安心ください。次のステップで設定方法を説明します。
生成された出力を実行するには、ローカルにPythonがインストールされている必要があります。
ステップ #1: Visual Studio CodeにRooコードをインストールする
Visual Studio Codeを開きます。そして左サイドバーの “拡張機能 “アイコンをクリックし、”Roo Code “を検索してRoo Code拡張機能を選択します。Roo Code拡張機能タブで “インストール “ボタンを押します：
Roo Codeプロバイダーから初めて拡張機能をインストールする場合、発行元を信頼するかどうか尋ねられます。発行元を信頼しインストールする “をクリックして下さい。
インストールが完了すると、左サイドバーにRoo Codeアイコンが表示されます。それをクリックして拡張機能を開きます：
メモ: Roo Codeアイコンが表示されない場合は、Visual Studio Codeをリロードしてみてください。その他の問題については、公式インストールガイドを参照してください。
完了です！これでRoo CodeがVS Codeで使えるようになりました。
ステップ2: OpenRouter接続のセットアップ
Roo Codeがインストールできたら、次はLLMプロバイダに接続します。Roo Codeは、Anthropic、Claude Code、AWS Bedrock、DeepSeek、Google Gemini、Groq、Hugging Face、LiteLLM、Mistral AI、Ollama、OpenAI、OpenRouter、Requesty、xAI (Grok)など、幅広いプロバイダーに対応しています。
このガイドでは、Roo CodeをOpenRouterに接続し、qwen/qwen3-coder:freeモデルを使用します。この設定は完全に無料です。つまり、資金やクレジットは必要ありません。
注意: 他のプロバイダをご希望の場合、または既に異なるAPIキーをお持ちの場合は、Roo Codeドキュメントの特定の統合ガイドに従ってください。
OpenRouter アカウントを作成し、API キーを取得します。このプロセスに慣れていない場合は、Qwen-Agent のチュートリアルで行ったことをご覧ください。
Roo Codeの拡張パネルで、”OpenRouter “ボタンが表示されるまで下にスクロールします。それをクリックします：
ブラウザウィンドウが開き、OpenRouterアカウントにログインしてRoo Codeを認証するよう促されます。Authorize “を押して次に進みます：
VS Codeに戻り、接続の確認を求められます。Open “をクリックして認証プロセスを完了します：
これがVisual Studio Codeに表示される内容です：
お分かりのように、認証は問題なく行われ、Roo Codeを使用する準備ができました！
デフォルトでは、Roo Code はClaude Opus 4モデル（使用するには OpenRouter アカウントが必要）を使用します。無料モデル（または他のモデル）に切り替えるには、上部メニューの歯車アイコンをクリックします：
設定” タブで、”モデル” ドロップダウンまでスクロールダウンして、設定したいモデルを選択します：
たとえば、qwen/qwen3-coder:free を選択します。qwen/qwen3-coder:free は、コーディングシナリオ用に最適化された、無料で使用できるモデルです。完了したら、”Done” ボタンをクリックして変更を確定します。
素晴らしい！これでRoo CodeはVS Codeに完全にセットアップされました。あとは、MCPとの統合により、ウェブデータの取得とインタラクション機能を持つコーディングエージェントにするだけです。
ステップ#3: Bright DataのWeb MCPをインストールする。
まだの場合は、Bright Dataのアカウントを作成することから始めます。すでにアカウントをお持ちの場合は、ログインしてください。
公式の指示に従ってBright Data APIキーを生成してください。必ず安全な場所に保管してください。ここでは、Admin権限を持つAPIキーを使用していると仮定します。
ターミナルを開き、@brightdata/mcpパッケージ経由でWeb MCPをグローバルにインストールします：
npm install -g @brightdata/mcp以下のBashコマンドで、ローカルのMCPサーバーが動作することを確認する：
API_TOKEN="<YOUR_BRIGHT_DATA_API>" npx -y @brightdata/mcpまたは、Windows PowerShellでも同様です：
Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; npx -y @brightdata/mcp<YOUR_BRIGHT_DATA_API>プレースホルダーを実際のBright Data APIトークンに置き換えます。上記の2つのコマンドは、必要なAPI_TOKEN環境変数を設定し、@brightdata/mcpnpmパッケージ経由でMCPサーバーを起動します。
成功した場合、以下の画像のようなログが表示されるはずです：
最初の起動時に、パッケージは自動的にBright Dataアカウントに2つのデフォルトゾーンを設定します：
mcp_unlocker：mcp_unlocker: Web Unlocker用のゾーンです。mcp_browser：ブラウザAPI用のゾーン。
これら2つのゾーンは、Web MCPが公開するすべてのツールにアクセスするために必要です。
上記のゾーンが作成されたことを確認するには、Bright Dataのダッシュボードにログインします。Proxies & Scraping Infrastructure” ページに移動すると、2つのゾーンが表示されているはずです：
注意: API トークンに Admin 権限がない場合、これらのゾーンは自動的に設定されない可能性があります。この場合、パッケージのGitHubページに記載されているように、ダッシュボードで手動で作成し、環境変数で名前を指定することができます。
デフォルトでは、MCPサーバーはsearch_engineとscrape_as_markdownツールだけを公開しています。
ブラウザの自動化や多数のドメインからの構造化データ抽出のような高度な機能をアンロックするには、Proモードを有効にする必要がある。そのためには、MCPサーバーを起動する前に、PRO_MODE=true環境変数を設定する：
API_TOKEN="<YOUR_BRIGHT_DATA_API>" PRO_MODE="true" npx -y @brightdata/mcpまたはPowerShellで
Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; $env:PRO_MODE="true"; npx -y @brightdata/mcp重要：Proモードを選択すると、60以上のすべてのツールにアクセスできるようになります。一方、Proモードは無料層には含まれず、追加料金が発生します。
完璧です！Web MCPサーバーがあなたのマシンで動作することを確認しました。これからRoo Codeが自動的にサーバーを起動し、サーバーに接続するように設定しますので、サーバープロセスを終了してください。
ステップ#4: Roo CodeをWeb MCPに接続する
Roo CodeエクステンションをBright Data Web MCPに接続します。Roo Codeパネルのトップメニューで “MCPサーバー “オプションを選択します：
MCPサーバー “設定セクションに移動します。ここでは、グローバルMCPサーバー（すべてのプロジェクトで使用可能）またはローカルMCPサーバー（現在のプロジェクトでのみ使用可能）のMCPサーバーを設定できます。
設定手順はほぼ同じなので、”Edit Global MCP “ボタンをクリックしてください。mcp_settings.jsonファイルが開き、空のmcpServersエントリが含まれます：
この設定ファイルで、Bright Data Web MCPに接続するための詳細を指定します。次のコードが含まれていることを確認してください：
{
"mcpServers"：{
"brightData"：{
"command"："npx"、
"args": [
"-y",
"@brightdata/mcp"
],
"env"：{
"API_TOKEN"："<your_bright_data_api_key>"、
"PRO_MODE"："true"
}
}
}
}この構成では
mcpServersオブジェクトは、外部MCPサーバの起動方法をRooコードに伝えます。brightDataエントリは、Web MCPの起動に必要なコマンド(npx)と環境変数を定義します。PRO_MODEはオプションですが、これを有効にすると利用可能なツールのフルセットがアンロックされます。
これが表示されるはずです：
<YOUR_BRIGHT_DATA_API_KEY>プレースホルダーを、先ほど取得したBright Data APIキーに置き換えてください。
この設定により、Roo Codeは前のステップで見た環境変数と同じnpxコマンドを実行するようになります。つまり、Roo CodeはBright Data Web MCPサーバーを起動し、接続することができます。(PRO_MODEの有効化はオプションですが、推奨します)。
mcpServersにbrightDataエントリーを追加すると、Roo CodeはすぐにWeb MCPサーバーに接続し、利用可能なツールを表示します：
PRO_MODE環境変数をtrueに設定したので、Roo Codeは60以上のツールにアクセスできるようになりました。環境変数PRO_MODEをtrueに設定したので、Roo Codeは60以上のツールにアクセスできるようになりました。
完了 “ボタンをクリックすると、Web MCPをRoo Codeに統合することができます。素晴らしい！
ステップ #5: Roo Codeエージェントをテストする
デフォルトでは、Roo Codeはアーキテクトモードで動作し、“経験豊富な技術的リーダーであり、システム設計や実装計画の作成を支援するプランナー “として機能します。
ほとんどのシナリオでは、代わりにAIペアプログラマーとして使いたいでしょう。そのためには、下図のようにRoo CodeをCodeモードに切り替えてください：
次のようなプロンプトで、AIコーディング・エージェントのウェブ・データ検索能力をテストしてください：
https://www.amazon.com/Owala-FreeSip-Insulated-Stainless-BPA-Free/dp/B0F354MWSL/"からデータをスクレイピングし、ローカルの "product.json "ファイルに保存し、Pythonの "script.py "スクリプトを作成し、その内容を読み込んで表示する。これは実際のユースケースをシミュレートしており、分析、視覚化、モッキング、その他のワークフローのためにデータを取得します。
Roo Codeでプロンプトを実行すると、このような結果が表示されるはずです：
上のGIFはスピードアップされていますが、これはステップバイステップで起こることです：
- Roo Codeはタスクを3ステップの計画に分割します。
- Rooコードはタスクを3つのステップに分割します。Amazonの商品データを取得する最善の方法は、Web MCPの
web_data_amazon_productツールを使用することだと判断します。 - スクレイピング・ツールの実行を承認するようプロンプトが表示されます。
- ツールが実行され、Amazon商品データがJSON形式で取得されます。
- データをローカルの
product.jsonファイルに保存するかどうか尋ねられます。 - 承認後、JSONファイルが作成され、入力されます。
- Roo Codeは
product.jsonの内容を読み込んで表示するscript.pyファイルを生成する許可を求めます。 - ファイルは生成されたPythonコードで作成されます。
python script.pyでスクリプトを実行するよう促されます。- スクリプトはエンコーディングの問題で失敗します。
- Roo CodeはUTF-8を扱うようにスクリプトを更新することを提案します。
- 承認後、更新されたスクリプトは正しく実行され、期待通りの結果を出力します。
元のプロンプトが明示的にスクリプトの実行を要求していないにもかかわらず、Roo Codeが積極的にスクリプトの実行を提案したことに注目してください。これは、エージェントが欠陥を検出し、自身の出力を洗練させるのに役立つ。
このフローを完了すると、作業ディレクトリには以下の2つのファイルが含まれるはずです：
├── product.json
└── script.pyVSコードでproduct.jsonを開く：
このファイルには、幻覚や捏造された出力ではなく、本物のアマゾンの製品データが含まれています。特に、このデータはBright Dataがweb_data_amazon_productツール（内部的にAmazon Scraperを活用している）を使って、以下のターゲット商品ページから取得したものである：
注：アマゾンのスクレイピングは、その厳格なボット対策（例えば、悪名高いアマゾンCAPTCHA）のため、悪名高く困難です。標準的なLLMだけではこのタスクを確実に処理することはできません。だからこそ、Roo CodeとBright DataのWeb MCPを組み合わせることで、あなたのコーディングエージェントは他に類を見ないほど強力なものになるのです。
このファイルには、選ばれたLLMによって生成された幻覚やでっち上げのコンテンツではなく、本物のアマゾンのデータが含まれています。具体的には、このデータはBright Dataがweb_data_amazon_productツール（内部的にはAmazon Scraperと呼んでいます）を使って取得したものです。
そして、生成されたscript.pyファイルには、JSON商品データを読み込んで印刷するロジックが含まれています：
上記のPythonスクリプトを
python script.py結果はproduct.jsonから読み込まれた商品データとなります：
これがBright Data + Roo Codeの力です。上記の例は単純なユースケースであることを忘れないでください。Visual Studio Codeの中で、高度なLLM駆動型データワークフローを試してみてください。
これで完了です！これでRoo CodeでのBright DataのMCP統合は完了です。
まとめ
このブログポストでは、Visual Studio CodeでRoo CodeとBright Data Web MCPサーバー（ 現在は無料ティアを提供中！）を接続する方法を紹介しました。その結果、ウェブからデータを取得し、インテリジェントに対話できる、機能豊富なAIコーディングエージェントができました。
私たちは、この強化されたエージェントを使用して、Amazonの商品データにアクセスできるシンプルなPythonスクリプトを生成しました。より複雑なプロジェクトやインスピレーションのために、Web MCPによって公開されるツールは、様々なエージェントのワークフローやシナリオをサポートできることを覚えておいてください。
強力なAIエージェントを構築するには、Bright DataのAIインフラストラクチャで利用可能なあらゆるサービスをご利用ください。
ブライトデータのアカウントを無料で作成し、AI対応ウェブツールの実験を開始してください！
