AI Message Stream

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<AiMessageStream />

Installation

Usage

import {
  AIMessageStream,
  type StreamMessage,
} from "@/components/ui/ai-message-stream";

const messages: StreamMessage[] = [
  { id: "u1", role: "user", content: "Tell me about streaming replies", status: "done" },
  { id: "a1", role: "assistant", content: "This is a **streaming** reply…", status: "streaming" },
];

<AIMessageStream
  messages={messages}
  streaming={isStreaming}
  onStop={() => controller.abort()}
  onRetry={regenerate}
/>

Just bind streaming to the model's streaming state: while true, the last assistant message surfaces character by character at charsPerSecond and a "Stop generating" button appears in the header row; once it flips back to false, "Regenerate" is shown instead. Assistant message content surfaces as lightweight Markdown — bold, italics, inline code, lists, headings, and links take shape the moment their syntax completes.

With a real stream, just keep merging newly received tokens into that message's content and the reveal animation catches up to the current length automatically; giving content all at once (as in the example above) types out the whole thing.

Props

AIMessageStream

StreamMessage

How it works

• The character-by-character reveal advances via requestAnimationFrame at charsPerSecond, catching up to the current length automatically as the content grows
• Each word surfaces on mount with a fade in, an upward shift, and a de-blur, and Markdown blocks take shape as their syntax closes
• An unclosed code block (mid-stream) still renders live as code, matching how a real stream looks
• A blinking cursor is shown while streaming, and a three-dot waiting indicator appears while there is no content yet
• "Stop / Retry" swap in and out with AnimatePresence, and the stop button carries a pulse
• Content growth auto-scrolls while pinned to the bottom, pauses when the user scrolls up, and resumes on returning to the bottom
• Every requestAnimationFrame and timer is cleaned up on state changes and on unmount

Accessibility

• The scroll container carries role="log" and aria-live="polite", so streamed content is announced by assistive technology
• Message bubbles carry aria-busy while streaming, which is cleared once done
• Links carry rel="noopener noreferrer" and open in a new tab
• When the user has "reduce motion" enabled at the system level: the character-by-character reveal is skipped in favor of showing the complete content, the cursor and per-word animations are removed, and the waiting indicator and stop pulse degrade to static