Can I display transcription of what ai agent says ...
# ask-ai
h
Can I display transcription of what ai agent says in react? Is useTrackTranscription good way to do it or are there any other ways ?
t
Thanks for reaching out, Pavel. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
Absolutely,
useTrackTranscription
is a great choice for displaying the transcription of an AI agent in React. This hook listens to transcription events from a specific audio track and provides the latest segments in real time, which makes it perfect for showing live transcriptions. Here are a couple of common ways to approach this: • Direct Use of `useTrackTranscription`: You can apply it directly to the agent's audio track that you get through
useVoiceAssistant()
. It’s also possible to combine this with the local participant’s transcriptions to create a full chat-like interface. • Custom Hook: Another option is to build a custom hook, like
useCombinedTranscriptions
, which merges and sorts transcriptions from both the AI agent and the user. This way, you can style the UI differently depending on the speaker’s role. When it comes to rendering, a chat-style layout works really well. You might want to auto-scroll to the latest messages and use the
final
flag to distinguish between partial and final transcriptions. If you’d like, I’m happy to share more details or some code examples to help you get started—just let me know! Sources: src/transcriptions/TranscriptionTile.tsx | packages/react/src/hooks/useTrackTranscription.ts | complex-agents/nutrition-assistant/nutrition-assistant-frontend/hooks/useCo... | Transcriptions | LiveKit Docs | web/src/hooks/use-agent.tsx
h
Great. One more question please, I received a message `closing agent session due to participant disconnect (disable via
RoomInputOptions.closeOnDisconnect=False
)` Where I can find this room input options? I would like to set closeOnDisconnect to false and set some interval, if possible, after which agent session will be closed, for example after 3 minutes
t
I'm glad you're exploring the
RoomInputOptions
class in the LiveKit Agents SDK! This class helps you configure how input behaves during agent sessions. If you'd like to set
closeOnDisconnect
to
false
, you can easily do this by including it in the
RoomInputOptions
when starting your agent session. Here are some helpful examples to guide you: • Python:
Copy code
session = AgentSession()
room_io = RoomIO(
    agent_session=session,
    room=ctx.room,
    input_options=RoomInputOptions(close_on_disconnect=False)
)
await room_io.start()
TypeScript:
Copy code
await session.start({
  agent,
  room,
  inputOptions: { closeOnDisconnect: false }
});
At the moment, there isn’t a built-in feature to set a custom delay before closing the agent session after a participant disconnects. However, if you want to add a delay like 3 minutes, you can manage this manually by listening to session events such as
on("close")
or
on_user_turn_completed
and then triggering your own logic. If you have any questions or need a hand with implementing this, please don’t hesitate to reach out—I’m here to help! Sources: How to capture real-time agent transcriptions during conversations | examples/other/transcription/multi-user-transcriber.py | agents/src/voice/agent_session.ts
h
after a refresh, I receive this error message, but in version 0.x, I could refresh during the session and reconnect without any errors usr/src/app/node_modules/@livekit/agents/src/stream/deferred_stream.ts:52 livekit-1 | throw new Error('Stream source already set');
t
I'd love to help you get to the bottom of this! Could you share a bit more about your setup and what you were doing when this error popped up? Specifically: • Which version of the LiveKit Agents SDK are you currently working with? • Are you using any custom logic to handle reconnecting during a session? • Does this error happen every time you refresh, or just sometimes under certain conditions? Having these details will really help us figure out what's going on and find the best way to fix it together.
h
it is realtime model, openai plugin, node.js, there is no custom logic for reconnect, on front end I have livekit react, it happens after every refresh, caused by migrating to 1.0.3
t
It looks like you're encountering the error
'Stream source already set'
because the
DeferredReadableStream
in the LiveKit Agents SDK doesn’t allow changing the source once it’s been set. This is a bit stricter in version 1.0.3 compared to earlier versions, so I totally understand how this can be a bit tricky! Here are some friendly tips to help you resolve this and manage reconnections smoothly: 1. Create new session and stream objects: It’s best to create fresh instances of
DeferredReadableStream
and
RealtimeSession
whenever you refresh or reconnect. Try to avoid reusing streams across different sessions to keep things clean. 2. Use React lifecycle hooks: Hooks like
useEffect
can be really helpful to make sure your session initializes just once per session. Also, remember to clean up streams and sessions when components unmount or you reconnect. 3. Handle reconnection events carefully: Wait for the
RoomEvent.Reconnected
event before you reinitialize agent sessions. It’s a good idea to avoid reinitializing during
RoomEvent.Reconnecting
to prevent issues. 4. Let the built-in recovery do its magic: The OpenAI plugin’s
RealtimeSession
is designed to restore state and reconnect to the API automatically. Trusting it to handle reconnections can save you a lot of hassle instead of manually reassigning streams. If any of this feels unclear or if you’d like some code examples to get you started, just let me know—I’m here to help! Sources: .changeset/khaki-onions-watch.md