StreamingChat

• 01

  Frame-batched rendering

  Incoming tokens are buffered and flushed once per animation frame, so React never renders faster than the screen refreshes.

• 02

  Incremental markdown

  Lists, code blocks and inline formatting render as they stream, without reflowing the message.

• 03

  Abort, retry, regenerate

  Stop mid-answer, keep the partial text, and retry from the same point.

• 04

  Scroll anchoring

  Follows the stream only while the reader is at the bottom, with a jump-to-latest button otherwise.

1. 1

   Send

   The message is added optimistically and a request opens with an AbortController.

2. 2

   Stream

   Chunks are buffered and flushed on the next animation frame.

3. 3

   Render

   Markdown is parsed incrementally; code blocks are highlighted once they close.

4. 4

   Settle

   The final message is committed, controls return and any error offers a retry.

Planned API — this shows the intended developer experience and may change as the component is built.

<StreamingChat
  endpoint="/api/chat"
  onFinish={(message) => save(message)}
  suggestions={["Summarise this report", "Draft a reply"]}
/>

Every state a real conversation passes through, and what the user sees.