Steel Puppeteer

鋼鉄の操り人形師

PuppeteerとSteelを用いたブラウザ自動化機能を提供するモデルコンテキストプロトコル（LLM）サーバー。このサーバーにより、LLMはWebページを操作したり、スクリーンショットを撮ったり、実際のブラウザ環境でJavaScriptを実行したりできるようになります。

コンポーネント

ツール

• 操り人形師ナビゲート
  • ブラウザで任意のURLに移動する
  • 入力:
    • url (文字列、必須): 移動先のURL
    • timeout （数値、オプション、デフォルト：60000）：ナビゲーションのタイムアウト（ミリ秒）
    • waitUntil (文字列、オプション、デフォルト: "domcontentloaded"): ナビゲーションが成功したと判断するタイミング。オプション: "load", "domcontentloaded", "networkidle0", "networkidle2"
• 操り人形師のスクリーンショット
  • ページ全体または特定の要素のスクリーンショットをキャプチャします
  • 入力:
    • name (文字列、必須): スクリーンショットの名前
    • selector （文字列、オプション）：スクリーンショットを撮る要素のCSSセレクター
• 操り人形師クリック
  • ページ上の要素をクリック
  • 入力: selector (文字列、必須): クリックする要素の CSS セレクター
• 操り人形師の塗りつぶし
  • 入力フィールドに記入してください
  • 入力:
    • selector （文字列、必須）: 入力フィールドの CSS セレクター
    • value (文字列、必須): 入力する値
• 操り人形師の選択
  • SELECTタグで要素を選択する
  • 入力:
    • selector （文字列、必須）: 選択する要素の CSS セレクター
    • value (文字列、必須): 選択する値
• 操り人形師_hover
  • ページ上の要素をホバーする
  • 入力: selector (文字列、必須): ホバーする要素の CSS セレクター
• 操り人形師の評価
  • ブラウザコンソールでJavaScriptを実行する
  • 入力: script (文字列、必須): 実行する JavaScript コード
• 操り人形師のコンテンツ取得
  • 現在のページからコンテンツを抽出する
  • 入力: selector （文字列、オプション）: 特定の要素からコンテンツを取得するためのCSSセレクター。指定されていない場合は、ページ全体のコンテンツを返します。
• 操り人形師のスクロール
  • ページをスクロールして遅延読み込みをトリガーします
  • 入力:
    • scrollDelay (数値、オプション、デフォルト: 100): スクロール間の遅延時間（ミリ秒）
    • maxScrolls （数値、オプション、デフォルト：50）：最大スクロール数

リソース

サーバーは、次の 2 種類のリソースへのアクセスを提供します。

1. コンソールログ( console://logs )
   • ブラウザコンソールのテキスト形式の出力
   • ブラウザからのすべてのコンソールメッセージが含まれます
2. スクリーンショット( screenshot://<name> )
   • キャプチャしたスクリーンショットのPNG画像
   • キャプチャ時に指定したスクリーンショット名からアクセスできます

主な特徴

• Puppeteerによるブラウザ自動化
• ブラウザセッション管理のためのSteel統合
• コンソールログの監視とキャプチャ
• スクリーンショット機能
• JavaScript実行
• 基本的なウェブインタラクション（ナビゲーション、クリック、フォームの入力）
• トークン制限処理によるコンテンツ抽出
• スクロールによる遅延読み込みのサポート
• ローカルおよびリモートの Steel インスタンスのサポート

構成

クロードデスクトップ構成

Claude Desktop で Steel Puppeteer サーバーを使用するには、Claude Desktop 構成ファイル (通常、macOS では~/Library/Application Support/Claude/claude_desktop_config.jsonにあります) に次の構成を追加します。

"path/to/steel-puppeteer/dist/index.js"システム上のコンパイルされた JavaScript ファイルへの実際のパスに置き換えます。

環境変数

Steel Puppeteer サーバーは、次の環境変数を使用して構成できます。

• STEEL_LOCAL (オプション、デフォルト: "false"): クラウド サービスの代わりにローカル Steel インスタンスを使用するには、"true" に設定します。
• STEEL_API_KEY ( STEEL_LOCALが「false」の場合にのみ必要): クラウド サービスを使用する際の認証用の Steel API キー。
• STEEL_URL (オプション): カスタム デプロイメントを使用している場合の Steel インスタンスの URL。

サーバー構成

Steel Puppeteerサーバーを直接（Claude Desktop経由ではなく）実行している場合は、シェルでこれらの環境変数を設定するか、プロジェクトルートに.envファイルを作成できます。ローカルで使用するための.envファイルの例を以下に示します。

Steel クラウド サービスを使用している場合、 .envファイルは次のようになります。

サーバーの実行

Steel Puppeteer サーバーを起動するには:

1. 依存関係をインストールします:
   npm install
2. プロジェクトをビルドします。
   npm run build
3. サーバーを起動します。
   npm start
4. Claude Desktop を開いてブラウズしてみましょう。サーバーが起動し、指定されたポート (デフォルト: 3000) でリッスンします。

トラブルシューティング

• Puppeteerで問題が発生した場合は、システムに必要な依存関係がインストールされていることを確認してください。詳細については、 Puppeteerのトラブルシューティングガイドを参照してください。
• Steel クラウド サービスを使用する場合は、Steel API キーが有効であり、必要な権限があることを確認してください。
• ローカル Steel インスタンスを使用している場合は、それが実行されており、指定された URL (カスタムの場合) またはデフォルトのローカル アドレスでアクセス可能であることを確認します。

より詳細な設定オプションと高度な使用方法については、Steel のドキュメントと Puppeteer API リファレンスを参照してください。