Streamdown 是 Vercel 提供的流式 Markdown 渲染方案，作为 react-markdown 的直接替代品，专门用于处理 AI 模型实时输出的 Markdown 内容。在 AI 流式生成过程中，Markdown 往往处于不完整或未闭合的状态，Streamdown 能够优雅地处理这类情况，实现平滑渲染。
一、安装与样式配置 安装命令为： npm install streamdown
使用 Tailwind v4 时，需要在 CSS 中添加： @source "../node_modules/streamdown/dist/*.js";
使用 Tailwind v3 时，需要在 content 数组中加入： content: ["./node_modules/streamdown/dist/*.js"]
二、核心用法 基本用法为导入 Streamdown 组件及样式： import { Streamdown } from 'streamdown' import 'streamdown/styles.css'
在组件中通过 children 传入 Markdown 字符串，并使用 isAnimating 控制流式动画/光标： <Streamdown isAnimating={isStreaming}>{content}</Streamdown>
三、插件架构 Streamdown 通过插件扩展功能，官方插件包包括：
- @streamdown/code：基于 Shiki 的语法高亮
- @streamdown/math：基于 KaTeX 的数学公式
- @streamdown/mermaid：Mermaid 图表渲染
- @streamdown/cjk：中日韩语言支持
使用方式为在 plugins 属性中按需传入插件，例如 code、math、mermaid、cjk。插件支持 tree-shaking，只需引入所需部分。
四、交互控件 可通过 controls 属性为代码块、表格和图表启用交互控件，例如表格与代码的控件，以及 Mermaid 的下载、复制、全屏、平移缩放等。
五、属性说明
- children：string，要渲染的 Markdown 内容
- isAnimating：boolean，显示流式光标/动画
- plugins：object，插件配置
- controls：object，交互控件配置
- className：string，附加 CSS 类
六、与 AI SDK 集成 可与 @ai-sdk/react 的 useChat 配合使用，在聊天消息列表中渲染每条消息的 Markdown，并根据状态判断最后一条消息是否处于流式输出中，从而设置 isAnimating。
七、关键规则与限制
- 需要 React 18+ 以及 Tailwind CSS 进行样式处理
- 必须导入 streamdown/styles.css 以获得动画效果
- 使用 isAnimating 控制流式光标指示器的显示
- 插件可 tree-shaking，按需引入
- 安全优先，内部使用 rehype-harden 进行安全的 HTML 渲染
- 开箱支持 GFM，包括表格、任务列表、删除线等
关于价格、平台支持范围、性能指标等更多细节，资料暂未提供。