AI Streaming Text

AI chats 53

About

Animated text that streams in character-by-character or word-by-word with a blinking cursor, simulating an AI typewriter response.

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

Code

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

Usage.tsx

"use client";

import { AiStreamingText } from "@/components/ui/streaming-text";

export default function StreamingTextDemo() {
  return (
    <div className="flex min-h-[240px] w-full items-center justify-center p-8">
      <div className="max-w-md text-base leading-relaxed text-foreground">
        <AiStreamingText
          text="This text will stream in character by character, just like an AI response typing out its answer in real time..."
          speed={30}
          showCursor
          onComplete={() => console.log("Done!")}
        />
      </div>
    </div>
  );
}