Bright Data MCPを使ったPi AgentのWeb探索

このブログ記事では、以下の内容を学べます：

PiとはCLIエージェントソリューションとして何をもたらすか。
Webアクセスツールで拡張することで、なぜ大幅に強力になるか。
Bright Data Web MCPインテグレーションを使ってPi Agentでこれらの機能を有効にする方法。

早速見ていきましょう！

Piとは何か？

Pi（Pi AgentまたはPi Coding Agentとも呼ばれる）は、拡張可能なCLIエージェントです。ターミナル上でAI駆動のコーディングワークフローを直接実行できるようにすることを目的としています。

計画モードやサブエージェントなど固定機能に縛られる他のCLIエージェントとは異なり、Piはコアを軽量に保ちます。その代わり、TypeScript拡張機能、スキル、プロンプトテンプレート、プラグインを通じてあらゆるものを拡張できます。

Piが特別なのはその柔軟性にあります。動作、ツール、さらにはUIまで自由に形成できます。複数のLLMプロバイダー、セッションツリー、カスタマイズプリミティブをサポートし、固定のCLIアシスタントというよりプログラマブルなエージェントランタイムに近い存在です。

このミニマルなCLIエージェントのアプローチはコミュニティから広く支持されており、プロジェクトはGitHubで63,000以上のスターを獲得しています。また、npmでの週間ダウンロード数は170万件を超えています。

主な機能

Pi Agentが提供する主な機能は以下の通りです：

完全な拡張性モデル：ツール、履歴処理、コンパクション、UI、コンテキスト注入など、ほぼすべての層を変更して完全カスタムのエージェント動作を構築できます。
マルチプロバイダーLLMサポート：OpenAI、Anthropic、Google、Azure、Bedrockなどに対応し、セッション中にモデルを簡単に切り替えられます。
インタラクティブCLIエージェント：リアルタイムのツール使用、コンテキスト認識、会話形式の制御を備えた完全ターミナルベースのコーディングエージェントです。
セッションツリー管理：会話をブランチとして保存し、巻き戻し、フォーク、代替実行パスの探索が可能です。
スキルシステム：エージェントスキルを動的にロードし、コンテキストウィンドウを肥大化させずにエージェントを拡張できます。
プロンプトテンプレートとカスタムコマンド：スラッシュコマンドで呼び出せる再利用可能なプロンプトを定義し、ワークフローを高速化できます。
Print、RPC、SDKモード：構造化出力またはプログラマティックAPIを通じて、スクリプト、バックエンドサービス、組み込みアプリケーションでPiを使用できます。

Pi Coding AgentにWebアクセスが必要な理由

Piでどのようなモデルを設定しても、基盤となるコーディングエージェントは言語モデル共通の制限に直面します：知識の陳腐化です。LLMは学習時の静的データ（過去のスナップショット）に基づいてしか応答を生成できません。

技術の進化が速い昨今、この制限は深刻です。モデルは古いコーディングパターンを提案したり、廃止されたメソッドに依存したり、新しくリリースされた機能を見逃したりする可能性があります。

これはPi Agentのコーディング・自動化タスクにとって明確なボトルネックとなります。基本的なWeb検索ツールを追加しても、スケール時の信頼性が低く、多くのサイトのアンチボット保護によってブロックされることがあります。

Pi Coding Agentが最新のチュートリアル、ドキュメント、ガイドをリアルタイムで取得・学習できるとしたらどうでしょう。Webページのスクリーンショットを撮って視覚的に分析したり、サイトと対話したり、CLIから直接より複雑なワークフローを実行したりすることも可能になります。

これこそがBright DataのWeb MCPサーバーで実現できることです！

ソリューションとしてのBright Data Web MCP

Bright Data Web MCPは70以上のツールを公開しています。これらのツールは内部でBright DataのAPIベースの製品と連携しています。

