Response Stream
A component for displaying text with streaming animations, perfect for chat interfaces, AI responses, or any text that should appear progressively.
Examples
Typewriter Mode
The default mode that types out text character by character, simulating a typing effect.
Fade Mode
The fade mode reveals text word by word with a smooth fade-in animation.
With Markdown
ResponseStream can be combined with the Markdown component to create rich, animated content, for that you need to use the useTextStream hook directly.
Note: If you want to use mode="fade", you need to manually render the segments with appropriate CSS animations.
It can be hard to get it done with markdown, the way is to write a custom remarkPlugins. We have a demo but it's a bit too experimental to be included here, happy to receive a PR if you have a good solution.
Using the useTextStream Hook with fade mode
When using the useTextStream hook with fade mode, you need to manually render the segments with appropriate CSS animations.
Installation
npx shadcn add "https://prompt-kit.com/c/response-stream.json"Component API
ResponseStream
| Prop | Type | Default | Description |
|---|---|---|---|
| textStream | string | AsyncIterable<string> | The text to stream or an async iterable of text chunks | |
| mode | "typewriter" | "fade" | "typewriter" | The animation mode to use |
| speed | number | 20 | Speed from 1-100, where 1 is slowest and 100 is fastest |
| className | string | "" | Additional CSS classes |
| onComplete | () => void | Callback function when streaming is complete | |
| as | string | "div" | Element type to render |
| fadeDuration | number | Custom fade duration in ms (overrides speed) | |
| segmentDelay | number | Custom delay between segments in ms (overrides speed) | |
| characterChunkSize | number | Custom characters per frame for typewriter (overrides speed) |
useTextStream Hook
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| textStream | string | AsyncIterable<string> | The text to stream or an async iterable of text chunks | |
| speed | number | 20 | Speed from 1-100, where 1 is slowest and 100 is fastest |
| mode | "typewriter" | "fade" | "typewriter" | The animation mode to use |
| onComplete | () => void | Callback function when streaming is complete | |
| fadeDuration | number | Custom fade duration in ms (overrides speed) | |
| segmentDelay | number | Custom delay between segments in ms (overrides speed) | |
| characterChunkSize | number | Custom characters per frame for typewriter (overrides speed) | |
| onError | (error: unknown) => void | Callback function when an error occurs |
Return Value
| Property | Type | Description |
|---|---|---|
| displayedText | string | The current text being displayed |
| isComplete | boolean | Whether streaming is complete |
| segments | { text: string; index: number }[] | Text segments for fade mode |
| getFadeDuration | () => number | Function to get the current fade duration |
| getSegmentDelay | () => number | Function to get the current segment delay |
| reset | () => void | Function to reset the streaming state |
| startStreaming | () => void | Function to start or restart streaming |
| pause | () => void | Function to pause streaming |
| resume | () => void | Function to resume streaming |