# AI Answer Sources
URL: https://remocn.dev/docs/product-scenes/ai-answer-sources

An AI answer streams in with inline citations, then a source panel opens from a cited number

- Install: `npx shadcn@latest add @remocn/ai-answer-sources`
- Vibe: clean
- Natural length: 395f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ai-answer-sources
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AiAnswerSources } from "@/components/remocn/ai-answer-sources";

const AiAnswerSourcesScene = () => (
  <AiAnswerSources
    brand="atlas"
    query="How do I cut my cloud bill?"
    theme="dark"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="AiAnswerSources"
    component={AiAnswerSourcesScene}
    durationInFrames={419}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A question types into a search box and submits, a short thinking sequence runs, then the answer streams in with numbered citations and source chips. A cursor hovers a citation and clicks it, and a panel of the cited sources slides open. Pass `query`, `answer`, `sources`, `related`, and `brand` to make it yours; it ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `query` | `string` | `"What is the fastest way to make a launch video?"` | The question typed into the search box. |
| `sources` | `AnswerSource[]` | `DEFAULT_SOURCES` | Source cards: site, title, optional snippet and color. |
| `answer` | `AnswerBlock[]` | `DEFAULT_ANSWER` | Answer blocks: paragraphs, headings and bullet lists with [n] citations. |
| `related` | `string[]` | `DEFAULT_RELATED` | Follow-up questions shown under the answer. |
| `brand` | `string` | `"sift"` | Product name shown in the app header. |
| `accent` | `string` | `"#20808D"` | Accent color for citations and highlights. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark interface. |
| `ground` | `GshPresetId` | — | Gradient shader preset for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader preset parameters. |

## Use when
- A product beat showing an AI search or research assistant answering a question with cited sources.
- A launch video for an answer engine where trust in sourcing is the selling point.
- A feature demo of citations: the viewer sees a number hovered and its source cards open.

## Don't use when
- The AI should run tools and show a step-by-step plan rather than cite sources — use `agent-run`.
- You want a simple chat reply bubble in a messaging UI — use `chat-flow`.
- You need a prompt typing into a generator that produces an output — use `ai-prompt-flow`.