AI Sources

AI chats 4

About

A collapsible citations panel that lists AI response sources with favicons, titles, hostnames, and snippets, used for RAG or search-result attribution.

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

Code

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

Usage.tsx

"use client";

import {
  AiSources,
  AiSourcesTrigger,
  AiSourcesContent,
} from "@/components/ui/sources";

const sources = [
  {
    url: "https://react.dev/learn",
    title: "React Documentation",
    snippet: "Learn React with interactive tutorials and guides.",
  },
  {
    url: "https://nextjs.org/docs",
    title: "Next.js Documentation",
  },
];

export default function SourcesDemo() {
  return (
    <div className="w-full max-w-md">
      <AiSources sources={sources}>
        <AiSourcesTrigger>Referenced Sources</AiSourcesTrigger>
        <AiSourcesContent />
      </AiSources>
    </div>
  );
}