# Cited Answer AI Chat Input with Sources

> Cited answer AI chat input for React and Tailwind CSS (shadcn/ui) that shows the sources an assistant is reading and footnotes every sentence of the streamed answer with colorful citation chips. It is built to make AI answers checkable at a glance, so people can see where each claim comes from before they trust it. A persistent composer sits below the transcript; while the assistant works, a shimmering "Reading sources" header lists each source with a chart-tinted tile, domain, and reading progress bar. Sentences stream in with numbered chips that match their source colors; hovering or focusing a chip lifts its source card, and hovering a card highlights every chip that cites it. Once done the list folds into a compact "sources" row that reopens on demand. Supports controlled status, sources, answer, and active source, sentence-level live announcements, IME-safe Enter, Stop and Send swapping, reduced motion, and light and dark themes. Use it for RAG assistants, research copilots, support bots, and documentation search. The included demo scripts an illustrative answer; the component makes no requests. Requires React and lucide-react, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: AI Chat, Citation, Rag, Chat
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/cited-answer-chat-input

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/cited-answer-chat-input?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/ai-chat.md