# Answer with Sources
Source: https://ui.spencerwueste.com/docs/blocks/answer-with-sources/
Markdown: https://ui.spencerwueste.com/llm/blocks/answer-with-sources.md

> Search-style answer with inline citations, a source grid, and follow-up questions.

> Live preview: https://ui.spencerwueste.com/preview/answer-with-sources

## What's inside

- **Prompt Input** as the search bar, with a stop button while the answer streams.
- **Citation** renders numbered chips inside the answer and source cards above it. Hovering either highlights both.
- **Suggestions** power the empty state and the follow-up questions.
- **Text Shimmer** narrates the searching, reading, and writing phases.

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/answer-with-sources.json
```

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

Registry JSON: https://ui.spencerwueste.com/r/answer-with-sources.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import AnswerWithSources from "@/components/blocks/answer-with-sources/answer-with-sources";

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

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

## Going live

The `ask` function drives three phases: fetch sources, then stream the answer. Point it at your search endpoint for the sources and your model for the text, and keep `[n]` markers in the model output so `CitedText` can link them.