Show RAG sources & citations in React
Retrieval-augmented answers need attribution to be trusted. Render the sources behind each response as compact citation cards so users can verify where the AI got its information.
Composants que vous utiliserez
- AI Source CitationDisplay sources and citations for RAG answers in React: title, origin label, and excerpt. Make AI answers verifiable. Accessible, install via the shadcn CLI.
- AI Message BubbleRender assistant, user, tool, and system messages in React. Markdown-ready chat bubbles for LLM and agent apps. Accessible, install via the shadcn CLI.
Installation
Ajoutez chaque composant ci-dessus avec la CLI shadcn. Vous possedez le source apres installation.
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/ai-source-citation.json
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/ai-message-bubble.jsonQuestions frequentes
- How do I show sources for a RAG answer?
- Render an AI Source Citation card per retrieved source — each shows a title, origin label, and optional excerpt — beneath the AI Message Bubble that contains the answer.