Overview
AIContextTreePicker displays a hierarchical list of AI context sources with checkboxes for selecting which contexts to include in AI requests. Shows token estimates, supports required nodes that cannot be deselected, and includes preview functionality.
Key Features
- Hierarchical display grouped by scope (System, Program, Project)
- Select all/none per group with partial selection support
- Token estimates per node and total
- Preview dialog for viewing context content
- Required nodes that cannot be deselected
Examples
Full Picker
The complete tree picker with groups, checkboxes, and token estimates.
System
Platform-wide context that applies to all requests
Core instructions for all AI interactions
Program
Program-level context for this testing program
Context for mobile app testing program
Context for handling bug reports
Context for feature request handling
Project
Project-specific context
Testing plan for Q4 release
First phase focusing on core functionality
Launcher Pattern
Button that opens the picker in a sheet for space-constrained contexts.
Click the button to open the context selection sheet.
Currently selected:
- Platform Guidelines (~150 tokens)
- Mobile App Beta (~450 tokens)
Props Reference
AIContextTreePicker
| Prop | Type | Default | Description |
|---|---|---|---|
groups | ContextPickerGroup[] | required | Array of context groups, each with a label and array of nodes |
selectedNodeIds | string[] | required | Array of currently selected node IDs |
onSelectionChange | (nodeIds: string[]) => void | required | Callback when selection changes |
requiredNodeIds | string[] | - | IDs of nodes that cannot be deselected |
maxTokens | number | - | Maximum token budget (shows warning if exceeded) |
disabled | boolean | false | Disable all interaction |
isLoading | boolean | false | Show loading state |
showTokenEstimates | boolean | true | Show token estimates for each node |
compact | boolean | false | Use compact mode for smaller spaces |
AIContextTreePickerLauncher
| Prop | Type | Default | Description |
|---|---|---|---|
groups | ContextPickerGroup[] | required | Array of context groups, each with a label and array of nodes |
selectedNodeIds | string[] | required | Array of currently selected node IDs |
onSelectionChange | (nodeIds: string[]) => void | required | Callback when selection changes |
variant | 'default' | 'outline' | 'ghost' | 'outline' | Button variant for launcher |
size | 'default' | 'sm' | 'lg' | 'default' | Button size for launcher |
Usage
import { AIContextTreePicker, AIContextTreePickerLauncher } from '@/ui/components/ai-context-tree-picker';
import type { ContextPickerGroup } from '@/ui/components/ai-context-tree-picker';
// Define context groups
const groups: ContextPickerGroup[] = [
{
label: 'System',
nodes: [
{
id: 'system-1',
entityType: 'SYSTEM',
entityId: 'system',
name: 'Platform Guidelines',
content: '## Guidelines\n\nBe helpful and concise.',
parsedContent: null,
attachmentCount: 0,
tokenEstimate: 150,
isRequired: true,
updatedAt: new Date(),
},
],
},
{
label: 'Program',
nodes: [
{
id: 'program-1',
entityType: 'PROGRAM',
entityId: 'prog-123',
name: 'Mobile App Beta',
description: 'Context for mobile app testing',
content: '## Mobile App\n\nFocus on usability.',
parsedContent: null,
attachmentCount: 2,
tokenEstimate: 450,
updatedAt: new Date(),
},
],
},
];
// Basic picker usage
const [selectedIds, setSelectedIds] = useState(['system-1']);
<AIContextTreePicker
groups={groups}
selectedNodeIds={selectedIds}
onSelectionChange={setSelectedIds}
requiredNodeIds={['system-1']}
maxTokens={8000}
/>
// Launcher pattern (button + sheet)
<AIContextTreePickerLauncher
groups={groups}
selectedNodeIds={selectedIds}
onSelectionChange={setSelectedIds}
requiredNodeIds={['system-1']}
maxTokens={8000}
/>