Sourced answer

Pro

An answer that shows where it came from: what was searched, the sources it read as numbered cards, and the answer with numbered markers. Point at a marker and its source lights up; choose a source and every claim that leans on it is marked.

Installs components/ui/sourced-answer.tsxDepends on lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/sourced-answer

Which exchange rate do you use when a euro invoice is paid in pounds?

Searching for “exchange rate used for cross-currency invoice matching”

When to use #

Use it for

Assistants and search that answer from documents or the web.
Support answers drawn from a help centre, where people should check the source.

Skip it when

Answers with no sources; a plain message is honest about that.
A list of search results people browse themselves; use search results.

Decisions #

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Sources before the answer: The sources appear as soon as they are found and before a word of the answer, so people can see what it is built on while it is still being written.
Markers and sources point at each other: A marker lights its source card and scrolls it into view; a chosen source marks every claim that cites it. Checking an answer should never mean counting brackets.
Never show half a marker: While the answer streams, an unfinished “[1” is held back until it closes, so the text never flashes raw brackets.

Styling

Numbers, not favicons, carry identity: Each source is a number and its site in monospace; no third-party icons are loaded, so the card looks the same offline and in any theme.

Usage

Pass plain text with markers: Write the answer with [1] or [2, 3] where a claim is supported, and pass shown while streaming; parsing and linking are done for you.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/sourced-answer

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { SourcedAnswer } from "@/components/ui/sourced-answer"

The worked example comes with Pro

The 51-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

SourcedAnswer

component

PropTypeDefaultDescription

query *string—

status *SourcedAnswerStatus—

sources *readonly AnswerSource[]—In the order the markers number them: [1] is the first.

answer *string—Plain text with markers such as [1] or [2, 3]; blank lines start paragraphs.

shownnumber—Characters of the answer written so far, while it streams; all of it when absent.

onOpenSource((source: AnswerSource) => void)—

actionsReactNode—Shown under a finished answer: copy, retry, rate.

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.