Uranus® Design System
AI

Citation

Chip de citação inline e CitationList para renderizar todas as fontes consultadas.

Citation é um chip pequeno com número, título da fonte e link externo opcional. Quando há snippet ou source, mostra um tooltip com o trecho. CitationList agrupa as fontes sob um label "Fontes".

'use client';

import { CitationList } from '@uranus-workspace/ai';

const citations = [
  {
    id: '1',
    title: 'Uranus — Design system',
    url: 'https://design.uranus.com.br',
    source: 'design.uranus.com.br',
    snippet: 'Princípios visuais e tokens publicados em CSS-first com Tailwind v4.',
  },
  {
    id: '2',
    title: 'Vercel AI SDK',
    url: 'https://ai-sdk.dev',
    source: 'ai-sdk.dev',
    snippet: 'Streaming, tool calls e UIMessage com parts em primeira classe.',
  },
];

export default function CitationDefault() {
  return (
    <div className="mx-auto w-full max-w-md">
      <CitationList citations={citations} />
    </div>
  );
}

Uso

import { Citation, CitationList } from '@uranus-workspace/ai';

<CitationList
  citations={message.citations}
/>

Vindo de useUranusChat

Mensagens normalizadas pelo hook expõem message.citations: UranusCitation[]. Na prática:

{message.citations && message.citations.length > 0 ? (
  <CitationList citations={message.citations} />
) : null}

API

  • Citation — recebe um UranusCitation e um index (1-based) para o número visível.
  • CitationList — recebe um array e um label opcional. Não renderiza nada quando vazio.