Eidetic

AI Permission Request

AI
Governors
Trust

Request user permissions for AI actions before execution. Displays clear descriptions of what the AI wants to do, why it needs permission, and what data will be accessed. Supports scoped permissions with duration options.

Low Sensitivity

Basic permission request with minimal risk

Access your project files

Low Risk

AI needs to read your project files to analyze code patterns.

Why is this needed?

This will help provide more accurate code suggestions based on your project structure.

This session only

Medium Sensitivity with Scopes

Permission request with selectable scopes

Connect to external API

Medium Risk

AI wants to fetch data from your connected services.

Why is this needed?

Retrieve real-time data to provide up-to-date recommendations.

This session only

High Sensitivity

High-risk permission with detailed warnings

Delete old records

High Risk

AI suggests deleting records older than 2 years to optimize storage.

Why is this needed?

Free up database space and improve query performance.

One-time access

Production Change

Critical permission with rollback option

Deploy to Production

Critical

AI wants to deploy the latest changes to the production environment.

Why is this needed?

Apply bug fixes and performance improvements to live system.

One-time access

Compact Variant

Minimal display for inline use

Access your project files

AI needs to read your project files to analyze code patterns.

Props

AIPermissionRequest component API reference

PropTypeDefaultDescription
request*PermissionRequestPermission request object with all details
variant'default' | 'compact''default'Display variant
onGrant(requestId: string, duration: PermissionDuration, scopes?: string[]) => voidCallback when user grants permission
onDeny(requestId: string) => voidCallback when user denies permission
onRequestInfo(requestId: string) => voidCallback when user wants more info
classNamestringAdditional CSS classes

PermissionRequest Type

PropTypeDefaultDescription
id*stringUnique request identifier
type*PermissionTypeType of permission (data_access, memory, external_api, file_access, action, production_change, etc.)
title*stringPermission request title
description*stringWhat the AI wants to do
reason*stringWhy this permission is needed
sensitivity*'low' | 'medium' | 'high' | 'critical'Risk level of this action
scopesPermissionScope[]Optional granular permission scopes
suggestedDuration'once' | 'session' | 'always' | 'custom'Suggested permission duration
requestedAt*DateWhen the request was made
rollbackRollbackInfoRollback information for production changes
environment'staging' | 'production' | 'development'Target environment for production changes
affectedServicesstring[]Services affected by the change

Usage

Import and implementation example

import { AIPermissionRequest, type PermissionRequest } from '@/blocks/ai-transparency/ai-permission-request'
export default function AIAssistant() {
const [pendingRequest, setPendingRequest] = useState<PermissionRequest | null>(null)
const request: PermissionRequest = {
id: 'req-123',
type: 'file_access',
title: 'Read your project files',
description: 'AI needs to analyze your code to provide suggestions.',
reason: 'Better code suggestions based on your patterns.',
sensitivity: 'low',
suggestedDuration: 'session',
requestedAt: new Date(),
scopes: [
{ id: 'read', label: 'Read files', required: true },
{ id: 'analyze', label: 'Analyze patterns', required: false },
],
}
const handleGrant = (id: string, duration: PermissionDuration, scopes?: string[]) => {
console.log('Permission granted:', { id, duration, scopes })
// Save permission and proceed with action
setPendingRequest(null)
}
const handleDeny = (id: string) => {
console.log('Permission denied:', id)
setPendingRequest(null)
}
return (
<AIPermissionRequest
request={request}
onGrant={handleGrant}
onDeny={handleDeny}
/>
)
}

Built With

3 components

This block uses the following UI components from the design system:

Features

Built-in functionality

  • Multiple variants: Toast, card, modal, and inline display modes
  • Impact levels: Low, medium, high impact indicators with color coding
  • Data access disclosure: Clear list of what data will be accessed
  • Risk warnings: Display potential risks and side effects
  • Alternative suggestions: Show alternative approaches users can consider
  • Duration options: Once, session, day, or permanent permissions
  • Remember choice: Option to save permission preference
  • Explicit consent: Checkbox confirmation for high-risk actions
  • Customize option: Allow fine-grained permission customization
  • Expandable details: Show/hide detailed permission information
  • Loading states: Disabled state while processing
  • Dark mode support: Full dark mode with proper contrast

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

Dialog role for modal variantAll interactive elements use semantic buttons and checkboxesClear labeling for all form controls

Keyboard Navigation

KeyAction
TabNavigate through buttons and checkboxes
Enter / SpaceActivate buttons
EscapeClose modal (if dismissible)

Notes

  • Impact levels use both color and icons
  • Risks clearly labeled with warning icons
  • Focus trapped in modal variant
  • Consider adding aria-describedby for detailed descriptions