AI

Streaming Status Shows But No Text Appears

Issue

When using useChat, the status changes to "streaming" immediately, but no text appears for several seconds.

Background

The status changes to "streaming" as soon as the connection to the server is established and streaming begins - this includes metadata streaming, not just the LLM's generated tokens.

Solution

Create a custom loading state that checks if the last assistant message actually contains content:

'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>}
    </>
  );
}

You can also check for specific part types if you're waiting for something specific:

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