AI Permission Request
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
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.
Medium Sensitivity with Scopes
Permission request with selectable scopes
Connect to external API
AI wants to fetch data from your connected services.
Why is this needed?
Retrieve real-time data to provide up-to-date recommendations.
High Sensitivity
High-risk permission with detailed warnings
Delete old records
AI suggests deleting records older than 2 years to optimize storage.
Why is this needed?
Free up database space and improve query performance.
Production Change
Critical permission with rollback option
Deploy to Production
AI wants to deploy the latest changes to the production environment.
Why is this needed?
Apply bug fixes and performance improvements to live system.
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
| Prop | Type | Default | Description |
|---|---|---|---|
request* | PermissionRequest | — | Permission request object with all details |
variant | 'default' | 'compact' | 'default' | Display variant |
onGrant | (requestId: string, duration: PermissionDuration, scopes?: string[]) => void | — | Callback when user grants permission |
onDeny | (requestId: string) => void | — | Callback when user denies permission |
onRequestInfo | (requestId: string) => void | — | Callback when user wants more info |
className | string | — | Additional CSS classes |
PermissionRequest Type
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | — | Unique request identifier |
type* | PermissionType | — | Type of permission (data_access, memory, external_api, file_access, action, production_change, etc.) |
title* | string | — | Permission request title |
description* | string | — | What the AI wants to do |
reason* | string | — | Why this permission is needed |
sensitivity* | 'low' | 'medium' | 'high' | 'critical' | — | Risk level of this action |
scopes | PermissionScope[] | — | Optional granular permission scopes |
suggestedDuration | 'once' | 'session' | 'always' | 'custom' | — | Suggested permission duration |
requestedAt* | Date | — | When the request was made |
rollback | RollbackInfo | — | Rollback information for production changes |
environment | 'staging' | 'production' | 'development' | — | Target environment for production changes |
affectedServices | string[] | — | 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 componentsThis 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 controlsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate through buttons and checkboxes |
| Enter / Space | Activate buttons |
| Escape | Close 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