Implement Human-in-the-Loop Controls

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

• Understanding of debug URLs

• 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

1
<iframe
2
  src={`${session.debugUrl}?interactive=true&showControls=true`}
3
  style="width: 100%; height: 600px; border: none;"
4
></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:

1
// SessionViewer.tsx
2
import React from 'react';
3

4
type SessionViewerProps = {
5
    debugURL: string;
6
};
7

8
const SessionViewer: React.FC<SessionViewerProps> = ({ debugURL }) => {
9
    return (
10
        <div className="session-container">
11
            <div
12
                className="status-banner"
13
                style={{
14
                    background: '#f0f0f0',
15
                    padding: '10px',
16
                    marginBottom: '10px',
17
                    textAlign: 'center',
18
                }}
19
            >
20
                Automated session - Click inside to take control
21
            </div>
22

23
            <iframe
24
                src={`${debugURL}?interactive=true&showControls=true`}
25
                style={{
26
                    width: '100%',
27
                    height: '600px',
28
                    border: 'none',
29
                }}
30
                title="Browser Session"
31
            />
32
        </div>
33
    );
34
};
35

36
export default SessionViewer;
37

38
// Usage in App.tsx
39
import React from 'react';
40
import SessionViewer from './SessionViewer';
41

42
const App: React.FC = () => {
43
    return (
44
        <div className="App">
45
            <h1>Browser Automation Dashboard</h1>
46
            <SessionViewer debugURL="YOUR_debug_URL" />
47
        </div>
48
    );
49
};
50

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