You're asking how to show a "thinking" state in the React LiveKit SDK while the LLM processes. Use the agent state LiveKit exposes — it includes

thinking

— and the React helper hook to read it. Example using

useVoiceAssistant

from `@livekit/components-react`:

import { useVoiceAssistant } from '@livekit/components-react';

function AgentStatus() {
  const { state } = useVoiceAssistant();

  return (
    <div>
      {state === 'thinking' ? (
        <div>
          <p>Agent is thinking...</p>
          {/* show spinner, animation, or waveform here */}
        </div>
      ) : (
        <p>Agent State: {state}</p>
      )}
    </div>
  );
}

Notes: • The

state

maps to the participant attribute

lk.agent.state

and can be

initializing

,

listening

,

thinking

, or

speaking

. • No extra setup is required — LiveKit manages the agent state during the agent lifecycle. • If you need the raw participant attribute instead of the hook, read

participant.getMetadata()

or the participant attributes API and watch for

agent_state_changed

events. Which approach do you prefer (hook vs. raw participant events)? Sources: Web and mobile frontends | LiveKit docs