useChat/useCompletion 스트림에 텍스트 대신 0:...이 보여요

useChat/useCompletion 스트림에 텍스트 대신 0:...이 보여요

커스텀 클라이언트 코드로 서버 응답을 처리하는데 채팅 UI에 0: "Je", 0: " suis", 0: "des"... 같은 게 스트리밍될 때 해결하는 방법을 알려드려요.

출처: 문서

본문

문제 (Issue)

커스텀 클라이언트 코드로 StreamingTextResponse로 보내진 서버 응답을 처리하고 있어요. AI SDK 버전 3.0.20 이상을 사용하고 있어요. 쿼리를 보내면 UI가 찾는 텍스트 대신 0: "Je", 0: " suis", 0: "des"... 같은 텍스트를 스트리밍해요.

배경 (Background)

AI SDK는 버전 3.0.20에서 스트림 데이터 프로토콜(stream data protocol)로 전환했어요. 데이터, 도구 호출 등을 지원하기 위해 다양한 스트림 part를 보내요. 보이는 것은 바로 raw 스트림 데이터 프로토콜 응답이에요.

해결 방법 (Solution)

몇 가지 옵션이 있어요:

  1. raw 텍스트 스트림을 보내려면 AI Core streamText 함수를 사용하세요:

    export async function POST(req: Request) {
  const { prompt } = await req.json();

  const result = streamText({
    model: openai.completion('gpt-3.5-turbo-instruct'),
    maxOutputTokens: 2000,
    prompt,
  });

  return createTextStreamResponse({
    stream: toTextStream({ stream: result.stream }),
  });
}

  2. AI SDK 버전을 3.0.19로 고정하세요. 그러면 raw 텍스트 스트림이 유지돼요.

더 알아보기 (Learn more)