Web MCPには[2つのモード](https://github.com/brightdata/brightdata-mcp?tab=readme-ov-file#-pricing, modes)があります：

Rapidモード：月間最大5,000リクエストの無料ティアで、Web検索、スクレイピング、ディスカバリー向けの限定ツールセットを提供します。
Proモード：Amazon、LinkedIn、Yahoo Finance、YouTube、Zillow、Googleマップなど40以上のプラットフォームからの構造化データ抽出や完全なブラウザ自動化機能を含む、70以上のツール全てを解放する有料ティアです。

主要なBright Data Web MCPツールは以下の通りです：

ツール	説明	基盤となるBright Data製品
`search_engine`	Web検索（Google、Bing、Yandex）を実行し、パース済みのSERPを返す	SERP API
`scrape_as_markdown`	Webページ全体を取得し、クリーンなMarkdownに変換する	Unlocker API
`discover`	Webを検索し、AIベースの関連性スコアリングで結果をランク付けする	Discover API
`scraping_browser_navigate`	実際のブラウザセッションを開き、URLに移動する	Browser API
`scraping_browser_snapshot`	ページ構造とインタラクティブ要素のARIAスナップショットを取得する	Browser API
`scraping_browser_click_ref`	スナップショットの参照を使って要素をクリックする	Browser API
`scraping_browser_screenshot`	現在のページのスクリーンショットを撮影する（フルページも可）	Browser API

Bright Dataが独自である理由は、195か国にわたる4億以上のレジデンシャルIPのグローバルネットワークにあります。このインフラはすべての製品の基盤であり、無制限の並行処理、大規模なスケーラビリティ、SLA保証の99.99%稼働率を持つエンタープライズグレードの信頼性を提供するよう設計されています。

Pi AgentにBright Data Web MCPをセットアップする方法

このステップバイステップのチュートリアルでは、Pi AgentにBright Data Web MCPインテグレーションを設定する手順を説明します。これにより、基盤となるコーディングエージェントがWebディスカバリー、スクレイピング、ブラウザ自動化の機能を利用できるようになります。

以下の手順に従ってください！

前提条件

このセクションを進めるには、以下が必要です：

Node.jsがローカルにインストールされていること（最新のLTSバージョン推奨）。
Pi Agentがサポートする多数のLLMプロバイダーのいずれかからのAPIキー（このガイドではOpenAI APIキーを使用します）。
APIキーを持つBright Dataアカウント。Bright Data APIキーの生成については公式ガイドを参照してください。

必須ではありませんが、MCPの仕組みとBright Data Web MCPツールに精通していると役立ちます。

ステップ#1：Piのインストール

以下のコマンドを実行してnpm経由でPiをインストールします：

npm install -g, ignore-scripts @earendil-works/pi-coding-agent

これにより@earendil-works/pi-coding-agentパッケージがグローバルにインストールされ、システムにpiコマンドが登録されます。

PowerShell、cURLインストーラー、pnpm、Yarn、Bunなど別のインストール方法を使用したい場合は、公式ドキュメントを参照してください。

インストールが完了したら、以下のコマンドでPi Coding Agentを起動します：

pi

初回起動時には、次のような画面が表示されます：

このメッセージは、PiにAIプロバイダーが設定されていないことを示しています。次のステップで、接続と設定の方法を学びます！

ステップ#2：LLMの設定

以下のコマンドを実行してPi Coding AgentにLLMを設定します：

/login

Piは使用したいLLMプロバイダーの認証方法を選択するよう促します。ここでは「Use an API key」を選択してください：

次に、AIプロバイダーを選択します。このガイドではOpenAIを使用します：

プロンプトが表示されたらOpenAI APIキーを貼り付けます：

正常に進むと、PiはOpenAIで認証し、APIキーを設定に安全に保存します。その後、デフォルトモデルが自動的に選択されます（この例ではgpt-5.4）。

以下のような確認メッセージが表示されます：

後でモデルを変更するには、以下を実行します：

/model

利用可能なオプションから使用したいモデルを選択します：

お疲れ様です！Piがマシンにインストールされ、設定されました。

ステップ#3：Pi MCPアダプター拡張機能の追加

デフォルトでは、PiはMCPサポートを含まない最小限のセットアップで提供されます。MCPインテグレーションを有効にするには、以下のコマンドでpi-mcp-adapter拡張機能をインストールします：

pi install npm:pi-mcp-adapter

拡張機能がインストールされたらPiを再起動します。pi-mcp-adapter拡張機能は、以下のいずれかにMCP設定ファイルが存在することを期待します：

プロジェクトディレクトリの.mcp.json、または
~/.config/mcp/mcp.json（Windowsでは%USERPROFILE%/.config/mcp/mcp.json）。

このファイルにはMCPサーバーの設定が含まれます。設定ファイルは手動で作成するか、以下のコマンドでPiに生成させることができます：

/mcp setup

次に、「Scaffold project .mcp.json」オプションを選択します：

Piはプロジェクトディレクトリに.mcp.jsonファイルを作成します。開くと以下の内容が表示されます：

{
  "mcpServers": {}
}

完璧です！Pi Coding AgentはMCPクライアントとして機能し、基盤となるAIエージェントにMCPツールを公開できるようになりました。

ステップ#4：Bright DataのWeb MCPを始める

Bright DataのWeb MCPをPi Agentに接続する前に、MCPサーバーがマシンで正しく動作することを確認します。詳細については、Web MCPドキュメントを参照してください。

まず、Web MCPをグローバルにインストールします：

npm install -g @brightdata/mcp

Linux、macOS、またはWSLでは、以下のコマンドでBright Data Web MCPサーバーを起動します：

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

PowerShellの場合：

$Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; npx -y @brightdata/mcp

<YOUR_BRIGHT_DATA_API>をBright Data APIキーに置き換えてください。このコマンドは必要なAPI_TOKEN環境変数を設定し、@brightdata/mcpパッケージを通じてWeb MCPサーバーをローカルで起動します。

正しく設定されていれば、以下のような出力が表示されます：

初回起動時、@brightdata/mcpパッケージはBright Dataアカウントに2つのAPIを自動的に作成します：

mcp_unlocker：Bright DataのWeb Unlocker API（およびSERP API）にアクセスするために使用されます。
mcp_browser：Bright DataのBrowser APIと対話するために使用されます。

これらのAPIが合わさって、Web MCPで利用可能な70以上のツールを支えています。必要に応じてカスタムAPI名を定義することもでき、公式リポジトリに説明があります。

APIが作成されたことを確認するには、Bright Dataコントロールパネルの「Web Access > Web Access API」ページにアクセスします。「My APIs」テーブルに両方のAPIが表示されているはずです：

Web MCPの起動時に作成された「mcp_unlocker」と「mcp_browser」APIを確認

Web MCPの無料ティア（Rapidモード）はツールの一部のみにアクセスできることに注意してください。

70以上のツール全てを解放するには、PRO_MODE="true"環境変数を設定してProモードを有効にします：

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モードは無料ティアに含まれておらず、[追加料金が発生します](https://github.com/brightdata/brightdata-mcp?tab=readme-ov-file#-pricing, modes)。

Bright Data Web MCPがマシンで動作することを確認しました。次のステップでは、Pi Agentに接続します。

ステップ#5：Pi AgentでWeb MCPを設定する

PiにBright Data Web MCPインテグレーションをセットアップするには、.mcp.jsonファイル（または~/.config/mcp/mcp.json）に以下の設定を追加します：

{
  "mcpServers": {
    "bright-data-web-mcp": {
      "command": "npx",
      "args": ["-y", "@brightdata/mcp"],
      "env": {
        "API_TOKEN": "<YOUR_BRIGHT_DATA_API_KEY>",
        "PRO_MODE": "true"
      }
    }
  }
}

起動時にpi-mcp-adapter拡張機能がファイルを読み込みます。そして、以下の環境変数を設定しながらnpx -y @brightdata/mcpコマンドを実行してローカルのWeb MCPサーバーを起動します：

API_TOKEN（必須）：Bright Data APIキー。
PRO_MODE（オプション）：Pro機能を有効にするにはtrueに設定します。Web MCPをRapid（無料）モードで実行するにはfalseに設定するか、完全に削除します。

これ以降、PiはWeb MCPのローカルインスタンスに接続します。完璧です！

ステップ#6：Web MCPインテグレーションの確認

Web MCPが公開するツールが利用可能であることを確認するには、Piを再起動して以下を実行します：

/mcp tools

Web MCPをProモードで設定した場合、利用可能なツールの完全なリストが表示されます：

リストに70以上のツールが含まれていることに注目してください。Rapidモードを使用している場合は、無料ティアに含まれるツールのみが表示されます。これにより、PiがローカルのWeb MCPインスタンスに正常に接続し、公開されているツールにアクセスできることが確認されます。

素晴らしい！Pi Agent + Bright Data Web MCPインテグレーションの設定が完了しました。あとは実際に動作を確認するだけです。

ステップ#7：強化されたAIエージェントのテスト

ECサイトを構築したいとして、デザインのインスピレーションが必要だとします。成功しているオンラインストアに基づいたモックアップから始めるのが良いアプローチです。

例えば、AIエージェントにNikeの商品カテゴリページを訪問させ、スクリーンショットを撮影し、そのページのレイアウトとデザインパターンにインスパイアされた静的なHTML/CSSモックアップを生成するよう依頼できます。

そのために、以下のプロンプトを入力します：

Search online for the Nike men's shoes & sneakers page. Open the page and take a full viewport screenshot from a US IP. Then, create a mock e-commerce webpage using plain HTML and CSS that replicates the same visual style, layout structure, and overall design patterns shown in the screenshot. Do not copy brand assets or proprietary text,only reproduce general layout, spacing, and styling.

これはWeb MCPを通じて追加されたWeb機能の優れたテストです。Web検索とブラウザ自動化が必要であり、これらの機能はBright Data Web MCP（Proモード）によって提供されます。

注意：プロンプトでは米国のIPアドレスを明示的に要求しています。これはEUのGDPRクッキーバナーを避けるためです。バナーがあるとページのスクリーンショットの表示が制限され、AIエージェントがページ構造を正確に分析しにくくなります。

Piを開いてプロンプトを実行します。実行は以下のようになります：

Pi Coding Agentが裏で行ったことは以下の通りです：

search_engine Web MCPツールを使用して、米国ベースのGoogle検索クエリでNikeの「Men’s Shoes & Sneakers」ページを特定しました。内部では、このリクエストはBright DataのSERP APIによって処理されます。
scraping_browser_navigate Web MCPツールを使用して、米国のジオロケーションでページを開きました。この機能はBright DataのBrowser APIによって提供されます。
ページが正常に読み込まれたことを確認し、ページタイトルとURLを検証しました。
scraping_browser_screenshot Web MCPツールを使用してページのスクリーンショットを撮影しました。
スクリーンショットを分析して、サイトのレイアウト、構造、デザインパターンを把握しました。
独自のブランドや資産の使用を避けながら、元のページにインスパイアされたブランドニュートラルなECモックアップを計画しました。
ユーティリティバー、ナビゲーションメニュー、プロモーションバナー、フィルターサイドバー、商品グリッドを含むレスポンシブなページ構造を設計しました。
プレーンなHTMLとCSSを使用して自己完結型のsrc/index.htmlファイルを生成しました。

このワークフローはWeb MCP対応エージェントの力を示しています。スタンドアローンのLLMは検索エンジンやクラウドWebブラウザへの直接アクセスがないため、これらのタスクを実行できません。さらに、Nike.comのようなサイトは自動化トラフィックをブロックする高度なアンチボットシステムを使用しています。

Web MCPのもう一つの大きな利点は、Bright Dataのプロキシインフラ上に構築されていることです。これにより、エージェントは特定の国や都市レベルの場所を経由してリクエストをルーティングできます。その結果、エージェントはより高い信頼性でWebサイトの地域固有のバージョンにアクセスして分析できます。

素晴らしい！生成された出力を見てみましょう。

ステップ#8：結果の分析

エージェントがタスクを完了すると、プロジェクト構造は以下のようになります：

├── .mcp.json
└── src/
    └── index.html

生成されたsrc/index.htmlファイルをブラウザで開くと、以下のような結果が表示されます：

インスピレーション元となったNikeの「Men’s Shoes & Sneakers」ページと比較してみましょう：

生成されたページが、Nikeのブランディング、独自コンテンツ、著作権資産を使用せずに、元のレイアウト、スペーシング、ナビゲーション構造、商品グリッド、全体的な視覚的階層を忠実に再現していることがわかります。

ご覧の通りです！このシンプルな例は、Bright Data Web MCPに接続することでPi Agentがいかに強力になるかを示しています。

Web検索、スクレイピング、ブラウザ自動化をAI駆動のコード生成と組み合わせることで、エージェントは通常のLLMでは不可能な複雑なワークフローを完了できます。

今度はあなたが試す番です。様々なプロンプトを試し、Web MCPで利用可能な70以上のツールが実現する多くのユースケースを探索してみましょう！

まとめ

このブログ記事では、Piとその機能について学び、Bright DataのWeb MCPと統合することで拡張する方法を詳しく説明しました。

このインテグレーションにより、Pi AgentはWeb検索、ディスカバリー、スクレイピング、ブラウザ自動化シナリオを処理するために必要なツールを手に入れます。これらの機能は、より複雑な自動化とコーディングワークフローの管理を支援します。Bright DataエコシステムのAI向けWebサービスの全範囲をぜひ探索してください。

今すぐBright Dataアカウントにサインアップして、AI対応のWebツールの探索を始めましょう！

お問い合わせ無料トライアル

Bright Data Web MCPを使ってPi AgentにWebの探索とインタラクション機能を付与する