Build web voice agent experiences in React with the Layercode React SDK.
<React.StrictMode>
from your src/index.js
or src/index.tsx
:React.StrictMode
is not wrapping your app in src/main.tsx
.useLayercodePipeline
hook, which handles all the complexity required for real-time, low-latency, two-way voice agent interactions.
Here’s a simplified example of how to use the React SDK in a React application:
useLayercodePipeline
hook accepts:
useLayercodePipeline
hook will:
useLayercodePipeline
hook returns an object with the following properties:
status
: The connection status of the voice agent. You can show this to the user to indicate the connection status.agentAudioAmplitude
: The amplitude of the audio from the voice agent. You can use this to drive an animation when the voice agent is speaking.AudioVisualization
component is used to visualize the audio from the voice agent. It uses the agentAudioAmplitude
value returned from the useLayercodePipeline hook to drive the height of the audio bars with a simple animation.
ConnectionStatusIndicator
component is used to display the connection status of the voice agent. It uses the status
value returned from the useLayercodePipeline hook to display the connection status.
useLayercodePipeline
hook handles all of the audio streaming and playback, in most cases the microphone button is simply a visual aid and doesn’t implement any logic. A simple microphone icon inside a circle will suffice in most cases.
Layercode does support ‘push-to-talk’ turn taking, as an alternative to automatic turn taking (read more about turn taking). When using ‘push-to-talk’ turn taking, holding down and releasing the MicrophoneButton
must send a websocket message to tell Layercode the user has started and finished talking. In this example, we provide an alternative VoiceAgentPushToTalk
component, that along with the MicrophoneButtonPushToTalk
component, handles this logic.
To use this mode, you’ll need to edit src/App.tsx
to use the VoiceAgentPushToTalk
component instead of the VoiceAgent
component. Then in your Layercode Dashboard, you’ll need to click Edit in the Transcription section of your voice pipeline and set the Turn Taking to Push to Talk.