---
title: Quickstart
description: Install a Smoothstream adapter and render a streaming Markdown response in a few minutes.
---

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

<Tabs>
  <Tab label="React" icon="/icons/react.svg">
    <CodeGroup>
    ```bash title="npm" hideLanguageIcon
    npm install @smoothstream/react
    ```

    ```bash title="pnpm" hideLanguageIcon
    pnpm add @smoothstream/react
    ```

    ```bash title="yarn" hideLanguageIcon
    yarn add @smoothstream/react
    ```

    ```bash title="bun" hideLanguageIcon
    bun add @smoothstream/react
    ```
    </CodeGroup>

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

    ```tsx title="AssistantMessage.tsx"
    import { Smoothstream } from "@smoothstream/react";

    export function AssistantMessage({
      text,
      receiving,
    }: {
      text: string;
      receiving: boolean;
    }) {
      return (
        <Smoothstream receiving={receiving}>
          {text}
        </Smoothstream>
      );
    }
    ```
  </Tab>
  <Tab label="Vue" icon="/icons/vue.svg">
    <CodeGroup>
    ```bash title="npm" hideLanguageIcon
    npm install @smoothstream/vue
    ```

    ```bash title="pnpm" hideLanguageIcon
    pnpm add @smoothstream/vue
    ```

    ```bash title="yarn" hideLanguageIcon
    yarn add @smoothstream/vue
    ```

    ```bash title="bun" hideLanguageIcon
    bun add @smoothstream/vue
    ```
    </CodeGroup>

    Vue 3.5 or later is a peer dependency.

    ```vue title="AssistantMessage.vue"
    <script setup lang="ts">
    import { Smoothstream } from "@smoothstream/vue";

    defineProps<{
      text: string;
      receiving: boolean;
    }>();
    </script>

    <template>
      <Smoothstream :markdown="text" :receiving="receiving" />
    </template>
    ```
  </Tab>
  <Tab label="Vanilla" icon="/icons/javascript-typescript.svg">
    <CodeGroup>
    ```bash title="npm" hideLanguageIcon
    npm install @smoothstream/dom
    ```

    ```bash title="pnpm" hideLanguageIcon
    pnpm add @smoothstream/dom
    ```

    ```bash title="yarn" hideLanguageIcon
    yarn add @smoothstream/dom
    ```

    ```bash title="bun" hideLanguageIcon
    bun add @smoothstream/dom
    ```
    </CodeGroup>

    ```ts title="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();
    ```
  </Tab>
</Tabs>

<Callout type="tip" title="Pass the whole snapshot">
  Each update is the complete Markdown received so far, not the latest token. `"Hello "` then `"Hello world"` is correct. Forwarding only `"world"` is not.
</Callout>

## Close the stream

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

<Steps>
  <Step title="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.
  </Step>
  <Step title="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.
  </Step>
  <Step title="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.
  </Step>
</Steps>

## Optional next steps

<Columns columns={2}>
  <Column>
    <Card title="Streaming a response" href="/get-started/streaming" icon="lucide:radio">
      Accumulated snapshots, static history, and accessibility.
    </Card>
  </Column>
  <Column>
    <Card title="Syntax highlighting" href="/customize/syntax-highlighting" icon="lucide:braces">
      Add Shiki with `@smoothstream/code`.
    </Card>
  </Column>
</Columns>