Renders an AI reply token by token from a string or async stream, fading each chunk in behind a blinking caret, with safe markdown.
aistreamingmarkdowntypewriterllmresponse
Installation
$npx shadcn@latest add @geturui/streaming-response
Usage
usage.tsx
1import { StreamingResponse } from "@/components/ai/streaming-response";
2
3// From a string (revealed token by token)
4<StreamingResponse content={"**Done.** Your component is in `components/ui`."} />
5
6// From a stream, e.g. a fetch body decoded to text chunks
7<StreamingResponse content={streamOfChunks} onComplete={(text) => save(text)} />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
content* | string | AsyncIterable<string> | — | Full text, or an async iterable of chunks. A new value restarts the stream. |
speed | number | 28 | Milliseconds between tokens for string content. |
animate | boolean | true | false renders string content immediately with no caret. |
caret | boolean | true | Show the blinking caret while streaming. |
onProgress | (text: string) => void | — | Called with the text so far after each chunk. |
onComplete | (text: string) => void | — | Called once with the full text. |
Accessibility
- Markdown is parsed into React elements — no dangerouslySetInnerHTML.
- The container sets aria-busy while streaming; the caret is aria-hidden.
- With reduced motion, chunks fade without blur.