Docs / Tool calls /
CitationCard
A source citation card linking an agent claim to its evidence: title, URL, excerpt, and confidence.
Preview
Tailwind CSS v4.0 is a ground-up rewrite of the framework, redesigned for speed and simplicity. Configuration lives entirely in CSS using the new @theme directive.
export async function getSession(token: string): Promise<Session | null> { const payload = await verifyJwt(token); return payload ? db.session.findUnique({ where: { id: payload.sid } }) : null; }
Variants
Web sources
Server Components allow you to render components on the server. They can access server-only resources like databases and file systems without shipping that code to the client.
Edge Functions run on Vercel's Edge Network, geographically distributed to reduce latency. They execute in a lightweight V8 runtime, not Node.js.
Documents
All spacing values are derived from a 4px base unit. Use multiples of 4 (4, 8, 12, 16, 24, 32, 48, 64) for layout and multiples of 2 for fine-grained UI adjustments.
The cockpit is a lightweight observability layer for AI agents. It surfaces tool calls, reasoning traces, and cost in a scannable, developer-friendly UI.
Memory
User has stated a preference for dark mode interfaces and compact information density. Avoid large whitespace padding in generated UI.
This project uses Bun as the package manager. Never suggest npm or yarn. The component library is Kanshō, not shadcn.
Props
| Prop | Type | Description |
|---|---|---|
| title* | string | Primary label for the citation — document title, file path, or page name. |
| source* | string | Origin string shown in monospace below the snippet (e.g. a URL, file path, or storage key). |
| index | number | Numeric badge rendered at the start of the card header — links this card to an InlineCitation. |
| url | string | When provided, the card renders as an anchor tag that opens in a new tab. |
| snippet | string | Short excerpt shown beneath the header, clamped to 3 lines. |
| retrievedAt | string | Human-readable retrieval timestamp (e.g. "2 min ago") shown after the source. |
| kind | "web" | "doc" | "code" | "memory" | Controls the icon and kind badge. Defaults to "web". |
| className | string | Extra classes for the card element. |
* required.
Usage
import { CitationCard, InlineCitation } from "@/components/agent/citation-card";
// Inline numeric reference inside prose:
<p>
Auth uses short-lived JWTs <InlineCitation index={1} title="Session middleware" />.
</p>
// The matching card:
<CitationCard
index={1}
title="Session middleware docs"
source="internal/auth/session.md"
snippet="Sessions are stored as signed JWTs with a 15-minute TTL and rotated on each request."
kind="doc"
/>