From 025e41434f64e704934c04064345bf7ba230c87e Mon Sep 17 00:00:00 2001 From: kathayl Date: Fri, 10 Apr 2026 17:03:36 -0700 Subject: [PATCH 01/12] Add Live View and Human in the Loop feature docs --- .../features/human-in-the-loop.mdx | 77 +++++++++ .../browser-rendering/features/live-view.mdx | 160 ++++++++++++++++++ 2 files changed, 237 insertions(+) create mode 100644 src/content/docs/browser-rendering/features/human-in-the-loop.mdx create mode 100644 src/content/docs/browser-rendering/features/live-view.mdx diff --git a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx new file mode 100644 index 00000000000..80f871d1bfb --- /dev/null +++ b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx @@ -0,0 +1,77 @@ +--- +pcx_content_type: how-to +title: Human in the Loop +description: Temporarily hand off browser control to a human operator for authentication, sensitive actions, or tasks that are difficult to fully automate. +sidebar: + order: 3 + badge: Beta +--- + +Some browser automation workflows require manual intervention. A login page may need multi-factor authentication, a form may require sensitive credentials you do not want to pass to an automation script, or a task may be too complex to fully automate. Human in the Loop lets you pause an automation script and hand off control to a human operator through [Live View](/browser-rendering/features/live-view/), then resume the script once the human is done. + +## How it works + +Human in the Loop builds on [Live View](/browser-rendering/features/live-view/) and the [CDP](/browser-rendering/cdp/) endpoints: + +1. Your automation script navigates to a page that needs human input +2. The script retrieves the Live View URL via `Cloudflare.getLiveView` and shares it with a human operator (for example, by logging it, sending it via Slack, or displaying it in a UI) +3. The human operator opens the Live View URL and completes the required action (logging in, solving a CAPTCHA, entering sensitive data, etc.) +4. The automation script detects that the human is done (for example, by waiting for a navigation event or polling for a page element) and resumes + +## Example: login with human assistance + +This example uses [Puppeteer](/browser-rendering/puppeteer/) connected to Browser Run via the [CDP](/browser-rendering/cdp/) endpoints. The script navigates to a login page, shares a Live View URL for a human to enter credentials, then continues the automation after login completes. + +```js +import puppeteer from "puppeteer-core"; + +const ACCOUNT_ID = "your-account-id"; +const API_TOKEN = "your-api-token"; + +// Create a browser session via CDP +const response = await fetch( + `https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser?keep_alive=600000`, + { + method: "POST", + headers: { Authorization: `Bearer ${API_TOKEN}` }, + } +); +const { webSocketDebuggerUrl } = await response.json(); + +// Connect Puppeteer to the session +const browser = await puppeteer.connect({ + browserWSEndpoint: webSocketDebuggerUrl, + headers: { Authorization: `Bearer ${API_TOKEN}` }, +}); + +const page = await browser.newPage(); +await page.goto("https://example.com/login"); + +// Get the Live View URL so a human can interact with the session +const cdp = await page.createCDPSession(); +const { devtoolsFrontendUrl: liveUrl } = await cdp.send( + "Cloudflare.getLiveView" +); + +// Share the Live View URL with the human operator +console.log(`Human input needed. Open this URL: ${liveUrl}`); + +// Wait for the human to complete login +await page.waitForNavigation({ waitUntil: "networkidle0", timeout: 300000 }); + +// Login complete, continue automation +const cookies = await page.cookies(); +console.log("Login complete. Continuing automation..."); + +await page.goto("https://example.com/dashboard"); +const content = await page.content(); + +browser.disconnect(); +``` + +## Use cases + +- **Authentication flows**: Login pages with MFA, SSO, or CAPTCHA that cannot be bypassed programmatically +- **Sensitive data entry**: Forms requiring credentials or personal information you do not want to pass to an automation script +- **Complex interactions**: One-off tasks that are too difficult or not worth fully automating, such as configuring a dashboard or approving a workflow +- **Verification steps**: Confirming an order, reviewing generated content, or approving an action before the script proceeds diff --git a/src/content/docs/browser-rendering/features/live-view.mdx b/src/content/docs/browser-rendering/features/live-view.mdx new file mode 100644 index 00000000000..b71cfb68b46 --- /dev/null +++ b/src/content/docs/browser-rendering/features/live-view.mdx @@ -0,0 +1,160 @@ +--- +pcx_content_type: how-to +title: Live View +description: View and interact with remote Browser Run sessions in real time using the hosted DevTools UI or native Chrome DevTools. +sidebar: + order: 2 + badge: Beta +--- + +import { CURL, DashButton, Tabs, TabItem } from "~/components"; + +Live View lets you see and interact with a remote Browser Run session in real time. This is useful for debugging automation scripts, monitoring what a browser is doing, or manually stepping in when a task requires human intervention (see [Human in the Loop](/browser-rendering/features/human-in-the-loop/)). + +Live View is available for any browser session created through the [CDP](/browser-rendering/cdp/) endpoints. + +## How to access Live View + +There are three ways to access Live View: through the Cloudflare dashboard, via the hosted UI at `live.browser.run`, or using native Chrome DevTools. + +### Cloudflare dashboard + +In the Cloudflare dashboard, go to the **Browser Run** page and select the **Live Sessions** tab. This shows all active browser sessions in your account. Expand a session to see its tabs, then select **Open** to open the Live View for that tab. + + + +### Hosted UI (any browser) + +When you create a session or list targets through the [CDP](/browser-rendering/cdp/) endpoints, the API response includes a `devtoolsFrontendUrl` for each target (tab). Open this URL in any browser to load the DevTools UI hosted at `live.browser.run`, which streams the remote session to your browser. + +The hosted UI supports three viewing modes, controlled by the `mode` parameter in the URL: + +| Mode | URL pattern | Description | +| --- | --- | --- | +| Tab | `https://live.browser.run/ui/view?mode=tab&wss=...` | DevTools inspector panel (Elements, Console, Network, etc.) | +| Full | `https://live.browser.run/ui/view?mode=full&wss=...` | Full browser chrome with address bar and tab strip | +| Inspector | `https://live.browser.run/ui/inspector?wss=...` | Standalone inspector view | + +### Native Chrome DevTools (Chrome only) + +Because Browser Run speaks standard CDP, you can connect Chrome's built-in DevTools directly to a remote session. Replace the `https://live.browser.run/ui/inspector?wss=` prefix in the `devtoolsFrontendUrl` with the `devtools://` protocol: + +``` +devtools://devtools/bundled/inspector.html?wss=live.browser.run/api/devtools/browser/SESSION_ID/page/TARGET_ID?jwt=... +``` + +Paste this URL into Chrome's address bar to open native DevTools connected to the remote browser session. + +**Pros:** +- Familiar UI: the exact same DevTools you use daily for local development, rather than a hosted version wrapped inside a webpage +- Slightly faster to load: DevTools assets (HTML, JS, CSS) are already bundled locally in Chrome + +**Cons:** +- Chrome only: the `devtools://` protocol URL only works in Chrome. The hosted `live.browser.run` version works in other browsers, though the DevTools UI has not been heavily tested outside Chrome. +- Inspector tab only: does not work for the full or tab viewing modes + +:::caution[URL validity] +The `devtoolsFrontendUrl` is valid for five minutes from when it was generated. If you do not open the URL within this timeframe, list the targets again to get a fresh URL. Once the DevTools connection is established, it remains active as long as the browser session is alive. +::: + +## View a new session + +1. Create a browser session with `targets=true` to include target URLs in the response: + + + +```json +{ + "sessionId": "1909cef7-23e8-4394-bc31-27404bf4348f", + "targets": [ + { + "description": "", + "devtoolsFrontendUrl": "https://live.browser.run/ui/inspector?wss=live.browser.run/api/devtools/browser/1909cef7-.../page/8E598E99...?jwt=...", + "id": "8E598E996530FB09E46A22B8B7754F7F", + "title": "about:blank", + "type": "page", + "url": "about:blank", + "webSocketDebuggerUrl": "wss://live.browser.run/api/devtools/browser/1909cef7-.../page/8E598E99...?jwt=..." + } + ], + "webSocketDebuggerUrl": "wss://api.cloudflare.com/client/v4/accounts/{account_id}/browser-rendering/devtools/browser/1909cef7-..." +} +``` + +2. Copy the `devtoolsFrontendUrl` from `targets[0]` and open it in your browser. You now have a live, interactive view of the remote browser session. + +## View an existing session + +If you have a running session and want to connect to it: + +1. List your active sessions: + + + +2. Using the session ID, list the targets in that session: + + + +```json +[ + { + "id": "110850A800BDB8B593CDDA30676635CF", + "type": "page", + "url": "https://example.com", + "title": "Example Domain", + "description": "", + "devtoolsFrontendUrl": "https://live.browser.run/ui/view?wss=live.browser.run/api/devtools/browser/28d75446-.../page/110850A8...?jwt=...", + "webSocketDebuggerUrl": "wss://live.browser.run/api/devtools/browser/28d75446-.../page/110850A8...?jwt=..." + } +] +``` + +3. Copy the `devtoolsFrontendUrl` and open it in your browser. + +## Get the Live View URL programmatically + +You can retrieve the Live View URL from within a Puppeteer or Playwright script using a CDP command. This is useful when you need to share the URL with someone, for example sending it via email, Slack, or displaying it in a UI. + + + +```js +const cdp = await page.createCDPSession(); +const { devtoolsFrontendUrl } = await cdp.send("Cloudflare.getLiveView"); + +console.log(`Live View: ${devtoolsFrontendUrl}`); +``` + + + +```js +const cdp = await page.context().newCDPSession(page); +const { devtoolsFrontendUrl } = await cdp.send("Cloudflare.getLiveView"); + +console.log(`Live View: ${devtoolsFrontendUrl}`); +``` + + + +You can also get the Live View URL from the HTTP API by listing targets for a session, as shown in [View an existing session](#view-an-existing-session). Each target in the response includes a `devtoolsFrontendUrl`. From 403a8094f76cd96316912497e7971fb56baf0dce Mon Sep 17 00:00:00 2001 From: kathayl Date: Fri, 10 Apr 2026 17:45:15 -0700 Subject: [PATCH 02/12] =?UTF-8?q?Reorder=20sidebar=20(Live=20View=201,=20H?= =?UTF-8?q?ITL=202),=20fix=20CDP=E2=86=92Browser=20Sessions=20wording,=20a?= =?UTF-8?q?dd=20coming-soon=20handoff=20note,=20style=20fixes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../browser-rendering/features/custom-fonts.mdx | 2 +- .../features/human-in-the-loop.mdx | 16 +++++++++------- .../browser-rendering/features/live-view.mdx | 6 +++--- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/content/docs/browser-rendering/features/custom-fonts.mdx b/src/content/docs/browser-rendering/features/custom-fonts.mdx index b858a32ac0b..c314916c488 100644 --- a/src/content/docs/browser-rendering/features/custom-fonts.mdx +++ b/src/content/docs/browser-rendering/features/custom-fonts.mdx @@ -3,7 +3,7 @@ pcx_content_type: how-to title: Custom fonts description: Learn how to add custom fonts to Browser Rendering for use in screenshots and PDFs. sidebar: - order: 1 + order: 3 --- import { Tabs, TabItem } from "~/components"; diff --git a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx index 80f871d1bfb..6020b3b9b32 100644 --- a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx +++ b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx @@ -3,20 +3,22 @@ pcx_content_type: how-to title: Human in the Loop description: Temporarily hand off browser control to a human operator for authentication, sensitive actions, or tasks that are difficult to fully automate. sidebar: - order: 3 + order: 2 badge: Beta --- -Some browser automation workflows require manual intervention. A login page may need multi-factor authentication, a form may require sensitive credentials you do not want to pass to an automation script, or a task may be too complex to fully automate. Human in the Loop lets you pause an automation script and hand off control to a human operator through [Live View](/browser-rendering/features/live-view/), then resume the script once the human is done. +Some browser automation workflows require manual intervention. A login page may need multi-factor authentication, a form may require sensitive credentials you do not want to pass to an automation script, or a task may be too complex to fully automate. Human in the Loop lets a human step into a live browser session through [Live View](/browser-rendering/features/live-view/) to handle what automation cannot, then hand control back to the script. ## How it works -Human in the Loop builds on [Live View](/browser-rendering/features/live-view/) and the [CDP](/browser-rendering/cdp/) endpoints: +Human in the Loop works with any [Browser Session](/browser-rendering/#integration-methods) and uses [Live View](/browser-rendering/features/live-view/) to give humans access: -1. Your automation script navigates to a page that needs human input -2. The script retrieves the Live View URL via `Cloudflare.getLiveView` and shares it with a human operator (for example, by logging it, sending it via Slack, or displaying it in a UI) -3. The human operator opens the Live View URL and completes the required action (logging in, solving a CAPTCHA, entering sensitive data, etc.) -4. The automation script detects that the human is done (for example, by waiting for a navigation event or polling for a page element) and resumes +1. Your automation script navigates to a page that needs human input. +2. The script retrieves the Live View URL via `Cloudflare.getLiveView` and shares it with a human operator (for example, by logging it, sending it via Slack, or displaying it in a UI). +3. The human operator opens the Live View URL and completes the required action (logging in, solving a CAPTCHA, entering sensitive data, etc.). +4. The automation script detects that the human is done (for example, by waiting for a navigation event or polling for a page element) and resumes. + +A more structured handoff flow where the agent can signal that it needs help and notify a human is coming soon. ## Example: login with human assistance diff --git a/src/content/docs/browser-rendering/features/live-view.mdx b/src/content/docs/browser-rendering/features/live-view.mdx index b71cfb68b46..c78c6299bb4 100644 --- a/src/content/docs/browser-rendering/features/live-view.mdx +++ b/src/content/docs/browser-rendering/features/live-view.mdx @@ -3,7 +3,7 @@ pcx_content_type: how-to title: Live View description: View and interact with remote Browser Run sessions in real time using the hosted DevTools UI or native Chrome DevTools. sidebar: - order: 2 + order: 1 badge: Beta --- @@ -11,7 +11,7 @@ import { CURL, DashButton, Tabs, TabItem } from "~/components"; Live View lets you see and interact with a remote Browser Run session in real time. This is useful for debugging automation scripts, monitoring what a browser is doing, or manually stepping in when a task requires human intervention (see [Human in the Loop](/browser-rendering/features/human-in-the-loop/)). -Live View is available for any browser session created through the [CDP](/browser-rendering/cdp/) endpoints. +Live View is available for any [Browser Session](/browser-rendering/#integration-methods), including sessions created with [Puppeteer](/browser-rendering/puppeteer/), [Playwright](/browser-rendering/playwright/), or the [CDP](/browser-rendering/cdp/) endpoints. ## How to access Live View @@ -39,7 +39,7 @@ The hosted UI supports three viewing modes, controlled by the `mode` parameter i Because Browser Run speaks standard CDP, you can connect Chrome's built-in DevTools directly to a remote session. Replace the `https://live.browser.run/ui/inspector?wss=` prefix in the `devtoolsFrontendUrl` with the `devtools://` protocol: -``` +```txt devtools://devtools/bundled/inspector.html?wss=live.browser.run/api/devtools/browser/SESSION_ID/page/TARGET_ID?jwt=... ``` From 26bdfdac9668e2b012eeecda80a19b8358e7ab19 Mon Sep 17 00:00:00 2001 From: kathayl Date: Mon, 13 Apr 2026 10:37:11 -0700 Subject: [PATCH 03/12] Address review feedback on Live View and HITL docs - Remove Full viewing mode row (not yet tested) - Change Inspector URL to mode=devtools - Remove "Get the Live View URL programmatically" section (not yet shipped) - Condense Native Chrome DevTools pros/cons into single paragraph - Replace Cloudflare.getLiveView with includeTargets=true in HITL example - Add timeout and Slack/chat notes to HITL code comments - Add bot detection note to HITL page --- .../features/human-in-the-loop.mdx | 21 +++++---- .../browser-rendering/features/live-view.mdx | 43 ++----------------- 2 files changed, 14 insertions(+), 50 deletions(-) diff --git a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx index 6020b3b9b32..deb882deaad 100644 --- a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx +++ b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx @@ -14,7 +14,7 @@ Some browser automation workflows require manual intervention. A login page may Human in the Loop works with any [Browser Session](/browser-rendering/#integration-methods) and uses [Live View](/browser-rendering/features/live-view/) to give humans access: 1. Your automation script navigates to a page that needs human input. -2. The script retrieves the Live View URL via `Cloudflare.getLiveView` and shares it with a human operator (for example, by logging it, sending it via Slack, or displaying it in a UI). +2. The script retrieves the [Live View](/browser-rendering/features/live-view/) URL from the session's target list and shares it with a human operator (for example, by sending it via Slack, email, or displaying it in a UI). 3. The human operator opens the Live View URL and completes the required action (logging in, solving a CAPTCHA, entering sensitive data, etc.). 4. The automation script detects that the human is done (for example, by waiting for a navigation event or polling for a page element) and resumes. @@ -32,13 +32,14 @@ const API_TOKEN = "your-api-token"; // Create a browser session via CDP const response = await fetch( - `https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser?keep_alive=600000`, + `https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser?keep_alive=600000&includeTargets=true`, { method: "POST", headers: { Authorization: `Bearer ${API_TOKEN}` }, } ); -const { webSocketDebuggerUrl } = await response.json(); +const { webSocketDebuggerUrl, targets } = await response.json(); +const liveUrl = targets[0].devtoolsFrontendUrl; // Connect Puppeteer to the session const browser = await puppeteer.connect({ @@ -49,16 +50,10 @@ const browser = await puppeteer.connect({ const page = await browser.newPage(); await page.goto("https://example.com/login"); -// Get the Live View URL so a human can interact with the session -const cdp = await page.createCDPSession(); -const { devtoolsFrontendUrl: liveUrl } = await cdp.send( - "Cloudflare.getLiveView" -); - -// Share the Live View URL with the human operator +// Share the Live View URL with the human operator (for example, send it via Slack, email, or display it in a UI) console.log(`Human input needed. Open this URL: ${liveUrl}`); -// Wait for the human to complete login +// Wait for the human to complete login (5 minute timeout — the script will continue after this period) await page.waitForNavigation({ waitUntil: "networkidle0", timeout: 300000 }); // Login complete, continue automation @@ -77,3 +72,7 @@ browser.disconnect(); - **Sensitive data entry**: Forms requiring credentials or personal information you do not want to pass to an automation script - **Complex interactions**: One-off tasks that are too difficult or not worth fully automating, such as configuring a dashboard or approving a workflow - **Verification steps**: Confirming an order, reviewing generated content, or approving an action before the script proceeds + +:::note[Bot detection] +Browser Rendering requests are [always identified as bot traffic](/browser-rendering/faq/#will-browser-rendering-be-detected-by-bot-management). Even with a human controlling the session, some third-party services may still block the request. +::: diff --git a/src/content/docs/browser-rendering/features/live-view.mdx b/src/content/docs/browser-rendering/features/live-view.mdx index c78c6299bb4..71e272efa83 100644 --- a/src/content/docs/browser-rendering/features/live-view.mdx +++ b/src/content/docs/browser-rendering/features/live-view.mdx @@ -7,7 +7,7 @@ sidebar: badge: Beta --- -import { CURL, DashButton, Tabs, TabItem } from "~/components"; +import { CURL, DashButton } from "~/components"; Live View lets you see and interact with a remote Browser Run session in real time. This is useful for debugging automation scripts, monitoring what a browser is doing, or manually stepping in when a task requires human intervention (see [Human in the Loop](/browser-rendering/features/human-in-the-loop/)). @@ -27,13 +27,12 @@ In the Cloudflare dashboard, go to the **Browser Run** page and select the **Liv When you create a session or list targets through the [CDP](/browser-rendering/cdp/) endpoints, the API response includes a `devtoolsFrontendUrl` for each target (tab). Open this URL in any browser to load the DevTools UI hosted at `live.browser.run`, which streams the remote session to your browser. -The hosted UI supports three viewing modes, controlled by the `mode` parameter in the URL: +The hosted UI supports two viewing modes, controlled by the `mode` parameter in the URL: | Mode | URL pattern | Description | | --- | --- | --- | | Tab | `https://live.browser.run/ui/view?mode=tab&wss=...` | DevTools inspector panel (Elements, Console, Network, etc.) | -| Full | `https://live.browser.run/ui/view?mode=full&wss=...` | Full browser chrome with address bar and tab strip | -| Inspector | `https://live.browser.run/ui/inspector?wss=...` | Standalone inspector view | +| Inspector | `https://live.browser.run/ui/view?mode=devtools&wss=...` | Standalone inspector view | ### Native Chrome DevTools (Chrome only) @@ -43,15 +42,7 @@ Because Browser Run speaks standard CDP, you can connect Chrome's built-in DevTo devtools://devtools/bundled/inspector.html?wss=live.browser.run/api/devtools/browser/SESSION_ID/page/TARGET_ID?jwt=... ``` -Paste this URL into Chrome's address bar to open native DevTools connected to the remote browser session. - -**Pros:** -- Familiar UI: the exact same DevTools you use daily for local development, rather than a hosted version wrapped inside a webpage -- Slightly faster to load: DevTools assets (HTML, JS, CSS) are already bundled locally in Chrome - -**Cons:** -- Chrome only: the `devtools://` protocol URL only works in Chrome. The hosted `live.browser.run` version works in other browsers, though the DevTools UI has not been heavily tested outside Chrome. -- Inspector tab only: does not work for the full or tab viewing modes +Paste this URL into Chrome's address bar to open native DevTools connected to the remote browser session. This gives you the familiar local DevTools UI and loads slightly faster since the assets are already bundled in Chrome. However, the `devtools://` protocol only works in Chrome and only supports the inspector viewing mode. :::caution[URL validity] The `devtoolsFrontendUrl` is valid for five minutes from when it was generated. If you do not open the URL within this timeframe, list the targets again to get a fresh URL. Once the DevTools connection is established, it remains active as long as the browser session is alive. @@ -132,29 +123,3 @@ If you have a running session and want to connect to it: ``` 3. Copy the `devtoolsFrontendUrl` and open it in your browser. - -## Get the Live View URL programmatically - -You can retrieve the Live View URL from within a Puppeteer or Playwright script using a CDP command. This is useful when you need to share the URL with someone, for example sending it via email, Slack, or displaying it in a UI. - - - -```js -const cdp = await page.createCDPSession(); -const { devtoolsFrontendUrl } = await cdp.send("Cloudflare.getLiveView"); - -console.log(`Live View: ${devtoolsFrontendUrl}`); -``` - - - -```js -const cdp = await page.context().newCDPSession(page); -const { devtoolsFrontendUrl } = await cdp.send("Cloudflare.getLiveView"); - -console.log(`Live View: ${devtoolsFrontendUrl}`); -``` - - - -You can also get the Live View URL from the HTTP API by listing targets for a session, as shown in [View an existing session](#view-an-existing-session). Each target in the response includes a `devtoolsFrontendUrl`. From 7b153899b4cac660e4ca818cef9e7227af85401c Mon Sep 17 00:00:00 2001 From: kathayl Date: Mon, 13 Apr 2026 10:38:51 -0700 Subject: [PATCH 04/12] Use targets=true instead of includeTargets=true in HITL example --- .../docs/browser-rendering/features/human-in-the-loop.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx index deb882deaad..4f1676f51c1 100644 --- a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx +++ b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx @@ -32,7 +32,7 @@ const API_TOKEN = "your-api-token"; // Create a browser session via CDP const response = await fetch( - `https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser?keep_alive=600000&includeTargets=true`, + `https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser?keep_alive=600000&targets=true`, { method: "POST", headers: { Authorization: `Bearer ${API_TOKEN}` }, From 2b9e5ad1b4a6a40dfbeee406ff200a305d9d9712 Mon Sep 17 00:00:00 2001 From: kathayl Date: Mon, 13 Apr 2026 11:24:11 -0700 Subject: [PATCH 05/12] Address second round of review feedback - Swap Tab/Inspector descriptions in viewing modes table - Use Sophia's wording for Native Chrome DevTools paragraph - Add 5-minute URL expiry note to HITL page - Clarify Tab description as 'Standalone page view' --- .../docs/browser-rendering/features/human-in-the-loop.mdx | 2 ++ src/content/docs/browser-rendering/features/live-view.mdx | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx index 4f1676f51c1..f37462aabf4 100644 --- a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx +++ b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx @@ -66,6 +66,8 @@ const content = await page.content(); browser.disconnect(); ``` +The Live View URL is valid for five minutes from when it was generated. If the URL expires before the human operator opens it, list the targets again to get a fresh URL. + ## Use cases - **Authentication flows**: Login pages with MFA, SSO, or CAPTCHA that cannot be bypassed programmatically diff --git a/src/content/docs/browser-rendering/features/live-view.mdx b/src/content/docs/browser-rendering/features/live-view.mdx index 71e272efa83..480ca2e130a 100644 --- a/src/content/docs/browser-rendering/features/live-view.mdx +++ b/src/content/docs/browser-rendering/features/live-view.mdx @@ -31,8 +31,8 @@ The hosted UI supports two viewing modes, controlled by the `mode` parameter in | Mode | URL pattern | Description | | --- | --- | --- | -| Tab | `https://live.browser.run/ui/view?mode=tab&wss=...` | DevTools inspector panel (Elements, Console, Network, etc.) | -| Inspector | `https://live.browser.run/ui/view?mode=devtools&wss=...` | Standalone inspector view | +| Tab | `https://live.browser.run/ui/view?mode=tab&wss=...` | Standalone page view | +| Inspector | `https://live.browser.run/ui/view?mode=devtools&wss=...` | DevTools inspector panel (Elements, Console, Network, etc.) | ### Native Chrome DevTools (Chrome only) @@ -42,7 +42,7 @@ Because Browser Run speaks standard CDP, you can connect Chrome's built-in DevTo devtools://devtools/bundled/inspector.html?wss=live.browser.run/api/devtools/browser/SESSION_ID/page/TARGET_ID?jwt=... ``` -Paste this URL into Chrome's address bar to open native DevTools connected to the remote browser session. This gives you the familiar local DevTools UI and loads slightly faster since the assets are already bundled in Chrome. However, the `devtools://` protocol only works in Chrome and only supports the inspector viewing mode. +Paste this URL into Chrome's address bar to connect native DevTools to the remote browser session. You will get the same DevTools interface you use for local debugging. The `devtools://` protocol is Chrome-only and limited to inspector viewing mode. :::caution[URL validity] The `devtoolsFrontendUrl` is valid for five minutes from when it was generated. If you do not open the URL within this timeframe, list the targets again to get a fresh URL. Once the DevTools connection is established, it remains active as long as the browser session is alive. From 02c0c8caeeccf82279ecf73a149ac683152d87b1 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Mon, 13 Apr 2026 22:34:24 -0700 Subject: [PATCH 06/12] Update src/content/docs/browser-rendering/features/live-view.mdx Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com> --- .../browser-rendering/features/live-view.mdx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/content/docs/browser-rendering/features/live-view.mdx b/src/content/docs/browser-rendering/features/live-view.mdx index 480ca2e130a..ee332be3581 100644 --- a/src/content/docs/browser-rendering/features/live-view.mdx +++ b/src/content/docs/browser-rendering/features/live-view.mdx @@ -108,18 +108,18 @@ If you have a running session and want to connect to it: }} /> -```json -[ - { - "id": "110850A800BDB8B593CDDA30676635CF", - "type": "page", - "url": "https://example.com", - "title": "Example Domain", - "description": "", - "devtoolsFrontendUrl": "https://live.browser.run/ui/view?wss=live.browser.run/api/devtools/browser/28d75446-.../page/110850A8...?jwt=...", - "webSocketDebuggerUrl": "wss://live.browser.run/api/devtools/browser/28d75446-.../page/110850A8...?jwt=..." - } -] -``` + ```json output {8} + [ + { + "id": "110850A800BDB8B593CDDA30676635CF", + "type": "page", + "url": "https://example.com", + "title": "Example Domain", + "description": "", + "devtoolsFrontendUrl": "https://live.browser.run/ui/view?wss=live.browser.run/api/devtools/browser/28d75446-.../page/110850A8...?jwt=...", + "webSocketDebuggerUrl": "wss://live.browser.run/api/devtools/browser/28d75446-.../page/110850A8...?jwt=..." + } + ] + ``` 3. Copy the `devtoolsFrontendUrl` and open it in your browser. From 1973eb17c2ba6a06049391c46cb8266f6d4d7dac Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Mon, 13 Apr 2026 22:34:41 -0700 Subject: [PATCH 07/12] Update src/content/docs/browser-rendering/features/human-in-the-loop.mdx Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com> --- .../docs/browser-rendering/features/human-in-the-loop.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx index f37462aabf4..c6273e82371 100644 --- a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx +++ b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx @@ -14,7 +14,7 @@ Some browser automation workflows require manual intervention. A login page may Human in the Loop works with any [Browser Session](/browser-rendering/#integration-methods) and uses [Live View](/browser-rendering/features/live-view/) to give humans access: 1. Your automation script navigates to a page that needs human input. -2. The script retrieves the [Live View](/browser-rendering/features/live-view/) URL from the session's target list and shares it with a human operator (for example, by sending it via Slack, email, or displaying it in a UI). +2. The script retrieves the [Live View](/browser-rendering/features/live-view/) URL from the session's target list and shares it with a human operator (for example, by sending it via Slack, email, or displaying it in a user interface). 3. The human operator opens the Live View URL and completes the required action (logging in, solving a CAPTCHA, entering sensitive data, etc.). 4. The automation script detects that the human is done (for example, by waiting for a navigation event or polling for a page element) and resumes. From eebe8a8d0d5e1a43c245b44e4261d71cd9e8c347 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Mon, 13 Apr 2026 22:34:56 -0700 Subject: [PATCH 08/12] Update src/content/docs/browser-rendering/features/human-in-the-loop.mdx Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com> --- .../docs/browser-rendering/features/human-in-the-loop.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx index c6273e82371..57c4b495061 100644 --- a/src/content/docs/browser-rendering/features/human-in-the-loop.mdx +++ b/src/content/docs/browser-rendering/features/human-in-the-loop.mdx @@ -27,8 +27,8 @@ This example uses [Puppeteer](/browser-rendering/puppeteer/) connected to Browse ```js import puppeteer from "puppeteer-core"; -const ACCOUNT_ID = "your-account-id"; -const API_TOKEN = "your-api-token"; +const ACCOUNT_ID = ""; +const API_TOKEN = ""; // Create a browser session via CDP const response = await fetch( From 674600e7e6ac7a06b43b058ae2c568730b0ea908 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Mon, 13 Apr 2026 22:35:08 -0700 Subject: [PATCH 09/12] Update src/content/docs/browser-rendering/features/live-view.mdx Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com> --- src/content/docs/browser-rendering/features/live-view.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/browser-rendering/features/live-view.mdx b/src/content/docs/browser-rendering/features/live-view.mdx index ee332be3581..a6aec9a828e 100644 --- a/src/content/docs/browser-rendering/features/live-view.mdx +++ b/src/content/docs/browser-rendering/features/live-view.mdx @@ -53,10 +53,10 @@ The `devtoolsFrontendUrl` is valid for five minutes from when it was generated. 1. Create a browser session with `targets=true` to include target URLs in the response: Date: Mon, 13 Apr 2026 22:35:18 -0700 Subject: [PATCH 10/12] Update src/content/docs/browser-rendering/features/live-view.mdx Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com> --- src/content/docs/browser-rendering/features/live-view.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/browser-rendering/features/live-view.mdx b/src/content/docs/browser-rendering/features/live-view.mdx index a6aec9a828e..8bfceb59ae1 100644 --- a/src/content/docs/browser-rendering/features/live-view.mdx +++ b/src/content/docs/browser-rendering/features/live-view.mdx @@ -15,7 +15,7 @@ Live View is available for any [Browser Session](/browser-rendering/#integration ## How to access Live View -There are three ways to access Live View: through the Cloudflare dashboard, via the hosted UI at `live.browser.run`, or using native Chrome DevTools. +There are three ways to access Live View: through the Cloudflare dashboard, via the hosted user interface (UI) at `live.browser.run`, or using native Chrome DevTools. ### Cloudflare dashboard From 0f13601e17d35dd2a20f890a7da50ce48c282acf Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Mon, 13 Apr 2026 22:35:29 -0700 Subject: [PATCH 11/12] Update src/content/docs/browser-rendering/features/live-view.mdx Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com> --- .../docs/browser-rendering/features/live-view.mdx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/docs/browser-rendering/features/live-view.mdx b/src/content/docs/browser-rendering/features/live-view.mdx index 8bfceb59ae1..572a971dfa7 100644 --- a/src/content/docs/browser-rendering/features/live-view.mdx +++ b/src/content/docs/browser-rendering/features/live-view.mdx @@ -90,13 +90,13 @@ If you have a running session and want to connect to it: 1. List your active sessions: - + 2. Using the session ID, list the targets in that session: From f38f8714270fb9690f14bf5d40083db453ee08f5 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Mon, 13 Apr 2026 22:35:37 -0700 Subject: [PATCH 12/12] Update src/content/docs/browser-rendering/features/live-view.mdx Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com> --- .../docs/browser-rendering/features/live-view.mdx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/content/docs/browser-rendering/features/live-view.mdx b/src/content/docs/browser-rendering/features/live-view.mdx index 572a971dfa7..fde7909f72a 100644 --- a/src/content/docs/browser-rendering/features/live-view.mdx +++ b/src/content/docs/browser-rendering/features/live-view.mdx @@ -100,13 +100,14 @@ If you have a running session and want to connect to it: 2. Using the session ID, list the targets in that session: - + + ```json output {8} [