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.

You can also pass an already-complete Markdown string with receiving omitted. Streaming mode will play it through the reveal schedule. Use mode="static" when complete content should appear immediately.

For a working request example with cancellation and errors, continue to Streaming a response. If a table or unfinished word waits before appearing, see Markdown behavior.

Optional next steps

Streaming a response

Connect a request, close input, and preserve the response lifecycle.

Syntax highlighting

Add Shiki with @smoothstream/code.

Component overrides

Render Markdown with application components in React or Vue.