Morpha UI

Sources

The collapsible citation list under a RAG answer.

Overview

Sources lists the citations behind a retrieval-augmented answer. It's collapsed by default ("Used N sources") and expands to a column of external links, riding primary so it reads as a set of references rather than body copy. Pair it with InlineCitation for inline markers.

$ npx morpha-ui add sources

Usage with the AI SDK

const sources = message.parts.filter((p) => p.type === "source-url");

<Sources>
  <SourcesTrigger count={sources.length} />
  <SourcesContent>
    {sources.map((s) => (
      <Source key={s.sourceId} href={s.url} title={s.title ?? s.url} />
    ))}
  </SourcesContent>
</Sources>;

Installation

Distributed via the Morpha CLI: npx morpha-ui add sources. Ported from AI Elements onto the kit's Collapsible.

npx morpha-ui add sources

API Reference

Prop

Type

On this page