AI

Bright DataのWeb MCPをPi Agentで使用する

このチュートリアルでは、Pi AgentをBright DataのWeb MCPサーバーに接続して、コード生成前にウェブを検索しライブデータをスクレイピングできるようにする手順を解説します。
3 分読
Pi Agent with Web MCP

このチュートリアルでは、以下について学びます:

  • Pi Agentとは何か、そしてなぜミニマルながら強力なターミナルベースのコーディングエージェントとして際立っているのか。
  • ライブWebデータに接続することで、その機能を大幅に拡張できる理由。
  • Pi AgentをBright DataのWeb MCPサーバーと統合して、リアルタイムの検索とスクレイピング機能を付与する方法。

さっそく始めましょう!

Pi Agentとは?

Piのホームページ

Pi Agentは、libGDXゲームフレームワークの作者であるMario Zechnerが開発したターミナルベースのコーディングエージェントです。多数の組み込み機能を搭載した一般的なコーディングエージェントとは異なり、Piは意図的にミニマルなアプローチを採用しています。Pi Agentは、libGDXゲームフレームワークの作者であるMario Zechnerが開発したターミナルベースのコーディングエージェントで、意図的にミニマルな設計思想を持っています。

npmでグローバルインストールできます:

npm install -g @mariozechner/pi-coding-agent

初期状態では、モデルに4つのツールが提供されます:
read:ファイルやディレクトリの読み取り
write:ファイルの作成と編集
edit:既存ファイルへの部分的な編集
bash:シェルコマンドの実行

それ以外はすべてオプトイン方式です。TypeScript拡張機能、スキル、プロンプトテンプレートをパッケージとして束ね、npmやgit経由でインストールすることでPiを拡張できます。つまり、Piはあなたのワークフローに合わせて適応し、特定の方法を強制しません。

Piは、Anthropic、OpenAI、Google、Mistral、Groqなど幅広いモデルプロバイダーをサポートしており、4つのモードで動作します:

  • インタラクティブ:会話型ターミナルセッション用
  • Print/JSON:スクリプト用の構造化出力
  • RPC:stdin/stdoutを介したプロセス統合
  • SDK:独自アプリケーションへのPi直接組み込み

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

Piはすぐに使えるコーディングエージェントとして優秀ですが、その知識は基盤モデルの学習データに限定されています。つまり、ライブラリの最新API変更の確認、現在のドキュメントの取得、Webからのリアルタイムデータの収集ができません。急速に変化するエコシステムで作業する開発者にとって、これは実際の制約となります。

Piをライブなウェブデータに接続することで、この状況が変わります。古くなった可能性のある知識に頼る代わりに、Piは最新情報を検索し、コード生成前に必要なページを正確にスクレイピングできます。

Webアクセスを有効にすることで、Piは以下が可能になります:

  • 任意のライブラリやフレームワークの最新ドキュメントを取得
  • 最新のコード例とベストプラクティスを検索
  • 任意の公開ウェブページから構造化コンテンツをスクレイピング
  • リアルな最新情報に基づいたコード生成を実現

Bright DataのWeb MCPとは?

Bright Dataは、大規模なウェブデータの収集・抽出ツールを提供するウェブデータプラットフォームです。そのWeb MCPサーバーは、MCP対応エージェントが会話から直接使用できるツールとしてこれらの機能を公開します。

Web MCPサーバーは、以下を含む強力なウェブインタラクションツールへのアクセスをエージェントに提供します:

  • search_engine:タイトル、URL、スニペット付きのランク付き結果でウェブを検索
  • search_engine_batch:1回のリクエストで複数の検索クエリを実行
  • scrape_as_markdown:任意の公開ウェブページを取得し、クリーンで構造化されたMarkdownとして返す
  • scrape_batch:1回のリクエストで複数のURLをスクレイピング
  • discover:トピックまたはシードURLに基づいて関連URLを検索

これらのツールを組み合わせることで、Piは完全なウェブリサーチとデータ抽出機能を持ちます。エージェントは必要なものを検索し、最も関連性の高いソースを特定してスクレイピングし、抽出したコンテンツをコード生成に活用できます。

