# Implement Human-in-the-Loop Controls
URL: /overview/sessions-api/human-in-the-loop

---
title: Implement Human-in-the-Loop Controls
description: How to let users take control of Steel browser sessions
sidebarTitle: 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/sessions-api/embed-sessions/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 programmatically.

### FAQ

### How do I let a user take control of an automated browser session?

Embed the session's debug URL in an iframe with `interactive=true` (enables clicks, scrolling, and form input) and `showControls=true` (shows the navigation bar with URL entry and back/forward controls).

### What can users do in an interactive session?

With both parameters enabled, users can click page elements, scroll, fill out forms and inputs, enter new URLs in the navigation bar, and use browser-style forward/back navigation.

### When is human-in-the-loop useful for browser agents?

It is most useful when users need to take over a session that needs assistance, enter sensitive information like login credentials, solve CAPTCHAs, verify or correct automated actions, or demonstrate actions that will be automated.

### Do actions taken in the embedded viewer affect the real session?

Yes. Any actions a user takes in an interactive session affect the actual browser session and its state, so make it clear to users when they are in control. A minimum iframe height of 600px is recommended for comfortable interaction.