Agentic

Sources

The pages and documents an agent used for a reply, folded into one line with their favicons and a count. It opens to a link for each.

idle

Usage

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

With the AI SDK

Collect the reply's source-url and source-document parts. A title is optional on source-url; Sources falls back to the domain.

import { useChat } from "@ai-sdk/react";
import { Sources, type SourcesItem } from "@mizen-labs/ui";

function sourcesOf(message: { parts: { type: string }[] }): SourcesItem[] {
	return message.parts.flatMap((part) => {
		if (part.type === "source-url") {
			return [{ href: part.url, title: part.title }];
		}
		if (part.type === "source-document") {
			return [{ title: part.title }];
		}
		return [];
	});
}

export function ReplySources() {
	const { messages } = useChat();
	const reply = messages.findLast((message) => message.role === "assistant");
	// Sources drops repeats, so a page cited twice shows once.
	return reply ? <Sources sources={sourcesOf(reply)} /> : null;
}

With TanStack AI

TanStack AI has no source part. Return sources from your tool or server as data, then pass them to Sources.

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

// For example, from a search tool's result.
export function SearchSources({ results }: { results: { title: string; url: string }[] }) {
	return (
		<Sources
			sources={results.map((result) => ({ href: result.url, title: result.title }))}
		/>
	);
}

Examples

Documents

Files without a link show as text beside the web pages.

Recommendations

Guidance	Practice
Do	Pass every source part as it arrives; Sources drops repeats. Give documents a title so they read as more than a domain.

Usage boundaries

Guidance	Boundary
Scope	The application finds and stores sources. Sources shows them; it fetches only each site's favicon.
Scope	Show sources the agent used for this reply, not every search result it saw.

API reference

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

Prop	Type	Default	Description
`sources`	`readonly { href?: string; title?: string; icon?: string }[]`	`—`	The pages and documents the agent used. A link has href; a document has only a title. Repeats show once, and nothing renders without sources.
`defaultOpen`	`boolean`	`false`	Opens the list from the start.