Bright DataのWeb MCPを始めるには、Bright DataのアカウントとAPIキーが必要です。

MCPブリッジ:pi-mcp-adapter

PiにはMCPサポートが搭載されていませんが、これは意図的な設計上の決定です。Piの作者であるMario Zechnerは、MCPツール定義はミニマルなエージェントにとってトークン消費が多すぎると主張しています。Playwright MCPのような人気MCPサーバーは21ツールを公開して13.7kトークンを消費し、Chrome DevTools MCPは26ツールを公開して18kトークンを消費します。いくつかのサーバーを接続するだけで、会話が始まる前にコンテキストウィンドウの大部分を消費してしまいます。

コミュニティはpi-mcp-adapterで応えました。これはPiの拡張機能で、すべてのMCPツール定義を事前に読み込む代わりに、約200トークンで済む単一のプロキシツールを公開することでこの問題に対処します。エージェントはオンデマンドで個々のツールを検出・呼び出し、MCPサーバーは必要な時だけ起動します。

このアダプターは標準のMCP設定ファイルを自動的に読み取るため、設定したMCPサーバーはすぐにPiで利用可能になります。また、Pi内部にインタラクティブな/mcpパネルを提供し、接続済みサーバーの確認、接続状態のチェック、リアルタイムでのツール管理が可能です。

インストールはコマンド1つで完了します:

pi install npm:pi-mcp-adapter

Pi AgentをBright DataのWeb MCPに接続する方法

前提条件

始める前に、以下を確認してください:

  • Node.js 18以上がマシンにインストールされていること
  • APIキーを持つBright Dataアカウント。Bright Dataでサインアップできます。
  • Anthropic、OpenAI、Mistral、GoogleなどPiがサポートするモデルプロバイダーの有効なAPIキー

ステップ1:Pi Agentをインストールする

ターミナルを開き、プロジェクトフォルダに移動して以下を実行します:

npm install -g @mariozechner/pi-coding-agent

以下を実行してインストールを確認します:

pi --version

ステップ2:pi-mcp-adapterをインストールする

Piをインストールしたら、MCPアダプター拡張機能を追加します:

pi install npm:pi-mcp-adapter

ステップ3:Bright DataのAPIキーを取得する

[Bright Dataアカウント]()にログインし、ダッシュボードに移動します。「設定」をクリックし、「ユーザーとAPIキー」を選択してAPIダッシュボードを開くと、APIキーを確認・コピーできます。

また、メインダッシュボードを下にスクロールすると「クイックスタート」セクションがあり、設定を経由せずにAPIキーを直接コピーできます。

ステップ4:.mcp.jsonファイルを設定する

プロジェクトフォルダに.mcp.jsonという名前のファイルを作成します。このファイルは、Piがどのサーバーに接続し、どのように認証するかを指定します。以下の設定を追加します:

{
  "mcpServers": {
    "brightdata": {
      "command": "npx",
      "args": ["-y", "@brightdata/mcp"],
      "env": {
        "API_TOKEN": "YOUR_BRIGHT_DATA_API_KEY"
      }
    }
  }

}

YOUR_BRIGHT_DATA_API_KEYをBright Dataダッシュボードからコピーしたキーに置き換えてください。commandフィールドはアダプターにnpxでBright Data MCPサーバーを実行するよう指示するため、別途インストールは不要です。

サーバーはPiが初めて接続する際に自動的にダウンロードされ実行されます。

ステップ5:モデルプロバイダーに接続する

ターミナルで以下のコマンドを実行してPiを起動します:
pi

Piが起動すると、「Extensions」の下にpi-mcp-adapterが表示されたメインターミナルインターフェースが表示されます。

Piインターフェース

/loginと入力して、希望するモデルプロバイダーで認証します。Piはまず認証方法(サブスクリプションまたはAPIキー)の選択を求めます。
Piインターフェース

