Sources

The "Sources:" list of inline links Claude writes at the end of an answer.

import { ClaudeSourceLink } from "../components/claude-source-link";
import { ClaudeSources } from "../components/claude-sources";
import { CLAUDE_DEMO_SOURCES } from "../constants/claude-demo";

export default function ClaudeSourcesExample() {
  return (
    <div className="bg-claude-bg font-claude-serif text-claude-fg w-[calc(100vw-3rem)] max-w-full space-y-4 p-6 text-base leading-[1.65]">
      <ClaudeSources sources={CLAUDE_DEMO_SOURCES} />
      <p>
        Markets opened higher, according to{" "}
        <ClaudeSourceLink source={CLAUDE_DEMO_SOURCES[0]}>
          Reuters
        </ClaudeSourceLink>
        .
      </p>
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/claude-sources

Claude writes its sources into the reply itself. ClaudeSources renders a serif “Sources:” line and a bulleted list of ClaudeSourceLinks. Pass it to the sources slot of Message and it sits inside the reply text, after the answer.

ClaudeSourceLink is the link on its own, so you can also use it inline in prose. It is a blue underlined a, opened in a new tab with rel="noopener noreferrer", as the trigger of a shadcn HoverCard. Hovering shows a card with the page title, and below it the favicon (a shadcn Avatar, from Google’s favicon service unless you set favicon) and the host.

<ClaudeSourceLink source={source}>Reuters</ClaudeSourceLink>

Used in