Eidetic

Sandbox Configurator

AI
Agentic
Security
New

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

Security: C

Isolation Level

Execution Timeout

Timeout (seconds)
5s1m5m30m1h

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

api.openai.com
api.anthropic.com
None configured
Max Connections

APIs & Environment

/api/v1/chat
/api/v1/embeddings
API_KEY
NODE_ENV

Resource Usage

CPU42%
Memory67%
Network15%

Execution Log

10:00:01Sandbox environment initializing...
10:00:02Container started: sandbox-a7b3c
10:00:03Mounting filesystem: /workspace (read/write)
10:00:04Network access limited to 2 domains
10:00:05Agent process started (PID 1842)
10:00:12API call: POST /api/v1/chat (200 OK)
10:00:18Blocked: outbound connection to evil.com denied
10:00:25Task completed. Execution time: 24s

Restrictive Preset

Maximum security with all capabilities disabled and network blocked

Sandbox Configurator

Configure isolated execution environments for AI agents

Security: C

Isolation Level

Execution Timeout

Timeout (seconds)
5s1m5m30m1h

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

api.openai.com
api.anthropic.com
None configured
Max Connections

APIs & Environment

/api/v1/chat
/api/v1/embeddings
API_KEY
NODE_ENV

Permissive Preset

Full access for trusted environments with all capabilities enabled

Sandbox Configurator

Configure isolated execution environments for AI agents

Security: C

Isolation Level

Execution Timeout

Timeout (seconds)
5s1m5m30m1h

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

api.openai.com
api.anthropic.com
None configured
Max Connections

APIs & Environment

/api/v1/chat
/api/v1/embeddings
API_KEY
NODE_ENV

Resource Usage

CPU85%
Memory92%
Network71%

Execution Log

10:00:01Running in permissive mode - all capabilities enabled
10:00:02Full filesystem access granted

Read-Only Mode

View configuration without editing, useful for audit views

Sandbox Configurator

Configure isolated execution environments for AI agents

Security: C

Isolation Level

Execution Timeout

Timeout (seconds)
5s1m5m30m1h

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

api.openai.com
api.anthropic.com
None configured
Max Connections

APIs & Environment

/api/v1/chat
/api/v1/embeddings
API_KEY
NODE_ENV

Resource Usage

CPU12%
Memory34%
Network5%

Execution Log

10:00:01Sandbox environment initializing...
10:00:02Container started: sandbox-a7b3c
10:00:03Mounting filesystem: /workspace (read/write)

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

PropTypeDefaultDescription
configPartial<SandboxConfig>Initial sandbox configuration to populate the form
logEntriesExecutionLogEntry[][]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) => voidCalled when any configuration value changes
onSave(config: SandboxConfig) => voidCalled when save button is clicked
onLoad() => voidCalled when load button is clicked
readOnlybooleanfalseDisable all editing controls
showExecutionLogbooleantrueShow the execution log panel
showResourceUsagebooleantrueShow the resource usage meters
classNamestringAdditional CSS classes for the root element

SandboxConfig Type

PropTypeDefaultDescription
isolationLevel'browser' | 'container' | 'microvm'Isolation technology for the sandbox
filesystemPermissionsFilesystemPermission[]Per-directory read/write/delete permissions
networkConfigNetworkConfigAllowed/blocked domains and connection limits
allowedApisstring[]List of allowed API endpoints
exposedEnvVarsstring[]Environment variables exposed to the agent
capabilitiesCapabilityPermissionsFeature permission toggles
timeoutSecondsnumberExecution timeout in seconds

ExecutionLogEntry Type

PropTypeDefaultDescription
timestamp*DateWhen the log entry occurred
level*'info' | 'warn' | 'error' | 'success'Severity level with color coding
message*stringLog 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 components

This 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 labels

Keyboard Navigation

KeyAction
TabNavigate between all interactive controls
SpaceToggle switches and activate buttons
EnterSubmit list editor inputs and activate buttons
Arrow keysAdjust 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