「APIキーを使用する」を選択し、リストからプロバイダーを選択します。PiはAnthropic、OpenAI、Google Gemini、Mistral、DeepSeekなど幅広いプロバイダーをサポートしています。
利用可能なプロバイダー

プロバイダーを選択してAPIキーを貼り付けると、Piは自動的に認証情報を保存します。次回以降のセッションではこの手順を繰り返す必要はありません。/modelと入力してモデル選択パネルを開き、使用するモデルを選択します。

モデル選択パネル

モデルを選択すると、ターミナルの右下隅に選択したモデルが表示されます。Piはプロンプトを受け付ける準備が整いました。

ステップ6:接続を確認する

Piが起動している状態で/mcpと入力してMCPパネルを開きます。Bright Dataサーバーが一覧表示されます。この時点では0/5と表示され、接続がまだ確立されていないことを示している場合があります。
Piインターフェース

矢印キーでBright Dataサーバーをハイライトし、Ctrl+Rを押して再接続します。接続に成功すると、ターミナル下部にMCP: 1/1 serversと表示され、Bright Dataがライブで使用可能であることが確認できます。

Piインターフェース

Escを押してパネルを閉じれば、最初のタスクを実行する準備が整いました。

ステップ7:実際のタスクを実行する

すべての接続が完了したら、Bright Dataのウェブツールを活用するプロンプトをPiに入力できます。以下のプロンプトをPiに入力してください:

Search the web for the official axios npm documentation, scrape the page, and generate a working JavaScript example that makes a GET request with error handling. Save it as axios-example.js
出力結果

Piはすぐにbrightdata_search_engineを呼び出してウェブを検索し、公式axiosドキュメントからリンクと説明付きのランク付き結果リストを返します。
ウェブを検索するPi agent

最も関連性の高いページを特定すると、Piはbrightdata_scrape_as_markdownを呼び出してaxiosドキュメントページの全コンテンツを抽出します。
作業中のPi agent

次にPiは追加ページをスクレイピングして、公式axiosドキュメントに記載されたエラーハンドリングパターンの全体像を把握します。
Pi agent

ドキュメントの完全な抽出が終わると、Piは包括的なaxios-example.jsファイルを生成し、完了したすべての内容を確認します。
Piの結果

ステップ8:出力を確認する

Piがタスクを完了すると、プロジェクトフォルダにaxios-example.jsが生成されます。このファイルには、Piがスクレイピングした公式axiosドキュメントから直接生成された6つの完全なサンプルが含まれています。
以下は、包括的なエラーハンドリングを含むGETリクエストを示すファイルの主要なサンプルの一つです:

async function example3AsyncAwaitGet() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
    console.log('Status Code:', response.status);
    console.log('Post Title:', response.data.title);
    console.log('Post Body:', response.data.body);
  } catch (error) {
    if (error.response) {
      console.error('Status Code:', error.response.status);
      console.error('Error Data:', error.response.data);
    } else if (error.request) {
      console.error('No response received from server');
    } else {
      console.error('Request setup error:', error.message);
    }
  }
}

To run the file, install axios and execute it with Node.js:
npm install axios
node axios-example.js

まとめ

このチュートリアルでは、Pi AgentをBright DataのWeb MCPサーバーに接続することで、リアルタイムのウェブアクセスを拡張する方法を紹介しました。pi-mcp-adapterをインストールしてシンプルな.mcp.jsonファイルを設定するだけで、Piはターミナルを離れることなくウェブを検索し、ライブドキュメントをスクレイピングしてからコードを生成できるようになります。

この組み合わせが優れているのは、両ツールの設計思想によるものです。Piは必要なものだけを追加できるミニマルな設計を維持し、Bright DataのWeb MCPはエージェントがすぐに活用できる信頼性の高い構造化されたウェブデータを提供します。結果として、モデルが既に知っていることだけに頼るのではなく、現実の最新情報に基づいてコードを生成するコーディングエージェントが実現します。

さらに詳しく探求したい場合、Bright Dataはここで紹介した以外にも幅広いウェブデータツールを提供しています。詳細はBright Dataのドキュメントをご覧ください。