Citations

AI chats 1

About

Show source citations and references for AI responses.

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

Code

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

Usage.tsx

import AICitations from "@/components/ui/citations";

export default function DemoOne() {
  return (
    <div>
      <AICitations
        citations={[
          {
            id: "citation-1",
            number: 1,
            text: "React component patterns",
            sources: [
              {
                id: "source-1",
                title: "React Component Patterns - Best Practices",
                url: "https://react.dev/learn/thinking-in-react",
                domain: "react.dev",
                snippet:
                  "Components let you split the UI into independent, reusable pieces.",
                author: "React Team",
                publishedAt: new Date("2024-01-15"),
                type: "web",
              },
            ],
          },

          {
            id: "citation-2",
            number: 2,
            text: "Next.js routing fundamentals",
            sources: [
              {
                id: "source-2",
                title: "Routing Fundamentals",
                url: "https://nextjs.org/docs/app/building-your-application/routing",
                domain: "nextjs.org",
                snippet:
                  "The App Router introduces a new way to build full-stack applications.",
                author: "Vercel",
                publishedAt: new Date("2024-02-10"),
                type: "web",
              },
            ],
          },
        ]}
        onSourceClick={(sourceId) => {
          /* open citation source */
        }}
      />
    </div>
  );
}