Thanks — you want live transcripts from a LiveKit room displayed in a React client. I can help with that. Below are two straightforward approaches depending on how much control you need: the recommended easy way (hook provided by LiveKit UI components) and a manual text-stream handler if you need custom behavior. Which approach do you want to use? Or tell me if you’re using a specific stack (plain JS/React, Next.js, or @livekit/components-react) and whether STT/transcription is already enabled on your Room — that will help me give exact code. Recommended (easy): use the

useTranscriptions

hook • What it does: subscribes to the transcription text stream (

lk.transcription

) and returns live transcription segments, including interim and final segments. • How to use: a. Install and import the hook from

@livekit/components-react

. b. Call

useTranscriptions()

in a component and render the returned segments. • Example snippet:

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

function TranscriptionDisplay() {
  const transcriptions = useTranscriptions();

  return (
    <div>
      {transcriptions.map(segment => (
        <div key={segment.id}>
          <strong>{segment.participant?.identity}:</strong> {segment.text}
          { !segment.isFinal && <em> (interim)</em> }
        </div>
      ))}
    </div>
  );
}

• Notes: The hook exposes

segment.isFinal

so you can treat interim vs final text differently. Manual (advanced): register a text stream handler on the Room • What it does: gives full control over reading transcription messages and metadata (like

lk.transcribed_track_id

,

lk.segment_id

, and a final-segment flag). • How to use: a. From your connected

room

object, call

room.registerTextStreamHandler('lk.transcription', handler)

. b. In the handler, read the message and check attributes to detect final segments. • Example pattern:

room.registerTextStreamHandler('lk.transcription', async (reader, participantInfo) => {
  const text = await reader.readAll();
  const isFinal = reader.info.attributes['lk.transcription_final'] === 'true';
  // update your React state / UI with { participantInfo.identity, text, isFinal }
});

• Notes: Use this if you need custom aggregation, filtering, smoothing, or to forward segments to another service. Pre-checks / requirements • Ensure STT/transcription is enabled for the Room/agent (for example via

transcriptionEnabled: true

on agent setup) so LiveKit publishes

lk.transcription

streams. • Confirm your client is connected and has permission to receive text streams. Next steps I can help with • Provide a full React component that integrates transcriptions into your UI (with state management). • Show how to enable transcription in your Room/agent config if you tell me which server-side SDK you’re using (Node, Python, etc.). • Help wire interim/final handling so you only persist final segments. Which option should I give full code for — the hook-based approach or the manual text-stream handler? And are transcriptions already enabled on your room? Sources: Text and transcriptions | LiveKit Documentation | examples/voice_agents | livekit/livekit_composite | DeepWiki