Stream Reply

AI chats 1

About

An AI chat assistant reply that streams in token by token with blur-in word animation, syntax-highlighted code typing, a glowing caret, and stop/regenerate controls.

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

Code

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

Usage.tsx

"use client";

import { StreamReply, type Block } from "@/components/ui/stream-reply";

const BLOCKS: Block[] = [
  {
    type: "p",
    text: "Yes — debounce the search input so you only query after the user pauses. 250ms is a good start for a destination search like this:",
  },
  {
    type: "code",
    lang: "ts",
    code: [
      { t: "export function ", k: "kw" },
      { t: "useDebounced", k: "fn" },
      { t: "<T>(value: T, ms = " },
      { t: "250", k: "num" },
      { t: ") {\n  " },
      { t: "const ", k: "kw" },
      { t: "[v, setV] = " },
      { t: "useState", k: "fn" },
      { t: "(value);\n  " },
      { t: "useEffect", k: "fn" },
      { t: "(() => {\n    " },
      { t: "const ", k: "kw" },
      { t: "id = " },
      { t: "setTimeout", k: "fn" },
      { t: "(() => setV(value), ms);\n    " },
      { t: "return ", k: "kw" },
      { t: "() => " },
      { t: "clearTimeout", k: "fn" },
      { t: "(id);\n  }, [value, ms]);\n  " },
      { t: "return ", k: "kw" },
      { t: "v;\n}" },
    ],
  },
  {
    type: "list",
    items: [
      "Show the spinner only after 300ms, so fast answers never flash it.",
      "Keep the last results on screen while the next ones load.",
      "Cancel the previous request with an AbortController.",
    ],
  },
];

export default function Demo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center p-6 bg-background text-foreground">
      <StreamReply
        theme="paper"
        question="Should I debounce the destination search box?"
        blocks={BLOCKS}
      />
    </div>
  );
}