Components · AI
Streaming Text
Assistant text as it arrives: new chunks fade in, text already shown stays still, and a caret marks the end.
import { StreamingText } from '@nexub/react';Usage
Any model output rendered token by token.
Finished text loaded from history: render it as plain text, or with `streaming={false}`.
Model output as HTML or Markdown HTML: StreamingText renders text only. Parse Markdown to React elements yourself; never inject model HTML.
Examples
Streaming a reply
Words arrive on a timer. Restart streams the paragraph again.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| textrequired | string | — | The full text received so far. Append to it; anything that is not an append renders statically. |
| streaming | boolean | false | Shows the caret and sets aria-busy while more text is expected. |
| as | 'div' | 'p' | 'span' | 'div' | Element to render. |
| aria-live | 'off' | 'polite' | 'off' | Opt-in live announcements. Leave off: screen readers would re-read the region on every token. |
Accessibility
Screen reader
Not a live region by default. Announce the finished message once instead, e.g. through a polite status or Conversation’s `announce` for whole messages.
`aria-busy` is true while streaming, so assistive tech can wait for the final text.
Notes
The caret is decorative (`aria-hidden`). With reduced motion, chunks appear without fading and the caret does not blink.
Only the last three chunks keep their own span, so the DOM stays flat however long the reply gets.
On iOS & Android
Web only