Mischief

11 / Agent UI

Streaming Text

Text that arrives a piece at a time from an async source, with a cursor while it runs and sentence-level announcements for screen readers.

Live previewSource

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Answer({ stream }: { stream: AsyncIterable<string> }) {
  return <StreamingText source={stream} onDone={saveAnswer} />
}

API

textstringStatic content, or the script replayed by speed.
sourceAsyncIterable<string> | ReadableStream<string>A live source consumed once and appended as it arrives.
speednumberCharacters per second when replaying text. Defaults to 0, which renders instantly.
streamingbooleanForces the streaming state when the caller owns the text.
cursorReactNode | falseReplaces or removes the trailing cursor.
announce"sentences" | "off"How the live region reports progress. Defaults to "sentences".
onDone(text: string) => voidRuns once the source completes.
onError(error: unknown) => voidRuns when the source rejects.
onStatusChange(status: StreamingTextStatus) => voidRuns on every status transition.

Accessibility

While text is arriving the visible node is hidden from assistive technology and a polite live region receives completed sentences instead, flushed on terminal punctuation, after a one second pause, or on completion. When the source settles the visible text is exposed normally and the live region is cleared. Static text never populates a live region. The cursor stops animating under reduced motion.

Dependencies