browser-act skills — インストール & ライブデモ

Name: browser-act skills (Claude Skill)
Author: browser-act

なぜ使うのか

主な機能

スキーマガイド抽出 — JSON Schema を渡せばマッチするデータを取得
スクリーンショット＋LLM ループより高速・安価
マルチステップフロー（フォーム入力 → クリック → 結果スクレイプ）
合理的なデフォルト: レート制限、リトライ、礼儀正しい UA
実世界の SPA で高い信頼性

ライブデモ

実際の動作

準備完了

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： browser-act skills

JS ヘビーな SPA から型付きリストを抽出する

👤 API のないサイトから単発データが必要な開発者 ⏱ ~25 min intermediate

使うタイミング： JS 実行後にのみデータがレンダリングされるサイト。プレーンなフェッチでは何も返らない場合。

フロー

スキーマを定義する

Use browser-act. Schema: items[]{title:str, price:number, available:bool}.✓ コピーしました

→ スキーマ受理済み
訪問して抽出する

Open <url>; wait for the product grid; extract matching the schema.✓ コピーしました

→ 型付き JSON リスト
外れ値を検証する

Spot-check 3 random rows by re-fetching their detail page; check parsing is correct.✓ コピーしました

→ スポットチェック合格、またはバグ発見

結果： 信頼性の高い型付きデータ。手動クリック不要。

注意点

50 リクエスト後にサイトのボット検知がブロック — 同時実行数を下げる、UA をローテートする、robots.txt を尊重するかタスクをスキップ

組み合わせ： filesystem

マルチステップフォームを経てデータに到達する

👤 ログインやウィザードの裏にあるデータをスクレイピングする開発者 ⏱ ~40 min intermediate

使うタイミング： 「国を選択 → 年を選択 → 表示をクリック」というフローの裏に公開データセットがある場合。

フロー

フローを計画する

Use browser-act. Steps: pick country=US, year=2025, click 'View'. Then extract the table.✓ コピーしました

→ フロープラン受理済み
実行する

Run the flow for 50 country/year combinations.✓ コピーしました

→ 50 件すべての型付き行
保存する

Write each combo to /data/<country>-<year>.json.✓ コピーしました

→ /data/ 以下にファイル生成

結果： 手作業なしにクリック UI の裏にある大量データを取得。

注意点

サイトがステップを追加またはボタンのラベルを変更するとフローが壊れる — スキルが検知して一時停止する。フローを一度再記録するだけで 50 回繰り返す必要なし

組み合わせ： filesystem

ページの変化を監視してアラートを出す

👤 ステータスページや空き状況トラッカーを見ている誰でも ⏱ ~15 min beginner

使うタイミング： スロットが空く、価格が下がる、ドキュメントが更新されたタイミングを知りたい場合。

フロー

監視を設定する

Use browser-act. Watch <url> selector '.availability-banner' every 10 minutes. Alert if text changes.✓ コピーしました

→ 監視アクティブ
アラート先を設定する

Alert via: write to ~/inbox/alerts.txt + notify webhook https://<my-webhook>.✓ コピーしました

→ 変化時に両方が発火

結果： 特定シグナルのハンズフリー監視。

注意点

過剰な監視頻度でブロックされる — ほとんどのサイトでは 5 分以上の間隔を維持し、429 を尊重する

組み合わせ

他のMCPと組み合わせて10倍の力を

browser-act-skill + filesystem

スクレイピングデータを構造化パスに保存する

Save extraction outputs to /data/<source>/<date>.json with provenance metadata.✓ コピーしました

browser-act-skill + duckduckgo-mcp

検索でページを見つけてから構造化データを抽出する

Search via duckduckgo-mcp for the data source; pass the URL into browser-act for typed extraction.✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
extract_typed	url, schema, wait_for?	ページから構造化データを取得する	Browser run + LLM tokens
run_flow	steps[], schema?	マルチステップのナビゲーション	Multi-step browser cost
watch	url, selector, interval, action	長時間の変化検知	Per-poll cost
screenshot	url, full_page?	ビジュアルデバッグ	Browser run

コストと制限

運用コスト

APIクォータ: プロバイダー依存。バンドルブラウザで一部フローは無料
呼び出しあたりのトークン: スキーマガイド抽出はスクリーンショット＋思考より安価
金額: スキル無料、抽出には LLM トークンが必要
ヒント: 常にスキーマを渡すこと — 無指定の抽出はノイズにトークンを浪費する

セキュリティ

権限、シークレット、影響範囲

最小スコープ： Outbound HTTPS

認証情報の保管： サイトにログインする場合、秘密情報は env var 経由。単発スクレイプ後はローテートすること

データ送信先： 対象サイト + LLM プロバイダー

絶対に付与しない： Persistent login tokens stored in the skill's workspace

対象サイトの robots.txt と利用規約を尊重すること。スキルはツールであり、ポリシー無視のライセンスではない

トラブルシューティング

よくあるエラーと対処法

抽出結果が空

セレクタの待機時間を延ばす。サイトが遅延や XHR クリック後にデータを読み込む可能性がある

確認： Use screenshot tool to verify page state

サイトがボット検知する

同時実行数を下げる、UA をローテートする、サイトがスクレイピングを許可しているか検討する

スキーマ不一致

型を緩める（string vs number）。サイトの書式が厳密な型を壊す場合がある

見た目の変化で Watch が頻繁に発火する

セレクタをより絞り込む。または HTML diff ではなくテキストベースの diff に切り替える

代替案

browser-act skills 他との比較

代替案	代わりに使う場面	トレードオフ
Playwright MCP / chrome-devtools-mcp	フル DevTools 機能を含む完全なブラウザ制御が必要な場合	重い。呼び出し毎のコストが高い
Firecrawl MCP	ページ単位の型付き抽出ではなくサイト全体のクロールが必要な場合	形状が異なる。大規模ボリュームは有料
duckduckgo-mcp fetch_content	ページがプレーン HTML で JS 不要な場合	SPA では動作しない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る