# Document Q&A
Source: https://ui.spencerwueste.com/docs/blocks/document-qa/
Markdown: https://ui.spencerwueste.com/llm/blocks/document-qa.md

> File drop, page thumbnails, and a chat whose citations jump to the cited page.

> Live preview: https://ui.spencerwueste.com/preview/document-qa

## What's inside

- **File Drop** and **File List** manage indexed documents with upload progress.
- **Page thumbnails** highlight the cited page and scroll to it when a citation is clicked.
- **Citation** chips inside assistant messages link to pages instead of URLs.

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/document-qa.json
```

Manual install dependencies: `@heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/document-qa.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import DocumentQA from "@/components/blocks/document-qa/document-qa";

export default function Page() {
  return (
    <div className="h-dvh p-4">
      <DocumentQA />
    </div>
  );
}
```

Give the parent a bounded height. The block fills it and scrolls internally.

## Going live

Index uploads into your vector store and have the model return page-numbered citations. Map each page to a `Source` whose url is `#page-n` and the click handler will jump the thumbnail column.