SOP 011: Human-in-the-Loop Controls

Fresh

Field	Value
SOP ID	SOP-011
Version	1.0
Status	Active
Source	Steel HITL Docs

Overview

Let users take direct control of automated browser sessions. Embed interactive session viewers in your application so users can click, type, navigate, and interact with the browser.

HITL Workflow

Procedure

Step 1: Create Session

const session = await client.sessions.create();

Step 2: Embed Interactive Viewer

Add these URL parameters to the debug URL:

• interactive=true - Enable clicks, scrolling, form inputs
• showControls=true - Show URL bar and navigation controls

<iframe
  src="${session.debugUrl}?interactive=true&showControls=true"
  style="width: 100%; height: 600px; border: none;"
></iframe>

Step 3: React Component Example

import React from 'react';

type SessionViewerProps = {
  debugURL: string;
};

const SessionViewer: React.FC<SessionViewerProps> = ({ debugURL }) => {
  return (
    <div className="session-container">
      <div style={{
        background: '#f0f0f0',
        padding: '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>
  );
};

User Capabilities When Interactive

• Click and interact with page elements
• Scroll the page
• Enter URLs in the navigation bar
• Use forward/back navigation
• Fill out forms and input fields
• Navigate websites naturally

Use Cases

• Sensitive credential entry - User enters login details directly
• CAPTCHA assistance - User solves CAPTCHAs the agent can't handle
• Action verification - User confirms before critical automated actions
• Demonstration mode - User shows the agent what to do

Best Practices

1. Set minimum iframe height of 600px for comfortable interaction
2. Clearly indicate to users when they can interact
3. Remember: user actions affect the actual browser session state
4. Implement timeout handling for unresponsive users

Verification Checklist

• [ ] Session created with debug URL available
• [ ] iframe renders the session viewer
• [ ] interactive=true enables click/type interaction
• [ ] showControls=true shows navigation bar
• [ ] User actions reflect in real browser session

See Also

• SOP 012: Embed Sessions
• SOP 001: Create & Manage Sessions