AI Answer with Citations

AI chats

About

An answer where every claim carries a numbered source. Hover, focus or tap a number to see where the line came from; the sources are listed underneath. Built on Radix Tooltip. From the Midnight Lite template (MIT).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Answer with Citations to your project and fits it to your theme.

Code

How AI Answer with Citations is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import type { CSSProperties } from "react"

import { CitedAnswer } from "@/components/ui/cited-answer"

const settings = {
  background: "#f6f5f1",
  card: "#ffffff",
  text: "#16171b",
  muted: "#63666f",
  primary: "#16171b",
  primaryText: "#ffffff",
}

// a daylight palette as theme tokens; the component itself only reads the tokens
function daylight(s: typeof settings) {
  const t: Record<string, string> = {
    background: s.background,
    foreground: s.text,
    card: s.card,
    primary: s.primary,
    "primary-foreground": s.primaryText,
    "muted-foreground": s.muted,
    ring: s.primary,
  }
  return Object.fromEntries(Object.entries(t).flatMap(([k, v]) => [[`--${k}`, v], [`--color-${k}`, v]])) as CSSProperties
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div
      className="flex min-h-svh w-full items-center justify-center px-5 py-12"
      style={{ ...daylight(s), fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif", background: s.background, color: s.text } as CSSProperties}
    >
      <div
        className="w-full max-w-[520px] rounded-[28px] p-8 md:p-10"
        style={{ background: s.card, boxShadow: "0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.05), 0 12px 28px -16px rgb(0 0 0 / 0.18)" }}
      >
        <p className="text-[14px] font-medium" style={{ color: s.muted }}>
          Answers
        </p>
        <h3 className="mt-3 text-[26px] leading-[32px] font-semibold tracking-[-0.025em] text-balance">
          <span>Answers you can check.</span> <span style={{ color: s.muted }}>Tap a number to see the source.</span>
        </h3>
        <CitedAnswer
          className="mt-10"
          parts={[
            { text: "Churn fell to 2.1% in October", cite: 1 },
            { text: ", mostly among teams on the annual plan", cite: 2 },
            { text: ". Onboarding calls now take nine minutes less", cite: 3 },
            { text: "." },
          ]}
          sources={[
            { n: 1, title: "Retention report · October", where: "Analytics" },
            { n: 2, title: "Plan mix by cohort", where: "Billing" },
            { n: 3, title: "Onboarding call log", where: "CRM" },
          ]}
        />
      </div>
    </div>
  )
}