Tools & reasoningSourceCard

Source Card

Citation card with title, hostname, snippet, and a safe external link.

SourceCard ships with a full API table, a copyable example, and accessibility notes.

tsx

React documentation

https://react.dev

The library for web and native user interfaces.

Installation

Install the package once, then import SourceCard from its direct entry point or from the root.

bash

pnpm add @agent-ui/react

tsx

import { SourceCard } from "@agent-ui/react/source-card";

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.

tsx

1import { SourceCard } from "@agent-ui/react";
2 
3<SourceCard
4  title="React documentation"
5  url="https://react.dev"
6  snippet="The library for web and native user interfaces."
7/>

API reference

Every prop SourceCard accepts, its type, default, and behaviour.

API reference for this component
Name	Type	Default	Description
title	string	—	Source title.
url	string	—	Destination; opens in a new tab with rel safety.
snippet	string	—	Optional excerpt.
className	string	—	Merged onto the anchor.

Use it with the rest of the library

SourceCard composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

7 lines · copy-ready