AI Autonomy Slider

Settings

Governor

Control AI agency level from manual to autonomous with visual slider, capability descriptions, and safety warnings. Helps users understand and control how much independence the AI has in performing actions.

Preview - Full Mode

Complete autonomy slider with all features

AI Autonomy: Suggest

AI proactively suggests actions

Risk

Compact Mode

Minimal horizontal layout for limited space

Copilot

Without Capabilities

Simplified view without expandable details

AI Autonomy: Copilot

AI works alongside you

Risk

With Level Restrictions

Limit maximum autonomy level

AI Autonomy: Suggest

AI proactively suggests actions

Risk

Maximum autonomy limited to Copilot level for this workspace

Props

AIAutonomySlider component API reference

Prop	Type	Default	Description
`value`	`'manual' \| 'suggest' \| 'copilot' \| 'autopilot' \| 'autonomous'`	`'suggest'`	Current autonomy level
`onChange`	`(level: AutonomyLevel) => void`	—	Callback when level changes
`levels`	`AutonomyLevelConfig[]`	—	Custom level configurations (overrides defaults)
`showDescriptions`	`boolean`	`true`	Show descriptions for each level
`showCapabilities`	`boolean`	`false`	Show capabilities list when expanded
`showRiskIndicators`	`boolean`	`true`	Show risk indicators
`disabledLevels`	`AutonomyLevel[]`	`[]`	Disable certain levels
`maxLevel`	`AutonomyLevel`	—	Maximum allowed level
`highAutonomyWarning`	`string`	`'Higher autonomy means less human oversight. Are you sure?'`	Warning message when changing to high autonomy
`compact`	`boolean`	`false`	Compact mode for smaller spaces
`className`	`string`	—	Additional CSS classes

AutonomyLevelConfig Type

Prop	Type	Default	Description
`level*`	`AutonomyLevel`	—	Level identifier
`label*`	`string`	—	Display label
`description*`	`string`	—	Short description
`capabilities*`	`string[]`	—	What the AI can do at this level
`requiresApproval*`	`string[]`	—	What requires human approval
`icon*`	`LucideIcon`	—	Icon for this level
`color*`	`string`	—	Color classes
`riskLevel*`	`'none' \| 'low' \| 'medium' \| 'high'`	—	Risk level indicator

Usage

Import and implementation example

import { AIAutonomySlider } from '@/blocks/ai-transparency/ai-autonomy-slider'
import { useState } from 'react'

export default function Example() {
 const [autonomyLevel, setAutonomyLevel] = useState('suggest')

 return (
 <AIAutonomySlider
 value={autonomyLevel}
 onChange={(level) => {
 setAutonomyLevel(level)
 // Update AI behavior based on level
 console.log('Autonomy changed to:', level)
 }}
 showDescriptions={true}
 showCapabilities={true}
 maxLevel="autopilot"
 />
 )
}

This block is self-contained (no UI component dependencies)

Features

Built-in functionality

Five autonomy levels: Manual, Suggest, Copilot, Autopilot, and Autonomous
Visual slider: Interactive track with labeled markers
Risk indicators: Color-coded risk levels (none, low, medium, high)
Capability breakdown: Expandable list of what AI can/cannot do
Safety warnings: Modal confirmation for high autonomy levels
Level restrictions: Set maximum allowed autonomy level
Compact mode: Horizontal mini version for tight spaces
Custom levels: Override default level configurations
Dark mode support: Full dark mode with proper contrast

Default Autonomy Levels

Built-in level configurations

Manual

AI assists only when asked

Risk: None

Suggest

AI proactively suggests actions

Risk: Low

Copilot

AI works alongside you

Risk: Medium - can auto-complete and fix minor issues

Autopilot

AI handles routine tasks

Risk: Medium - executes routine workflows autonomously

Autonomous

AI operates independently

Risk: High - full independence with minimal oversight

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

Slider markers are interactive buttonsCurrent level is visually highlightedRisk indicators use both color and text labels

Keyboard Navigation

Key	Action
`Tab`	Navigate between level markers
`Enter / Space`	Select autonomy level
`Arrow Left/Right`	Move between adjacent levels
`Escape`	Dismiss warning modal

Notes

Consider adding aria-valuemin, aria-valuemax, aria-valuenow for slider semantics
Warning modal should trap focus when open
Risk levels should be announced by screen readers
Level descriptions provide context for each option

Related Components

Slider Modal AI Context Panel AI Permission Request