Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
AI 채팅 스트리밍 환경에서 발생하는 Markdown 렌더링 불안정성 문제를 해결하기 위한 React 컴포넌트 라이브러리를 소개합니다. 기존 Markdown 파서는 불완전한 상태의 접두사 처리에 취약하여 레이아웃이 요동치는 문제가 있었습니다. 이 라이브러리는 AI 앱에 최적화된 스트리밍 안전 Markdown 렌더링을 제공합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기AI 채팅 UI를 만들어 본 적이 있다면 이런 경험을 했을 겁니다: 모델이 코드 블록의 절반만 스트리밍하다가 갑자기 전체 답변이 거대한 고정폭(monospace) 텍스트 덩어리로 변하는 경우입니다. **는 볼드체 시작 태그인데 닫히지 않습니다. 링크는 [text](htt로 표시됩니다. 그러다가 다음 토큰이 도착하면 모든 것이 다시 점프합니다.
저희는 이런 문제에 너무 자주 직면해서, 이를 해결하기 위한 컴포넌트 라이브러리를 구축하게 되었습니다: **anythic/ui**는 AI 앱을 위한 오픈 소스 React 컴포넌트입니다.
Markdown 파서는 전체 문서를 받으리라 가정합니다. 하지만 스트리밍 중에는 접두사(prefix)만 받게 됩니다:
Here is the fix:
function add(a, b) {
return a +
코드 울타리가 열려 있기 때문에, 아직 도착하지 않은 텍스트를 포함하여 그 뒤의 모든 것이 코드로 처리됩니다. 토큰이 올 때마다 레이아웃이 앞뒤로 요동칩니다.
...
import { Markdown } from "@anythic/ui";
<Markdown>{streamingText}</Markdown>
## AI 인터페이스의 나머지 부분
...
npm i @anythic/ui
이 저장소에는 모든 컴포넌트 스크린샷과 사용자의 Gemini 키로 로컬에서 실행할 수 있는 데모 앱이 포함되어 있습니다:
👉 [https://github.com/anythic/anythic-ui](https://github.com/anythic/anythic-ui)
MIT 라이선스입니다. 여러분의 피드백을 환영합니다: AI UI를 구축할 때 가장 짜증 나는 부분은 무엇이며, 다음에 어떤 컴포넌트를 만들어야 할까요?
[](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fu3v6au5rbqa7ji9qr1sp.png)