Response Stream

kai-response-stream

Animates text into view — character by character or segment by segment — for live-streamed assistant replies, accepting a plain string or an AsyncIterable<string>.

• Shadow DOM
• 2 animation modes
• Accepts AsyncIterable
• Tunable speed
• Fires kai-complete

Preview

When to use

typewriter (default) suits most chat UIs; fade works better for longer document-style answers. In SolidJS, use the ResponseStream primitive directly for finer control.

Usage

Set text in JavaScript (async iterables can’t be serialized to an HTML attribute). Tune mode and speed as plain attributes.

<kai-response-stream id="stream" mode="typewriter" speed="20"></kai-response-stream>

<script type="module">
  import '@kitn.ai/ui/elements';
  const el = document.getElementById('stream');
  el.text = "Hello, this reveals one character at a time…";
  el.addEventListener('kai-complete', () => console.log('done'));
</script>

• text — string or AsyncIterable<string>. Assign after the element upgrades.
• mode — "typewriter" (default) streams character by character; "fade" fades in segments.
• speed — chars or segments per tick. Default 20.
• as — optional wrapper element tag, e.g. "p" or "span".

Examples

Typewriter Mode

Code

Fade Mode

mode="fade" fades the response in segment by segment — softer for longer, document-style answers.

Code

Realistic Assistant Reply

A longer message showing multi-sentence pacing. Lower speed for a deliberate reveal; higher to get users to the answer faster.

Code

Props

Property	Type	Default	Notes
text	string | AsyncIterable<string>	''	Text to stream. A string, or an `AsyncIterable<string>` (set as a JS property — async iterables can't be HTML attributes).
mode	"typewriter" | "fade"	'typewriter'	Reveal animation.
speed	number	20	Characters/segments per tick.
as	string	—	Element tag to render as.

Events

Event	Detail	Notes
kai-complete	—	Streaming finished.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

ResponseStream

---

Need a hand? Report a bug Ask for help