このチュートリアルでは、次のことを学びます：
- クロードコードとは何か、なぜ最も人気があり強力なCLIコーディングエージェントのひとつと考えられているのか。
- Web インタラクションとデータ抽出機能を追加することで、さらに効果的になる方法。
- 強化されたAIコーディングエージェントを作成するために、Claude CodeをBright Data Web MCPサーバーと接続する方法。
さあ、始めましょう！
クロードコードとは？
クロードコードはAnthropicが開発したコマンドラインインターフェースツールで、ターミナル内でクロードモデルに直接アクセスできます。複雑なコーディングタスクの委任、ワークフローの自動化、他のツールとの統合を可能にします。
つまり、AIペアプログラマー、コーディングエージェントとして機能する。クロード・コードは、プロジェクトのコンテキストを理解し、コードを生成し、テストし、デバッグし、さらにはGit操作を実行する能力で際立っている。主な特徴は以下の通り：
- エージェントコーディング：複雑なコーディングタスクを理解し、解決策をブレインストーミングし、ワークフロー内で直接実行します。
- ワークフローの統合：MCPを通して様々なツールやAPIと統合します。
- コードベースの理解：コードベースの構造とロジックを分析し、理解することで、よりコンテキストを考慮したコード生成を実現します。
- コード生成と編集：お客様の指示に基づいて、新しいコードを生成し、既存のコードをリファクタリングし、バグを修正します。
- テストとリンティング：テストとリンティングコマンドを実行し、コードの問題を特定して解決します。
- Git との統合：コミット、プッシュ、プルリクエストの作成などの Git 操作を簡素化します。
GitHubで3万以上のスターを獲得し、毎週500万以上ダウンロードされているClaude Codeは、最も人気のあるAIペアプログラミングソリューションの1つです。これは、クロード・モデルが現在、コーディングに利用可能な最高のLLMの1つとみなされていることを考えれば、驚くことではありません。
なぜクロード・コードをウェブアクセスと新鮮なデータで拡張するのか？
クロード・コードは高度なクロード・モデルを搭載しているとはいえ、他のLLMと同じ限界に直面しています。学習データは時間のスナップショットであり、すぐに古くなってしまいます。特にソフトウェア開発のような動きの速い分野ではそうだ！
では、クロード・コードCLIアシスタントに次のような機能を持たせてみましょう：
- 新鮮なチュートリアルやドキュメントを取り込む、
- コードを書きながらライブガイドを参照する。
- ローカルファイルをナビゲートするのと同じように、ダイナミックなウェブサイトを簡単にブラウズできます。
これこそ、Bright DataのWeb MCPに接続することで実現できることです。
Bright DataのWeb MCPは、リアルタイムのWebインタラクションとデータ収集のために構築された60以上のAI対応ツールへのアクセスを提供します。これらはすべて、Bright Dataの豊富なAIインフラストラクチャによって支えられています。
Bright DataのWeb MCPでClaude Codeを拡張した場合の可能性をいくつかご紹介します：
- 最新の検索エンジンの結果を取得し、ノートやドキュメントに直接埋め込む。
- 最新のチュートリアルやAPIドキュメントを取り込み、そこからコードを生成したり、プロジェクトの足場を作ることができます。
- テスト、モッキング、より深い分析のために、ライブのウェブサイトデータを収集する。
ツールの完全なカタログについては、Bright Data MCP ドキュメントをご覧ください。
この統合を実際にご覧になりたい場合は、Claude Code 内で Web MCP がどのように動作するかをご覧ください。
Claude Code を Bright Data の Web MCP に接続する方法
Claude Code をローカルにインストールして設定し、Bright Data の Web MCP と統合する方法を説明します。拡張されたコーディングエージェントは次のような用途に使用されます：
- LinkedIn のプロフィールページをリアルタイムでスクレイピングします。
- データを JSON ファイルにローカルに保存します。
- JSONファイルから読み取ったモックデータを返すエンドポイントを持つExpressアプリケーションを作成する。
以下の手順に従ってください！
前提条件
始める前に、以下があることを確認してください：
- Node.js 18+がローカルにインストールされていること（最新のLTSバージョンを推奨します）。
- Claude サブスクリプションまたはクレジット付き Anthropic アカウント（このチュートリアルでは Anthropic アカウントを使用します）。
- APIキーを準備したBright Dataアカウント。
これらのアカウントを今すぐ作成する必要はありません。以下のステップで、必要なときにセットアップを行います。
次に、オプションですが、役立つ背景知識です：
- MCPの仕組みについての一般的な理解。
- Bright Data Web MCPサーバーとそのツールに精通していること。
ステップ#1: Claude Codeのインストールと設定
Claude Codeを使い始めるには、まずClaudeサブスクリプションまたはAnthropicアカウントと資金が必要です。
Claude/Anthropic Consoleアカウントの準備ができたら、公式の@anthropic-ai/claude-codenpmパッケージ経由でClaude Codeをグローバルにインストールします：
npm install -g @anthropic-ai/claude-code次に、Claude Codeを動作させたいプロジェクトフォルダに移動し、次のコマンドで起動します：
claude基盤となるClaudeモデルの設定やその他の設定については、公式ドキュメントを参照してください。
CLIエージェントを初めて実行する場合は、初期設定画面が表示されるはずです：
テーマを選択し、Enterキーを押して認証画面に移動します：
使用する認証の種類（”Claude account with subscription” または “Anthropic Console account”）を選択します。この例では、オプション 2 を選択したと仮定しますが、手順はどちらも同様です。
次のページでは、Anthropic ConsoleアカウントにClaude Codeを接続するよう求められます：
Authorize」ボタンを押し、端末に戻ります。Anthropic Consoleアカウントで、新しいAPIキーが作成されます：
すると、Claude Code は自動的にその API キーを設定ファイルに保存するので、今後はログインしたままになります。
カレントディレクトリでのクロードコードの実行を信頼するかどうかを尋ねるプロンプトが表示されるはずです：
肯定的なオプションを選択すると、Claude Code CLI に完全にアクセスできるようになります：
refactor <filepath>"を試す矩形の中に、コードエージェントに渡すプロンプトを書くことができます。
素晴らしい！これで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="<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>を、先ほど生成した実際の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」ページに移動します。両方のゾーンが表示されているはずです：
注意：APIトークンにAdmin権限がない場合、これらのゾーンは自動的に作成されない可能性があります。その場合、公式ドキュメントで説明されているように、手動で作成し、環境変数を使用して名前を指定することができます。
デフォルトでは、MCPサーバーはsearch_engineと scrape_as_markdownツールだけを公開しています。
ブラウザの自動化や構造化データ抽出のような高度な機能をアンロックするには、Proモードを有効にする必要があります。そのためには、MCPサーバーを起動する前に、PRO_MODE=true環境変数を設定する：
API_TOKEN="<YOUR_BRIGHT_DATA_API>" PRO_MODE="true" npx -y @brightdata/mcpまたは、Windowsの場合
Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; $Env:PRO_MODE="true"; npx -y @brightdata/mcp重要：Proモードを選択すると、60以上のすべてのツールにアクセスできるようになります。同時に、Proモードは無料層には含まれず、追加料金が発生します。
素晴らしい！Web MCPサーバーがあなたのマシンで正しく実行されていることを確認しました。次のステップでは、Claude Code が自動的に起動するように設定します。
ステップ #3: 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環境変数を有効にする必要はありません)。
コマンドを実行すると、次のような出力が表示されます：
これにより、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重要 <YOUR_BRIGHT_DATA_API_KEY>を実際の Bright Data API トークンに置き換えて認証を有効にしてください。
完璧です！これで Claude Code 内で MCP インテグレーションをテストする準備ができました。
ステップ #4: MCP 接続の確認
mcp addまたは--mcp-config を使用して MCP インテグレーションを設定した場合でも、Claude Code が実際に Bright Data Web MCP サーバーに接続できることを確認する必要があります。
接続を確認するには、Claude Code CLI を起動し、/mcpコマンドを入力します。すべてが正しく動作していれば、次のような出力が表示されるはずです：
お分かりのように、ローカルCLIインスタンスは設定されたbrightDataMCPサーバーに正常に接続しました。よくできました！
ステップ #5: Claude Codeでタスクを実行する
Claude Codeコーディングエージェントの機能をテストするには、次のようなプロンプトを起動します：
https://it.linkedin.com/in/antonello-zanini "からデータをスクレイピングし、出力をJSONとして "profile.json "というローカルファイルに保存します。次に、LinkedIn プロフィールを表すスラッグを受け取り、"profile.json" の内容を返すエンドポイントを持つ単純な Express.js プロジェクトを作成します。これは、Express APIをモックするために実世界のデータを収集するので、実世界のユースケースを表している。
プロンプトをClaude Codeに貼り付け、Enterキーを押して実行する。このような動作が表示されるはずだ：
GIFはスピードアップされていますが、これはステップごとに起こることです：
- Claude Codeはプロンプトを4段階のタスクに分解する。
- LLMは適切なMCPツール
（web_data_linkedin_person_profile）を、プロンプトから抽出された正しい引数（url: "https://it.linkedin.com/in/antonello-zanini“）とともに選択します。 - ツールの実行を承認するプロンプトが表示されます。
- 承認されると、MCP統合によってスクレイピング・タスクが起動します。
- 結果のデータは生フォーマット（つまりJSON）で表示されます。
- クロード・コードは、データを
profile.jsonという名前のローカル・ファイルに保存する許可を求めます。 - 承認後、ファイルが作成され、入力されます。
- Node.js Express プロジェクトの
package.jsonファイルを作成するよう求められます。 - 承認後、
package.jsonファイルがカレント・ディレクトリーに追加されます。 server.jsのコードが表示され、必要な API エンドポイントを持つ Express サーバーが定義されます。- 承認されると、
server.jsファイルが作成されます。 - プロジェクトの依存関係をインストールし、Expressサーバーを起動するためのコマンドが表示されます。
この例では、タスクが生成する最終的な出力は次のようになります：
インタラクションの最後には、作業ディレクトリに以下の3つのファイルが含まれるはずです：
├── package.json
├── profile.json
└── server.js素晴らしい！それでは、生成されたファイルが期待通りに動くかチェックしてみましょう。
ステップ #6: アウトプットを調べる
Visual Studio Codeでプロジェクトのディレクトリを開き、profile.jsonファイルを調べることから始めよう：
このファイルには、クロードLLMによって生成された幻覚やでっち上げのコンテンツではなく、本物のLinkedInのデータが含まれています。具体的には、このデータはBright Dataがweb_data_linkedin_person_profileツール（内部的にはLinkedIn Scraperと呼ばれている）を使って、以下のLinkedInの公開プロフィールページから取得したものである：
注：LinkedInのスクレイピングは、その強固なボット対策により難しいことで有名です。通常のLLMでは、このタスクを確実に実行することはできません。これは、Bright Data Web MCPの統合により、コーディーネートエージェントがいかに強力になったかを証明しています。
次に、package.jsonファイルを確認します：
このファイルには、Node.jsプロジェクトを定義するために必要な依存関係（expressなど）が記載されています。
最後に、server.jsファイルを確認します：
このコードでは、プロンプトで指定された必要なAPIエンドポイントが定義されていることに注目してください。詳細には、/profile/:slugエンドポイントはprofile.jsonからLinkedInプロフィールデータをロードし、LinkedIn ID（ここではslugとして使用）に基づいて正しいプロフィールを返します。
信じられない！生成されたファイルはしっかりしている。最後のステップは、Expressアプリケーションをテストして、思い通りに動作することを確認することです。
ステップ#7：生成されたプロジェクトをテストする
出力されたクロード・コードの指示に従ってください。プロジェクトの依存関係をインストールすることから始めましょう：
npm install次に、Expressサーバーを起動します：
npm startサーバはlocalhostでリスンしているはずです。curlを使って /profile/:slugAPIエンドポイントをテストします：
curl http://localhost/profile/antonello-zaniniまたは、PostmanのようなビジュアルHTTPクライアントで：
注: 結果には、profile.jsonから読み取った正しいLinkedInのデータが含まれているはずです。
これで完了だ！Claude Code + Bright Data Web MCPの統合により、APIのモックに成功しました。
この例は、Claude CodeとWeb MCPを組み合わせることの威力を示しています。さあ、いろいろなプロンプトを試して、CLIで直接LLM駆動の高度なデータワークフローを探求してみてください！
まとめ
この記事では、Claude CodeとBright Data Web MCPサーバー（現在は無料ティアを提供中！）を接続する方法を学びました。その結果、ウェブにアクセスして対話できる強力なAIコーディングエージェントができました。
この統合は、Claude Codeに組み込まれたMCPサポートのおかげで可能になりました。より高度なコーディングエージェントを構築するには、Bright Data AIインフラストラクチャで利用可能なあらゆるサービスを探索してください。これらのツールは、様々なエージェントシナリオをサポートします。
Bright Dataアカウントを無料で作成し、AI対応ウェブツールの実験を今すぐ始めましょう！
