Simon-He95/markstream-vue

Multi-framework streaming Markdown renderers for AI apps: Vue/Nuxt, React/Next.js, Svelte, and Angular, with Mermaid, KaTeX, Shiki, Monaco, safe HTML, and low-jitter updates.

解決する課題

多くの標準的な Markdown レンダラーは静的ドキュメント向けに設計されており、チャットインターフェースのように急速に変化するコンテンツ（AI が生成するトークンストリームなど）を描画すると、視覚的なちらつきやパフォーマンス問題が発生します。markstream-vue は、LLM からストリーミングされている Markdown を安定かつちらつきなく描画する方法を提供します。

仕組み

Vue 3 用の専用レンダラーとして機能し（React、Svelte、Angular 用の兄弟パッケージもあり）、不完全な Markdown 状態を処理します。主に 2 つのレンダーモードを提供します：長文書用の仮想ウィンドウと「入力」効果用のインクリメンタルバッチング。生の Markdown 文字列または事前パース済みノードのどちらでも処理でき、Mermaid 図や KaTeX 数式といった重い要素のプログレッシブレンダリングをサポートします。

対象ユーザー

AI チャット UI、SSE（Server‑Sent Events）や WebSocket ベースのストリーミングインターフェース、Vue、Nuxt、VitePress を使用したドキュメントサイトを構築する開発者向けです。

ハイライト

  • AI 最適化ストリーミング：LLM トークンストリーム中のちらつきを最小化し、予測可能なメモリ使用量を維持するよう設計されています。
  • マルチフレームワーク対応：このリポジトリは Vue 用ですが、React、Svelte、Angular をサポートするファミリーの一部です。
  • プログレッシブレンダリング：コードブロック（Monaco/Shiki 経由）や図（Mermaid 経由）をストリーミングし、コンテンツが増えるたびに更新します。
  • 豊富な統合：KaTeX 数式やカスタムタグ（例：thinking ブロック）への組み込みサポートがあります。
  • 柔軟なモード：安定したペースの chat モードと、リッチなドキュメントレイアウト向けの docs モードを含みます。