安装
npm i streamdown适合谁
这份技能适合已经在 React 里用 Markdown 渲染、并准备把它换成面向 AI 流式输出的人。官方把 Streamdown 写成 react-markdown 的即插即用替换,专门为 AI 驱动的流式场景设计。它也适合项目已经使用 Tailwind、能改 globals.css 的人。
它不适合还没有 React 应用、或不肯改样式入口的人。原文要求更新 Tailwind 的 globals.css,好让 Tailwind 检测 Streamdown 用到的工具类。若这些变量没定义,组件可能缺少背景、边框,或间距不正确。
官方仓库见 https://github.com/vercel/streamdown 请按该页已写出的命令操作。用法示例被写成与 AI SDK 一起在 React 应用中使用,但可见原文没有给出完整组件属性表。
3 分钟完成第一次尝试
只走官方写出的这一条装包路径。
前置条件:当前目录是一个允许写入依赖的 React 项目,本机可以运行 npm。先确认:npm i streamdown 会改依赖清单。若还不想改这个项目,不要执行。这一步先不要改生产样式,也不要部署。
安装位置:在项目根目录确认上述副作用后执行:
npm i streamdown
低风险核对:装包完成后,先让代理只读指出需要改的 Tailwind globals.css,说明必须让 Tailwind 检测 Streamdown 的工具类。不要让它擅自写入 CSS,也不要编造未出现的 @source 路径或变量名。若要用 AI SDK 渲染流式文本,先只标出准备替换 react-markdown 的那个组件,确认后再改。
成功信号:依赖里出现 streamdown,并且你清楚下一步必须改 globals.css。若代理跳过样式、直接说可以上线,停住。
使用案例
案例一:把现有 react-markdown 换成 Streamdown,用来渲染 AI 流式 Markdown。官方安装命令是 npm i streamdown。适合已经有 React 渲染位、想先装包再对照替换点的人。装包会写磁盘,执行前先确认。原文只写到「可与 AI SDK 一起使用」,没有列出流式接口字段,不要自行补 props。
案例二:补齐 Tailwind 检测与样式变量。原文要求更新 globals.css,否则工具类可能检测不到;变量未定义时,可能出现缺失背景、边框或错误间距。适合已经装好包、准备改样式入口的人。改 CSS 前先备份或先给出补丁预览;原文在这段里没有贴出完整变量列表,不要编造变量名。
使用边界
官方安装命令只有一条被原文写出:npm i streamdown。不要把未出现的安装器写进主路径。它被定位成 react-markdown 的替换,面向 AI 流式,没有证明可用于非 React 或非 Tailwind 项目。
样式是硬前提:必须更新 Tailwind globals.css,并定义那些变量,否则观感会缺。AI SDK 用法只写到「可以这样用」,没有给出完整示例代码时,不要假装有官方组件片段。
官方页面是 https://github.com/vercel/streamdown 若代理建议的装包命令或样式文件名与该页不一致,以该页为准。