Streaming Text

AI chats

About

A text display that reveals content piece by piece from an async source (like an LLM response stream) or replays static text at a set speed, with a blinking cursor and sentence-level screen-reader announcements.

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 * as React from "react";

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

const script =
  "I checked the three files you changed. The migration looks right, but `users.email` is still nullable, so the unique index will fail on the second empty row. Want me to add the backfill first?";

export function StreamingTextDemo() {
  const [runId, setRunId] = React.useState(0);
  const [done, setDone] = React.useState(false);

  return (
    <div className="grid w-full max-w-xl gap-4">
      <StreamingText
        key={runId}
        text={script}
        speed={55}
        className="text-[0.95rem] leading-relaxed"
        onDone={() => setDone(true)}
      />

      {done ? (
        <button
          type="button"
          className="text-muted-foreground hover:text-foreground inline-flex w-fit items-center gap-1.5 text-sm underline-offset-4 hover:underline"
          onClick={() => {
            setDone(false);
            setRunId((current) => current + 1);
          }}
        >
          Replay
        </button>
      ) : null}
    </div>
  );
}

export default StreamingTextDemo;