Agentic

Inline Citation

A source in the sentence it supports: the site's favicon and name, opening the page. On hover or focus it previews the title and what the page says.

idle

Usage

import { InlineCitation } from "@mizen-labs/ui";

With the AI SDK

Each source-url part is a citation. In your own text, render a chip where the part appears; Streaming Text does this for [n] markers and { source } parts. title is optional; the chip falls back to the domain.

import { useChat } from "@ai-sdk/react";
import { InlineCitation, type InlineCitationSource, Text } from "@mizen-labs/ui";

// Render text parts as they come, and each source-url part as a chip where
// it appears in the reply.
export function CitedReply() {
	const { messages } = useChat();
	const reply = messages.findLast((message) => message.role === "assistant");
	return (
		<Text>
			{reply?.parts.map((part, index) => {
				if (part.type === "text") return part.text;
				if (part.type === "source-url") {
					const source: InlineCitationSource = { href: part.url, title: part.title };
					return <InlineCitation key={index} sources={[source]} />;
				}
				return null;
			})}
		</Text>
	);
}

With TanStack AI

TanStack AI has no source part. Have the model cite with [n] markers and pass the sources to Streaming Text, which turns each marker into a chip, or place chips yourself from your tool's results.

import { InlineCitation } from "@mizen-labs/ui";

export function Claim({ text, url, title }: { text: string; title: string; url: string }) {
	return (
		<>
			{text}
			<InlineCitation sources={[{ href: url, title }]} />
		</>
	);
}

Examples

Document

A file without a link shows its title, with nothing to open.

Recommendations

Guidance	Practice
Do	Put the chip right after the claim it supports. Give sources a title and a one-line description, so the preview says what the page backs up.

Usage boundaries

Guidance	Boundary
Scope	The application decides what each claim cites. Inline Citation shows the source; it fetches only each site's favicon.
Scope	Streaming Text places citations for you. Use Inline Citation in your own text, such as Markdown or a summary.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`sources`	`readonly { href?; title?; description?; icon? }[]`	`—`	The sources behind this point. One source is a link with a preview on hover or focus; several show as one chip, such as web.dev +2, that opens a list. A document without href shows its title.