CentercodeDitto
DittoPorygonAPI

AIContextTreePicker

Hierarchical picker for selecting AI context sources with token estimates

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 Example

Tree-based context picker with token estimates and required nodes

Selected: 2 / 6
~600 tokens / 2,000 max

System

(1)

Platform-wide context that applies to all requests

Platform Guidelines

Core instructions for all AI interactions

~150

Program

(3)

Program-level context for this testing program

Mobile App Beta2

Context for mobile app testing program

~450
Bug Reports1

Context for handling bug reports

~320
Feature Requests

Context for feature request handling

~180

Project

(2)

Project-specific context

Test Plan Q43

Testing plan for Q4 release

~680
Phase 1: Core Features

First phase focusing on core functionality

~120
Selected IDs: system-1, program-1

Launcher Example

Compact launcher button that opens picker in a dialog

Click the button to open the context picker in a dialog. Selected contexts are saved when you submit.

Currently selected:

  • Platform Guidelines (~150 tokens)
  • Mobile App Beta (~450 tokens)

Props Reference

AIContextTreePicker

PropTypeDefaultDescription
groupsContextPickerGroup[]requiredArray of context groups, each with a label and array of nodes
selectedNodeIdsstring[]requiredArray of currently selected node IDs
onSelectionChange(nodeIds: string[]) => voidrequiredCallback when selection changes
requiredNodeIdsstring[]-IDs of nodes that cannot be deselected
maxTokensnumber-Maximum token budget (shows warning if exceeded)
disabledbooleanfalseDisable all interaction
isLoadingbooleanfalseShow loading state
showTokenEstimatesbooleantrueShow token estimates for each node
compactbooleanfalseUse compact mode for smaller spaces

AIContextTreePickerLauncher

PropTypeDefaultDescription
groupsContextPickerGroup[]requiredArray of context groups, each with a label and array of nodes
selectedNodeIdsstring[]requiredArray of currently selected node IDs
onSelectionChange(nodeIds: string[]) => voidrequiredCallback 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}
/>