From bbe974248c707cbd73ccfa2115875a07ff492b55 Mon Sep 17 00:00:00 2001
From: aspectrr <collin@steelbrowser.com>
Date: Sat, 25 Oct 2025 08:55:46 -0400
Subject: [PATCH 1/4] fix: fix links and mobile nav

---
 app/(home)/integrations/_pages/page.en.tsx | 10 ++---
 app/(home)/overview/_pages/page.en.tsx     | 51 +++++++++++++++-------
 components/layout/mobile-navigation.tsx    |  2 +-
 3 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/app/(home)/integrations/_pages/page.en.tsx b/app/(home)/integrations/_pages/page.en.tsx
index c018aadf..d3ef19b5 100644
--- a/app/(home)/integrations/_pages/page.en.tsx
+++ b/app/(home)/integrations/_pages/page.en.tsx
@@ -1,4 +1,4 @@
-import { Cards, IndexCard } from '@/components/card';
+import { Cards, IndexCard } from "@/components/card";
 import {
   API,
   BrowserUseIcon,
@@ -7,7 +7,7 @@ import {
   Container,
   MagicIcon,
   OpenAIIcon,
-} from '@/components/ui/icon';
+} from "@/components/ui/icon";
 
 export default function IntegrationsPage() {
   return (
@@ -21,14 +21,14 @@ export default function IntegrationsPage() {
           <Cards>
             <IndexCard
               icon={<BrowserUseIcon />}
-              href="/integrations/browser-use/overview"
+              href="/integrations/browser-use/integrations-overview"
               title="Browser-Use Integration"
               tag="Browser Agent"
               description="Use Browser-Use to interact with a Steel browser."
             />
             <IndexCard
               icon={<ClaudeIcon />}
-              href="/integrations/claude-computer-use/overview"
+              href="/integrations/claude-computer-use/integrations-overview"
               title="Claude Computer Use"
               tag="Browser Agent"
               description="Use Claude Computer Use with Steel Browser."
@@ -42,7 +42,7 @@ export default function IntegrationsPage() {
             />
             <IndexCard
               icon={<Cloud />}
-              href="/integrations/crewai/overview"
+              href="/integrations/crewai/integrations-overview"
               title="CrewAI"
               tag="Multi-Agent"
               description="Learn how to use CrewAI with Steel Browser."
diff --git a/app/(home)/overview/_pages/page.en.tsx b/app/(home)/overview/_pages/page.en.tsx
index 1cca2c35..f6dbb94a 100644
--- a/app/(home)/overview/_pages/page.en.tsx
+++ b/app/(home)/overview/_pages/page.en.tsx
@@ -44,7 +44,10 @@ export default function HomePage() {
               />
               <div className="flex flex-col [&_p]:mb-6 space-y-3">
                 <h3 className="text-3xl">Steel Documentation</h3>
-                <p>Find all the guides and resources you need to build on the Steel API.</p>
+                <p>
+                  Find all the guides and resources you need to build on the
+                  Steel API.
+                </p>
               </div>
             </div>
           </div>
@@ -56,7 +59,7 @@ export default function HomePage() {
                 variant="default"
                 title="Sessions API"
                 description="Explore API endpoints for managing Steel Sessions."
-                tags={['API', 'Sessions']}
+                tags={["API", "Sessions"]}
               />
             </Cards>
             <Cards className="xl:!grid-cols-4">
@@ -66,7 +69,7 @@ export default function HomePage() {
                 variant="default"
                 title="Captchas API"
                 description="Explore API endpoints for managing Steel Captchas."
-                tags={['API', 'Captchas']}
+                tags={["API", "Captchas"]}
               />
               <Card
                 className="group space-y-1"
@@ -74,27 +77,33 @@ export default function HomePage() {
                 variant="default"
                 title="Extensions API"
                 description="Explore API endpoints for building on Steel."
-                tags={['API', 'Extensions']}
+                tags={["API", "Extensions"]}
               />
               <Card
                 className="group space-y-1"
                 href="/overview/credentials-api/overview"
                 title="Credentials API"
                 description="Explore API endpoints for managing Steel Credentials."
-                tags={['API', 'Credentials']}
+                tags={["API", "Credentials"]}
               />
               <Card
                 className="group space-y-1"
                 href="/overview/files-api/overview"
                 title="Files API"
                 description="Explore API Endpoints for managing Files on Steel."
-                tags={['API', 'Files']}
+                tags={["API", "Files"]}
               />
             </Cards>
           </div>
           <div className="flex flex-col">
-            <h4 id="explore-by-category" className="text-muted-foreground scroll-m-20">
-              <a href="#explore-by-category" className="not-prose group text-sm uppercase">
+            <h4
+              id="explore-by-category"
+              className="text-muted-foreground scroll-m-20"
+            >
+              <a
+                href="#explore-by-category"
+                className="not-prose group text-sm uppercase"
+              >
                 Integrations
               </a>
             </h4>
@@ -102,13 +111,13 @@ export default function HomePage() {
             <Cards className="xl:!grid-cols-3">
               <SmallCard
                 icon={<BrowserUseIcon />}
-                href="/integrations/browser-use/overview"
+                href="/integrations/browser-use/integrations-overview"
                 title="Browser-Use Integration"
                 description="Use Browser-Use to interact with a Steel browser."
               />
               <SmallCard
                 icon={<ClaudeIcon />}
-                href="/integrations/claude-computer-use/overview"
+                href="/integrations/claude-computer-use/integrations-overview"
                 title="Claude Computer Use"
                 description="Use Claude Computer Use with Steel Browser."
               />
@@ -120,7 +129,7 @@ export default function HomePage() {
               />
               <SmallCard
                 icon={<Cloud />}
-                href="/integrations/crewai/overview"
+                href="/integrations/crewai/integrations-overview"
                 title="CrewAI"
                 description="Learn how to use CrewAI with Steel Browser."
               />
@@ -139,8 +148,14 @@ export default function HomePage() {
             </Cards>
           </div>
           <div className="flex flex-col">
-            <h4 id="explore-by-category" className="text-muted-foreground scroll-m-20">
-              <a href="#explore-by-category" className="not-prose group text-sm uppercase">
+            <h4
+              id="explore-by-category"
+              className="text-muted-foreground scroll-m-20"
+            >
+              <a
+                href="#explore-by-category"
+                className="not-prose group text-sm uppercase"
+              >
                 Libraries &amp; SDKs
               </a>
             </h4>
@@ -161,8 +176,14 @@ export default function HomePage() {
             </Cards>
           </div>
           <div className="flex flex-col">
-            <h4 id="explore-by-category" className="text-muted-foreground scroll-m-20">
-              <a href="#explore-by-category" className="not-prose group text-sm uppercase">
+            <h4
+              id="explore-by-category"
+              className="text-muted-foreground scroll-m-20"
+            >
+              <a
+                href="#explore-by-category"
+                className="not-prose group text-sm uppercase"
+              >
                 Resources
               </a>
             </h4>
diff --git a/components/layout/mobile-navigation.tsx b/components/layout/mobile-navigation.tsx
index 6148e66e..d7c20aa0 100644
--- a/components/layout/mobile-navigation.tsx
+++ b/components/layout/mobile-navigation.tsx
@@ -106,7 +106,7 @@ export function MobileNavigation({
           <SearchToggle />
         </div>
 
-        <nav className="overflow-y-auto h-[calc(100vh-64px)] bg-background px-3">
+        <nav className="overflow-y-auto h-[calc(100dvh-64px)] bg-background px-3">
           <div className="py-2">
             {activeSubmenu ? (
               (

From 8eec4381de67c5a13b66244e9be93615d6c00173 Mon Sep 17 00:00:00 2001
From: aspectrr <collin@steelbrowser.com>
Date: Tue, 4 Nov 2025 07:57:21 -0500
Subject: [PATCH 2/4] feat: add in guides

---
 content/docs/overview/files-api/overview.mdx  |  51 +++++
 .../overview/guides/embed-live-sessions.mdx   | 142 ++++++++++++++
 .../guides/embed-session-recordings.mdx       |  94 ++++++++++
 .../overview/guides/human-in-the-loop.mdx     | 143 ++++++++++++++
 content/docs/overview/guides/meta.json        |  15 ++
 .../docs/overview/guides/playwright-node.mdx  | 150 +++++++++++++++
 .../overview/guides/playwright-python.mdx     | 146 +++++++++++++++
 content/docs/overview/guides/puppeteer.mdx    | 144 ++++++++++++++
 .../overview/guides/reusing-context-auth.mdx  | 176 ++++++++++++++++++
 content/docs/overview/guides/selenium.mdx     | 147 +++++++++++++++
 content/docs/overview/meta.json               |   1 +
 11 files changed, 1209 insertions(+)
 create mode 100644 content/docs/overview/guides/embed-live-sessions.mdx
 create mode 100644 content/docs/overview/guides/embed-session-recordings.mdx
 create mode 100644 content/docs/overview/guides/human-in-the-loop.mdx
 create mode 100644 content/docs/overview/guides/meta.json
 create mode 100644 content/docs/overview/guides/playwright-node.mdx
 create mode 100644 content/docs/overview/guides/playwright-python.mdx
 create mode 100644 content/docs/overview/guides/puppeteer.mdx
 create mode 100644 content/docs/overview/guides/reusing-context-auth.mdx
 create mode 100644 content/docs/overview/guides/selenium.mdx

diff --git a/content/docs/overview/files-api/overview.mdx b/content/docs/overview/files-api/overview.mdx
index eaccc239..c242ec95 100644
--- a/content/docs/overview/files-api/overview.mdx
+++ b/content/docs/overview/files-api/overview.mdx
@@ -322,6 +322,57 @@ await page.setInputFiles("#file-input", [uploadedSessionFile.path]);
 ```
 
 
+#### Browser-Use Example
+
+Browser-use needs some setup before it can be used. This includes setting up the browser profile with the correct downloads path and adding in a step hook to extract downloaded files to your local machine if necessary.
+
+```python Python -wcn -f main.py
+# Before agent main loop...
+
+# Hook to extract downloaded files to local machine if necessary
+async def step_hook_start(agent):
+    if os.environ.get("BROWSER_PROVIDER") == "steel":
+        await agent._check_and_update_downloads()
+        if agent.available_file_paths and len(agent.available_file_paths) > 0:
+            has_new_files = False
+            for file_path in agent.available_file_paths:
+                if file_path not in downloaded_files:
+                    downloaded_files.append(file_path)
+                    has_new_files = True
+            if has_new_files:
+                try:
+                    extracted_files = await browser_service.extract_downloaded_files(DOWNLOAD_PATH)
+                    logger.info(f"Extracted files: {extracted_files}")
+                except Exception as e:
+                    logger.error(f"Failed to extract downloaded files: {e}")
+
+async def main():
+    try:
+        browser_session = Browser(cdp_url=cdp_url, downloads_path="/files")
+        await browser_session.connect()
+        await browser_session.cdp_client.send.Target.createBrowserContext()
+        browser_context_ids_return = await browser_session.cdp_client.send.Target.getBrowserContexts()
+        browser_context_ids = browser_context_ids_return['browserContextIds']
+        browser_context_id = browser_context_ids[0]
+        await browser_session.cdp_client.send.Browser.setDownloadBehavior(params={"behavior": "allow", "downloadPath": "/files", "eventsEnabled": True, "browserContextId": browser_context_id})
+        agent = Agent(task=TASK, llm=model, browser_session=browser_session)
+        agent.browser_session.browser_profile.downloads_path = LOCAL_DOWNLOAD_PATH
+        agent_results = await agent.run(
+            on_step_start=step_hook_start,
+            max_steps=5
+        )
+    except Exception as e:
+        print(f"Error: {e}")
+    finally:
+        # Clean up resources
+        if session:
+            client.sessions.release(session.id)
+            print("Session released")
+        print("Done!")
+# Rest of code...
+```
+
+
 #### Complete Example
 
 End-to-end workflow demonstrating global file management and session file operations.
diff --git a/content/docs/overview/guides/embed-live-sessions.mdx b/content/docs/overview/guides/embed-live-sessions.mdx
new file mode 100644
index 00000000..d3f07f3a
--- /dev/null
+++ b/content/docs/overview/guides/embed-live-sessions.mdx
@@ -0,0 +1,142 @@
+---
+title: View and Embed Live Sessions
+description: How to embed and share live browser sessions in your applications
+sidebarTitle: View and Embed Live Sessions
+llm: true
+---
+
+Every Steel browser session comes with a debug URL that provides a flexible way to view and interact with the session. While Steel's dashboard includes a full-featured session viewer for monitoring your sessions, the debug URL feature allows you to implement custom viewing solutions in your applications and let viewers control browser sessions remotely.
+
+
+
+### Prerequisites
+
+*   A Steel API key
+
+*   An active Steel browser session
+
+*   Basic familiarity with HTML and JavaScript/Python
+
+
+
+### Getting the Debug URL
+
+When creating a session through our API, the response includes a `debugUrl`.
+
+Here's how to retrieve it using Steel’s SDKs:
+
+<CodeTabs storage="languageSwitcher">
+
+```python !! Python -wcn
+from steel import Steel
+
+client = Steel()
+session = client.sessions.create()
+
+# Get the debug URL
+debug_url = session.debug_url
+print(f"Debug URL: {debug_url}")
+```
+
+```typescript !! TypeScript -wcn
+import Steel from 'steel-sdk';
+
+const client = new Steel();
+const session = await client.sessions.create();
+
+// Get the debug URL
+const debugUrl = session.debugUrl;
+console.log(`Debug URL: ${debugUrl}`);
+```
+
+</CodeTabs>
+
+
+Once you have the debug URL, you can open it directly in your browser to quickly view your session.
+
+
+
+### Embedding Sessions in Your Application
+
+For production use cases, you can embed the session view in your application using an iframe:
+```typescript Typescript -wcn
+<iframe
+    src={session.debugUrl}
+    style="width: 100%; height: 600px; border: none;"
+></iframe>
+```
+
+The view will automatically scale to fit the iframe container while maintaining aspect ratio.
+
+Debug URLs are not authenticated. Anyone with access to a session's debug URL can view that session. Consider this when implementing session sharing features.
+
+
+
+### Configuration Options
+
+Customize the embedded view using UTM parameters:
+```typescript Typescript -wcn
+<iframe
+    src={`${session.debugUrl}?theme=light&interactive=true&showControls=true`}
+    style="width: 100%; height: 600px; border: none;"
+></iframe>
+```
+
+| Parameter     | Type    | Default   | Description |
+|----------------|---------|-----------|--------------|
+| `pageId`       | string  | (empty)   | Optional: This will enable a single tab view of a particular pageId. You can fetch pageIds either directly from Playwright/Puppeteer or using the Live Details endpoint. |
+| `pageIndex`    | string  | (empty)   | Optional: This will enable a single tab view of tab N where N is the index passed in. So if you want to only display the first page, passing in `pageIndex=0` will do that. |
+| `theme`        | string  | `"dark"`  | Visual theme of the interface (`"dark"` or `"light"`). |
+| `interactive`  | boolean | `true`    | When enabled, viewers can interact with the page through clicks, scrolling, and navigation. |
+| `showControls` | boolean | `true`    | Shows/hides the URL input and navigation controls. |
+
+### Common Use Cases
+
+#### Sharing Session Views
+
+Embed a fullscreen read-only session view:
+```typescript Typescript -wnc
+<iframe
+  src={`${session.debugUrl}?interactive=false&showControls=false`}
+  style="width: 100%; height: 600px; border: none;"
+></iframe>
+```
+
+#### Human-in-the-Loop Workflows
+
+The debug URL feature is particularly useful for human-in-the-loop workflows, where you need to enable human intervention in automated processes. See our detailed guide on [implementing human-in-the-loop workflows](https://docs.steel.dev/overview/guides/implementing-human-in-the-loop-controls) for more information.
+
+### Working with Tabs
+
+#### Multi-tab View
+
+By default, the debug url will return a multi-tab view of the browser. When a new page/tab is created, the viewer will auto switch to that new tab. It will not switch back if the focus is set to a previous tab. When `interactive=false` is appended to the debugUrl in the iframe, switching between tabs will be disabled (along with every other interaction), so be wary of that if you need to switch between tabs in a non-interactive view.
+
+#### Single-tab View
+
+When a `pageId` or a `pageIndex` is passed into the debug url, the browser view will only focus on that page and no other tabs will be shown. This is useful when you only want to present one tab to the user and either manually switch tabs (by passing in a different `pageId` or `pageIndex`) or just generally disable other pages.
+
+### Troubleshooting
+
+*   If the iframe appears blank, ensure your session is still active and has actions sent to it like navigating to new pages.
+
+*   If interaction isn't working, verify that `interactive=true` is set
+
+*   For sizing issues, check that your container has explicit dimensions (use the `dimensions` parameter when creating your session)
+
+*   Make sure your session hasn't timed out (default timeout is 5 minutes)
+
+
+
+
+### What's Next
+
+Learn more about:
+
+Implement Human-in-the-Loop Controls
+
+How to let users take control of Steel browser sessions
+
+Session Lifecycle
+
+Learn how to start and release browser sessions programatically.
diff --git a/content/docs/overview/guides/embed-session-recordings.mdx b/content/docs/overview/guides/embed-session-recordings.mdx
new file mode 100644
index 00000000..92e245d6
--- /dev/null
+++ b/content/docs/overview/guides/embed-session-recordings.mdx
@@ -0,0 +1,94 @@
+---
+title: Embed Session Recordings
+description: How to access recordings of past browser sessions and display them within your app
+sidebarTitle: Embed Session Recordings
+llm: true
+---
+
+Every Steel browser session automatically records all page events. While Steel's dashboard includes full-featured session playback for watching past sessions, the `v1/sessions/:id/events` endpoint allows you to pull the same recorded events to implement custom playback functionality in your applications.
+
+In this guide, you'll learn how to use the Steel Sessions API to fetch recorded events from a session and use the [rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player) library to playback those events in your own UI.
+
+### Prerequisites
+
+*   Steel API Key
+
+*   [Steel SDK](https://github.com/steel-dev/steel-python) installed
+
+    *   Node: `npm install steel-sdk`
+
+    *   Python: `pip install steel-sdk`
+
+
+*   Familiarity with [Steel sessions](https://docs.steel.dev/overview/sessions-api/overview)
+
+*   Basic Understanding of HTML/JS
+
+
+
+
+### Retrieving Session Events
+
+To retrieve the recorded events for a specific session you can use the SDKs:
+<CodeTabs storage="languageSwitcher">
+
+```typescript !! Typescript -wcn
+const events = await client.sessions.events(session.id)
+```
+```python !! Python -wnc
+events = client.sessions.events(session_id=session.id)
+```
+</CodeTabs>
+
+or you can simply make a GET request to the [events endpoint:](https://docs.steel.dev/api-reference#tag/sessions/GET/v1/sessions/{id}/events)
+```bash Terminal
+GET /v1/sessions/:id/events
+```
+
+Replace `:id` with the unique identifier of the session you want to retrieve. This endpoint requires authentication, so be sure to include your authentication credentials. You can learn more about that in the [API Reference for session events](https://docs.steel.dev/api-reference#tag/sessions/GET/v1/sessions/{id}/events).
+
+
+
+### Replaying Sessions
+
+The events are returned in the [RRWeb format](https://github.com/rrweb-io/rrweb), which can be replayed using the [rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player) library. Here's an example of how you can implement playback in your application with rrweb-player:
+
+#### Step 1: Install rrweb-player
+```package-install
+rrweb-player
+```
+
+
+#### Step 2: Set up the player in your frontend application
+```typescript Typescript -wcn
+import rrwebPlayer from 'rrweb-player';
+import 'rrweb-player/dist/style.css'; // important for styling of the player
+
+// Once you've fetched the events
+const events = await client.sessions.events(session.id)
+
+// Create player element
+const playerElement = document.getElementById('player-container');
+
+// Initialize the player with events
+const player = new rrwebPlayer({
+  target: playerElement,
+  props: {
+    events: events,
+    width: 800,  // Width of the player
+    height: 600, // Height of the player
+    autoPlay: true,
+    skipInactive: true  // Skip periods of inactivity
+  }
+});
+```
+
+
+
+
+#### Step 3: Add player controls in your HTML/JSX/etc.
+```typescript Typescript -wcn
+<div id="player-container"></div>
+```
+
+Voilà! Now you can playback recorded events from any Steel session. As usual, if you have any questions, comments, concerns; feel free to get help in the [Discord](/overview/need-help).
diff --git a/content/docs/overview/guides/human-in-the-loop.mdx b/content/docs/overview/guides/human-in-the-loop.mdx
new file mode 100644
index 00000000..382da4c7
--- /dev/null
+++ b/content/docs/overview/guides/human-in-the-loop.mdx
@@ -0,0 +1,143 @@
+---
+title: Implement Human-in-the-Loop Controls
+description: How to let users take control of Steel browser sessions
+sidebarTitle: Implement Human-in-the-Loop Controls
+llm: true
+---
+
+Steel's debug URL feature allows you to implement human-in-the-loop workflows where users can directly interact with and control browser sessions. This is particularly useful when you need users to take temporary control of automated browser sessions.
+
+### Prerequisites
+
+*   Basic familiarity with [Steel sessions](https://docs.steel.dev/overview/sessions-api/overview)
+
+*   Understanding of [debug URLs](https://docs.steel.dev/overview/guides/view-and-embed-live-sessions)
+
+*   A Steel API key
+
+
+
+
+### Making Sessions Interactive
+
+To enable human interaction with a session, you'll need to configure two key parameters when embedding the session viewer:
+
+*   `interactive=true`: Enables users to interact with the page through clicks, scrolling, and form inputs
+
+*   `showControls=true`: Shows the navigation bar where users can enter URLs and use forward/back controls
+```typescript Typescript -wcn
+<iframe
+  src={`${session.debugUrl}?interactive=true&showControls=true`}
+  style="width: 100%; height: 600px; border: none;"
+></iframe>
+```
+
+When both parameters are enabled, users can:
+
+*   Click and interact with elements on the page
+
+*   Scroll the page
+
+*   Enter new URLs in the navigation bar
+
+*   Use browser-style forward/back navigation
+
+*   Fill out forms and input fields
+
+*   Navigate through websites naturally
+
+
+
+
+If you’re building user facing agents, this is particularly useful when you need users to:
+
+*   Take control of an automated session that needs assistance
+
+*   Enter sensitive information like login credentials
+
+*   Solve CAPTCHAs
+
+*   Verify or correct automated actions
+
+*   Demonstrate actions that will be automated
+
+
+
+
+### Implementation Examples
+
+#### React Implementation
+
+Here's how to embed an interactive session viewer into a React Application:
+```typescript Typescript -wcn
+// SessionViewer.tsx
+import React from 'react';
+
+type SessionViewerProps = {
+    debugURL: string;
+};
+
+const SessionViewer: React.FC<SessionViewerProps> = ({ debugURL }) => {
+    return (
+        <div className="session-container">
+            <div
+                className="status-banner"
+                style={{
+                    background: '#f0f0f0',
+                    padding: '10px',
+                    marginBottom: '10px',
+                    textAlign: 'center',
+                }}
+            >
+                Automated session - Click inside to take control
+            </div>
+
+            <iframe
+                src={`${debugURL}?interactive=true&showControls=true`}
+                style={{
+                    width: '100%',
+                    height: '600px',
+                    border: 'none',
+                }}
+                title="Browser Session"
+            />
+        </div>
+    );
+};
+
+export default SessionViewer;
+
+// Usage in App.tsx
+import React from 'react';
+import SessionViewer from './SessionViewer';
+
+const App: React.FC = () => {
+    return (
+        <div className="App">
+            <h1>Browser Automation Dashboard</h1>
+            <SessionViewer debugURL="YOUR_debug_URL" />
+        </div>
+    );
+};
+
+export default App;
+```
+
+### Best Practices
+
+*   Ensure your iframe container is large enough for comfortable interaction (recommended minimum height: 600px)
+
+*   Make it clear to users when they can interact with the session
+
+*   Remember that any actions taken in an interactive session affect the actual browser session & state
+
+
+
+
+### What's Next
+
+Learn about session timeouts for managing interactive sessions:
+
+Session Lifecycle
+
+Learn how to start and release browser sessions programatically.
diff --git a/content/docs/overview/guides/meta.json b/content/docs/overview/guides/meta.json
new file mode 100644
index 00000000..70192c4a
--- /dev/null
+++ b/content/docs/overview/guides/meta.json
@@ -0,0 +1,15 @@
+{
+  "title": "Guides",
+  "root": true,
+  "pages": [
+    "---Guides---",
+    "embed-live-sessions",
+    "human-in-the-loop",
+    "embed-session-recordings",
+    "playwright-node",
+    "playwright-python",
+    "puppeteer",
+    "reusing-auth-context",
+    "selenium"
+  ]
+}
diff --git a/content/docs/overview/guides/playwright-node.mdx b/content/docs/overview/guides/playwright-node.mdx
new file mode 100644
index 00000000..e764acf9
--- /dev/null
+++ b/content/docs/overview/guides/playwright-node.mdx
@@ -0,0 +1,150 @@
+---
+title: Connect with Playwright (Node)
+description: Drive a Steel session with Playwright via WebSocket connection
+sidebarTitle: Connect with Playwright (Node)
+llm: true
+---
+
+This guide shows you how to drive Steel's cloud browser sessions using Playwright with Node.js/TypeScript. Looking for Python? Check out our [Playwright Python guide](link-to-python-guide).
+
+Steel sessions are designed to be easily driven by Playwright. There are two main methods for connecting to & driving a Steel session with Playwright.
+
+
+
+**Quick Start:** Want to jump right in? [Skip to example project](https://docs.steel.dev/overview/guides/connect-with-playwright-node#example-project-scraping-hacker-news).
+
+Method #1: One-line change (_easiest)_
+--------------------------------------
+
+Most Playwright scripts start with `chromium.launch()` function to launch your browser with desired args that looks something like this:
+```typescript Typescript -wcn
+const browser = await chromium.launch({...});
+```
+
+
+
+Simply change this line to the following (replacing `MY_STEEL_API_KEY` with your api key):
+```typescript Typescript -wcn
+const browser = await chromium.connectOverCDP(
+    'wss://connect.steel.dev?apiKey=MY_STEEL_API_KEY'
+);
+```
+
+
+
+**_and voila!_** This will automatically start and connect to a Steel session for you with all default parameters set. Your subsequent calls will work as they did previously.
+
+When you're done, the session automatically releases when your script calls `browser.close()`, `browser.disconnect()`, or ends the connection.
+
+
+
+#### **Advanced: Custom Session IDs**
+
+This doesn’t support other UTM parameters to add args (that is what Method #2 is for) other than one - `sessionId`. This allows you to set a custom session id (UUIDv4 format) for the session.
+
+This is helpful because you don’t get any data returned from connecting like this but by setting your own session ID, you can use the API/SDKs to retrieve data or taking actions on the session like manually releasing it.
+
+Example:
+```typescript Typescript -wcn
+import { v4 as uuidv4 } from 'uuid';
+import Steel from 'steel-sdk';
+
+const sessionId = uuidv4(); // '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
+
+const browser = await chromium.connectOverCDP(
+    `wss://connect.steel.dev?apiKey=${process.env.STEEL_API_KEY}&sessionId=${sessionId}`
+);
+
+// Get session details
+const client = new Steel();
+const session = await client.sessions.retrieve(sessionId);
+console.log(`View session live at: ${session.sessionViewerUrl}`);
+```
+
+
+
+Method #2: Create and connect
+-----------------------------
+
+Use this method when you need to drive a session with non-default features like proxy support or CAPTCHA solving. The main difference is that you'll:
+
+*   Start a session via API
+
+*   Connect to it via chromium.connectOverCDP()
+
+*   Release the session when finished
+
+
+If you want your session to be recorded in the live viewer make sure to use the existing browser context from the session when controlling a page as opposed to creating a new context.
+```typescript Typescript -wcn
+import Steel from 'steel-sdk';
+import { chromium } from 'playwright';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const client = new Steel({
+    steelAPIKey: process.env.STEEL_API_KEY,
+});
+
+async function main() {
+    // Create a session with additional features
+    const session = await client.sessions.create({
+        useProxy: true,
+        solveCaptcha: true,
+    });
+
+    // Connect with Playwright
+    const browser = await chromium.connectOverCDP(
+        `wss://connect.steel.dev?apiKey=${process.env.STEEL_API_KEY}&sessionId=${session.id}`
+    );
+
+    // Create page at existing context to ensure session is recorded. This is crucial!
+    const currentContext = browser.contexts()[0];
+    const page = await currentContext.pages()[0];
+
+    // Run your automation
+    await page.goto('https://example.com');
+
+    // Always clean up when done
+    await browser.close();
+    await client.sessions.release(session.id);
+}
+
+main();
+```
+
+
+
+**Important**: With Method #2, sessions remain active until explicitly released or timed out. It’s best practise to call `client.sessions.release()` when finished instead of waiting for the session to timeout to be released.
+
+
+
+Example Project: Scraping Hacker News
+-------------------------------------
+
+Here's a working example that scrapes Hacker News with proper error handling and session management:
+
+Starter code that scrapes Hacker News for top 5 stories using Steel's Node SDK and Playwright.
+
+
+
+Run by entering following commands in the terminal:
+
+*   `export STEEL_API_KEY=your_api_key`
+
+*   `npm start`
+
+
+The example includes:
+
+*   Complete session configuration options
+
+*   Error handling best practices
+
+*   A working Hacker News scraper example
+
+*   TypeScript support
+
+
+You can also clone it on [Github](https://github.com/steel-dev/steel-cookbook/blob/main/examples/steel-playwright-starter), [StackBlitz](https://stackblitz.com/edit/steel-playwright-starter?file=README.md), or [Replit](https://replit.com/@steel-dev/steel-playwright-starter?v=1) to start editing it yourself!
diff --git a/content/docs/overview/guides/playwright-python.mdx b/content/docs/overview/guides/playwright-python.mdx
new file mode 100644
index 00000000..a072525b
--- /dev/null
+++ b/content/docs/overview/guides/playwright-python.mdx
@@ -0,0 +1,146 @@
+---
+title: Connect with Playwright (Python)
+description: Drive a Steel session with Playwright-python via WebSocket connection
+sidebarTitle: Connect with Playwright (Python)
+llm: true
+---
+
+
+This guide shows you how to drive Steel's cloud browser sessions using Playwright with Python. Looking for Node.js/TypeScript? Check out our [Playwright Node.js guide](link-to-node-guide).
+
+Steel sessions are designed to be easily driven by Playwright. There are two main methods for connecting to & driving a Steel session with Playwright.
+
+
+
+Quick Start: Want to jump right in? [Skip to example project](https://docs.steel.dev/overview/guides/connect-with-playwright-python#example-project-scraping-hacker-news).
+
+Method #1: One-line change (_easiest)_
+--------------------------------------
+
+Most Playwright scripts start with `chromium.launch()` function to launch your browser with desired args that looks something like this:
+```python Python -wcn
+browser = chromium.launch()
+```
+
+
+
+Simply change this line to the following (replacing `MY_STEEL_API_KEY` with your api key):
+```python Python -wcn
+browser = chromium.connect_over_cdp(
+    'wss://connect.steel.dev?apiKey=MY_STEEL_API_KEY'
+)
+```
+
+
+
+**_and voila!_** This will automatically start and connect to a Steel session for you with all default parameters set. Your subsequent calls will work as they did previously.
+
+When you're done, the session automatically releases when your script calls `browser.close()`, `browser.disconnect()`, or ends the connection.
+
+
+
+#### **Advanced: Custom Session IDs**
+
+This doesn’t support other UTM parameters to add args (that is what Method #2 is for) other than one - `sessionId`. This allows you to set a custom session id (UUIDv4 format) for the session.
+
+This is helpful because you don’t get any data returned from connecting like this but by setting your own session ID, you can use the API/SDKs to retrieve data or taking actions on the session like manually releasing it.
+
+Example:
+```python Python  -wcn
+from uuid import uuid4
+from playwright.sync_api import sync_playwright
+
+session_id = str(uuid4())  # '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
+
+playwright = sync_playwright().start()
+browser = playwright.chromium.connect_over_cdp(
+    f'wss://connect.steel.dev?apiKey={os.getenv("STEEL_API_KEY")}&sessionId={session_id}'
+)
+```
+
+
+
+Method #2: Create and connect
+-----------------------------
+
+Use this method when you need to drive a session with non-default features like proxy support or CAPTCHA solving. The main difference is that you'll:
+
+*   Start a session via API
+
+*   Connect to it via chromium.connect\_over\_cdp()
+
+*   Release the session when finished
+
+
+If you want your session to be recorded in the live viewer make sure to use the existing browser context from the session when controlling a page as opposed to creating a new context.
+```python Python -wcn
+import os
+from dotenv import load_dotenv
+from playwright.sync_api import sync_playwright
+from steel import Steel
+
+load_dotenv()
+
+client = Steel(
+    steel_api_key=os.getenv('STEEL_API_KEY'),
+)
+
+def main():
+    # Create a session with additional features
+    session = client.sessions.create(
+        use_proxy=True,
+        solve_captcha=True,
+    )
+
+    # Connect with Playwright
+    playwright = sync_playwright().start()
+    browser = playwright.chromium.connect_over_cdp(
+        f'wss://connect.steel.dev?apiKey={os.getenv("STEEL_API_KEY")}&sessionId={session.id}'
+    )
+
+    # Create page at existing context to ensure session is recorded.
+    currentContext = browser.contexts[0]
+    page = currentContext.new_page()
+
+    # Run your automation
+    page.goto('https://example.com')
+
+    # Always clean up when done
+    browser.close()
+    client.sessions.release(session.id)
+
+if __name__ == "__main__":
+    main()
+```
+
+
+**Important**: With Method #2, sessions remain active until explicitly released or timed out. It’s best practise to call `client.sessions.release()` when finished instead of waiting for the session to timeout to be released.
+
+
+
+Example Project: Scraping Hacker News
+-------------------------------------
+
+Here's a working example that scrapes Hacker News with proper error handling and session management:
+
+Starter code that scrapes Hacker News for top 5 stories using Steel's Python SDK and Playwright.
+
+
+
+To run it:
+
+*   Add your `STEEL_API_KEY` to the secrets pane. It's located under "Tools" on the left hand pane.
+
+*   Hit Run
+
+
+The example includes:
+
+*   Complete session configuration options
+
+*   Error handling best practices
+
+*   A working Hacker News scraper example
+
+
+You can also clone it on [Github](https://github.com/steel-dev/steel-cookbook/tree/main/examples/steel-playwright-python-starter) [](https://github.com/steel-dev/steel-puppeteer-starter)or [Replit](https://replit.com/@steel-dev/steel-playwright-python-starter?v=1) to start editing it yourself!
diff --git a/content/docs/overview/guides/puppeteer.mdx b/content/docs/overview/guides/puppeteer.mdx
new file mode 100644
index 00000000..7fd5f096
--- /dev/null
+++ b/content/docs/overview/guides/puppeteer.mdx
@@ -0,0 +1,144 @@
+---
+title: Connect with Puppeteer
+description: Drive a Steel session with Puppeteer via WebSocket connection
+sidebarTitle: Connect with Puppeteer
+llm: true
+---
+
+This guide shows you how to drive Steel's cloud browser sessions using Puppeteer.
+
+Steel sessions are designed to be easily driven by Puppeteer. There are two main methods for connecting to & driving a Steel session with Puppeteer.
+
+
+
+**Quick Start**: Want to jump right in? [Skip to example project.](#example-project-scraping-hacker-news)
+
+Method #1: One-line change (_easiest)_
+--------------------------------------
+
+Most Puppeteer scripts start with a `puppeteer.launch()` function to launch your browser with desired args that looks something like this:
+```typescript Typescript -wcn
+const browser = await puppeteer.launch({...});
+```
+
+
+
+Simply change this line to the following (replacing `MY_STEEL_API_KEY` with your api key):
+```typescript Typescript -wcn
+const browser = await puppeteer.connect({
+    browserWSEndpoint: 'wss://connect.steel.dev?apiKey=MY_STEEL_API_KEY',
+});
+```
+
+
+
+**_and voila!_** This will automatically start and connect to a Steel session for you with all default parameters set. Your subsequent calls will work as they did previously.
+
+When you're done, the session automatically releases when your script calls `browser.close()`, `browser.disconnect()`, or ends the connection.
+
+
+
+**Advanced: Custom Session IDs**
+
+This doesn’t support other UTM parameters to add args (that is what Method #2 is for) other than one - `sessionId`. This allows you to set a custom session id (UUIDv4 format) for the session.
+
+This is helpful because you don’t get any data returned from connecting like this but by setting your own session ID, you can use the API/SDKs to retrieve data or taking actions on the session like manually releasing it.
+
+Example:
+```typescript Typescript -wcn
+import { v4 as uuidv4 } from 'uuid';
+import Steel from 'steel-sdk';
+
+const sessionId = uuidv4(); // '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
+
+const browser = await puppeteer.connect({
+    browserWSEndpoint: `wss://connect.steel.dev?apiKey=${process.env.STEEL_API_KEY}&sessionId=${sessionId}`,
+});
+
+// Get session details
+const client = new Steel();
+const session = await client.sessions.retrieve(sessionId);
+console.log(`View session live at: ${session.sessionViewerUrl}`);
+```
+
+
+
+Method #2: Create and connect
+-----------------------------
+
+Use this method when you need to drive a session with non-default features like proxy support or CAPTCHA solving. The main difference is that you'll:
+
+*   Start a session via API
+
+*   Connect to it via puppeteer.connect()
+
+*   Release the session when finished
+```typescript Typescript -wcn
+import Steel from 'steel-sdk';
+import puppeteer from 'puppeteer';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const client = new Steel({
+    steelAPIKey: process.env.STEEL_API_KEY, // Optional
+});
+
+async function main() {
+    // Create a session with additional features
+    const session = await client.sessions.create({
+        useProxy: true,
+        solveCaptcha: true,
+    });
+
+    // Connect with Puppeteer
+    const browser = await puppeteer.connect({
+        browserWSEndpoint: `wss://connect.steel.dev?apiKey=${process.env.STEEL_API_KEY}&sessionId=${session.id}`,
+    });
+
+    // Run your automation
+    const page = await browser.newPage();
+    await page.goto('https://example.com');
+
+    // Always clean up when done
+    await browser.close();
+    await client.sessions.release(session.id);
+}
+
+main();
+```
+
+
+
+**Important**: With Method #2, sessions remain active until explicitly released or timed out. It’s best practise to call `client.sessions.release()` when finished instead of waiting for the session to timeout to be released.
+
+
+
+Example Project: Scraping Hacker News
+-------------------------------------
+
+Here's a working example that scrapes Hacker News with proper error handling and session management:
+
+Starter code that scrapes Hacker News for top 5 stories using Steel's Node SDK and Puppeteer.
+
+
+
+Run by entering following commands in the terminal:
+
+*   `export STEEL_API_KEY=your_api_key`
+
+*   `npm start`
+
+
+The example includes:
+
+*   Complete session configuration options
+
+*   Error handling best practices
+
+*   A working Hacker News scraper example
+
+*   TypeScript support
+
+
+You can also clone it on [Github](https://github.com/steel-dev/steel-cookbook/tree/main/examples/steel-puppeteer-starter), [Val.town](https://www.val.town/v/stevekrouse/steel_puppeteer_starter), [StackBlitz](https://stackblitz.com/edit/steel-puppeteer-starter?file=README.md), or [Replit](https://replit.com/@steel-dev/steel-puppeteer-starter?v=1) to start editing it yourself!
diff --git a/content/docs/overview/guides/reusing-context-auth.mdx b/content/docs/overview/guides/reusing-context-auth.mdx
new file mode 100644
index 00000000..e893cae1
--- /dev/null
+++ b/content/docs/overview/guides/reusing-context-auth.mdx
@@ -0,0 +1,176 @@
+---
+title: Reusing Context & Auth
+description: How to Reuse Authentication Across Steel Sessions
+sidebarTitle: Reusing Context & Auth
+llm: true
+---
+
+The Steel Sessions API provides a `contexts` endpoint that allows you to capture and transfer browser state (including cookies and local storage) between sessions. This is particularly useful for maintaining authenticated states across multiple sessions, helping your AI agents access protected resources efficiently without repeatedly handling login processes or exposing credentials at all.
+
+In this guide, you'll learn how to use the Steel Sessions API to reuse authentication between browser sessions.
+
+For additional practical examples and recipes, check out the [Steel Cookbook](https://github.com/steel-dev/steel-cookbook).
+
+
+
+### Prerequisites
+
+*   Steel API Key
+
+*   [Steel SDK](https://github.com/steel-dev/steel-python) installed (`npm install steel-sdk`)
+
+*   Familiarity with [Steel sessions](https://docs.steel.dev/overview/sessions-api/overview)
+
+
+
+
+### Overview of the Process
+
+Reusing authentication across sessions involves a straightforward workflow:
+
+*   **Create and authenticate an initial session.**
+    Create a Steel session, navigate to target websites, and authenticate (log-in, etc).
+
+*   **Capture the session context.**
+    Extract browser state data through the `GET /v1/sessions/{id}/context` endpoint. This endpoint returns a context object containing browser state information such as cookies and local storage.
+    **Example:**
+
+    ```typescript Typescript -wcn
+    const initialSessionContext = await client.sessions.context(initialSession.id);
+    ```
+
+*   **Reuse session context in new sessions.**
+    Create new sessions using the captured context object by passing it directly to the `sessionContext` parameter.
+    **Example:**
+
+    ```typescript Typescript -wcn
+    const session = await client.sessions.create({ sessionContext: initialSessionContext });
+    ```
+
+    Now your new session will begin with the same authenticated state as your previous session without having to manually authenticate again.
+
+
+
+
+### Complete Example (Playwright, Node.js)
+
+**Note**: While this example uses TypeScript, Node.js, and Playwright, the same logic applies regardless of your programming language or automation framework. The Steel API handles the context management - you just need to capture and reuse it using your preferred tools.
+
+The following script demonstrates the entire authentication reuse process. It:
+
+*   Creates an initial session and authenticates with a webesite by logging in
+
+*   Captures the authenticated session context
+
+*   Creates a new session using the captured context
+
+*   Verifies the authentication was successfully transferred to the new session
+
+
+```typescript Typescript -wcn
+import { chromium, Page } from "playwright";
+import Steel from "steel-sdk";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const client = new Steel({
+  steelAPIKey: process.env.STEEL_API_KEY,
+});
+
+// Helper function to perform login
+async function login(page: Page) {
+  await page.goto("https://practice.expandtesting.com/login");
+  await page.fill('input[name="username"]', "practice");
+  await page.fill('input[name="password"]', "SuperSecretPassword!");
+  await page.click('button[type="submit"]');
+}
+
+// Helper function to verify authentication
+async function verifyAuth(page: Page): Promise<boolean> {
+  await page.goto("https://practice.expandtesting.com/secure");
+  const welcomeText = await page.textContent("#username");
+  return welcomeText?.includes("Hi, practice!") ?? false;
+}
+
+async function main() {
+  let session;
+  let browser;
+
+  try {
+    // Step 1: Create and authenticate initial session
+    console.log("Creating initial Steel session...");
+    session = await client.sessions.create();
+    console.log(
+      `\x1b[1;93mSteel Session #1 created!\x1b[0m\n` +
+        `View session at \x1b[1;37m${session.sessionViewerUrl}\x1b[0m`
+    );
+
+    // Connect Playwright to the session
+    browser = await chromium.connectOverCDP(
+      `wss://connect.steel.dev?apiKey=${process.env.STEEL_API_KEY}&sessionId=${session.id}`
+    );
+
+    const page = await browser.contexts()[0].pages()[0];
+    await login(page);
+
+    if (await verifyAuth(page)) {
+      console.log("✓ Authentication successful");
+    }
+
+    // Step 2: Capture and transfer authentication
+    const sessionContext = await client.sessions.context(session.id);
+
+    // Clean up first session
+    await browser.close();
+    await client.sessions.release(session.id);
+    console.log("Session #1 released");
+
+    // Step 3: Create new authenticated session
+
+    session = await client.sessions.create({ sessionContext });
+    console.log(
+      `\x1b[1;93mSteel Session #2 created!\x1b[0m\n` +
+        `View session at \x1b[1;37m${session.sessionViewerUrl}\x1b[0m`
+    );
+
+    // Connect to new session
+    browser = await chromium.connectOverCDP(
+      `wss://connect.steel.dev?apiKey=${process.env.STEEL_API_KEY}&sessionId=${session.id}`
+    );
+
+    // Verify authentication transfer
+    const newPage = await browser.contexts()[0].pages()[0];
+    if (await verifyAuth(newPage)) {
+      console.log("\x1b[32m✓ Authentication successfully transferred!\x1b[0m");
+    }
+  } catch (error) {
+    console.error("Error:", error);
+  } finally {
+    // Cleanup
+    await browser?.close();
+    if (session) {
+      await client.sessions.release(session.id);
+      console.log("Session #2 released");
+    }
+  }
+}
+
+main().catch(console.error);
+```
+
+Check out the full example
+
+### Important Considerations
+
+*   **Cookie and JWT Based Authentication Only:**
+    This method works exclusively with websites that utilize cookie-based or JWT-based authentication (saved onto Local Storage).
+
+*   **Enhancing Continuity:**
+    A useful practice is to save the URL of the last visited page along with the session context. This allows you to restore the browsing context, providing continuity for users.
+
+*   **Session Security:**
+    Treat captured contexts as sensitive data. Ensure proper security and regularly refresh your sessions to maintain account integrity.
+
+*   **Available for Live Sessions:**
+    Context can only be captures from live sessions. So if you wish to re-use a context, make sure to grab the object _before_ releasing the session.
diff --git a/content/docs/overview/guides/selenium.mdx b/content/docs/overview/guides/selenium.mdx
new file mode 100644
index 00000000..9cd596b1
--- /dev/null
+++ b/content/docs/overview/guides/selenium.mdx
@@ -0,0 +1,147 @@
+---
+title: Connect with Selenium
+description: How to drive and connect to Steel browser sessions with Selenium
+sidebarTitle: Connect with Selenium
+llm: true
+---
+
+
+Our Selenium integration is in its early stages and is not at feature parity with our Puppeteer and Playwright integrations. Some features like CAPTCHA solving and proxy support are currently unavailable. More details are provided below.
+
+Steel sessions are designed to be easily driven by Selenium, allowing you to run your existing Selenium scripts in the cloud with minimal changes.
+
+This guide shows you how to drive Steel's cloud browser sessions using Selenium with Python.
+
+Quick Start: Want to jump right in? [Skip to example project.](https://docs.steel.dev/overview/guides/connect-with-selenium#example-project-scraping-hacker-news)
+
+Limitations
+-----------
+
+Before we begin, please note that the following features are not yet supported in our Selenium integration:
+
+*   **CAPTCHA Solving:** Automatic CAPTCHA solving is not available.
+
+*   **Proxy Support:** Custom proxy configurations are currently unsupported.
+
+*   **Advanced Session Management:** Features like session cloning and cookie manipulation are limited.
+
+*   **Live Session Viewer:** While sessions are logged in the Steel Cloud app, we don’t currently have support for the live session viewer.
+
+
+
+
+Connecting to Steel with Selenium
+---------------------------------
+
+Most Selenium scripts start with a simple WebDriver setup that looks something like this:
+```python Python -wcn
+from selenium import webdriver
+
+driver = webdriver.Chrome()  # or Firefox(), Safari(), etc.
+driver.get('https://example.com')
+```
+
+To run your script with Steel, you'll need to:
+
+*   Create a session with Selenium support enabled
+
+*   Set up custom header handling (required for authentication)
+
+*   Connect using Steel's dedicated Selenium URL
+
+
+#### Here's what that looks like:
+
+First, create a custom connection handler for Steel-specific headers:
+
+```python Python -wcn
+from selenium.webdriver.remote.remote_connection import RemoteConnection
+
+class CustomRemoteConnection(RemoteConnection):
+    def __init__(self, remote_server_addr: str, session_id: str):
+        super().__init__(remote_server_addr)
+        self._session_id = session_id
+
+    def get_remote_connection_headers(self, parsed_url, keep_alive=False):
+        headers = super().get_remote_connection_headers(parsed_url, keep_alive)
+        headers.update({
+            'steel-api-key': os.environ.get("STEEL_API_KEY"),
+            'session-id': self._session_id
+        })
+        return headers
+
+```
+
+
+
+
+Then use it to connect to Steel:
+
+```python Python -wcn
+from steel import Steel
+from selenium import webdriver
+import os
+
+client = Steel(
+    steel_api_key=os.getenv('STEEL_API_KEY'),
+)
+
+def main():
+    # Create a session with Selenium support
+    session = client.sessions.create(
+        is_selenium=True,  # Required for Selenium sessions
+    )
+
+    # Connect using the custom connection handler
+    driver = webdriver.Remote(
+        command_executor=CustomRemoteConnection(
+            remote_server_addr='http://connect.steelbrowser.com/selenium',
+            session_id=session.id
+        ),
+        options=webdriver.ChromeOptions()
+    )
+
+    # Run your automation
+    driver.get('https://example.com')
+
+    # Clean up when done
+    driver.quit()
+    client.sessions.release(session.id)
+
+if __name__ == "__main__":
+    main()
+```
+
+**Important**: Sessions remain active until explicitly released or timed out. It’s best practise to call `client.sessions.release()` when finished instead of relying on timeout.
+
+Why Custom Headers?
+-------------------
+
+Unlike Puppeteer and Playwright, Selenium doesn't natively support adding the headers required by Steel (session-id and steel-api-key). That's why we need to create a custom connection handler to include these headers with each request.
+
+Example Project: Scraping Hacker News
+-------------------------------------
+
+Here's a working example that scrapes Hacker News with proper error handling and session management:
+
+Starter code that scrapes Hacker News for top 5 stories using Steel's Python SDK and Selenium.
+
+
+
+To run it:
+
+*   Add your `STEEL_API_KEY` to the secrets pane. It's located under "Tools" on the left hand pane.
+
+*   Hit Run
+
+
+The example includes:
+
+*   Complete session configuration options
+
+*   Error handling best practices
+
+*   A working Hacker News scraper example
+
+
+You can also clone it on [Github](https://github.com/steel-dev/steel-cookbook/tree/main/examples/steel-selenium-starter) or [Replit](https://replit.com/@steel-dev/steel-selenium-starter?v=1#README.md) to start editing it yourself!
diff --git a/content/docs/overview/meta.json b/content/docs/overview/meta.json
index 6e932450..60dc8658 100644
--- a/content/docs/overview/meta.json
+++ b/content/docs/overview/meta.json
@@ -7,6 +7,7 @@
     "steel-cli",
     "need-help",
     "pricinglimits",
+    "...guides",
     "...sessions-api",
     "...credentials-api",
     "...files-api",

From cf377758c779ec1f8cd620c6d7c745349383e0b5 Mon Sep 17 00:00:00 2001
From: aspectrr <collin@steelbrowser.com>
Date: Wed, 5 Nov 2025 06:37:17 -0500
Subject: [PATCH 3/4] feat: add python package-install, update quickstarts,
 update embedding guides

---
 components/docskit/components.tsx             | 146 +++++++++++++-----
 components/docskit/terminal.tsx               |  48 +++---
 content/docs/integrations/agno/quickstart.mdx |  17 +-
 .../integrations/browser-use/quickstart.mdx   |  16 +-
 .../claude-computer-use/quickstart-py.mdx     |  15 +-
 .../docs/integrations/crewai/quickstart.mdx   |  16 +-
 .../docs/integrations/notte/quickstart.mdx    |  24 +--
 .../integrations/stagehand/quickstart-py.mdx  |  12 +-
 .../overview/guides/embed-live-sessions.mdx   | 142 -----------------
 .../guides/embed-session-recordings.mdx       |  94 -----------
 content/docs/overview/guides/meta.json        |   2 -
 .../human-in-the-loop.mdx                     |   0
 content/docs/overview/sessions-api/meta.json  |  11 +-
 13 files changed, 165 insertions(+), 378 deletions(-)
 delete mode 100644 content/docs/overview/guides/embed-live-sessions.mdx
 delete mode 100644 content/docs/overview/guides/embed-session-recordings.mdx
 rename content/docs/overview/{guides => sessions-api}/human-in-the-loop.mdx (100%)

diff --git a/components/docskit/components.tsx b/components/docskit/components.tsx
index 256e20ab..3b2e50af 100644
--- a/components/docskit/components.tsx
+++ b/components/docskit/components.tsx
@@ -1,16 +1,16 @@
-import { Block, CodeBlock } from 'codehike/blocks';
-import type { RawCode } from 'codehike/code';
-import Link from 'fumadocs-core/link';
-import { z } from 'zod';
-import { Code } from './code';
-import { SimpleCode } from './code-simple';
-import { InlineCode } from './inline-code';
-import { WithNotes } from './notes';
-import { NoteTooltip } from './notes.tooltip';
-import ScrollyCoding from './scrollycoding';
-import Slideshow from './slideshow';
-import Spotlight from './spotlight';
-import { Terminal } from './terminal';
+import { Block, CodeBlock } from "codehike/blocks";
+import type { RawCode } from "codehike/code";
+import Link from "fumadocs-core/link";
+import { z } from "zod";
+import { Code } from "./code";
+import { SimpleCode } from "./code-simple";
+import { InlineCode } from "./inline-code";
+import { WithNotes } from "./notes";
+import { NoteTooltip } from "./notes.tooltip";
+import ScrollyCoding from "./scrollycoding";
+import Slideshow from "./slideshow";
+import Spotlight from "./spotlight";
+import { Terminal } from "./terminal";
 
 // Export RawCode type for external use
 export type { RawCode };
@@ -38,13 +38,13 @@ export const docskit = {
 function DocsKitCode(props: { codeblock: RawCode }) {
   const { codeblock, ...rest } = props;
 
-  if (codeblock.lang === 'package-install') {
+  if (codeblock.lang === "package-install") {
     return <PackageInstall codeblock={codeblock} />;
   }
 
-  if (codeblock.lang === 'terminal') {
+  if (codeblock.lang === "terminal") {
     // Parse flags from meta string (e.g., "terminal -o" -> hideOutput: true)
-    const hideOutput = codeblock.meta?.includes('-o') || false;
+    const hideOutput = codeblock.meta?.includes("-o") || false;
     return <Terminal codeblocks={[codeblock]} hideOutput={hideOutput} />;
   }
 
@@ -60,7 +60,7 @@ function CodeTabs(props: unknown) {
   }).safeParse(props);
 
   if (error) {
-    throw betterError(error, 'CodeTabs');
+    throw betterError(error, "CodeTabs");
   }
 
   const { code, flags, storage } = data;
@@ -70,50 +70,114 @@ function CodeTabs(props: unknown) {
 
 function betterError(error: z.ZodError, componentName: string) {
   const { issues } = error;
-  if (issues.length === 1 && issues[0].path[0] === 'code') {
-    return new Error(`<${componentName}> should contain at least one codeblock marked with \`!!\``);
+  if (issues.length === 1 && issues[0].path[0] === "code") {
+    return new Error(
+      `<${componentName}> should contain at least one codeblock marked with \`!!\``,
+    );
   } else {
     return error;
   }
 }
 
 function DocsKitLink(props: any) {
-  if (props.href === 'tooltip') {
+  if (props.href === "tooltip") {
     return <NoteTooltip name={props.title}>{props.children}</NoteTooltip>;
   }
   return <Link {...props} />;
 }
 
 function PackageInstall({ codeblock }: { codeblock: RawCode }) {
-  return (
-    <Terminal
-      storage="package-install"
-      codeblocks={[
+  const meta = (codeblock.meta ?? "").toLowerCase();
+
+  const isPython = meta.includes("python") || meta.split(/\s+/).includes("py");
+  const noVenv = meta.split(/\s+/).includes("-no-venv");
+
+  const isJS =
+    meta.includes("javascript") ||
+    meta.includes("typescript") ||
+    meta.split(/\s+/).includes("js") ||
+    meta.split(/\s+/).includes("ts") ||
+    (!isPython && true);
+
+  const jsBlocks = [
+    {
+      ...codeblock,
+      value: "$ npm install " + codeblock.value,
+      meta: "npm",
+      lang: "terminal",
+    },
+    {
+      ...codeblock,
+      value: "$ yarn add " + codeblock.value,
+      meta: "yarn",
+      lang: "terminal",
+    },
+    {
+      ...codeblock,
+      value: "$ pnpm add " + codeblock.value,
+      meta: "pnpm",
+      lang: "terminal",
+    },
+    {
+      ...codeblock,
+      value: "$ bun add " + codeblock.value,
+      meta: "bun",
+      lang: "terminal",
+    },
+  ];
+
+  const pythonBlocks = noVenv
+    ? [
+        {
+          ...codeblock,
+          value: "$ uv add " + codeblock.value,
+          meta: "uv",
+          lang: "terminal",
+        },
         {
           ...codeblock,
-          value: '$ npm install ' + codeblock.value,
-          meta: 'npm',
-          lang: 'terminal',
+          value: "$ poetry add " + codeblock.value,
+          meta: "poetry",
+          lang: "terminal",
         },
         {
           ...codeblock,
-          value: '$ yarn add ' + codeblock.value,
-          meta: 'yarn',
-          lang: 'terminal',
+          value: "$ pip install " + codeblock.value,
+          meta: "pip",
+          lang: "terminal",
         },
+      ]
+    : [
         {
           ...codeblock,
-          value: '$ pnpm add ' + codeblock.value,
-          meta: 'pnpm',
-          lang: 'terminal',
+          value:
+            `$ uv venv\n` +
+            `$ source .venv/bin/activate\n` +
+            `$ uv add ${codeblock.value}`,
+          meta: "uv",
+          lang: "terminal",
         },
         {
           ...codeblock,
-          value: '$ bun add ' + codeblock.value,
-          meta: 'bun',
-          lang: 'terminal',
+          value: `$ poetry shell\n` + `$ poetry add ${codeblock.value}`,
+          meta: "poetry",
+          lang: "terminal",
         },
-      ]}
+        {
+          ...codeblock,
+          value:
+            `$ python -m venv .venv\n` +
+            `$ source .venv/bin/activate\n` +
+            `$ pip install ${codeblock.value}`,
+          meta: "pip",
+          lang: "terminal",
+        },
+      ];
+
+  return (
+    <Terminal
+      storage="package-install"
+      codeblocks={isPython ? pythonBlocks : jsBlocks}
     />
   );
 }
@@ -127,10 +191,12 @@ function TerminalPicker(props: unknown) {
   }).safeParse(props);
 
   if (error) {
-    throw betterError(error, 'TerminalPicker');
+    throw betterError(error, "TerminalPicker");
   }
 
   const { code, storage, flags } = data;
-  const hideOutput = flags?.includes('-o') || false;
-  return <Terminal codeblocks={code} storage={storage} hideOutput={hideOutput} />;
+  const hideOutput = flags?.includes("-o") || false;
+  return (
+    <Terminal codeblocks={code} storage={storage} hideOutput={hideOutput} />
+  );
 }
diff --git a/components/docskit/terminal.tsx b/components/docskit/terminal.tsx
index 2cd5b39b..701b4b76 100644
--- a/components/docskit/terminal.tsx
+++ b/components/docskit/terminal.tsx
@@ -4,12 +4,12 @@ import {
   highlight,
   Pre,
   type RawCode,
-} from 'codehike/code';
-import { CommandBlock } from './annotations/terminal-command';
-import { OutputBlock } from './annotations/terminal-output';
-import { wordWrap } from './annotations/word-wrap';
-import { TerminalClient } from './terminal.client';
-import theme from './theme.mjs';
+} from "codehike/code";
+import { CommandBlock } from "./annotations/terminal-command";
+import { OutputBlock } from "./annotations/terminal-output";
+import { wordWrap } from "./annotations/word-wrap";
+import { TerminalClient } from "./terminal.client";
+import theme from "./theme.mjs";
 
 export async function Terminal(props: {
   codeblocks: RawCode[];
@@ -25,7 +25,11 @@ export async function Terminal(props: {
           <div className="bg-[var(--ch-0)] p-1">
             <Pre
               code={highlighted}
-              handlers={[createOutputHandler(props.hideOutput), wordWrap, command]}
+              handlers={[
+                createOutputHandler(props.hideOutput),
+                wordWrap,
+                command,
+              ]}
               className="bg-[var(--ch-18)] py-3 px-2 rounded-lg leading-6 font-mono"
               style={{ color: highlighted.style.color }}
             />
@@ -35,11 +39,17 @@ export async function Terminal(props: {
     }),
   );
 
-  return <TerminalClient tabs={tabs} storeKey={props.storage} key={props.storage || ''} />;
+  return (
+    <TerminalClient
+      tabs={tabs}
+      storeKey={props.storage}
+      key={props.storage || ""}
+    />
+  );
 }
 
 const createOutputHandler = (hideOutput?: boolean): AnnotationHandler => ({
-  name: 'output',
+  name: "output",
   Block: (props) => {
     const Component = OutputBlock as any;
     return <Component {...props} hideOutput={hideOutput} />;
@@ -47,7 +57,7 @@ const createOutputHandler = (hideOutput?: boolean): AnnotationHandler => ({
 });
 
 const command: AnnotationHandler = {
-  name: 'command',
+  name: "command",
   Block: CommandBlock,
 };
 
@@ -65,30 +75,32 @@ function extractAnnotations(code: string) {
   const lines = code.split(/\r?\n/);
   const annotations = [] as BlockAnnotation[];
   lines.forEach((line, index) => {
-    if (line.startsWith('$ ')) {
+    if (line.startsWith("$ ")) {
       annotations.push({
-        name: 'command',
+        name: "command",
         query: line.slice(2),
         fromLineNumber: index + 1,
         toLineNumber: index + 1,
       });
     } else {
       const last = annotations[annotations.length - 1];
-      if (last.name === 'command' && last.query.endsWith('\\')) {
+      if (last.name === "command" && last.query.endsWith("\\")) {
         last.query = `${last.query}\n${line}`;
         last.toLineNumber = index + 1;
-      } else if (!last || last.name !== 'output') {
+      } else if (!last || last.name !== "output") {
         annotations.push({
-          name: 'output',
-          query: '',
+          name: "output",
+          query: "",
           fromLineNumber: index + 1,
           toLineNumber: index + 1,
         });
-      } else if ('toLineNumber' in last) {
+      } else if ("toLineNumber" in last) {
         last.toLineNumber = index + 1;
       }
     }
   });
-  const codeWithoutPrompt = lines.map((line) => line.replace(/^\$ /, '')).join('\n');
+  const codeWithoutPrompt = lines
+    .map((line) => line.replace(/^\$ /, ""))
+    .join("\n");
   return { annotations, value: codeWithoutPrompt };
 }
diff --git a/content/docs/integrations/agno/quickstart.mdx b/content/docs/integrations/agno/quickstart.mdx
index 3dfd6772..2d9c9927 100644
--- a/content/docs/integrations/agno/quickstart.mdx
+++ b/content/docs/integrations/agno/quickstart.mdx
@@ -20,23 +20,10 @@ Make sure you have:
 
 Create and activate a virtual environment, then install dependencies:
 
-```bash Terminal -wc
-# Create project
-mkdir steel-agno-starter
-cd steel-agno-starter
-
-# (Recommended) Create & activate a virtual environment
-python3 -m venv .venv
-source .venv/bin/activate  # On Windows: .venv\Scripts\activate
-
-# Create files
-touch main.py .env
-
-# Install dependencies
-pip install agno steel-sdk python-dotenv playwright
+```package-install python
+agno steel-sdk python-dotenv playwright
 ```
 
-
 Create a `.env` file with your keys and a default task:
 
 ```env ENV -wcn -f .env
diff --git a/content/docs/integrations/browser-use/quickstart.mdx b/content/docs/integrations/browser-use/quickstart.mdx
index fc266cb2..a1837f8d 100644
--- a/content/docs/integrations/browser-use/quickstart.mdx
+++ b/content/docs/integrations/browser-use/quickstart.mdx
@@ -20,22 +20,12 @@ Ensure you have the following:
 
 #### Step 1: Set up your environment
 
-First, create a project directory, set up a virtual environment, and install the required packages:
+First, set up a virtual environment, and install the required packages:
 
-```bash Terminal -wc
-# Create a project directory
-mkdir steel-browser-use-agent
-cd steel-browser-use-agent
-
-# Recommended: Create and activate a virtual environment
-uv venv
-source .venv/bin/activate  # On Windows, use: .venv\Scripts\activate
-
-# Install required packages
-pip install steel-sdk browser-use python-dotenv
+```package-install python
+steel-sdk browser-use python-dotenv
 ```
 
-
 Create a `.env` file with your API keys:
 
 ```env ENV -wcn -f .env
diff --git a/content/docs/integrations/claude-computer-use/quickstart-py.mdx b/content/docs/integrations/claude-computer-use/quickstart-py.mdx
index 0fa24c62..f0da5ee9 100644
--- a/content/docs/integrations/claude-computer-use/quickstart-py.mdx
+++ b/content/docs/integrations/claude-computer-use/quickstart-py.mdx
@@ -20,19 +20,10 @@ We'll build a Claude Computer Use loop that enables autonomous web task executio
 
 #### Step 1: Setup and Dependencies
 
-First, create a project directory, set up a virtual environment, and install the required packages:
+First, set up a virtual environment, and install the required packages:
 
-```bash Terminal -wc
-# Create a project directory
-mkdir steel-claude-computer-use
-cd steel-claude-computer-use
-
-# Recommended: Create and activate a virtual environment
-python -m venv venv
-source venv/bin/activate  # On Windows, use: venv\Scripts\activate
-
-# Install required packages
-pip install steel-sdk anthropic playwright python-dotenv pillow
+```package-install python
+steel-sdk anthropic playwright python-dotenv pillow
 ```
 
 
diff --git a/content/docs/integrations/crewai/quickstart.mdx b/content/docs/integrations/crewai/quickstart.mdx
index 606aaa22..315c5199 100644
--- a/content/docs/integrations/crewai/quickstart.mdx
+++ b/content/docs/integrations/crewai/quickstart.mdx
@@ -20,20 +20,8 @@ Make sure you have:
 
 Create and activate a virtual environment, then install dependencies:
 
-```bash Terminal -wc
-# Create project
-mkdir steel-crewai-starter
-cd steel-crewai-starter
-
-# (Recommended) Create & activate a virtual environment
-python3 -m venv .venv
-source .venv/bin/activate  # On Windows: .venv\Scripts\activate
-
-# Create files
-touch main.py .env
-
-# Install dependencies
-pip install crewai[tools] steel-sdk python-dotenv pydantic
+```package-install python
+crewai[tools] steel-sdk python-dotenv pydantic
 ```
 
 
diff --git a/content/docs/integrations/notte/quickstart.mdx b/content/docs/integrations/notte/quickstart.mdx
index a17bf3c1..715f2c92 100644
--- a/content/docs/integrations/notte/quickstart.mdx
+++ b/content/docs/integrations/notte/quickstart.mdx
@@ -14,26 +14,14 @@ llm: true
 *   **Python 3.11+**
 :::
 
-### Step 1: Project Setup
+### Step 1: Project Setup and Install Dependencies
 
-Create a virtual environment and a minimal project:
-
-```bash Terminal -wc
-python3 -m venv .venv && \
-source .venv/bin/activate && \
-mkdir notte-steel && cd notte-steel && \
-touch main.py .env
-```
-
-
-### Step 2: Install Dependencies
-
-```bash Terminal -wc
-pip install steel-sdk notte python-dotenv
+```package-install python
+steel-sdk notte python-dotenv
 ```
 
 
-### Step 3: Environment Variables
+### Step 2: Environment Variables
 
 Create a `.env` file with your API keys and a default task:
 
@@ -44,7 +32,7 @@ TASK="Go to Wikipedia and search for machine learning"
 ```
 
 
-### Step 4: Initialize Steel & Notte, then Connect via CDP
+### Step 3: Initialize Steel & Notte, then Connect via CDP
 
 Set up Steel, load env vars, and prepare to start the Notte agent.
 
@@ -67,7 +55,7 @@ TASK = os.getenv("TASK") or "Go to Wikipedia and search for machine learning"
 ```
 
 
-### Step 5: Run a Notte Agent Task
+### Step 4: Run a Notte Agent Task
 
 Create a Steel session, connect Notte via **CDP**, run your task, and print the result.
 
diff --git a/content/docs/integrations/stagehand/quickstart-py.mdx b/content/docs/integrations/stagehand/quickstart-py.mdx
index 01fc820a..74b8c860 100644
--- a/content/docs/integrations/stagehand/quickstart-py.mdx
+++ b/content/docs/integrations/stagehand/quickstart-py.mdx
@@ -20,18 +20,12 @@ Ensure you have the following:
 
 ### Step 1: Set up your environment
 
-First, create a project directory and install the required packages:
+First install the required packages:
 
-```bash Terminal -wc
-# Create a project directory
-mkdir steel-stagehand-starter
-cd steel-stagehand-starter
-
-# Install required packages
-pip install steel-sdk stagehand pydantic python-dotenv
+```package-install python
+steel-sdk stagehand pydantic python-dotenv
 ```
 
-
 Create a `.env` file with your API keys:
 
 ```env ENV -wcn -f .env
diff --git a/content/docs/overview/guides/embed-live-sessions.mdx b/content/docs/overview/guides/embed-live-sessions.mdx
deleted file mode 100644
index d3f07f3a..00000000
--- a/content/docs/overview/guides/embed-live-sessions.mdx
+++ /dev/null
@@ -1,142 +0,0 @@
----
-title: View and Embed Live Sessions
-description: How to embed and share live browser sessions in your applications
-sidebarTitle: View and Embed Live Sessions
-llm: true
----
-
-Every Steel browser session comes with a debug URL that provides a flexible way to view and interact with the session. While Steel's dashboard includes a full-featured session viewer for monitoring your sessions, the debug URL feature allows you to implement custom viewing solutions in your applications and let viewers control browser sessions remotely.
-
-
-
-### Prerequisites
-
-*   A Steel API key
-
-*   An active Steel browser session
-
-*   Basic familiarity with HTML and JavaScript/Python
-
-
-
-### Getting the Debug URL
-
-When creating a session through our API, the response includes a `debugUrl`.
-
-Here's how to retrieve it using Steel’s SDKs:
-
-<CodeTabs storage="languageSwitcher">
-
-```python !! Python -wcn
-from steel import Steel
-
-client = Steel()
-session = client.sessions.create()
-
-# Get the debug URL
-debug_url = session.debug_url
-print(f"Debug URL: {debug_url}")
-```
-
-```typescript !! TypeScript -wcn
-import Steel from 'steel-sdk';
-
-const client = new Steel();
-const session = await client.sessions.create();
-
-// Get the debug URL
-const debugUrl = session.debugUrl;
-console.log(`Debug URL: ${debugUrl}`);
-```
-
-</CodeTabs>
-
-
-Once you have the debug URL, you can open it directly in your browser to quickly view your session.
-
-
-
-### Embedding Sessions in Your Application
-
-For production use cases, you can embed the session view in your application using an iframe:
-```typescript Typescript -wcn
-<iframe
-    src={session.debugUrl}
-    style="width: 100%; height: 600px; border: none;"
-></iframe>
-```
-
-The view will automatically scale to fit the iframe container while maintaining aspect ratio.
-
-Debug URLs are not authenticated. Anyone with access to a session's debug URL can view that session. Consider this when implementing session sharing features.
-
-
-
-### Configuration Options
-
-Customize the embedded view using UTM parameters:
-```typescript Typescript -wcn
-<iframe
-    src={`${session.debugUrl}?theme=light&interactive=true&showControls=true`}
-    style="width: 100%; height: 600px; border: none;"
-></iframe>
-```
-
-| Parameter     | Type    | Default   | Description |
-|----------------|---------|-----------|--------------|
-| `pageId`       | string  | (empty)   | Optional: This will enable a single tab view of a particular pageId. You can fetch pageIds either directly from Playwright/Puppeteer or using the Live Details endpoint. |
-| `pageIndex`    | string  | (empty)   | Optional: This will enable a single tab view of tab N where N is the index passed in. So if you want to only display the first page, passing in `pageIndex=0` will do that. |
-| `theme`        | string  | `"dark"`  | Visual theme of the interface (`"dark"` or `"light"`). |
-| `interactive`  | boolean | `true`    | When enabled, viewers can interact with the page through clicks, scrolling, and navigation. |
-| `showControls` | boolean | `true`    | Shows/hides the URL input and navigation controls. |
-
-### Common Use Cases
-
-#### Sharing Session Views
-
-Embed a fullscreen read-only session view:
-```typescript Typescript -wnc
-<iframe
-  src={`${session.debugUrl}?interactive=false&showControls=false`}
-  style="width: 100%; height: 600px; border: none;"
-></iframe>
-```
-
-#### Human-in-the-Loop Workflows
-
-The debug URL feature is particularly useful for human-in-the-loop workflows, where you need to enable human intervention in automated processes. See our detailed guide on [implementing human-in-the-loop workflows](https://docs.steel.dev/overview/guides/implementing-human-in-the-loop-controls) for more information.
-
-### Working with Tabs
-
-#### Multi-tab View
-
-By default, the debug url will return a multi-tab view of the browser. When a new page/tab is created, the viewer will auto switch to that new tab. It will not switch back if the focus is set to a previous tab. When `interactive=false` is appended to the debugUrl in the iframe, switching between tabs will be disabled (along with every other interaction), so be wary of that if you need to switch between tabs in a non-interactive view.
-
-#### Single-tab View
-
-When a `pageId` or a `pageIndex` is passed into the debug url, the browser view will only focus on that page and no other tabs will be shown. This is useful when you only want to present one tab to the user and either manually switch tabs (by passing in a different `pageId` or `pageIndex`) or just generally disable other pages.
-
-### Troubleshooting
-
-*   If the iframe appears blank, ensure your session is still active and has actions sent to it like navigating to new pages.
-
-*   If interaction isn't working, verify that `interactive=true` is set
-
-*   For sizing issues, check that your container has explicit dimensions (use the `dimensions` parameter when creating your session)
-
-*   Make sure your session hasn't timed out (default timeout is 5 minutes)
-
-
-
-
-### What's Next
-
-Learn more about:
-
-Implement Human-in-the-Loop Controls
-
-How to let users take control of Steel browser sessions
-
-Session Lifecycle
-
-Learn how to start and release browser sessions programatically.
diff --git a/content/docs/overview/guides/embed-session-recordings.mdx b/content/docs/overview/guides/embed-session-recordings.mdx
deleted file mode 100644
index 92e245d6..00000000
--- a/content/docs/overview/guides/embed-session-recordings.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Embed Session Recordings
-description: How to access recordings of past browser sessions and display them within your app
-sidebarTitle: Embed Session Recordings
-llm: true
----
-
-Every Steel browser session automatically records all page events. While Steel's dashboard includes full-featured session playback for watching past sessions, the `v1/sessions/:id/events` endpoint allows you to pull the same recorded events to implement custom playback functionality in your applications.
-
-In this guide, you'll learn how to use the Steel Sessions API to fetch recorded events from a session and use the [rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player) library to playback those events in your own UI.
-
-### Prerequisites
-
-*   Steel API Key
-
-*   [Steel SDK](https://github.com/steel-dev/steel-python) installed
-
-    *   Node: `npm install steel-sdk`
-
-    *   Python: `pip install steel-sdk`
-
-
-*   Familiarity with [Steel sessions](https://docs.steel.dev/overview/sessions-api/overview)
-
-*   Basic Understanding of HTML/JS
-
-
-
-
-### Retrieving Session Events
-
-To retrieve the recorded events for a specific session you can use the SDKs:
-<CodeTabs storage="languageSwitcher">
-
-```typescript !! Typescript -wcn
-const events = await client.sessions.events(session.id)
-```
-```python !! Python -wnc
-events = client.sessions.events(session_id=session.id)
-```
-</CodeTabs>
-
-or you can simply make a GET request to the [events endpoint:](https://docs.steel.dev/api-reference#tag/sessions/GET/v1/sessions/{id}/events)
-```bash Terminal
-GET /v1/sessions/:id/events
-```
-
-Replace `:id` with the unique identifier of the session you want to retrieve. This endpoint requires authentication, so be sure to include your authentication credentials. You can learn more about that in the [API Reference for session events](https://docs.steel.dev/api-reference#tag/sessions/GET/v1/sessions/{id}/events).
-
-
-
-### Replaying Sessions
-
-The events are returned in the [RRWeb format](https://github.com/rrweb-io/rrweb), which can be replayed using the [rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player) library. Here's an example of how you can implement playback in your application with rrweb-player:
-
-#### Step 1: Install rrweb-player
-```package-install
-rrweb-player
-```
-
-
-#### Step 2: Set up the player in your frontend application
-```typescript Typescript -wcn
-import rrwebPlayer from 'rrweb-player';
-import 'rrweb-player/dist/style.css'; // important for styling of the player
-
-// Once you've fetched the events
-const events = await client.sessions.events(session.id)
-
-// Create player element
-const playerElement = document.getElementById('player-container');
-
-// Initialize the player with events
-const player = new rrwebPlayer({
-  target: playerElement,
-  props: {
-    events: events,
-    width: 800,  // Width of the player
-    height: 600, // Height of the player
-    autoPlay: true,
-    skipInactive: true  // Skip periods of inactivity
-  }
-});
-```
-
-
-
-
-#### Step 3: Add player controls in your HTML/JSX/etc.
-```typescript Typescript -wcn
-<div id="player-container"></div>
-```
-
-Voilà! Now you can playback recorded events from any Steel session. As usual, if you have any questions, comments, concerns; feel free to get help in the [Discord](/overview/need-help).
diff --git a/content/docs/overview/guides/meta.json b/content/docs/overview/guides/meta.json
index 70192c4a..750e2d39 100644
--- a/content/docs/overview/guides/meta.json
+++ b/content/docs/overview/guides/meta.json
@@ -3,9 +3,7 @@
   "root": true,
   "pages": [
     "---Guides---",
-    "embed-live-sessions",
     "human-in-the-loop",
-    "embed-session-recordings",
     "playwright-node",
     "playwright-python",
     "puppeteer",
diff --git a/content/docs/overview/guides/human-in-the-loop.mdx b/content/docs/overview/sessions-api/human-in-the-loop.mdx
similarity index 100%
rename from content/docs/overview/guides/human-in-the-loop.mdx
rename to content/docs/overview/sessions-api/human-in-the-loop.mdx
diff --git a/content/docs/overview/sessions-api/meta.json b/content/docs/overview/sessions-api/meta.json
index b6f07b14..cfcbd361 100644
--- a/content/docs/overview/sessions-api/meta.json
+++ b/content/docs/overview/sessions-api/meta.json
@@ -1,5 +1,14 @@
 {
   "title": "Sessions API",
   "root": false,
-  "pages": ["---Sessions API---", "overview", "quickstart", "session-lifecycle", "mobile-mode","multi-region","embed-sessions"]
+  "pages": [
+    "---Sessions API---",
+    "overview",
+    "quickstart",
+    "session-lifecycle",
+    "mobile-mode",
+    "multi-region",
+    "embed-sessions",
+    "human-in-the-loop"
+  ]
 }

From aab6efaacc397762809c8d208a4f0b9b41617108 Mon Sep 17 00:00:00 2001
From: aspectrr <collin@steelbrowser.com>
Date: Wed, 5 Nov 2025 06:46:12 -0500
Subject: [PATCH 4/4] fix: add in reusing auth, added in link to profiles

---
 content/docs/overview/guides/meta.json                   | 1 -
 content/docs/overview/sessions-api/meta.json             | 3 ++-
 .../reusing-auth-context.mdx}                            | 9 ++++++++-
 3 files changed, 10 insertions(+), 3 deletions(-)
 rename content/docs/overview/{guides/reusing-context-auth.mdx => sessions-api/reusing-auth-context.mdx} (94%)

diff --git a/content/docs/overview/guides/meta.json b/content/docs/overview/guides/meta.json
index 750e2d39..9e2294ad 100644
--- a/content/docs/overview/guides/meta.json
+++ b/content/docs/overview/guides/meta.json
@@ -7,7 +7,6 @@
     "playwright-node",
     "playwright-python",
     "puppeteer",
-    "reusing-auth-context",
     "selenium"
   ]
 }
diff --git a/content/docs/overview/sessions-api/meta.json b/content/docs/overview/sessions-api/meta.json
index cfcbd361..ea9fa109 100644
--- a/content/docs/overview/sessions-api/meta.json
+++ b/content/docs/overview/sessions-api/meta.json
@@ -9,6 +9,7 @@
     "mobile-mode",
     "multi-region",
     "embed-sessions",
-    "human-in-the-loop"
+    "human-in-the-loop",
+    "reusing-auth-context"
   ]
 }
diff --git a/content/docs/overview/guides/reusing-context-auth.mdx b/content/docs/overview/sessions-api/reusing-auth-context.mdx
similarity index 94%
rename from content/docs/overview/guides/reusing-context-auth.mdx
rename to content/docs/overview/sessions-api/reusing-auth-context.mdx
index e893cae1..f498dfb6 100644
--- a/content/docs/overview/guides/reusing-context-auth.mdx
+++ b/content/docs/overview/sessions-api/reusing-auth-context.mdx
@@ -9,6 +9,10 @@ The Steel Sessions API provides a `contexts` endpoint that allows you to capture
 
 In this guide, you'll learn how to use the Steel Sessions API to reuse authentication between browser sessions.
 
+:::callout
+For an easier way to reuse authentication, context, cookies, extensions etc. consider using Steel's new [Profiles API](/overview/profiles-api/overview). It utilizes auth context alongside a complete browser profile to automatically reuse all your auth, not just context or cookies.
+:::
+
 For additional practical examples and recipes, check out the [Steel Cookbook](https://github.com/steel-dev/steel-cookbook).
 
 
@@ -17,7 +21,10 @@ For additional practical examples and recipes, check out the [Steel Cookbook](ht
 
 *   Steel API Key
 
-*   [Steel SDK](https://github.com/steel-dev/steel-python) installed (`npm install steel-sdk`)
+*   [Steel SDK](https://github.com/steel-dev/steel-python) installed.
+```package-install
+steel-sdk
+```
 
 *   Familiarity with [Steel sessions](https://docs.steel.dev/overview/sessions-api/overview)