Claude Code × Bright Data Web MCP 連携チュートリアル

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

Claude Codeとは何か、なぜ人気の高いCLIコーディングエージェントなのか
ウェブ操作とデータ抽出を組み込んでAIコーディングエージェントをさらに強化する方法
Claude CodeとBright Data Web MCPサーバーを連携し、よりパワフルなコーディングエージェントを作る手順

Claude Codeとは？

Claude CodeはAnthropic社が開発したコマンドラインツールで、ターミナルから直接Claudeモデルの力を引き出せます。プロジェクトのコンテキスト理解やコード生成、Git操作、テスト自動化などAIペアプログラマーとして機能します。

主な特徴：

エージェント型コーディング：複雑なタスクも分解して実行
多様なツールとの連携：外部API／各種サービスと統合
コード・リポジトリの深い理解
指示に従ってコード生成・リファクタ・バグ修正
テスト・リンティング・品質チェックも自動
Git連携によるコミットやPR作成も省力化

Claude Codeは、GitHubスター3万超・週500万DLを誇る超人気AIコーディングエージェントです。

なぜ“ウェブアクセス＋新鮮データ”が重要なのか

Claude Codeは高性能なLLMですが、他のLLMと同様「トレーニング時点の知識」しか持ちません。
開発やリサーチ分野では“いま”の情報へのアクセスが不可欠です。

もしClaude Codeに

最新チュートリアルやドキュメントの自動取り込み
コード作成中にWebガイドを検索・引用
動的なウェブページもローカルファイル同様に探索できる機能
が加われば、はるかに強力なエージェントになります。

それを実現できるのがBright Data Web MCPです。

Bright Data Web MCPでClaude Codeを拡張

Bright DataのWeb MCP（Multi-Channel Platform）は、60種以上のAI対応Webツールへのアクセスを可能にするプラットフォームです。

機能例：

リアルタイムの検索結果やAPIドキュメントの取得
最新チュートリアルやリファレンスの自動収集
ウェブデータのライブスクレイピング・分析・保存

これにより、Claude Codeは生きたWebデータを自在に使いこなす本格的なAIコーディングエージェントへ進化します。

連携のステップ概要

1. Claude Codeのインストールと初期セットアップ

npm install -g @anthropic-ai/claude-code
claude

認証・テーマ選択・APIキー入力の初期設定を進めます。

2. Bright Data Web MCPの用意

無料アカウント作成後、APIキーを発行。
推奨：管理権限APIトークンを用意

npm install -g @brightdata/mcp
API_TOKEN="<YOUR_BRIGHT_DATA_API>" npx -y @brightdata/mcp

3. Claude CodeからWeb MCPを利用できるように設定

使用する認証の種類（”Claude account with subscription” または “Anthropic Console account”）を選択します。この例では、オプション 2 を選択したと仮定しますが、手順はどちらも同様です。

次のページでは、Anthropic ConsoleアカウントにClaude Codeを接続するよう求められます：

claude mcp add brightData --env API_TOKEN=<YOUR_BRIGHT_DATA_API_KEY> --env PRO_MODE=true -- npx -y @brightdata/mcp

すると、Claude Code は自動的にその API キーを設定ファイルに保存するので、今後はログインしたままになります。

カレントディレクトリでのクロードコードの実行を信頼するかどうかを尋ねるプロンプトが表示されるはずです：

肯定的なオプションを選択すると、Claude Code CLI に完全にアクセスできるようになります：

refactor "を試す矩形の中に、コードエージェントに渡すプロンプトを書くことができます。

素晴らしい！これでClaude Codeのセットアップが完了し、すぐに使えるようになりました。

ステップ2: Bright DataのWeb MCPを使い始める
まだアカウントをお持ちでない場合は、Bright Dataのアカウントを作成してください。すでにアカウントをお持ちの場合は、ログインしてください。

次に、公式の指示に従ってBright Data APIキーを生成してください。簡単のため、このチュートリアルでは、Admin 権限を持つ API キーを使用することを想定しています。

以下のコマンドを使用して、@brightdata/mcpパッケージ経由で Web MCP をグローバルにインストールします：

npm install -g @brightdata/mcp
次に、以下のBashコマンドでサーバーが動作することをテストします：

