Quickstart | Smoothstream

Pick the adapter that matches your UI, install it, and pass the Markdown accumulated so far. Styles load with the package. You do not need Tailwind CSS.

Install and render

React

npm install @smoothstream/react

pnpm add @smoothstream/react

yarn add @smoothstream/react

bun add @smoothstream/react

React 18.2 or 19, plus React DOM, must already be in the project.

AssistantMessage.tsx

import { Smoothstream } from "@smoothstream/react"; export function AssistantMessage({  text,  receiving,}: {  text: string;  receiving: boolean;}) {  return (    <Smoothstream receiving={receiving}>      {text}    </Smoothstream>  );}

npm install @smoothstream/vue

pnpm add @smoothstream/vue

yarn add @smoothstream/vue

bun add @smoothstream/vue

Vue 3.5 or later is a peer dependency.

AssistantMessage.vue

<script setup lang="ts">import { Smoothstream } from "@smoothstream/vue"; defineProps<{  text: string;  receiving: boolean;}>();</script> <template>  <Smoothstream :markdown="text" :receiving="receiving" /></template>

npm install @smoothstream/dom

pnpm add @smoothstream/dom

yarn add @smoothstream/dom

bun add @smoothstream/dom

assistant-message.ts

import { createSmoothstream } from "@smoothstream/dom"; const stream = createSmoothstream(document.querySelector("#response")!, {  receiving: true,}); stream.update(markdownReceivedSoFar, { receiving: true }); // When the model finishes:stream.update(completeMarkdown, { receiving: false }); // When the view is removed:stream.destroy();

Close the stream

receiving tells Smoothstream whether the snapshot may still change shape. It is not an animation on/off switch.

Set receiving to true while tokens arrive

Incomplete emphasis, links, list items, and code lines stay withheld until they are safe. The default is false, so omit this flag only when the Markdown is already complete.

Set receiving to false when the model is done

Smoothstream flushes the remaining safe content and finishes the scheduled reveal. Keep the same instance mounted so queued presentation can complete.

Start a new instance for the next response

Markdown is append-only for the life of a component or controller. Remount with a new React or Vue key, or call createSmoothstream again, when the user starts a different answer.

Optional next steps

Streaming a response

Accumulated snapshots, static history, and accessibility.

Syntax highlighting

Add Shiki with @smoothstream/code.