Source

Citation pill for RAG answers. Hover the chip to preview the title + description in a hover card.

Examples

Inline citation chip

Hover the chip to preview the source. Click to open in a new tab.

Vector databases use approximate nearest neighbor search to scale to millions of embeddings 1 while keeping query latency under ~10ms.

<pk-source href="https://en.wikipedia.org/wiki/Nearest_neighbor_search">
  <pk-source-trigger label="1" />
  <pk-source-content
    title="Nearest neighbor search — Wikipedia"
    description="An approach to optimization in metric spaces..."
  />
</pk-source>

With favicon and custom label

Set [showFavicon]=true to fetch the site's favicon next to the label.

angular.dev

spartan.ng

<pk-source href="https://angular.dev/guide/signals">
  <pk-source-trigger [showFavicon]="true" label="angular.dev" />
  <pk-source-content
    title="Signals · Angular"
    description="Reactive primitives for tracking state..."
  />
</pk-source>

Installation

Add the source component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:source

It is built on spartan/ui, so add these helm components too: hover-card.

ng g @spartan-ng/cli:ui hover-card

Component API

PkSource

Prop	Type	Default	Description
href	`string`	—	Required URL. The hostname is auto-extracted as the default label.

PkSourceTrigger

Prop	Type	Default	Description
label	`string \| number`	—	Override the default (domain) label.
showFavicon	`boolean`	false	Show the site favicon next to the label.
class	`string`	—	Extra classes for the chip.

PkSourceContent

Prop	Type	Default	Description
title	`string`	—	Card title (required).
description	`string`	—	Card description (required).
class	`string`	—	Extra classes for the hover card.