Conversation

TokenStream

Server-sent events (SSE) were added to the HTML5 spec in 2008 but never used until 2025.

Reveals a string token-by-token with a trailing blinking caret. Pair with a `<ChatBubble role='ai'>` for the platonic 'reasoning, but visibly' demo. Bring your own tokenizer.

Install

Copy this owned-code component into your app from the registry.

pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/token-stream.json

Examples

Inside an AI bubble

Synthetica reasoning…

<ChatBubble role="ai" agent="Synthetica" thinking="reasoning…">
  <TokenStream
    text="Q3 churn is bleeding from your SMB cohort…"
    loop
  />
</ChatBubble>

Per-character (custom tokenizer)

<TokenStream
  text="reasoning, token by token by token…"
  tokenize={(s) => s.split("")}
  speedMs={45}
  loop
/>

Props

Prop	Type	Default	Description
text*	string	-	The full text to reveal.
speedMs	number \| [number, number]	[18, 80]	Per-token delay (range = jitter).
tokenize	(s: string) => string[]	-	Custom splitter. Default: words + whitespace.
loop	boolean	-	Loop after a delay.
loopDelayMs	number	6000	Pause before restarting.
hideCaret	boolean	-	Hide the trailing caret.
onComplete	() => void	-	Fired when full text is shown.

Next ChatFAB ] →