Bright Data Web MCPとKilo Codeの統合 in VS Code

このチュートリアルでは、次のことを学びます：

Kilo Codeとは何か、なぜVS Codeのための強力なAIコーディングアシスタントなのか。
Bright DataのWeb MCPを介して）Webデータ機能を統合することで、Kilo Codeがさらに便利になる理由。
Kilo CodeとBright DataのWeb MCPをステップバイステップで接続し、ライブウェブアクセスが可能な拡張AIコーディングエージェントを作成する方法。

さあ、始めましょう！

前提条件

以下のものが必要です：

Visual Studio Codeがコンピュータにインストールされていること（最新版を推奨）。
Node.jsとnpmのインストール（Bright Data Web MCPはnpmパッケージとして配布されています）。
Bright DataアカウントとAPIキー
LLMプロバイダーのAPIキー。キロコードは多くのプロバイダーをサポートしています（OpenAI、Anthropicなど）。
(オプション）あなたのマシンにインストールされた Python。これは、テスト中にキロコードが生成するサンプルPythonスクリプトを実行する場合にのみ必要です。

Bright Data APIキーをまだお持ちでない方もご安心ください。その前に、Kilo Codeとは何なのかを見てみましょう。

キロコード（およびキロコードを使ったVSコード）とは？

Kilo Codeは、VS Codeの拡張機能として動作するオープンソースのAIコーディングアシスタントで、ClineやRoo Codeのような人気のあるツールの最高の機能を組み合わせ、独自の拡張機能を追加している。

エディター内でAI開発チームのように動作し、コード生成、リファクタリング、デバッグ、さらには自然言語を使ったタスク自動化までサポートしてくれる。要するに、以下のことができる：

AIペアプログラマーとして動作し、平易な英語でチャットしてコードを計画したり書いたりします。
プロジェクト・ファイルを読み、変更を加え、必要に応じて新しいファイルを作成したり、ターミナル・コマンドを実行する。
例えば、アーキテクト、コーダー、デバッガーの各モードは、計画、コーディング、トラブルシューティングのためにAIの動作をガイドします。
様々なAIモデルプロバイダ（OpenAI、Anthropic、OpenRouter、OllamaのようなローカルLLMなど）と統合して、基礎となるモデルを選択できます。
モデルコンテキストプロトコル（MCP）を介して外部ツールに接続し、Kilo CodeでウェブAPIやカスタムサービスを使用して機能を拡張できます。

Kilo Codeは、他のオープンソースプロジェクト（Roo Codeと Clineエージェントから発展）の基盤の上に構築されていますが、これまでに独自の道を切り開くことに成功しています。Gemini 2.5 Pro、Claude 4 Sonnet & Opus、GPT-5を含む400以上のAIモデルをサポートする一方、外部APIやデータソースへの接続も可能で、ウェブデータ統合のための完璧なプラットフォームとなっている。

ウェブMCPをキロコードに統合する理由

他のAIコーディング・アシスタントと同様、キロ・コードの背後にある大規模言語モデル（LLM）には時代遅れの知識問題がある。

LLMは、基本的に過去のスナップショットである静的なトレーニング・データに基づいてしか答えを生成できない。つまり、AIは最近のフレームワークを見落としたり、非推奨の関数を提案したり、最新のベスト・プラクティスに従わないコードを生成したりする可能性がある。

ここで、Kilo Codeエージェントに、最新のチュートリアル、ドキュメント、例をウェブから取得し、リアルタイムでそれらから学習する能力を与えることを想像してみてください。ウェブ検索とライブデータ抽出を統合することで、Kilo Codeは最新の情報で問題を解決することができます。例えば、新しくリリースされたライブラリのドキュメントや、エラーメッセージに対するStack Overflowの最新の回答を取り込むことができる。

これはまさにBright DataのWeb MCPサーバーが可能にすることです。

Bright DataのWeb MCPサーバーは、強力なモデルコンテキストプロトコルの実装であり、公共のウェブアクセスにオールインワンのソリューションを提供します。

言い換えれば、キロコードのAIがプログラムで制御できる「ウェブブラウザ＋データスクレーパー」のようなものだ。MCPサーバーは、インターネットを検索し、ウェブサイトをナビゲートし、構造化されたデータを抽出するためのツールを公開している。最も一般的に使用されるMCPツールをいくつか紹介しよう：

search_engine：ライブウェブ検索（Google、Bing、またはYandex）を実行し、検索結果（タイトル、スニペット、URL）をJSON/Markdown形式で取得するために使用されます。これにより、AIは関連するウェブページや回答をリアルタイムで見つけることができる。全てのユースケースについて、最適なSERP APIツールの選び方をこちらでご覧ください。
scrape_as_markdown：ボットやCAPTCHAをバイパスするオプション付きで、任意のウェブページのコンテンツを取得し、クリーンなMarkdown形式でテキストを返す。これにより、AIが記事やドキュメント・ページを読み、その情報をタスクに役立てることができます。

Kilo CodeをBright DataのMCPに接続することで、AIコーダーはウェブ上で目と手を使うことができます。ワークフローの一部として検索、クリック、スクレイピングができるようになり、より機知に富んだ正確な作業ができるようになります。次に、この統合の設定方法を説明する。

Visual Studio CodeでKilo CodeをBright DataのWeb MCPに接続する方法

ステップ #1: VS CodeにKilo Codeをインストールする

Kilo Codeのインストールは、VS Code Extensionsマーケットプレイスから簡単に行えます。まずVisual Studio Codeを開き、拡張機能パネルにアクセスします。インストールが完了すると、拡張機能を有効にするためにVS Codeをリロードするよう促されることがあります。VS Codeのサイドバー（通常はインターフェイスの左側）に表示されるKilo Codeアイコンを探してください。

ステップ #2: LLMプロバイダーの設定

Kilo Codeをインストールした状態で、サイドバーのKilo Codeアイコンをクリックしてメインパネルを開きます。インターフェイスはVS Codeウィンドウの左側に表示され、Kilo Codeのすべての機能と設定オプションにアクセスできます。

Kilo CodeはAIモデルにアクセスするための複数の経路を提供し、多様な好みや予算を持つユーザーに柔軟に対応します。

新規ユーザーの場合、最も便利なオプションは、組み込みのクレジットシステムを使用することです。Kilo Codeパネルで「Googleと接続」をクリックし、アカウントを認証する。このプロセスにより、自動的に20ドルの無料クレジットがアカウントに適用され、別途APIキーを必要とせずに400以上のAIモデルにすぐにアクセスできるようになります。
独自のAPIキーを使用したい場合は、キロコードのサイドバーにある歯車のアイコンをクリックし、モデルプロバイダのセクションに移動します。ここでは、Anthropic（Claudeモデル用）、OpenAI（GPTモデル用）、Google（Geminiモデル用）、または任意のOpenRouter互換サービスを含む様々なプロバイダのAPIキーを追加することができます。

モデルプロバイダを設定したら、利用可能なオプションから好みのモデルを設定します。複雑な推論タスクにはGPT-4を、詳細なコード解析にはClaude-3を、マルチモーダル機能にはGeminiを選択することができます。

すべてが正しく動作していることを確認するには、“Hello, can you help me code? “のような簡単なテストメッセージを送信する。AIは迅速に応答し、モデル接続が正しく機能していることを確認します。

ステップ #3: Bright DataのウェブMCPをインストールする

Kilo CodeがAIモデルとセットアップされたので、Webブラウジングとデータ抽出でその機能を拡張することができます。

MCPサーバーをインストールする前に、Bright Data APIトークンを取得する必要があります。brightdata.comにアクセスし、無料アカウントにサインアップします。このアカウントには、最初の3ヶ月間、毎月5,000リクエストの無料リクエストが含まれます。アカウントを作成したら、プロンプトに従ってメールアドレスを確認します。
ログインしたら、アカウント設定にアクセスし、APIトークンを探してコピーしてください。このトークンはMCPサーバーの認証クレデンシャルとなり、次の設定ステップで必要となります。このトークンは、セットアップの過程で参照する必要があるため、安全な場所に保管し、すぐにアクセスできるようにしておいてください。
APIトークンを保護した状態で、ターミナルまたはコマンドプロンプトを開き、Bright Data Web MCPパッケージをシステムにグローバルインストールします。コマンドを実行します：

npm install -g @brightdata/mcp

このグローバルインストールにより、MCPサーバーがシステム全体で利用可能になり、現在のプロジェクトディレクトリに関係なくキロコードからアクセスできるようになります。

インストールが成功したことを確認するには、以下を実行します：

npx @brightdata/mcp --バージョン

バージョン2.5.0以上が表示され、最新バージョンのMCPサーバーが正しくインストールされ、使用できる状態になっていることが確認できます。

ステップ#4: Kilo CodeをWeb MCPに接続する

いよいよKilo Codeを新しくインストールしたBright Data Web MCPサーバーに接続する重要なステップです。Kilo CodeはMCPサーバー接続にSTDIOと SSEの両方のトランスポート方式をサポートしていますが、ここではローカルのパフォーマンスと信頼性を最適化するためにSTDIO方式を使用します。

キロコード・パネルで歯車アイコンをクリックし、MCPサーバー・セクションに移動します。Edit Global MCP “オプションを探し、サーバー接続を定義する設定ファイルを開きます。このファイルはJSON形式で、必要に応じて複数のMCPサーバーを指定できます。

Bright DataのWeb MCPに接続するために以下の設定を追加します：

{
  "mcpServers"：{
    "Bright Data Web"：{
      "command"："npx"、
      "args": ["@brightdata/mcp"]、
      "env"：{
        "API_TOKEN"："your_bright_data_api_token_here"
      },
      "disabled": false、
      "alwaysAllow": ["search_engine", "scrape_as_markdown"]、
      "timeout"：180
    }
  }
}

YOUR_BRIGHT_DATA_API_TOKEN_HERE"は、Bright Dataアカウントからコピーした実際のAPIトークンに置き換えてください。alwaysAllow "配列は、通常の使用中の摩擦を減らすために基本的な検索とスクレイピングツールを事前に承認し、180秒の タイムアウト設定は、低速のウェブスクレイピング操作中の早すぎるタイムアウトを防ぎます。

MCPサーバーの動作をよりコントロールする必要があるユーザーのために、Bright Dataはいくつかの高度な設定オプションを提供しています。この拡張設定は、企業ユーザーや特定の要件を持つユーザーに、さらなる柔軟性を提供します：

{
  "mcpServers"：{
    "Bright Data Web"：{
      "command"："npx"、
      "args": ["@brightdata/mcp"]、
      "env"：{
        "API_TOKEN"："your_bright_data_api_token_here"、
        "RATE_LIMIT"："100/1h",
        "PRO_MODE"："false"、
        "web_unlocker_zone"："optional_custom_zone"、
        browser_zone": "optional_custom_zone"："オプションの_custom_browser_zone"
      },
      "disabled": false、
      「タイムアウト180
    }
  }
}

レート制限機能により、1時間あたり100リクエストの場合は"100/1h"、30分あたり50リクエストの場合は"50/30m"、5秒あたり10リクエストの場合は"10/5s "といったフォーマットでリクエスト頻度を制御することができる。PRO_MODEを "true "に設定すると、60種類すべての高度なツールへのアクセスがアンロックされる。ゾーン設定はオプションであり、主にカスタムプロキシ要件を持つ企業顧客に有用である。

セキュリティを強化し、管理を容易にするために、APIトークンを設定ファイルにハードコードするのではなく、環境変数を使用して保存することを検討してください。プロジェクトルートに.envファイルを作成します：

API_TOKEN=your_actual_api_token_here。
RATE_LIMIT=100/1h
PRO_MODE=false

次に、${VARIABLE_NAME}の形式を使用して、MCP構成でこれらの変数を参照します。このアプローチでは、機密性の高い認証情報を設定ファイルから除外し、開発環境、ステージング環境、本番環境で異なるトークンを簡単に管理できます。

ローカルでのMCPサーバーのインストールが困難なチームコラボレーションやリモート開発環境のために、Bright DataはリモートSSEトランスポートオプションも提供しています：

{
  "mcpServers"：{
    "Bright Data Remote"：{
      "command"："npx"、
      "args": [
        "mcp-remote"、
        "https://mcp.brightdata.com/mcp?token=YOUR_API_TOKEN_HERE"
      ],
      「disabled": false、
      "timeout"：300
    }
  }
}

この構成は、Bright DataのホストされたMCPエンドポイントに直接接続し、同じ機能を提供しながらローカルサーバーのインストールを不要にします。

デフォルトの構成では、Bright Dataの無料ティアを使用しており、search_engineや scrape_as_markdownのような基本的なツールへのアクセスが含まれています。これらのツールは、ほとんどのウェブデータ統合のニーズには十分であり、月間5,000リクエストの許容範囲内で優れた価値を提供します。

PRO_MODEを有効にすると、高度なブラウザ自動化や構造化データ抽出機能を含む60の専門ツールすべてにアクセスできるようになりますが、無料レベルの制限を超えて追加料金が発生する場合があります。

Ctrl+SまたはCmd+Sを使用して設定ファイルを保存したら、VS Codeを完全に再起動して、新しいMCPサーバーが正しくロードされていることを確認します。再起動後、Kilo CodeのMCP設定パネルを確認すると、“Bright Data Web “が “Running “ステータスで表示されているはずです。

ステップ#5: 拡張キロコードエージェントのテスト

キロコードとBright Data Web MCPの統合が完了したら、すべてが正しく動作していることを確認します。

キロコードパネルを開き、MCPサーバー接続がアクティブであることを確認します。Bright Data Webサーバーが正常に動作していることを確認する接続インジケータやステータスメッセージを探します。

スクレイピング機能のより高度なテストには、次のリクエストをお試しください：「CoinGeckoからBitcoinの現在価格を取得する”リクエストライブラリのクイックリファレンスガイドを作成します。このテストはscrape_as_markdownツールを使用し、リアルタイムのドキュメントアクセスのパワーを実証します。

スクレイピング機能に対するツールの承認プロンプトが表示され、CoinGeckoのウェブサイトからコンテンツが抽出され、最後に現在の例と関数のシグネチャを含むクイックリファレンスガイドが生成されます。

高度なユースケースと例

この統合は、AIアシスタントがStack Overflow、ライブAPIドキュメント、および最近のGitHubディスカッションから現在の解決策を取得できるようにすることで、動的な問題解決を可能にします。このKilo CodeとBright Dataの組み合わせを使って、次のようなことができます：

動的APIドキュメントの統合
ライブ市場データ分析
競合分析の自動化

企業チームは、強力なデータ統合によってビジネスインテリジェンスを自動化できます。金融サービスは、「主要取引所の暗号通貨価格を追跡し、取引ダッシュボードを作成する」といったリクエストでリアルタイムの市場データを監視できます。マーケティングチームは、“競合他社の価格ページを監視し、変更をアラートする “と依頼することで、競合分析を自動化できる。

これらのアプリケーションは、日常的なビジネス・タスクを自動化されたAI主導のプロセスに変換し、実用的な洞察を提供します。

トラブルシューティングとヒント

十分に文書化されたセットアップであっても、Kilo CodeとBright DataのWeb MCPを初めて接続する際には、小さな問題に遭遇することがよくあります。しかし、ほとんどの問題は簡単に診断でき、解決できます。

一般的なインストールの問題

インストール後にキロコードパネルが表示されない場合、まず最初に試すべきことはVisual Studio Codeを再起動することです。古いバージョンでは拡張機能が正しくロードされないことがあるため、VS Codeの最新バージョンを実行していることを確認してください。
もう1つのよくあるつまずきの原因は、APIの設定です。LLMプロバイダ・キーを間違って貼り付けたり、アクセスできないモデルを選択したりすると、キロコードは無言で失敗することがあります。APIキーを常に再確認し、”Hello “のような簡単なテストクエリを実行して、モデルが応答していることを確認してください。
MCP側で最も頻繁に発生する問題は、MCPサーバーの接続と認証です。サーバーが“Failed “ステータスを表示している場合は、node --versionで Node.js 18+がインストールされていることを確認し、次の方法でMCPサーバーを再インストールしてください：

npm uninstall -g @brightdata/mcp && npm install -g @brightdata/mcp

認証エラーは一般的にAPIトークンが正しくないことが原因です。コピー時に余分なスペースがないことを確認し、Bright Dataアカウントに利用可能なクォータがあることを確認してください。

Windows ユーザーは別の設定が必要かもしれません:コマンドを "cmd"に、引数を ["/c", "npx", "-y", "@brightdata/mcp"] に置き換えてください。
複雑なサイトでタイムアウトの問題が発生する場合は、タイムアウトを300秒に増やし、JavaScriptを多用するページではプロモードを有効にすることを検討してください。

パフォーマンスの最適化

すべてが機能したら、パフォーマンスを微調整する必要があります。

MCPを呼び出すたびにウェブへのラウンドトリップが発生するため、複数のページをスクレイピングするようなタスクは、静的なコード生成よりも当然時間がかかります。物事を迅速に進めるには、プロンプトを具体的にしましょう。Kilo Codeに “Pythonに関するあらゆることをウェブで検索してください “と頼む代わりに、”Python 3.12の公式リリースノートをウェブで検索してください “と絞り込みます。
一般的なツールを選択的に自動承認することで、セットアップをさらに最適化できます。例えば、"alwaysAllow" を設定します：例えば、"alwaysAllow“:["search_engine", "scrape_as_markdown"] を設定することで、セキュリティを維持しながら摩擦を減らすことができます。
また、ローカル開発にはSTDIOトランスポート（より高速）を、リモート環境にはSSEトランスポート（より信頼できる）を選択する。
リソース使用量に注意してください。ローカルでMCPを実行するということは、あなたのマシンが重い仕事をするということです。大規模なスクレイピングタスク中に速度低下に気づいたら、処理をクラウドにオフロードするBright Dataのホスト型MCPサービスに切り替えることができます。