> ## Documentation Index > Fetch the complete documentation index at: https://docs.firecrawl.dev/llms.txt > Use this file to discover all available pages before exploring further. # スクレイピング後にページをInteract > プロンプトまたはコード実行で、取得したページを操作します。 ページをスクレイピングしてクリーンなデータを取得し、その後 `/interact` を呼び出して、そのページ上でアクションを開始します: ボタンのクリック、フォームへの入力、動的コンテンツの抽出、さらに深いページへの移動が可能です。やりたいことを記述するだけでもよく、完全に制御したい場合はコードを書くこともできます。 ページ上で実行したいアクションを記述します Playwright や agent-browser を使って、安全にコード実行で操作できます 埋め込み可能なストリームを通じて、ブラウザーをリアルタイムで確認したり操作したりできます
## 動作の仕組み
1. `POST /v2/scrape` で URL を**スクレイピング**します。レスポンスには `data.metadata.scrapeId` に `scrapeId` が含まれます。ブラウザの状態を保持したい場合は、このリクエストで `profile` を渡します。 2. `prompt` または Playwright の `code` を指定して `POST /v2/scrape/{scrapeId}/interact` を呼び出し、**Interact**します。ここでは `profile` を渡さないでください。Interact セッションはスクレイピングジョブから `profile` を引き継ぎます。 3. 完了したら、`DELETE /v2/scrape/{scrapeId}/interact` でセッションを**停止**します。書き込み可能な `profile` では、セッションの停止時に変更が保存されます。
## クイックスタート
ページをスクレイピングし、操作し、セッションを停止します: ```python Python theme={null} from firecrawl import Firecrawl app = Firecrawl( # 開始にAPIキーは不要です — より高いレート制限のために追加してください: # api_key="fc-YOUR-API-KEY", ) # 1. Amazonのホームページをスクレイピング result = app.scrape("https://www.amazon.com", formats=["markdown"]) scrape_id = result.metadata.scrape_id # 2. インタラクト — 商品を検索して価格を取得 app.interact(scrape_id, prompt="Search for iPhone 16 Pro Max") response = app.interact(scrape_id, prompt="Click on the first result and tell me the price") print(response.output) # 3. セッションを停止 app.stop_interaction(scrape_id) ``` ```js Node theme={null} import { Firecrawl } from 'firecrawl'; const app = new Firecrawl({ // 開始にAPIキーは不要です — レート制限を引き上げるには追加してください: // apiKey: 'fc-YOUR-API-KEY', }); // 1. Scrape Amazon's homepage const result = await app.scrape('https://www.amazon.com', { formats: ['markdown'] }); const scrapeId = result.metadata?.scrapeId; // 2. Interact — search for a product and get its price await app.interact(scrapeId, { prompt: 'Search for iPhone 16 Pro Max' }); const response = await app.interact(scrapeId, { prompt: 'Click on the first result and tell me the price' }); console.log(response.output); // 3. Stop the session await app.stopInteraction(scrapeId); ``` ```bash cURL theme={null} # 1. Amazonのホームページをスクレイピングする # 開始時にAPI keyは不要 — より高いレート制限を利用するには -H "Authorization: Bearer $FIRECRAWL_API_KEY" を追加してください: RESPONSE=$(curl -s -X POST "https://api.firecrawl.dev/v2/scrape" \ -H "Content-Type: application/json" \ -d '{"url": "https://www.amazon.com", "formats": ["markdown"]}') SCRAPE_ID=$(echo $RESPONSE | jq -r '.data.metadata.scrapeId') # 2. インタラクト — 商品を検索して価格を取得する curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{"prompt": "Search for iPhone 16 Pro Max"}' curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{"prompt": "Click on the first result and tell me the price"}' # 3. セッションを停止する curl -s -X DELETE "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" ``` ```bash CLI theme={null} # 1. AmazonのホームページをスクレイピングするスクレイピングIDは自動的に保存されます） firecrawl scrape https://www.amazon.com # 2. 操作する — 商品を検索して価格を取得する firecrawl interact "Search for iPhone 16 Pro Max" firecrawl interact "Click on the first result and tell me the price" # 3. セッションを停止する firecrawl interact stop ``` ```json Response theme={null} { "success": true, "cdpUrl": "wss://browser.firecrawl.dev/...", "liveViewUrl": "https://liveview.firecrawl.dev/...", "interactiveLiveViewUrl": "https://liveview.firecrawl.dev/...", "output": "The iPhone 16 Pro Max (256GB) is priced at $1,199.00.", "exitCode": 0, "killed": false } ```
## プロンプトで操作する
ページを操作する最も簡単な方法です。やりたいことを自然言語で記述するだけで、自動的にクリック、入力、スクロール、データの抽出を行います。 ```python Python theme={null} response = app.interact(scrape_id, prompt="What are the customer reviews saying about battery life?") print(response.output) ``` ```js Node theme={null} const response = await app.interact(scrapeId, { prompt: 'What are the customer reviews saying about battery life?', }); console.log(response.output); ``` ```bash cURL theme={null} # 開始するためにAPIキーは不要です — より高いrate limitsを利用するには -H "Authorization: Bearer $FIRECRAWL_API_KEY" を追加してください: curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{ "prompt": "What are the customer reviews saying about battery life?" }' ``` ```bash CLI theme={null} firecrawl interact "What are the customer reviews saying about battery life?" ``` レスポンスには、エージェントの回答が含まれる `output` フィールドがあります。 ```json Response theme={null} { "success": true, "cdpUrl": "wss://browser.firecrawl.dev/...", "liveViewUrl": "https://liveview.firecrawl.dev/...", "interactiveLiveViewUrl": "https://liveview.firecrawl.dev/...", "output": "Customers are generally positive about battery life. Most reviewers report 8-10 hours of use on a single charge. A few noted it drains faster with heavy multitasking.", "stdout": "...", "result": "...", "stderr": "", "exitCode": 0, "killed": false } ```
### プロンプトは小さく、焦点を絞る
プロンプトは、それぞれが**単一の明確なタスク**であるときに最も効果を発揮します。エージェントに複雑な複数ステップのワークフローを一度に実行させるのではなく、個別の `interact` 呼び出しに分けてください。各呼び出しは同じブラウザセッションを再利用するため、それまでの状態が引き継がれます。
## コードの実行
より細かく制御したい場合は、ブラウザサンドボックスでコードを直接実行できます。`page` 変数 (Playwright の Page オブジェクト) は Node.js と Python で利用できます。Bash モードには [agent-browser](https://github.com/vercel-labs/agent-browser) がプリインストールされています。セッション内でスクリーンショットを撮ることもできます: Node.js では `(await page.screenshot()).toString("base64")`、Python では `await page.screenshot(path="/tmp/screenshot.png")`、Bash では `agent-browser screenshot` を使用してください。
### Node.js (Playwright)
デフォルトの言語です。Playwright のコードを直接記述できます。`page` はすでにブラウザに接続されています。 ```python Python theme={null} response = app.interact(scrape_id, code=""" // ボタンをクリックしてナビゲーションを待機 await page.click('#next-page'); await page.waitForLoadState('networkidle'); // 新しいページからコンテンツを取得 const title = await page.title(); const content = await page.$eval('.article-body', el => el.textContent); JSON.stringify({ title, content }); """) print(response.result) ``` ```js Node theme={null} const response = await app.interact(scrapeId, { code: ` // ボタンをクリックしてナビゲーションを待機する await page.click('#next-page'); await page.waitForLoadState('networkidle'); // 新しいページからコンテンツを抽出する const title = await page.title(); const content = await page.$eval('.article-body', el => el.textContent); JSON.stringify({ title, content }); `, }); console.log(response.result); ``` ```bash cURL theme={null} # 開始するためにAPI keyは不要です — より高いrate limitsを利用するには -H "Authorization: Bearer $FIRECRAWL_API_KEY" を追加してください: curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{ "code": "await page.click(\"#next-page\"); await page.waitForLoadState(\"networkidle\"); const title = await page.title(); JSON.stringify({ title });", "language": "node", "timeout": 30 }' ``` ```bash CLI theme={null} # 最後のスクレイピングを自動的に使用する firecrawl interact -c " await page.click('#next-page'); await page.waitForLoadState('networkidle'); const title = await page.title(); const content = await page.\$eval('.article-body', el => el.textContent); JSON.stringify({ title, content }); " # またはスクレイピングIDを明示的に渡す # firecrawl interact -c "await page.title()" ```
### Python
Playwright の Python API を使う場合は、`language` を `"python"` に設定します。 ```python Python theme={null} response = app.interact( scrape_id, code=""" import json await page.click('#load-more') await page.wait_for_load_state('networkidle') items = await page.query_selector_all('.item') data = [] for item in items: text = await item.text_content() data.append(text.strip()) print(json.dumps(data)) """, language="python", ) print(response.stdout) ``` ```js Node theme={null} const response = await app.interact(scrapeId, { code: ` import json await page.click('#load-more') await page.wait_for_load_state('networkidle') items = await page.query_selector_all('.item') data = [] for item in items: text = await item.text_content() data.append(text.strip()) print(json.dumps(data)) `, language: 'python', }); console.log(response.stdout); ``` ```bash cURL theme={null} # 開始にAPIキーは不要です — より高いrate limitsを利用するには -H "Authorization: Bearer $FIRECRAWL_API_KEY" を追加してください: curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{ "code": "import json\nawait page.click(\"#load-more\")\nawait page.wait_for_load_state(\"networkidle\")\nitems = await page.query_selector_all(\".item\")\ndata = [await i.text_content() for i in items]\nprint(json.dumps(data))", "language": "python" }' ``` ```bash CLI theme={null} firecrawl interact --python -c " import json await page.click('#load-more') await page.wait_for_load_state('networkidle') items = await page.query_selector_all('.item') data = [await i.text_content() for i in items] print(json.dumps(data)) " ```
### Bash (agent-browser)
[agent-browser](https://github.com/vercel-labs/agent-browser) は、60 以上のコマンドがプリインストールされたサンドボックス内の CLI です。要素参照 (`@e1`, `@e2`, ...) 付きのアクセシビリティツリーを提供し、LLM による自動化に最適です。 ```python Python theme={null} # インタラクティブな要素を確認するためにスナップショットを取得する snapshot = app.interact( scrape_id, code="agent-browser snapshot -i", language="bash", ) print(snapshot.stdout) # 出力: # [document] # @e1 [input type="text"] "Search..." # @e2 [button] "Search" # @e3 [link] "About" # @refs を使用して要素を操作する app.interact( scrape_id, code='agent-browser fill @e1 "firecrawl" && agent-browser click @e2', language="bash", ) ``` ```js Node theme={null} // インタラクティブな要素を確認するためにスナップショットを取得する const snapshot = await app.interact(scrapeId, { code: 'agent-browser snapshot -i', language: 'bash', }); console.log(snapshot.stdout); // Output: // [document] // @e1 [input type="text"] "Search..." // @e2 [button] "Search" // @e3 [link] "About" // @refs を使用して要素を操作する await app.interact(scrapeId, { code: 'agent-browser fill @e1 "firecrawl" && agent-browser click @e2', language: 'bash', }); ``` ```bash cURL theme={null} # インタラクティブな要素を確認するためにスナップショットを取得する # 開始するにはAPIキーは不要です — より高いレート制限を利用するには -H "Authorization: Bearer $FIRECRAWL_API_KEY" を追加してください: curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{"code": "agent-browser snapshot -i", "language": "bash"}' # Interact with elements using @refs curl -s -X POST "https://api.firecrawl.dev/v2/scrape/$SCRAPE_ID/interact" \ -H "Content-Type: application/json" \ -d '{"code": "agent-browser fill @e1 \"firecrawl\" && agent-browser click @e2", "language": "bash"}' ``` ```bash CLI theme={null} # インタラクティブな要素を確認するためにスナップショットを取得する firecrawl interact --bash -c "agent-browser snapshot -i" # @refs を使用して要素を操作する firecrawl interact --bash -c 'agent-browser fill @e1 "firecrawl" && agent-browser click @e2' ``` 一般的な agent-browser コマンド: | コマンド | 説明 | | ------------------------- | --------------------- | | `snapshot` | 要素参照付きの完全なアクセシビリティツリー | | `snapshot -i` | インタラクティブな要素のみ | | `click @e1` | 参照で要素をクリック | | `fill @e1 "text"` | フィールドをクリアしてテキストを入力 | | `type @e1 "text"` | クリアせずにテキストを入力 | | `press Enter` | キーボードのキーを押す | | `scroll down 500` | 500 ピクセル下にスクロール | | `get text @e1` | テキストコンテンツを取得 | | `get url` | 現在の URL を取得 | | `wait @e1` | 要素が表示されるまで待機 | | `wait --load networkidle` | ネットワークがアイドル状態になるまで待機 | | `find text "X" click` | テキストで要素を見つけてクリック | | `screenshot` | 現在のページのスクリーンショットを撮る | | `eval "js code"` | ページ内で JavaScript を実行 |
## ライブビュー
すべての Interact レスポンスでは、埋め込んでブラウザをリアルタイムで確認できる `liveViewUrl` が返されます。デバッグやデモ、ブラウザ駆動の UI の構築に便利です。 ```json Response theme={null} { "success": true, "cdpUrl": "wss://browser.firecrawl.dev/...", "liveViewUrl": "https://liveview.firecrawl.dev/...", "interactiveLiveViewUrl": "https://liveview.firecrawl.dev/...", "stdout": "", "result": "...", "exitCode": 0 } ``` ```html theme={null}