AI 來源引用
AI 回答內嵌引用角標，hover 浮出來源預覽卡。
在 AI 回答段落內嵌 [1][2] 上標引用角標，hover 或點擊浮出來源預覽卡（favicon 色塊、標題、摘要與網域連結），底部來源列表與角標雙向聯動高亮，適合 RAG 問答、AI 搜尋等需要展示回答依據的場景。
載入預覽⋯
安裝
npx shadcn@latest add https://webberui.com/r/ai-source-citations.json或在 components.json 設定 registries 後，改用 @webberui/ai-source-citations 安裝。
安裝依賴後，從 registry JSON（/r/ai-source-citations.json 的 files[0].content）複製 ai-source-citations.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { AiSourceCitations } from "@/components/ui/ai-source-citations";
<AiSourceCitations
segments={[
{ text: "RAG 讓模型在回答前先檢索外部知識", citations: [0] },
{ text: "，能有效降低幻覺並附上依據。", citations: [1] },
]}
sources={[
{
title: "什麼是檢索增強生成？",
domain: "aws.amazon.com",
snippet: "讓模型在生成回應前先參考外部權威知識庫……",
url: "https://aws.amazon.com/what-is/retrieval-augmented-generation/",
},
{
title: "RAG 實戰指南",
domain: "ithome.com.tw",
snippet: "透過向量資料庫檢索相關文件片段再彙整生成答案……",
},
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
segments | CitationSegment[] | — | 回答內容分段清單，依序渲染為同一段落 |
segments[].text | string | — | 這一段回答文字 |
segments[].citations | number[] | — | 此段文字之後要標註的來源（對應 sources 的 0-based 索引） |
sources | CitationSource[] | — | 引用來源清單，陣列順序即角標編號（從 1 開始） |
sources[].title | string | — | 來源標題，顯示於預覽卡與底部列表 |
sources[].domain | string | — | 來源網域，用於 favicon 色塊字母與網域列 |
sources[].snippet | string | — | 來源內容摘要，顯示於 hover 預覽卡（最多兩行） |
sources[].url | string | — | 選填連結，提供時預覽卡網域列與列表項目可點擊開啟 |
showSourceList | boolean | true | 是否顯示底部來源列表（與內文角標聯動高亮） |
className | string | — | 透傳到最外層容器，經 cn() 合併 |
可及性
- 引用角標為原生
<button>，可以 Tab 聚焦，聚焦即開啟預覽卡，按Escape關閉 - 角標帶
aria-expanded與完整aria-label（含編號與來源標題），預覽卡為role="tooltip" - 焦點移出整個角標與卡片範圍才關閉，鍵盤使用者可 Tab 進卡片內的來源連結
- 系統開啟「減少動態效果」時，預覽卡僅淡入淡出，不做位移與縮放動畫
- favicon 色塊與小箭頭等裝飾元素皆標記
aria-hidden，不干擾朗讀