vercel/streamdown

어떤 프로젝트인가요?

핵심 기능

• 01react-markdown의 드롭인 대체재
• 02스트리밍 중 미완성되거나 닫히지 않은 Markdown 처리
• 03GitHub Flavored Markdown 표, 작업 목록, 취소선 지원
• 04KaTeX를 통한 LaTeX 수식 렌더링
• 05렌더링 버튼이 있는 Mermaid 다이어그램
• 06Shiki를 사용한 코드 구문 하이라이팅

활용 사례

• React 또는 Next.js 앱에서 LLM의 채팅 응답 렌더링
• 코드, 표, 수식이 포함된 AI 생성 답변 표시
• AI 어시스턴트가 생성한 Mermaid 다이어그램 표시

빠른 시작

1. 1

   패키지를 설치합니다

   npm i streamdown
2. 2

   globals.css에 Tailwind @source 줄을 추가합니다

3. 3

   React 앱에서 Streamdown 컴포넌트로 스트리밍 Markdown을 렌더링합니다

사용 전 알아둘 점

• !프로젝트 메타데이터에 라이선스가 명확하게 지정되어 있지 않습니다.
• !스타일이 올바르게 렌더링되려면 Tailwind CSS와 shadcn/ui 스타일의 CSS 사용자 지정 속성이 필요합니다.

토픽

자주 묻는 질문

streamdown은(는) 무엇인가요?

AI 모델의 스트리밍 Markdown과 미완성 블록 렌더링을 위해 만든 react-markdown 드롭인 대체재입니다. Streamdown은 AI 모델 응답처럼 토큰 단위로 도착하는 콘텐츠를 렌더링하도록 설계된 React Markdown 렌더러입니다. 일반적인 Markdown 렌더러는 텍스트가 스트리밍되는 동안 닫히지 않은 코드 펜스나 작성 중인 표처럼 서식이 깨진 상태로 표시되는 경우가 많습니다. Streamdown은 미완성되거나 닫히지 않은 Markdown 블록을 처리해 콘텐츠가 늘어나는 동안에도 결과를 읽기 쉽게 유지합니다.

streamdown은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

streamdown은(는) Other 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

streamdown은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. streamdown의 마지막 커밋은 2026년 10월 19일입니다.

streamdown은(는) 어디에 사용할 수 있나요?

React 또는 Next.js 앱에서 LLM의 채팅 응답 렌더링 코드, 표, 수식이 포함된 AI 생성 답변 표시 AI 어시스턴트가 생성한 Mermaid 다이어그램 표시

streamdown는 어떻게 설치하나요?

패키지를 설치합니다: npm i streamdown globals.css에 Tailwind @source 줄을 추가합니다 React 앱에서 Streamdown 컴포넌트로 스트리밍 Markdown을 렌더링합니다

streamdown은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/vercel/streamdown