Cited Answer

AI chats 2

About

An AI-generated answer block where citation numbers and source cards highlight each other on hover or focus, so readers can jump between a claim and its supporting source at a glance.

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

Code

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

Usage.tsx

"use client";

import CitedAnswer from "@/components/ui/cited-answer";

const SOURCES = [
  {
    domain: "omantourism.gov.om",
    title: "Wadi Shab — walking routes and safety notes",
  },
  {
    domain: "lonelyplanet.com",
    title: "The best time to visit Oman: a month-by-month guide",
  },
  { domain: "met.gov.om", title: "Muscat climate normals, 1991–2020" },
  { domain: "reddit.com", title: "Hiked Wadi Shab in November — tips?" },
];

const ANSWER = [
  {
    text: "November to March is the most comfortable window for Wadi Shab, with daytime highs in the high twenties.",
    cites: [1, 2],
  },
  {
    text: "The walk to the pools takes about 45 minutes each way and involves a short boat crossing at the trailhead.",
    cites: [0],
  },
  {
    text: "Go early: the car park fills by mid-morning on weekends, and the last stretch to the cave needs swimming.",
    cites: [0, 3],
  },
  {
    text: "Summer temperatures regularly pass 40°C, so hiking then is best avoided.",
    cites: [2],
  },
];

export default function CitedAnswerDemo() {
  return (
    <div className="flex min-h-full w-full items-center justify-center p-8 bg-[#fcfcf9]">
      <CitedAnswer
        question="When is the best time to hike Wadi Shab?"
        sources={SOURCES}
        answer={ANSWER}
        theme="paper"
      />
    </div>
  );
}