markstream-vue: AI 채팅 및 LLM 토큰 스트림을 위한 깜박임 없는 스트리밍 Markdown 렌더러

해결하는 문제

일반적인 Markdown 렌더러는 완성된 문서를 대상으로 설계되어, 아직 생성 중인 텍스트(예: SSE나 WebSocket을 통한 AI 채팅 응답)를 렌더링할 때 깜박임과 성능 문제가 발생합니다. Markstream은 실시간으로 불완전한 Markdown 상태를 안정적이고 깜박임 없이 렌더링하는 방법을 제공합니다.

작동 원리

Markstream은 스트리밍 콘텐츠 전용으로 설계된 특수 렌더링 엔진을 사용합니다. 두 가지 주요 모드를 제공하는데, 긴 문서를 위한 가상 윈도우와 "타이핑" 효과를 위한 증분 배치가 있습니다. 원시 Markdown 문자열이나 사전 파싱된 노드를 처리할 수 있으며, Mermaid 다이어그램 및 코드 블록(Monaco/Shiki 사용)과 같은 무거운 요소에 대해 점진적 렌더링을 지원합니다.

대상 사용자

Vue 3, Nuxt, React, Svelte 5, Angular를 사용해 AI 채팅 인터페이스, LLM 기반 애플리케이션, 혹은 스트리밍 텍스트 출력을 필요로 하는 UI를 구축하는 개발자.

주요 특징

• Streaming-First Design: AI 토큰 스트림 동안 깜박임을 최소화하고 예측 가능한 메모리 사용량을 유지하도록 특별히 설계되었습니다.
• Multi-Framework Support: Vue, React, Svelte, Angular 전용 패키지를 제공합니다.
• Progressive Rendering: 콘텐츠가 증가함에 따라 업데이트되는 스트리밍 코드 블록 및 다이어그램(Mermaid)을 지원합니다.
• Rich Integrations: KaTeX(수학), Monaco(코드 편집기), Shiki(구문 강조)와 같은 선택적 지원을 포함합니다.
• Flexible Modes: 안정적인 속도를 위한 chat 모드와 보다 풍부한 레이아웃을 위한 docs 모드를 포함합니다.

요약

AI 채팅 및 LLM 토큰 스트림을 위한 스트리밍 Markdown 렌더러 제품군으로, 깜박임을 없애고 여러 JavaScript 프레임워크에서 불완전한 Markdown 상태를 처리하도록 설계되었습니다.

제목

markstream-vue: AI 채팅 및 LLM 토큰 스트림을 위한 깜박임 없는 스트리밍 Markdown 렌더러