Build web voice agent experiences in Next.js with the Layercode React SDK.
reactStrictMode: false
in your next.config.js
: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.authorizeSessionEndpoint
option. In this endpoint, you will need to call the Layercode REST API to generate a client_session_key
and session_id
(if it’s a new session).
authorizeSessionEndpoint
to the full URL (e.g., https://your-backend.com/api/authorize
).client_session_key
to the frontend.
This also allows you to authenticate your user, and set any additional metadata that you want passed to your backend webhook.
How it works:
authorizeSessionEndpoint
with a request body.
/v1/pipelines/authorize_session
endpoint, including your LAYERCODE_API_KEY
as a Bearer token in the headers.
client_session_key
(and a session_id
), which your backend returns to the frontend.
client_session_key
to establish a secure WebSocket connection to Layercode.
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.
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 app/page.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.