作業の進め方
Streamdown は、徐々に届くコンテンツ向けの React Markdown レンダラーをエージェントが組み込むのを支援します。ストリーミングと静的モード、コードのハイライト、図、数式、CJK テキストを扱います。コピー操作、リンク、カスタム要素の処理など、描画されたコンテンツの制御についても説明します。
実用上の価値は、見落としやすい組み込みの細部にあります。ソースは、Tailwind によるパッケージファイルのスキャン、数式用の KaTeX スタイル、ストリーミングカーソルと isAnimating フラグの関係を明示しています。任意のプラグインは、画面が実際に必要とするコンテンツに合わせて追加します。
想定される成果物
- アプリケーションの Markdown コンテンツに接続した Streamdown レンダラー。
- インストール済みパッケージに合わせたプラグインと Tailwind の設定。
- リンク確認、許可する要素、操作コントロールについての明示的な選択。
ブリーフからレビューまで
- 01必要なコンテンツ機能を選ぶ
回答にコード、Mermaid、数式、CJK 対応が必要かを判断します。順次届く回答にはストリーミングモード、完成済み文書には静的モードを選びます。
- 02描画とスタイルを設定する
選んだパッケージをインストールし、配布ファイルを Tailwind のスキャン対象に含めます。Tailwind v4 は @source ディレクティブ、v3 は設定内の content エントリーを使います。インストール済みプラグインのパスだけを追加します。数式を使う場合は KaTeX CSS を読み込み、現在のメッセージ構造にレンダラーを接続します。
- 03ストリーミングと安全性の挙動を確認する
進行中の回答にアニメーション状態を設定し、カスタム HTML、URL の扱い、リンク確認を見直します。未完の回答と完成したコンテンツの両方を確認します。