vercel/streamdown

해결하는 문제

AI 모델에서 Markdown 콘텐츠를 스트리밍할 때 발생하는 포맷 문제를 해결합니다. 표준 Markdown 파서는 종료되지 않은 블록(예: 아직 스트리밍이 끝나지 않은 코드 블록)을 처리하는 데 어려움을 겪어 시각적으로 불편한 현상이 발생합니다. Streamdown은 이러한 부분적인 블록을 부드럽게 처리함으로써 원활한 렌더링 경험을 제공합니다.

작동 방식

Streamdown은 react-markdown의 즉시 사용 가능한 대체품입니다. remend를 사용해 종료되지 않은 블록을 파싱하고, AI에서 도착하는 새로운 토큰에 따라 효율적인 업데이트를 보장하기 위해 메모이제이션 렌더링을 포함합니다. 또한 수식과 다이어그램과 같은 특수 콘텐츠를 위한 다양한 플러그인과 통합됩니다.

대상 사용자

AI 채팅 인터페이스나 LLM 응답을 React 프론트엔드로 스트리밍하는 애플리케이션을 개발하는 개발자들입니다.

주요 특징

• 스트리밍 최적화: 레이아웃이 깨지지 않도록, 완전하지 않은 Markdown 블록을 특별히 설계하여 처리합니다.
• 풍부한 콘텐츠 지원: GitHub Flavored Markdown(테이블, 태스크 리스트), KaTeX를 통한 LaTeX 수식, Mermaid 다이어그램을 지원합니다.
• 개발자 경험: react-markdown 대체품으로 쉽게 통합 가능하며, Shiki 구문 강조 기능이 내장되어 있습니다.
• 보안: rehype-harden를 사용하여 안전한 콘텐츠 렌더링을 보장합니다.