Sandbox Configurator
Configure isolated execution environments for AI agents. Define resource access, capability permissions, network policies, and isolation levels with real-time security scoring.
Preview
Fully interactive sandbox configurator with Standard preset
Sandbox Configurator
Configure isolated execution environments for AI agents
Isolation Level
Execution Timeout
Filesystem Permissions
Capability Permissions
Code Execution
Run arbitrary code
Web Browsing
Access external websites
File Creation
Create new files
Email Sending
Send outbound emails
Database Access
Query databases
Network Configuration
APIs & Environment
Resource Usage
Execution Log
Restrictive Preset
Maximum security with all capabilities disabled and network blocked
Sandbox Configurator
Configure isolated execution environments for AI agents
Isolation Level
Execution Timeout
Filesystem Permissions
Capability Permissions
Code Execution
Run arbitrary code
Web Browsing
Access external websites
File Creation
Create new files
Email Sending
Send outbound emails
Database Access
Query databases
Network Configuration
APIs & Environment
Permissive Preset
Full access for trusted environments with all capabilities enabled
Sandbox Configurator
Configure isolated execution environments for AI agents
Isolation Level
Execution Timeout
Filesystem Permissions
Capability Permissions
Code Execution
Run arbitrary code
Web Browsing
Access external websites
File Creation
Create new files
Email Sending
Send outbound emails
Database Access
Query databases
Network Configuration
APIs & Environment
Resource Usage
Execution Log
Read-Only Mode
View configuration without editing, useful for audit views
Sandbox Configurator
Configure isolated execution environments for AI agents
Isolation Level
Execution Timeout
Filesystem Permissions
Capability Permissions
Code Execution
Run arbitrary code
Web Browsing
Access external websites
File Creation
Create new files
Email Sending
Send outbound emails
Database Access
Query databases
Network Configuration
APIs & Environment
Resource Usage
Execution Log
Isolation Levels
Three isolation options from lightweight to hardware-level
Browser Sandbox
Lightweight isolation using browser APIs. Suitable for low-risk tasks with limited resource needs.
Container (Docker)
OS-level isolation with namespace separation. Good balance of security and performance.
Micro VM (Firecracker)
Hardware-level isolation with dedicated kernel. Maximum security for untrusted code execution.
Props
SandboxConfigurator component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
config | Partial<SandboxConfig> | — | Initial sandbox configuration to populate the form |
logEntries | ExecutionLogEntry[] | [] | Array of execution log entries with timestamps and severity levels |
resourceUsage | { cpu: number; memory: number; network: number } | { cpu: 0, memory: 0, network: 0 } | Current resource usage percentages (0-100) |
preset | 'restrictive' | 'standard' | 'permissive' | 'custom' | 'standard' | Active configuration preset |
onConfigChange | (config: SandboxConfig) => void | — | Called when any configuration value changes |
onSave | (config: SandboxConfig) => void | — | Called when save button is clicked |
onLoad | () => void | — | Called when load button is clicked |
readOnly | boolean | false | Disable all editing controls |
showExecutionLog | boolean | true | Show the execution log panel |
showResourceUsage | boolean | true | Show the resource usage meters |
className | string | — | Additional CSS classes for the root element |
SandboxConfig Type
| Prop | Type | Default | Description |
|---|---|---|---|
isolationLevel | 'browser' | 'container' | 'microvm' | — | Isolation technology for the sandbox |
filesystemPermissions | FilesystemPermission[] | — | Per-directory read/write/delete permissions |
networkConfig | NetworkConfig | — | Allowed/blocked domains and connection limits |
allowedApis | string[] | — | List of allowed API endpoints |
exposedEnvVars | string[] | — | Environment variables exposed to the agent |
capabilities | CapabilityPermissions | — | Feature permission toggles |
timeoutSeconds | number | — | Execution timeout in seconds |
ExecutionLogEntry Type
| Prop | Type | Default | Description |
|---|---|---|---|
timestamp* | Date | — | When the log entry occurred |
level* | 'info' | 'warn' | 'error' | 'success' | — | Severity level with color coding |
message* | string | — | Log message content |
Usage
Import and implementation example
import { SandboxConfigurator } from '@/blocks/agentic/sandbox-configurator'
export default function AgentSetup() { const handleConfigChange = (config) => { console.log('Config updated:', config) // Persist to backend or validate }
const handleSave = (config) => { fetch('/api/sandbox/save', { method: 'POST', body: JSON.stringify(config), }) }
return ( <SandboxConfigurator preset="standard" logEntries={[ { timestamp: new Date(), level: 'info', message: 'Sandbox ready' }, ]} resourceUsage={{ cpu: 25, memory: 40, network: 10 }} onConfigChange={handleConfigChange} onSave={handleSave} onLoad={() => openLoadDialog()} /> )}Built With
4 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Preset configurations: Restrictive, Standard, and Permissive presets with one-click application
- Security grading: Real-time A-F security score based on current configuration choices
- Isolation levels: Browser sandbox, Docker container, and Firecracker micro VM options
- Filesystem permissions: Per-directory read/write/delete toggles with add/remove support
- Network policies: Allowed and blocked domain lists with max connection limits
- Capability matrix: Toggle code execution, web browsing, file creation, email, and database access
- API access control: Whitelist specific API endpoints the agent can call
- Environment variables: Control which env vars are exposed to the agent process
- Execution timeout: Configurable timeout with slider and numeric input, plus warnings for long timeouts
- Resource monitoring: CPU, memory, and network usage meters with visual progress bars
- Execution log: Real-time log panel with timestamps, severity levels, and color-coded entries
- Save/Load configs: Persist and restore configurations via callback handlers
- Read-only mode: Disable editing for audit and review scenarios
- Dark mode: Full dark mode support across all panels and controls
Accessibility
Accessibility considerations
ARIA Attributes
All toggle switches use Radix UI Switch primitives with proper ARIA rolesIsolation level selector uses native button elements with visual active statesPreset buttons are native buttons with disabled states when read-onlyForm inputs use standard input elements with labelsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between all interactive controls |
| Space | Toggle switches and activate buttons |
| Enter | Submit list editor inputs and activate buttons |
| Arrow keys | Adjust range slider for timeout |
Notes
- Security grade is communicated through both color and letter label
- Resource usage meters show percentage numerically alongside visual bars
- Log levels use both icons and color for severity distinction
- Warning messages use AlertTriangle icon with descriptive text
- All interactive elements have visible focus indicators
- Consider adding aria-live regions for dynamic log entries in production