> Full docs index: https://docs.steel.dev/llms.txt

# Implement Human-in-the-Loop Controls
URL: https://docs.steel.dev/overview/sessions-api/human-in-the-loop

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
<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
// 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

- [Session Lifecycle](/overview/sessions-api/session-lifecycle): start and release
  browser sessions programmatically, including timeouts for interactive sessions.
- [Internal Agents Map](https://internal-agents.com/definitions): how 30+ organizations
  set the human review boundary for their own agents, from continuous steering to
  exception-only, with sources for every assessment.

### 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.