Streaming Text

AI chats 12

About

A streaming AI answer display that types out text with a blinking caret, inline numbered citations, source list, and clickable follow-up prompt suggestions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Streaming Text to your project and fits it to your theme.

Code

How Streaming Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}