A streaming AI answer display that types out text with a blinking caret, inline numbered citations, source list, and clickable follow-up prompt suggestions.
import { StreamingText } from "@/components/ui/streaming-text";
export default function StreamingTextDemo() {
return (
<div className="flex w-full items-center justify-center p-10">
<StreamingText
text="**Retrieval-augmented generation** combines a language model with an external knowledge source. [1] The model retrieves relevant documents at query time and conditions its answer on them, which reduces hallucinations and keeps responses grounded. [2]"
streaming={false}
citations={[
{
id: "c1",
index: 1,
url: "https://arxiv.org/abs/2005.11401",
title: "RAG paper",
},
{
id: "c2",
index: 2,
url: "https://www.pinecone.io/learn/retrieval-augmented-generation/",
title: "Pinecone: RAG guide",
},
]}
followUps={[
{ id: "f1", label: "How does retrieval scoring work?" },
{ id: "f2", label: "Compare RAG vs fine-tuning" },
]}
onFollowUp={(prompt) => console.log(prompt)}
/>
</div>
);
}
Part of Spectrum UI — browse the full library on 21st.dev.