AI 스트리밍 텍스트 렌더링을 react-markdown에서 Streamdown으로 바꾸기

Install

npm i streamdown

누구에게 맞나

이 스킬은 이미 React에서 Markdown을 렌더링하며 AI 스트리밍 출력용으로 바꿀 준비가 된 사람에게 맞다. 공식은 Streamdown을 react-markdown의 바로 교체품으로 쓰며 AI 구동 스트리밍용으로 설계한다. 이미 Tailwind를 쓰고 globals.css를 바꿀 수 있는 프로젝트에도 맞다.

아직 React 앱이 없거나 스타일 입구를 바꾸지 않을 사람에게는 맞지 않는다. 원문은 Tailwind의 globals.css를 업데이트해 Streamdown이 쓰는 유틸리티 클래스를 Tailwind가 감지하게 하라고 요구한다. 그 변수가 정의되지 않으면 컴포넌트에 배경이나 테두리가 없거나 간격이 잘못될 수 있다.

공식 저장소는

https://github.com/vercel/streamdown

해당 페이지에 이미 적힌 명령을 따른다. 사용법은 React 앱에서 AI SDK와 함께 쓰는 것으로 적혀 있으나 보이는 원문에는 완전한 컴포넌트 속성표가 없다.

3분 안에 첫 시도 끝내기

공식이 적은 이 한 패키지 설치 경로만 탄다.

전제: 현재 디렉터리는 의존성을 써도 되는 React 프로젝트이고 이 머신에서 npm을 실행할 수 있다. 먼저 확인한다: npm i streamdown는 의존성 목록을 바꾼다. 아직 이 프로젝트를 바꾸고 싶지 않으면 실행하지 말 것. 이 단계에서는 프로덕션 스타일을 바꾸지 말고 배포도 하지 말 것.

설치 위치: 프로젝트 루트에서 위 부작용을 확인한 뒤 실행한다:

npm i streamdown

저위험 확인: 패키지를 넣은 뒤 먼저 에이전트가 바꿔야 할 Tailwind globals.css를 읽기 전용으로 가리키고, Tailwind가 Streamdown 유틸리티 클래스를 감지해야 한다고 설명하게 한다. CSS를 마음대로 쓰게 하지 말고 나타나지 않은 @source 경로나 변수 이름도 지어내지 말 것. AI SDK로 스트리밍 텍스트를 렌더링하려면 먼저 react-markdown을 바꿀 그 컴포넌트만 표시한 뒤 확인 후 바꾼다.

성공 신호: 의존성에 streamdown가 나타나고 다음 단계가 반드시 globals.css를 바꾸는 것임을 안다. 에이전트가 스타일을 건너뛰고 바로 올릴 수 있다고 하면 멈춘다.

사용 사례

사례 1: 기존 react-markdown을 Streamdown으로 바꿔 AI 스트리밍 Markdown을 렌더링한다. 공식 설치 명령은 npm i streamdown. 이미 React 렌더 자리가 있고 먼저 설치한 뒤 교체 지점을 대조하려는 사람에게 맞다. 설치는 디스크에 쓰므로 실행 전 확인한다. 원문은 「AI SDK와 함께 쓸 수 있다」고만 쓰고 스트리밍 인터페이스 필드를 나열하지 않으므로 props를 스스로 보태지 말 것.

사례 2: Tailwind 감지와 스타일 변수를 맞춘다. 원문은 globals.css 업데이트를 요구하며 그렇지 않으면 유틸리티가 감지되지 않을 수 있다. 변수가 정의되지 않으면 배경·테두리 누락이나 잘못된 간격이 날 수 있다. 이미 패키지를 넣었고 스타일 입구를 바꿀 준비가 된 사람에게 맞다. CSS를 바꾸기 전에 백업하거나 패치 미리보기를 낸다. 원문은 이 구간에 완전한 변수 목록을 붙이지 않으므로 변수 이름을 지어내지 말 것.

사용 경계

공식 설치 명령은 원문에 한 줄만 적혀 있다: npm i streamdown. 나타나지 않은 설치기를 주 경로에 넣지 말 것. react-markdown의 교체로 자리 잡으며 AI 스트리밍을 향하고, 비 React 또는 비 Tailwind 프로젝트에서 쓸 수 있음을 증명하지 않는다.

스타일은 단단한 전제다. Tailwind globals.css를 업데이트하고 그 변수를 정의하지 않으면 겉모습이 빠진다. AI SDK 용법은 「이렇게 쓸 수 있다」까지만 적혀 있다. 완전한 예제 코드가 없으면 공식 컴포넌트 조각이 있는 척하지 말 것.

공식 페이지는