Sources

import { ArrowUpRightIcon, GlobeIcon } from "@phosphor-icons/react"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Message, MessageContent } from "@/components/ui/message"
import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from "@/components/ui/trace"

const sources = [
  {
    url: "https://docs.astro.build/en/install-and-setup/",

Sources is a row that lists the links the agent used for a reply. It says how many there are, such as "Used 3 sources", and opens into a link for each one.

The list is a TraceCollapsible with a nested Trace of links. To cite a source inside a sentence, use Inline Citation.

Installation

Sources is built with the Trace component.

$ pnpm dlx shadcn@latest add @esuiss/trace

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add trace

Usage

import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from "@/components/ui/trace"

<Trace>
  <TraceCollapsible>
    <TraceCollapsibleTrigger>
      <TraceLine>
        <TraceIcon>
          <GlobeIcon />
        </TraceIcon>
        <TraceTitle>Used {sources.length} sources</TraceTitle>
      </TraceLine>
    </TraceCollapsibleTrigger>
    <TraceCollapsibleContent>
      <Trace>
        {sources.map((source) => (
          <a key={source.url} href={source.url} target="_blank" rel="noreferrer">
            <TraceLine>
              <TraceTitle>
                {source.title ?? new URL(source.url).hostname}
                <span className="sr-only"> (opens in a new tab)</span>
              </TraceTitle>
              <TraceIcon>
                <ArrowUpRightIcon />
              </TraceIcon>
            </TraceLine>
          </a>
        ))}
      </Trace>
    </TraceCollapsibleContent>
  </TraceCollapsible>
</Trace>

AI SDK

Collect the source-url parts of a message and render them after the text. The agent can cite the same page more than once, so dedupe them by url.

const sources = message.parts
  .filter((part) => part.type === "source-url")
  .filter(
    (part, index, all) =>
      all.findIndex((other) => other.url === part.url) === index
  )

title is optional on a source-url part. Fall back to the hostname of the URL.

API Reference

See Trace for every part and prop.

Accessibility

Each source is a plain link inside the list.
Links open in a new tab. Add sr-only text, such as "(opens in a new tab)", so screen readers announce it.
The arrow icon is decorative, so the title is the name of the link.
The count in the trigger, such as "Used 3 sources", says what opens before the list is opened.

import { ArrowUpRightIcon, GlobeIcon } from "phosphor-react-native"
import { Linking, Pressable, View } from "react-native"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Icon } from "@/components/ui/icon"
import { Message, MessageContent } from "@/components/ui/message"
import { Text } from "@/components/ui/text"
import { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceIcon, TraceLine, TraceTitle } from "@/components/ui/trace"

const sources = [
  {
    title: "Install Astro | docs.astro.build",
    url: "https://docs.astro.build/en/install-and-setup/",
  },
  {
    title: "create-astro | npmjs.com",
    url: "https://www.npmjs.com/package/create-astro",

import EsuissUI
import PhosphorSwift
import SwiftUI

struct SourcesExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 16) {
      Message(align: .end) {
        MessageContent {
          Bubble(variant: .muted, align: .end) { BubbleContent("How do I start a new Astro project?") }
        }
      }
      TraceCollapsible {
        TraceCollapsibleTrigger {
          TraceLine {
            TraceIcon { Ph.globe.regular }

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalUriHandler
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.regular.ArrowUpRight
import com.adamglin.phosphoricons.regular.Globe
import com.esuiss.ui.components.Bubble
import com.esuiss.ui.components.BubbleContent
import com.esuiss.ui.components.BubbleVariant

Sources on mobile is built from the same parts as on the web: Trace, Message, Bubble. The example above is a static demo; connect it to your agent by rendering the same parts from your messages.

Installation

$ pnpm dlx @esuiss/ui@latest add trace message bubble

$ pnpm dlx @esuiss/ui@latest add trace message bubble --platform swift

$ pnpm dlx @esuiss/ui@latest add trace message bubble --platform kotlin

API Reference

See Trace, Message, Bubble.

Usage

import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from "@/components/ui/trace"

<Trace>
  <TraceCollapsible>
    <TraceCollapsibleTrigger>
      <TraceLine>
        <TraceIcon>
          <GlobeIcon />
        </TraceIcon>
        <TraceTitle>Used {sources.length} sources</TraceTitle>
      </TraceLine>
    </TraceCollapsibleTrigger>
    <TraceCollapsibleContent>
      <Trace>
        {sources.map((source) => (
          <a key={source.url} href={source.url} target="_blank" rel="noreferrer">
            <TraceLine>
              <TraceTitle>
                {source.title ?? new URL(source.url).hostname}
                <span className="sr-only"> (opens in a new tab)</span>
              </TraceTitle>
              <TraceIcon>
                <ArrowUpRightIcon />
              </TraceIcon>
            </TraceLine>
          </a>
        ))}
      </Trace>
    </TraceCollapsibleContent>
  </TraceCollapsible>
</Trace>

AI SDK

Collect the source-url parts of a message and render them after the text. The agent can cite the same page more than once, so dedupe them by url.

const sources = message.parts
  .filter((part) => part.type === "source-url")
  .filter(
    (part, index, all) =>
      all.findIndex((other) => other.url === part.url) === index
  )

title is optional on a source-url part. Fall back to the hostname of the URL.

Accessibility

Each source is a plain link inside the list.

Links open in a new tab. Add sr-only text, such as "(opens in a new tab)", so screen readers announce it.

The arrow icon is decorative, so the title is the name of the link.

The count in the trigger, such as "Used 3 sources", says what opens before the list is opened.

import { ArrowUpRightIcon, GlobeIcon } from "phosphor-react-native" import { Linking, Pressable, View } from "react-native" import { Bubble, BubbleContent } from "@/components/ui/bubble" import { Icon } from "@/components/ui/icon" import { Message, MessageContent } from "@/components/ui/message" import { Text } from "@/components/ui/text" import { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceIcon, TraceLine, TraceTitle } from "@/components/ui/trace" const sources = [ { title: "Install Astro | docs.astro.build", url: "https://docs.astro.build/en/install-and-setup/", }, { title: "create-astro | npmjs.com", url: "https://www.npmjs.com/package/create-astro",