AI Source Citation
Carte de reference de source compacte pour les reponses IA avec un titre, une etiquette d'origine et un extrait optionnel. Installez AI Source Citation depuis le registre VLLNT UI avec la CLI shadcn.
Quand utiliser ceci dans une application IA
Use AI Source Citation to attribute RAG or grounded answers to their sources. Compact reference cards let users verify where an AI response came from — essential for trustworthy retrieval-augmented apps.
Parcourir tous les composants pour agents IACarte de reference de source compacte pour les reponses IA avec un titre, une etiquette d'origine et un extrait optionnel. Fait partie de la famille ai dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez AI Source Citation a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-source-citation.jsonSource
import { ExternalLink, Quote } from "lucide-react";
import { cn } from "../../lib/utils";
export type AISourceCitationProps = React.ComponentPropsWithoutRef<"a"> & {
/** Optional short excerpt from the cited source. */
snippet?: string;
/** Source label such as domain, document, or collection. */
source: string;
/** Primary citation title. */
title: string;
};
const AISourceCitation = ({
className,
href,
ref,
snippet,
source,
target = "_blank",
title,
...props
}: AISourceCitationProps & { ref?: React.Ref<HTMLAnchorElement> }) => {
return (
<a
className={cn(
"group inline-flex max-w-full flex-col gap-2 rounded-xl border border-border/70 bg-background px-3 py-2 text-left shadow-sm transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className,
)}
href={href}
ref={ref}
rel={target === "_blank" ? "noreferrer" : undefined}
target={target}
{...props}
>
<div className="flex items-start gap-2">
<Quote className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
<div className="min-w-0 flex-1">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<p className="truncate text-sm font-medium text-foreground">
{title}
</p>
<p className="text-xs text-muted-foreground">{source}</p>
</div>
<ExternalLink className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
</div>
</div>
</div>
{snippet ? (
<p className="line-clamp-3 text-sm leading-6 text-muted-foreground">
{snippet}
</p>
) : null}
</a>
);
};
AISourceCitation.displayName = "AISourceCitation";
export { AISourceCitation };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.