# Response Stream

Reveals text with a typewriter or fade animation — the building block for streaming assistant replies in any framework.

<p class="kai-tag-sub">kai-response-stream</p>

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

## Preview

> **tip:** 
`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.

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

<script type="module">

  await customElements.whenDefined('kai-response-stream');

  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

### Fade Mode

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

### Realistic Assistant Reply

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

## Props

## Events

## Composed from