Docs / Components / AI Citations & Sources

AI Citations & Sources

An AI agent citations component featuring site favicons, trimmed link previews, interactive inline badges with hover popovers, and an animated Sources section.

To optimize high-throughput data fetching in modern React applications, leveraging React Server Components allows direct database streaming directly at the edge. When managing parallel network calls safely, utilizing standard concurrency primitives prevents single-point request failures.

For subscription checkout flows, initializing state securely on the server ensures strict idempotency token generation and compliance.

Sources

Next.js Documentation

Server Components & Data Fetching Patterns in Next.js App Router

React Server Components allow developers to build applications that span the server and client, combining rich interactivity with efficient server rendering.

nextjs.org/.../server-components

MDN Web Docs

Promise.allSettled() - JavaScript reference on MDN Web Docs

Returns a promise that fulfills after all of the given promises have either fulfilled or rejected, with an array of objects describing the outcome of each.

developer.mozilla.org/.../allSettled

Stripe Docs

Create a Payment Intent - Stripe API Reference Guide

Creates a PaymentIntent object to track and manage customer transactions across multiple payment methods seamlessly.

stripe.com/.../create

Dependencies

Install the following dependencies to use this component:

1npm install framer-motion clsx tailwind-merge lucide-react

Installation

Run the following command in your terminal to add the component to your project:

1npx rankflow-ui@latest add ai-citation

Props Reference

Prop	Type	Default	Description
sources	CitationItem[]	[]	Array of citation source objects (url, title, snippet, siteName, favicon).
title	string	'Sources'	Custom section header title for the citations list.
variant	'grid' \| 'list' \| 'pills' \| 'popover'	'grid'	Display variant for citations: 'grid', 'list', 'pills', or 'popover' (enables hover cards on inline numbers).
activeId	string \| number \| null	undefined	Currently active or highlighted citation ID.
onSourceHover	(id: string \| number \| null) => void	undefined	Callback triggered when hovering over a citation.
onSourceClick	(source: CitationItem) => void	undefined	Callback triggered when clicking a citation item.
maxUrlLength	number	32	Maximum length before trimming the middle/end of long URLs.
className	string	''	Additional container CSS classes.

PreviousAgent Thinking

NextImage Generation