Streaming Text

AI chats 22

About

A token-by-token streaming text effect with a blinking caret, skip and replay controls, and reduced-motion support for AI chat responses.

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

"use client";

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

const ANSWER =
  "The invoice failed because the card on file expired on the third, so the retry schedule kept charging a dead account.\n\nI paused it. Update the card and the charge re-runs tonight.";

export function StreamingTextDemo() {
  return (
    <div className="mx-auto w-full max-w-[320px]">
      <StreamingText text={ANSWER} tokensPerSecond={9} />
    </div>
  );
}

export default StreamingTextDemo;