Streamdown: um renderizador Markdown projetado para capacidade de resposta de fluxo de IA

O Streamdown é um aplicativo desenvolvido pela Vercel. Reagir que pode ser usado como uma biblioteca conhecida react-markdown Essa ferramenta é um substituto direto para a renderização Markdown de texto de fluxo contínuo gerado por modelos de IA. O principal objetivo do projeto dessa ferramenta é resolver os problemas de renderização do Markdown encontrados no processamento de texto de fluxo contínuo gerado por modelos de IA. Em aplicativos como o bate-papo de IA, o texto é gerado literalmente ou pedaço por pedaço, o que geralmente faz com que a sintaxe do Markdown fique incompleta em trânsito (por exemplo, uma marcação em negrito ** O Streamdown lida com esses blocos incompletos ou não fechados da sintaxe do Markdown e os renderiza corretamente em tempo real. Isso melhora muito a experiência do usuário, pois ele pode ver o texto formatado em tempo real, em vez de esperar que toda a resposta seja gerada. Ele integra suporte para GitHub-style Markdown (GFM), fórmulas matemáticas, realce de código e diagramas, com foco no desempenho e na segurança.

Lista de funções

• Otimizado para streamingA principal vantagem é a capacidade de processar e renderizar sem problemas um fluxo incompleto e contínuo de entrada de texto Markdown.
• compatibilidade react-markdownDisponível como react-markdown é um substituto direto do
• Explicação da gramática não fechadaSintaxe de negrito, itálico, código, links e cabeçalhos não fechados: capacidade de analisar e estilizar corretamente a sintaxe de negrito, itálico, código, links e cabeçalhos não fechados.
• Suporte ao GFMSuporte integrado para Markdown no estilo GitHub, incluindo tabelas, listas de tarefas e tachado.
• Renderização de fórmulas matemáticasSuporte para renderização de equações matemáticas LaTeX por meio do KaTeX.
• Gráfico de sereiasSereia: pode renderizar a sintaxe do Mermaid em um bloco de código para um gráfico e fornecer um botão de alternância de renderização.
• Destaque de sintaxe de códigoUse a biblioteca Shiki para fornecer realce de sintaxe esteticamente agradável para blocos de código.
• segurança em primeiro lugarBaseado em harden-react-markdown Construído para garantir a segurança do conteúdo renderizado.
• otimização do desempenhoRenderização por memorização: usa a renderização por memorização para melhorar a eficiência da atualização e reduzir a renderização desnecessária.

Usando a Ajuda

O Streamdown é um pacote NPM usado principalmente em projetos React. Ele tem um processo de instalação e uso muito simples, projetado para permitir que os desenvolvedores façam a integração rapidamente.

1. instalação

Em primeiro lugar, você precisa instalar o streamdown. É possível usar npmeyarn talvez pnpm etc. para a instalação.

fazer uso de npm Instalação:

npm i streamdown

fazer uso de pnpm Instalação:

pnpm add streamdown

2. estilos de configuração

Para que os elementos HTML renderizados tenham o estilo correto (por exemplo, a cor do plano de fundo do bloco de código, as bordas do bloco de referência etc.), a Streamdown precisa que você inclua seu arquivo CSS. Você precisará adicionar o seguinte código ao arquivo CSS global do seu projeto, normalmente globals.css ou documento semelhante.

@import "../node_modules/streamdown/dist/index.css";

Certifique-se de que @import em sua estrutura de projeto para apontar corretamente para o node_modules Pasta.

3. uso básico

Em seu componente React, importe o componente Streamdown e passar a cadeia de caracteres Markdown a ser renderizada como seu elemento filho.

Este é o exemplo mais básico:

import { Streamdown } from 'streamdown';
export default function MyPage() {
const markdownContent = "# 你好，世界！\n\n这是一个 **流式传输** 的 *Markdown* 文本。";
return (
<article>
<Streamdown>{markdownContent}</Streamdown>
</article>
);
}

No exemplo acima, omarkdownContent A string é analisada pelo Streamdown e renderizada na tag HTML correspondente.

4. usado em conjunto com o Vercel AI SDK

O maior valor do Streamdown está no processamento de fluxos de texto gerados em tempo real. O exemplo a seguir mostra como ele pode ser usado com o Vercel AI SDK useChat Os ganchos são usados em combinação para renderizar as respostas de bate-papo da IA em tempo real.

'use client';
import { useChat } from '@ai-sdk/react';
import { useState } from 'react';
import { Streamdown } from 'streamdown';
export default function ChatComponent() {
// useChat 钩子管理聊天状态和消息
const { messages, sendMessage, status } = useChat();
const [input, setInput] = useState('');
// 处理表单提交
const handleSubmit = (e) => {
e.preventDefault();
if (input.trim()) {
sendMessage({ role: 'user', content: input });
setInput('');
}
};
return (
<div>
{/* 遍历并显示所有消息 */}
<div>
{messages.map(message => (
<div key={message.id}>
<strong>{message.role === 'user' ? 'You: ' : 'AI: '}</strong>
{/* AI 的回复内容会通过 Streamdown 实时渲染 */}
<Streamdown>{message.content}</Streamdown>
</div>
))}
</div>
{/* 用户输入表单 */}
<form onSubmit={handleSubmit}>
<input
value={input}
onChange={e => setInput(e.target.value)}
disabled={status !== 'idle'}
placeholder="说点什么..."
/>
<button type="submit" disabled={status !== 'idle'}>
发送
</button>
</form>
</div>
);
}

Neste exemplo, ouseChat devolvido messages A matriz é atualizada em tempo real à medida que a IA gera respostas.Streamdown Componente embalado message.contentAssim, sempre que um novo fragmento de conteúdo (token) chega, ele é imediatamente renderizado em HTML formatado, e o usuário vê o texto e a formatação aparecerem em conjunto.

5 Propriedades do componente (Props)

Suporte ao Streamdown react-markdown e adicionou algumas opções específicas para streaming:

• children (string): a string Markdown a ser renderizada.
• parseIncompleteMarkdown (booleano, valor padrão. true): se deve analisar e renderizar a sintaxe Markdown não fechada. Esse é um recurso essencial do Streamdown e é recomendável mantê-lo ativado.
• components (objeto): usado para substituir o renderizador de elementos HTML padrão. Por exemplo, você pode fornecer um <a> para lidar com links.
• remarkPlugins (matriz). remark Uma matriz de plug-ins para estender a sintaxe do Markdown. A integração padrão do plug-in remarkGfm (para formulários de suporte, listas de tarefas, etc.) e remarkMath.
• rehypePlugins (matriz). rehype Uma matriz de plug-ins para processamento de HTML, com a integração padrão do plug-in rehypeKatex (para renderizar equações matemáticas).
• shikiTheme (cadeia de caracteres, valor padrão. github-light): nome do tópico do Shiki para realce da sintaxe do bloco de código.

cenário do aplicativo

1. Chatbots com IA
   Ao interagir com grandes modelos de linguagem, como o GPT, as respostas do modelo são geradas literalmente ou palavra por palavra. Usando o Streamdown, esses fluxos fragmentados de texto podem ser renderizados em tempo real em parágrafos totalmente formatados, como blocos de código, listas e citações, melhorando consideravelmente o imediatismo e a experiência das interações do usuário.
2. Colaboração em tempo real Editor Markdown
   Em aplicativos que permitem que vários usuários editem o mesmo documento Markdown ao mesmo tempo, o Streamdown pode ser usado para gerar uma visualização prévia em tempo real para cada usuário. Mesmo que a sintaxe do Markdown inserida pelo usuário esteja incompleta, a área de visualização mostra o estilo da forma mais correta possível.
3. Visualização ao vivo de documentos on-line e aplicativos de notas
   Para qualquer aplicativo que inclua uma caixa de entrada Markdown, como um sistema de publicação de blog, uma base de conhecimento ou um software de anotações pessoais, o Streamdown oferece uma janela de visualização WYSIWYG em tempo real que permite que os usuários vejam a renderização final à medida que digitam.

QA

1. P: Como a Streamdown se compara a react-markdown Qual é a principal diferença entre o
   R: A principal diferença está na capacidade de lidar com "fluxos".react-markdown foi projetado para renderizar um documento Markdown completo em uma única passagem. O Streamdown, por outro lado, é otimizado para lidar com fluxos de texto incompletos e continuamente digitados, analisando e renderizando antecipadamente a sintaxe não fechada (como o **文本), que é react-markdown Não posso fazer isso.
2. P: Por que a renderização de streaming é importante para aplicativos de IA?
   R: Em aplicativos de IA, esperar que um modelo gere uma resposta completa pode levar segundos ou mais. A renderização de streaming permite que os usuários comecem a ler assim que a primeira palavra é gerada e vejam a formatação em tempo real à medida que o texto é produzido, o que cria uma experiência de diálogo mais natural e imediata que evita a incerteza da espera.
3. P: Quais extensões de Markdown são compatíveis?
   R: Ele oferece suporte nativo ao GitHub style Markdown (GFM), incluindo tabelas, listas de tarefas e tachado. Ele também integra suporte para fórmulas matemáticas LaTeX (usando KaTeX) e gráficos Mermaid por meio de plug-ins.
4. P: Quais são os requisitos de sistema ou considerações para usar o Streamdown?
   R: O projeto requer o Node.js 18 ou posterior e o React 19.1.1 ou posterior. Além disso, para garantir que os estilos sejam exibidos corretamente, certifique-se de introduzir a folha de estilo do Streamdown em seu arquivo CSS global.