@assistant-ui/react-streamdown

Streamdown-based markdown rendering for @assistant-ui/react. Drop-in replacement for @assistant-ui/react-markdown with built-in Shiki, KaTeX, and Mermaid support, optimized for AI streaming output.

When to use this

| Package | Best for | | ---------------------------------------- | ----------------------------------------------------------------- | | @assistant-ui/react-markdown | Lightweight rendering; bring your own syntax highlighter. | | @assistant-ui/react-streamdown | Feature-rich with built-in Shiki, KaTeX, and Mermaid. | | @assistant-ui/react-syntax-highlighter | Pair with react-markdown when you only need code-block highlighting. |

Installation

npm install @assistant-ui/react @assistant-ui/react-streamdown

For optional features:

npm install @streamdown/code @streamdown/math @streamdown/mermaid @streamdown/cjk

CSS setup

Streamdown ships its control buttons (code-block toolbar, mermaid fullscreen) and the streaming caret as Tailwind utility classes. Tailwind v4 does not scan node_modules by default, so add a @source directive for Streamdown (and one per installed plugin) to the same stylesheet that imports Tailwind:

@import "tailwindcss";

@source "../node_modules/streamdown/dist/*.js";
@source "../node_modules/@streamdown/code/dist/*.js";
@source "../node_modules/@streamdown/math/dist/*.js";
@source "../node_modules/@streamdown/mermaid/dist/*.js";
@source "../node_modules/@streamdown/cjk/dist/*.js";

Adjust the relative path to your project's node_modules. In a pnpm or Turbo monorepo with hoisted dependencies, you typically need more ../ segments to reach the workspace root. Only keep the plugin lines for packages you actually installed.

Without these directives, the copy, download, and fullscreen buttons render unstyled, and the caret indicator stays invisible.

If you use the animated prop or createAnimatePlugin for word-level fade-in, also import the keyframes once at your app entry:

import "streamdown/styles.css";

For details on the shadcn/ui design tokens Streamdown expects, see the Streamdown README.

Usage

import { StreamdownTextPrimitive } from "@assistant-ui/react-streamdown";
import { code } from "@streamdown/code";
import { math } from "@streamdown/math";
import { mermaid } from "@streamdown/mermaid";
import "katex/dist/katex.min.css";

export const MarkdownText = () => (
  <StreamdownTextPrimitive
    plugins={{ code, math, mermaid }}
    shikiTheme={["github-light", "github-dark"]}
  />
);

Full prop reference, plugin docs, performance guide, and react-markdown migration notes at assistant-ui.com/docs/guides/streamdown.