스트리밍 상태는 표시되는데 텍스트가 안 나올 때

스트리밍 상태는 표시되는데 텍스트가 안 나올 때 (Streaming Status Shows But No Text Appears)

useChat에서 상태가 "streaming"으로 바뀌는데 몇 초간 텍스트가 안 나타나는 상황을 다루는 문서예요. 상태가 '스트리밍'으로 바뀌는 것과 실제 LLM 토큰이 도착하는 시점 사이에 괴리가 있기 때문에, 커스텀 로딩 상태를 만들어야 하는 게 핵심이에요.

출처: 문서

본문

문제 (Issue)

useChat을 사용할 때 상태가 즉시 "streaming"으로 바뀌지만, 몇 초 동안 텍스트가 나타나지 않습니다.

배경 (Background)

서버와의 연결이 수립되고 스트리밍이 시작되는 순간 상태가 "streaming"으로 바뀝니다 — 여기에는 LLM이 생성한 토큰뿐 아니라 메타데이터 스트리밍까지 포함됩니다.

해결 방법 (Solution)

마지막 assistant 메시지에 실제로 콘텐츠가 들어있는지 확인하는 커스텀 로딩 상태를 만드세요:

'use client';

import { useChat } from '@ai-sdk/react';

export default function Page() {
  const { messages, status } = useChat();

  const lastMessage = messages.at(-1);

  const showLoader =
    status === 'streaming' &&
    lastMessage?.role === 'assistant' &&
    lastMessage?.parts?.length === 0;

  return (
    <>
      {messages.map(message => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, index) =>
            part.type === 'text' ? <span key={index}>{part.text}</span> : null,
          )}
        </div>
      ))}

      {showLoader && <div>Loading...</div>}
    </>
  );
}

특정한 것을 기다리고 있다면, 특정 파츠 타입을 확인할 수도 있습니다:

const showLoader =
  status === 'streaming' &&
  lastMessage?.role === 'assistant' &&
  !lastMessage?.parts?.some(part => part.type === 'text');

더 알아보기 (Learn more)

전체 사이트맵