概述
在AI时代，从大语言模型（LLM）获取内容并进行实时渲染已成为一种常见需求。然而，传统的Markdown渲染组件，如react-markdown，在处理流式传输时面临独特的挑战。当数据以不完整的块（chunk）形式传入时，Markdown标记可能无法正确闭合，导致渲染效果不佳。Streamdown正是为解决这一问题而生，它是一个专为AI流式传输优化的react-markdown替代品。
Streamdown的核心优势在于其流式优化能力，即使Markdown文本不完整或标记未终止，也能优雅地进行解析和格式化，确保用户始终看到一个结构清晰、美观的界面。它能够智能地处理正在输入的粗体、斜体、代码块、链接甚至标题，让内容在流式加载过程中也能保持正确的样式。
特性亮点 🌟
Streamdown不仅解决了流式渲染的痛点，还集成了许多实用的功能，使其成为构建AI应用的理想选择。
- 即插即用：作为
react-markdown的直接替代品，Streamdown拥有相似的API接口，可以轻松集成到现有项目中。 - 优雅处理未终止块：这是Streamdown的独家能力，它能解析并渲染不完整的粗体、斜体、
代码块、链接和标题，提供流畅的用户体验。 - 全面的Markdown支持：完美支持GitHub Flavored Markdown (GFM)，包括表格、任务列表和删除线。
- 数学渲染：通过KaTeX支持LaTeX数学公式渲染，非常适合科学和技术类应用。
- 代码高亮：使用Shiki库提供美观、精确的代码语法高亮功能。
- Mermaid图表：能够渲染Mermaid图表，并在代码块旁提供渲染按钮，方便查看复杂的流程图或类图。
- 安全优先：基于
harden-react-markdown构建，确保渲染过程安全可靠。
安装与使用
安装
通过npm或pnpm即可轻松安装Streamdown。
npm i streamdown
为了确保组件样式正常显示，你需要在项目的globals.css文件中导入Streamdown的样式。
@import "../node_modules/streamdown/dist/index.css";
请确保路径与你项目中node_modules文件夹的实际位置相匹配。
基础用法
Streamdown的使用非常简单，只需将Markdown字符串作为子元素传递给<Streamdown>组件即可。
import { Streamdown } from 'streamdown';
export default function Page() {
const markdown = "# Streamdown!\n\nThis is **streaming** markdown!";
return <Streamdown>{markdown}</Streamdown>;
}
与AI SDK集成
Streamdown可以无缝地与AI SDK等流式API库结合使用。以下是一个使用@ai-sdk/react的聊天应用示例，展示了如何实时渲染来自AI模型的响应。
'use client';
import { useChat } from '@ai-sdk/react';
import { useState } from 'react';
import { Streamdown } from 'streamdown';
export default function Page() {
const { messages, sendMessage, status } = useChat();
const [input, setInput] = useState('');
return (
<>
{messages.map(message => (
<div key={message.id}>
{message.parts
.filter(part => part.type === 'text')
.map((part, index) => (
<Streamdown key={index}>{part.text}</Streamdown>
))}
</div>
))}
{/*... 省略表单部分 ...*/}
</>
);
}
通过上述代码，当AI模型返回的响应块（part.text）逐个加载时，Streamdown会实时解析并渲染，用户可以实时看到内容以流畅的方式生成，而不会出现渲染错误或闪烁。
核心原理
Streamdown之所以能优雅地处理不完整的Markdown，其核心在于其独特的解析机制。它采用了**Memoized rendering（记忆化渲染）**技术，确保只有当内容发生变化时才会重新渲染，从而实现高性能更新。同时，它对未终止的Markdown块进行了专门的解析处理，例如，当它看到**时，即使没有对应的闭合标记**，它也会将后续文本渲染为粗体，直到下一个标记出现。
总而言之，如果你正在开发一个需要实时渲染AI模型响应的应用，Streamdown无疑是你的最佳选择。它不仅解决了流式渲染的难题，还提供了丰富的功能和出色的性能，让你的应用界面更加流畅和专业。
实用小工具
App Store 截图生成器、应用图标生成器 、在线图片压缩和 Chrome插件-强制开启复制-护眼模式-网页乱码设置编码
乖猫记账，AI智能分类最好用的聊天记账App。