Agent Steering / Autonomy Dial

Live controls for a running agent: autonomy level, pause/resume, guardrails, and a "steer" box to redirect mid-run. Every control is controlled or uncontrolled.

Import

import { AgentSteering } from '@marbleui/ui'

Props

<AgentSteering>

Prop	Type	Default	Description
className	`string`	`—`
defaultEnabledGuardrails	`string[]`	`['prod', 'spend']`
defaultLevel	`Autonomy`	`'risky'`
defaultPaused	`boolean`	`false`
enabledGuardrails	`string[]`	`—`	Ids of the guardrails that are on.
guardrails	`Guardrail[]`	`defaultGuardrails`
isPaused	`boolean`	`—`
level	`Autonomy`	`—`
onEnabledGuardrailsChange	`(ids: string[]) => void`	`—`
onLevelChange	`(level: Autonomy) => void`	`—`
onPausedChange	`(paused: boolean) => void`	`—`
onSteer	`(msg: string) => void`	`—`
onStop	`() => void`	`—`	Shows "Stop run" (with a confirmation) when set.
status	`ReactNode`	`—`	Progress badge while running, e.g. "Step 4 of 6".
title	`ReactNode`	`—`	What the agent is working on, shown in the header.

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria DialogTrigger · React Aria Radio · React Aria RadioGroup. Follow the primitive's docs for the full keyboard map.

Usage notes

Controls for a running agent: autonomy level, guardrail switches, a “Steer the agent” box, Pause/Resume and Stop.

<AgentSteering
  title="Migrate users table"
  status="Step 4 of 6"
  level={level} onLevelChange={setLevel}
  enabledGuardrails={guards} onEnabledGuardrailsChange={setGuards}
  isPaused={paused} onPausedChange={setPaused}
  onSteer={(msg) => sendInstruction(runId, msg)}
  onStop={() => cancelRun(runId)}
/>

Every control reaches your app, controlled or uncontrolled like React Aria: level/defaultLevel (default 'risky')/onLevelChange, isPaused/defaultPaused/onPausedChange, and enabledGuardrails/defaultEnabledGuardrails/onEnabledGuardrailsChange (ids of the switches that are on).
guardrails replaces the three default switches with your own { id, label } list; pass [] to hide the section.
“Stop run” appears only with onStop, and asks for confirmation in an alert dialog first.
title and status are optional header text; “Paused” replaces the status while paused. The panel is 26rem wide (max-w-full); override the width with className.
onSteer gets the instruction (blank input isn’t sent). Sent instructions are listed under the box, and the latest is announced by a status region that is there from the start.

Example source · show

import { AgentSteering } from './agent-steering'

export const styles = { Default: () => <AgentSteering title="Migrate users table" status="Step 4 of 6" onStop={() => {}} /> }

Source: packages/ui/src/agent-steering/agent-steering.tsx

Catalog

Category: ai-agents
Priority: Extra
Primitive: composed
React Aria: Slider
Base UI: Slider