Chunking configPro
Strategy, chunk size and overlap with a live preview on a sample document, the chunk sizes as bars against the target and the trade-offs in words.
On this page
ProStrategy, size and overlap re-chunk a handbook page live; Apply prices re-embedding the corpus.
Installation
Usage
import { ChunkingConfig } from "@/components/ui/chatcn/pro/chunking-config"
<ChunkingConfig
sample={{ title: "refunds.md", text }}
appliedValue={saved}
onApply={rechunk}
tokenLimit={512}
/>The preview re-chunks on every slider step with the same chunkText you can run on the server, so what you see is what gets indexed. Warnings cover the three common mistakes: chunks larger than the model input, overlap above 25%, and chunks far below the target. With appliedValue and onApply it shows what changed and, given corpusTokens and pricePerMillionTokens, what re-embedding costs.
Examples
States
ProPast the model limit with heavy overlap and locked while indexing in mono.
Props
| Prop | Type | Notes |
|---|---|---|
value, defaultValue, onValueChange | { strategy, size, overlap } | Controlled or not |
sample | { title, text } | The preview document |
strategies | ChunkingStrategyOption[] | Labels and descriptions |
sizeRange | { min, max, step? } | Default 64 to 1,024 in steps of 16 |
tokenLimit | number | The embedding model input limit |
appliedValue, onApply, applyLabel, applying | The form footer | |
corpusTokens, pricePerMillionTokens, currency | Prices re-embedding | |
disabled, disabledReason | boolean, ReactNode | Read only with the reason |
Keyboard
| Key | Action |
|---|---|
| Arrow keys on a strategy | Move between strategies |
| Arrow keys, Page Up and Down, Home and End on a slider | Change size or overlap |
Accessibility
- Sliders are native range inputs, so value text, keys and right to left come from the platform.
- The chunk count and spread are announced politely as they change.
Motion
Nothing animates: the preview follows the sliders directly, one frame behind while dragging so typing and dragging stay smooth.