AI Answer Sources

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

Installation

$ pnpm dlx 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.

Props10

Prop	Type	Default
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	number1 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.

querystring
The question typed into the search box.
Default"What is the fastest way to make a launch video?"
sourcesAnswerSource[]
Source cards: site, title, optional snippet and color.
DefaultDEFAULT_SOURCES
answerAnswerBlock[]
Answer blocks: paragraphs, headings and bullet lists with [n] citations.
DefaultDEFAULT_ANSWER
relatedstring[]
Follow-up questions shown under the answer.
DefaultDEFAULT_RELATED
brandstring
Product name shown in the app header.
Default"sift"
accentstring
Accent color for citations and highlights.
Default"#20808D"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"light" | "dark"
Light or dark interface.
Default"light"
groundGshPresetId
Gradient shader preset for the background.
groundParamsPartial<GradientParams>
Overrides for the shader preset parameters.