streamdown

Streamdown

ストリーミングに最適化された React Markdown レンダラーです。ストリーミング対応、セキュリティ、インタラクティブな操作機能を組み込んだ、react-markdown のドロップイン置換です。

クイックセットアップ

1. インストール

npm install streamdown

オプションのプラグイン（必要なものだけをインストールしてください）：

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

2. Tailwind CSS の設定（必須）

この手順は最も見落とされがちです。 Streamdown はスタイル設定に Tailwind を使用するため、dist ファイルをスキャンする必要があります。

Tailwind v4 — globals.css に追加します：

@source "../node_modules/streamdown/dist/*.js";

インストール済みのパッケージに対してのみ、プラグインの @source 行を追加してください（未インストールのプラグインを省略すると、Tailwind のエラーを回避できます）。正確なパスについては、各プラグインのページを参照してください：

• Code：@source "../node_modules/@streamdown/code/dist/*.js";
• CJK：@source "../node_modules/@streamdown/cjk/dist/*.js";
• Math：@source "../node_modules/@streamdown/math/dist/*.js";
• Mermaid：@source "../node_modules/@streamdown/mermaid/dist/*.js";

Tailwind v3 — tailwind.config.js に追加します：

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/streamdown/dist/*.js",
  ],
};

3. 基本的な使い方

import { Streamdown } from 'streamdown';

<Streamdown>{markdown}</Streamdown>

4. AI ストリーミングを使用する場合（Vercel AI SDK）

'use client';
import { useChat } from '@ai-sdk/react';
import { Streamdown } from 'streamdown';
import { code } from '@streamdown/code';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

  return (
    <>
      {messages.map((msg, i) => (
        <Streamdown
          key={msg.id}
          plugins={{ code }}
          caret="block"
          isAnimating={isLoading && i === messages.length - 1 && msg.role === 'assistant'}
        >
          {msg.content}
        </Streamdown>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} disabled={isLoading} />
      </form>
    </>
  );
}

5. 静的モード（ブログ、ドキュメント）

<Streamdown mode="static" plugins={{ code }}>
  {content}
</Streamdown>

主な Props

Prop	型	デフォルト	用途
children	string	—	Markdown コンテンツ
mode	"streaming" | "static"	"streaming"	レンダリングモード
plugins	{ code?, mermaid?, math?, cjk? }	—	機能プラグイン
isAnimating	boolean	false	ストリーミング中であることを示すインジケーター
caret	"block" | "circle"	—	カーソルのスタイル
components	Components	—	要素のカスタム置換
controls	boolean | object	true	インタラクティブなボタン。download: { filename } でダウンロード時の名前を指定します
linkSafety	LinkSafetyConfig	{ enabled: true }	リンク確認モーダル
shikiTheme	[light, dark]	['github-light', 'github-dark']	コードテーマ
className	string	—	コンテナーのクラス
allowedElements	string[]	all	許可するタグ名
disallowedElements	string[]	[]	許可しないタグ名
allowElement	AllowElement	—	カスタム要素フィルター
unwrapDisallowed	boolean	false	許可しない要素の子要素を保持する
skipHtml	boolean	false	生の HTML を無視する
urlTransform	UrlTransform	defaultUrlTransform	URL を変換／サニタイズする

API リファレンスの全文については、references/api.md を参照してください。

プラグインのクイックリファレンス

プラグイン	パッケージ	用途
Code	@streamdown/code	構文ハイライト（Shiki、200 以上の言語）
Mermaid	@streamdown/mermaid	図（フローチャート、シーケンス図など）
Math	@streamdown/math	KaTeX による LaTeX（CSS のインポートが必要）
CJK	@streamdown/cjk	中国語／日本語／韓国語のテキストサポート

Math には CSS が必要です：

import 'katex/dist/katex.min.css';

プラグインの設定について詳しくは、references/plugins.md を参照してください。

リファレンス

実装の詳細については、以下を参照してください：

• references/api.md — Props、型、インターフェースの全一覧
• references/plugins.md — プラグインのセットアップ、設定、カスタマイズ
• references/styling.md — CSS 変数、データ属性、カスタムコンポーネント、テーマの例
• references/security.md — セキュリティ強化、リンクの安全性、カスタム HTML タグ、本番環境の設定
• references/features.md — キャレット、remend、静的モード、操作機能、GFM、メモ化、トラブルシューティング

設定例

assets/examples/ からコピーして、必要に応じて調整してください。

• basic-streaming.tsx — Vercel AI SDK を使った最小構成の AI チャット
• with-caret.tsx — ブロックカーソル付きのストリーミング
• full-featured.tsx — すべてのプラグイン、カーソル、リンクの安全性、コントロールを備えた構成
• static-mode.tsx — ブログやドキュメントのレンダリング
• custom-security.tsx — AI コンテンツ向けの厳格なセキュリティ設定

よくある注意点

1. Tailwind のスタイルが適用されない — @source ディレクティブを追加するか、node_modules/streamdown/dist/*.js を content に指定してください
2. 数式が表示されない — katex/dist/katex.min.css をインポートしてください
3. カーソルが表示されない — caret プロパティと isAnimating={true} の両方が必要です
4. ストリーミング中のコピー ボタン — isAnimating={true} のとき、自動的に無効になります
5. リンクの安全性モーダルが表示される — デフォルトで有効です。無効にするには linkSafety={{ enabled: false }} を設定してください
6. Next.js で Shiki の警告が表示される — shiki を明示的にインストールし、transpilePackages に追加してください
7. allowedTags が機能しない — デフォルトの rehype プラグインでのみ機能します
8. 数式には $ ではなく $$ を使用します — 通貨との競合を避けるため、デフォルトでは単一のドル記号は無効になっています