when connecting livekit room with react component....
# ask-ai
l
when connecting livekit room with react component. I got multiple transcription for one sentence. for example participant A says hi hello. in my UI it prints 3 hi hello. 3 (3 participants in room)
t
Thanks for reaching out, Rajadurai. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
Thanks — I hear you: you’re seeing the same spoken sentence printed multiple times in your UI (e.g., “hi hello” shown three times in a room with three participants). I’ll help you narrow the cause and give concrete fixes. First, quick diagnosis (what’s most likely happening) • Each participant or agent in the room is publishing the same transcription text (or an interim + final version) and your frontend is rendering every incoming text event without deduplication. • Transcriptions include a
segment_id
and an attribute
lk.transcription_final
. The same segment can be emitted by multiple sources or as interim + final updates, which will look like duplicates unless you filter them. What you can do right now (recommended fixes) 1. Use
segment_id
to dedupe and prefer final segments ◦ Only render when
lk.transcription_final === "true"
(ignore interim updates if you want only final text). ◦ Track seen
segment_id
values (Set or map) and skip duplicates. ◦ Example approach: ▪︎ On text stream event, read
segment_id
and
lk.transcription_final
. ▪︎ If not final, ignore (or show as temporary UI). ▪︎ If final and
segment_id
already processed, skip. 1. Filter by sender identity when appropriate ◦ If only one participant/agent should publish transcriptions, check
participantInfo.identity
and only render from that identity. 1. Ensure a single source generates transcriptions ◦ Audit your setup: do you have client-side STT (Web Speech API) + an agent STT + relays? If multiple systems transcribe the same audio, disable redundant paths so only one publishes to the room. 1. Use the React helper if available ◦ If you use
@livekit/components-react
, the
useTranscriptions()
hook handles deduplication and final/interim handling for you. Consider switching to that hook to simplify logic. Short sample logic (conceptual) • Maintain a Set of processed segment IDs. • On incoming transcription event: a. Read
segment_id
and
lk.transcription_final
. b. If not final -> ignore or buffer. c. If final and not in Set -> render and add to Set. d. If final and in Set -> ignore. A couple of quick questions so I can tailor exact code to your setup • Are you using
@livekit/components-react
and
useTranscriptions()
or a custom text stream handler? • Do you have any agent(s) or client-side STT running simultaneously (server agent + client speech capture)? • Can you share a small snippet of how you currently handle incoming transcription events in React? If you share those details I’ll give a short, copy-pasteable React example that matches your setup and fixes the duplicate output. Sources: Text and transcriptions | LiveKit Documentation | How to build an agent with speech-to-text input and text-only output | Live... | Pi Zero Transcriber | LiveKit Documentation