API_TOKEN="" npx -y @brightdata/mcp
または、Windows PowerShellでは、同等のコマンドは次のとおりです：

Env:API_TOKEN=""; npx -y @brightdata/mcp
を、先ほど生成した実際のAPIトークンに置き換えてください。どちらのコマンドも、必要なAPI_TOKEN環境変数を設定し、@brightdata/mcpnpmパッケージ経由でMCPサーバーを起動します。

すべてが正しく動作していれば、以下のようなログが表示されるはずです：

初回起動時に、MCPサーバーは自動的にBright Dataアカウントに2つのデフォルトゾーンを作成します：

mcp_unlocker：mcp_unlocker:Web Unlocker用のゾーンです。
mcp_browser：mcp_unlocker: Web Unlocker用のゾーン。
これらのゾーンは、MCPサーバーのすべてのツールにアクセスするために必要です。

ゾーンが作成されたことを確認するには、Bright Dataダッシュボードにログインし、「Proxies & Scraping Infrastructure」ページに移動します。両方のゾーンが表示されているはずです

4.: Claude Code で Web MCP を設定する

Claude CodeはMCPサーバに接続するためのいくつかの方法をサポートしています。このチュートリアルでは、2つの方法を取り上げます：

mcp addコマンドを使用する。
MCP.json設定ファイルを使用する方法。
Claude CodeのインストールでWeb MCPサーバーをグローバルに設定するには、次のコマンドを実行します：

claude mcp add brightData ˶ --env API_TOKEN
  --env API_TOKEN=<YOUR_BRIGHT_DATA_API_KEY> ￤PRO_MODE を指定します。
  --env PRO_MODE=true
  --npx -y @brightdata/mcp

あるいは、Windows PowerShellでも同様です：

claude mcp add brightData --env API_TOKEN=<YOUR_BRIGHT_DATA_API_KEY> --env PRO_MODE=true -- -- npx -y @brightdata/mcp

どちらのコマンドもClaude CodeにbrightDataというカスタムMCPサーバーを追加するように指示します。これは、指定されたnpxコマンドで環境変数とともに起動される。つまり、Claude CodeはBright Data Web MCPサーバーに自動的に接続できるようになります。(PRO_MODE環境変数を有効にする必要はありません)。

コマンドを実行すると、次のような出力が表示されます：

The output produced by the mcp add command

これにより、MCPサーバーがClaude Codeのグローバル設定ファイルに追加されたことが確認できます。

MCPの設定をプロジェクトにローカルに保持したい場合は、以下の内容でmcp_servers.jsonという名前のファイルを作成してください：

{
  "mcpServers"：{
    "brightData"：{
      "command"："npx"、
      "args": [
        "-y",
        "@brightdata/mcp"
      ],
      "env"：{
        "API_TOKEN"："<your_bright_data_api_key>"、
        "PRO_MODE"："true"
      }
    }
  }
}

この構成では

mcpServersオブジェクトは、クロード・コードに外部MCPサーバの起動方法を伝えます。
brightDataエントリは、Web MCPを実行するために必要なコマンドと環境変数を定義します。PRO_MODEの設定はオプションですが、推奨します。
次に、--`mcp-configフラグを使って、上記の設定ファイルを読み込むようにClaude Codeに指示します：

claude --mcp-config mcp_servers.json

重要を実際の Bright Data API トークンに置き換えて認証を有効にしてください。

完璧です！これで Claude Code 内で MCP インテグレーションをテストする準備ができました。

5. Claude Codeで連携タスクの実行

例：

LinkedInプロフィールをWeb経由でスクレイピング → profile.jsonに保存
そのJSONを返すExpressの簡単APIサーバーを自動生成

手順やプロンプトを入力するだけで、AIがデータ取得・ファイル生成・サーバー構築までを一括で行います。

より詳しいユースケースやチュートリアルについては、Bright Data Blog をご参照ください。

まとめ

このように、Claude CodeとBright Data Web MCPを統合すると、リアルタイムWebデータとAIの力を組み合わせた最先端の自動コーディング環境が手に入ります。様々な開発やデータ分析ワークフローで、その威力をぜひ体験してください！

Bright Dataは無料アカウント登録・APIキー発行ですぐに利用開始できます。
https://get.brightdata.com/hwj7ya