# RAG Chunk Viewer

Inspecting how a document was chunked when indexing it in the vector database.

- id: `rag-chunk-viewer`
- Page: https://agentic-ui-kit.com/components/rag-chunk-viewer
- Live preview: https://agentic-ui-kit.com/live/component/rag-chunk-viewer

## Install

```bash
agentic-ui add rag-chunk-viewer
npx shadcn@4.17.0 add @agentic-ui/rag-chunk-viewer
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** chunk-list, overlap-highlight, chunk-metadata, copy-chunk, keyboard-list-navigation, empty-state, error-state
- **Intents:** explore-detail, audit-trail
- **Suits domains:** ai-workspace, knowledge, devtools, saas
- **Interaction:** list-navigation, overlap-toggle, copy-chunk, keyboard-navigation
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** inspecting how a document was chunked when indexing it in the vector database, verifying that the configured overlap covers sentences that cross boundaries, auditing the metadata (source, range, tokens) of the chunks returned by a query
- **Avoid when:** editing the chunk text (it is a read-only viewer), visualizing embeddings or the similarity graph between chunks
- **Preserve when adapting:** overlap-highlight-model, chunk-provenance-metadata, keyboard-interaction-model
- **Replace when adapting:** domain-copy, metadata-fields, chunk-source-fixture
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, scroll-area
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives