StreamingText

Renders a string or async token stream character by character, ideal for AI response streaming.

Click to start streaming…

import { StreamingText } from "@aetherstack/ui"

Installation

terminal

npx aether-ui add streaming-text

Import

import.tsx

import { StreamingText } from "@aetherstack/ui"

Usage

streamingtext.tsx

async function* makeStream() {
  const tokens = ["Hello", ", ", "world", "!"]
  for (const token of tokens) {
    await new Promise(r => setTimeout(r, 100))
    yield token
  }
}

<StreamingText content={makeStream()} onComplete={() => console.log("done")} />

Props

Prop	Type	Default	Description
content*	string \| AsyncIterable<string>	—	The text or stream to render.
className	string	—	Additional CSS classes.
onComplete	() => void	—	Called when the stream finishes.

* Required

Accessibility

→Streamed content is rendered in a live region so screen readers announce updates.
→Use onComplete to signal when streaming has ended so assistive technology can summarise.