AI

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

Bright Data Web MCPがPi AgentにWebの探索とインタラクション機能を付与し、CLIワークフローの高度な機能を解放する方法をご紹介します。
4 分読
Give Pi Agent the Tools to Explore and Interact with the Web via Bright Data MCP

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

  • PiとはどのようなものかCLIエージェントソリューションとして何をもたらすのか。
  • Webアクセスツールで拡張することで大幅に強力になる理由。
  • Bright Data MCP統合を使用してPi Agentでこれらの機能を有効にする方法。

さっそく始めましょう!

Piとは何か?

Pi

PiPi AgentまたはPi Coding Agentとも呼ばれる)は、拡張可能なCLIエージェントです。ターミナル上でAI駆動のコーディングワークフローを実行するためのツールです。

計画モードやサブエージェントなど固定機能に縛られる他のCLIエージェントと異なり、PiはコアをシンプルにしつつTypeScript拡張機能、スキル、プロンプトテンプレート、プラグインで自由に拡張できます。

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

Pi's star growth on GitHub

このミニマルなアプローチはコミュニティに広く支持され、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を設定しても、基盤となるコーディングエージェントは言語モデルの共通の制限、つまり知識の陳腐化という問題を抱えています。LLMは学習した静的データ(過去のスナップショット)に基づいてのみ応答を生成できます。

テック業界の急速な進化を考えると、この制限は重大です。モデルが古いコーディングパターンを提案したり、非推奨のメソッドに依存したり、新機能を見逃したりする可能性があります。

これはPi Agentのコーディングおよびオートメーションタスクにとってボトルネックとなります。基本的なWeb検索ツールを追加しても、大規模では信頼性が低く、多くのサイトのアンチボット保護によってブロックされることがあります。

Pi Coding Agentが最新のチュートリアル、ドキュメント、ガイドを確実に取得してリアルタイムで学習できたら、また、Webページのスクリーンショットを撮影して視覚的に分析し、サイトと対話し、CLIから直接より複雑なワークフローを実行できたとしたら、どれほど強力になるか想像してみてください。

これがまさにBright DataのBright Data MCPサーバーによって実現できることです!

Bright Data MCPというソリューション

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

Bright Data 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 Mapsなど40以上のプラットフォームからの構造化データ抽出と完全なブラウザオートメーション機能を含む70以上のツールすべてを解放する有料枠です。

最も重要なBright Data MCPツールは以下のとおりです:

ツール 説明 基盤となるBright Data製品
search_engine Web検索(Google、Bing、Yandex)を実行し、パースされたSERPを返す SERP API
scrape_as_markdown Webページ全体を抽出してクリーンなMarkdownに変換する Unlocker 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 MCPをセットアップする方法

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

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

前提条件

このセクションを進めるにあたり、以下が必要です:

必須ではありませんが、MCPの仕組みBright Data 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が認証方法の選択を求めます。ここでは「Use an API key」を選択します:

Selecting the

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

Choosing the

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

Pasting your OpenAI API key

正常に完了すると、PiはOpenAIで認証を行い、APIキーを設定に安全に保存します。そしてデフォルトモデルを自動的に選択します(この例ではgpt-5.4)。

次のような確認メッセージが表示されます:

Note the successful authentication message

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

/model

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

Selecting another 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」オプションを選択します:

Selecting the "Scaffold project .mcp.json" option

Piはプロジェクトディレクトリに.mcp.jsonファイルを作成します。開くと以下の内容が確認できます:

{
  "mcpServers": {}
}

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

ステップ #4:Bright DataのBright Data MCPを開始する

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

まずBright Data MCPをグローバルにインストールします:

npm install -g @brightdata/mcp

Linux、macOS、またはWSLでBright Data 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パッケージを通じてBright Data MCPサーバーをローカルで起動します。

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

Bright Data's Bright Data MCP startup messages

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

  • mcp_unlocker:Bright DataのWeb Unlocker API(およびSERP API)にアクセスするために使用します。
  • mcp_browser:Bright DataのBrowser APIと連携するために使用します。

これらのAPIがBright Data MCPで利用可能な70以上のツールを動かしています。必要に応じてカスタムAPI名を定義することもでき、公式リポジトリに記載されています

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

Note the

Bright Data 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 MCPがマシン上で動作することを確認できました。次のステップでPi Agentに接続します。

ステップ #5:Pi AgentにBright Data MCPを設定する

PiにBright Data 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コマンドを実行してローカルBright Data MCPサーバーを起動します:

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

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

ステップ #6:Bright Data MCP統合を確認する

Piを再起動して以下のコマンドを実行し、Bright Data MCPが公開するツールが利用可能であることを確認します:

/mcp tools

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

Note all Bright Data MCP Pro tools

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

素晴らしい!Pi Agent + Bright Data 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.

これはBright Data MCPを通じて追加されたWeb機能(Web検索とブラウザオートメーション)の優れたテストです。これらの機能はBright Data MCP(Proモード)によって提供されます。

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

Piを開いてプロンプトを実行します。実行の様子は次のようになります:

Prompt execution

Pi Coding Agentがバックグラウンドで行った処理は以下のとおりです:

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

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

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

素晴らしい!生成された出力を確認してみましょう。

ステップ #8:結果を分析する

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

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

生成されたsrc/index.htmlファイルをブラウザで開くと、次のような結果が確認できます:

The

参考にした元のNikeの「Men’s Shoes & Sneakers」ページと比較してみましょう:

The original Nike

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

できました!この簡単な例は、Bright Data MCPに接続することでPi Agentがどれほど強力になるかを示しています。

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

今度はあなたが試す番です。さまざまなプロンプトを試して、Bright Data MCPを通じて利用可能な70以上のツールが実現する多くのユースケースを探求してみてください!

まとめ

このブログ記事では、Piとはどのようなものか、そしてその機能について学びました。具体的には、Bright DataのBright Data MCPとの統合によってPiを拡張する方法を確認しました。

この統合によりPi AgentはWeb検索、探索、スクレイピング、ブラウザオートメーションシナリオを処理するために必要なツールを手に入れ、より複雑なオートメーションとコーディングワークフローを管理できるようになります。Bright DataのエコシステムにおけるAI向けWebサービスの全範囲を探索してみてください。

今すぐBright Dataアカウントに登録して、AI対応のWebツールを使い始めましょう!