UI for AI agents

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.

Components you'll use

• 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.

Install

Add every component above with the shadcn CLI. You own the source after install.

pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-source-citation.json
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-message-bubble.json

Frequently asked

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.