Repolode
提交项目
vercel

vercel/streamdown

面向 AI 流式输出的 react-markdown 即插即用替代品，可正确渲染未完成的 Markdown 片段。

在 GitHub 查看官网
Star
5,711
Fork
315
未关闭 Issue
44
最近提交
14小时前

这是什么？

Streamdown 是一个 React Markdown 渲染组件，专为逐 token 流式返回的内容设计，例如 AI 模型的回复。普通的 Markdown 渲染器在文本还在输出时，遇到未闭合的代码块或只写了一半的表格，常常显示错乱；Streamdown 则专门处理这类未完成的 Markdown 片段，让内容在生长过程中保持可读。

它可以直接替换 react-markdown 使用。功能包括 GitHub Flavored Markdown（表格、任务列表、删除线）、基于 KaTeX 的 LaTeX 公式渲染、可点击渲染的 Mermaid 图表，以及基于 Shiki 的代码高亮。安全渲染由 rehype-harden 负责，并且对渲染结果做了 memo 优化，减少更新时的重复计算。

Streamdown 是 AI SDK 的 AI Elements Message 组件的底层实现，也可以作为独立的 npm 包单独安装。样式依赖 Tailwind 和 shadcn/ui 风格的 CSS 变量，需要按说明进行配置。

核心功能

  • 01可直接替换 react-markdown
  • 02流式输出时正确处理未闭合的 Markdown 片段
  • 03支持 GFM 表格、任务列表和删除线
  • 04通过 KaTeX 渲染 LaTeX 公式
  • 05Mermaid 图表支持点击渲染
  • 06使用 Shiki 进行代码语法高亮

适用场景

  • 在 React 或 Next.js 应用中渲染 LLM 的聊天回复
  • 展示包含代码、表格和公式的 AI 生成内容
  • 显示 AI 助手生成的 Mermaid 图表

快速上手

  1. 1

    安装软件包

    npm i streamdown
  2. 2

    在 globals.css 中添加 Tailwind 的 @source 配置

  3. 3

    在 React 应用中使用 Streamdown 组件渲染流式 Markdown

使用前须知

  • 项目元数据中未明确说明许可证。
  • 要正确渲染样式，需要配置 Tailwind CSS 以及 shadcn/ui 风格的 CSS 自定义属性。

标签

#markdown#react#streaming#llm#streaming-markdown#syntax-highlighting#katex#ai

常见问题

streamdown 是什么？
面向 AI 流式输出的 react-markdown 即插即用替代品，可正确渲染未完成的 Markdown 片段。 Streamdown 是一个 React Markdown 渲染组件，专为逐 token 流式返回的内容设计，例如 AI 模型的回复。普通的 Markdown 渲染器在文本还在输出时，遇到未闭合的代码块或只写了一半的表格，常常显示错乱；Streamdown 则专门处理这类未完成的 Markdown 片段，让内容在生长过程中保持可读。
streamdown 可以免费使用吗？用的什么许可证？
streamdown 以 Other 许可证开源。用于商业产品前，请先确认许可证条款。
streamdown 还在维护吗？
活跃维护中。streamdown 最近一次提交是在 2026年10月19日。
streamdown 适合用来做什么？
在 React 或 Next.js 应用中渲染 LLM 的聊天回复 展示包含代码、表格和公式的 AI 生成内容 显示 AI 助手生成的 Mermaid 图表
streamdown 怎么安装和运行？
安装软件包: npm i streamdown 在 globals.css 中添加 Tailwind 的 @source 配置 在 React 应用中使用 Streamdown 组件渲染流式 Markdown
在哪里获取 streamdown？
源代码和安装说明在 GitHub 上：https://github.com/vercel/streamdown

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目