Build web voice agent experiences in Next.js with the Layercode React SDK.
Layercode makes it easy to build web-based voice agent applications in Next.js. In this guide we’ll walk you through a full-stack Next.js example voice agent, that lets users speak to a voice AI in their browser.Example code:layercodedev/example-fullstack-nextjs
This frontend example is part of a full-stack example that also includes a web voice agent React frontend. We recommend reading the Next.js backend
guide to get the most out of this example.
To get started, you’ll need a Layercode account and a voice agent you’ve created. If you haven’t done so yet, follow our Getting Started Guide.Then follow the setup instructions in the repo README file.
Disable React Strict Mode for Development: React Strict Mode renders components twice in development, which causes the Layercode voice agent hook to initialize twice. This results in duplicate voice agent sessions and can cause issues like hearing the voice agent speak twice.To disable React Strict Mode, remove or set reactStrictMode: false in your next.config.js:
We use the React SDKuseLayercodeAgent 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 Next.js application:
Copy
import { useLayercodeAgent } from '@layercode/react-sdk';import { MicrophoneIcon } from '../icons/MicrophoneIcon';export default function VoiceAgent() { const { agentAudioAmplitude, status } = useLayercodeAgent({ agentId: process.env.NEXT_PUBLIC_LAYERCODE_AGENT_ID, authorizeSessionEndpoint: '/api/authorize', });return (<div className="h-12 px-4 rounded-full flex items-center gap-2 justify-center select-none bg-black"> <MicrophoneIcon /></div>); }
The useLayercodeAgent hook accepts the following parameters:
An optional callback function for handling data messages (not shown in example above)
On mount, the useLayercodeAgent hook will:
Make a request to your authorize session endpoint to create new session and return the client session key. Here you can also do any user authorization checks you need for your app.
Establish a WebSocket connection to Layercode (using the client session key)
Capture microphone audio from the user and stream it to the Layercode voice agent for transcription
(At this stage, Layercode will call your Backend webhook to generate a response, and then convert the response from text to speech)
Playback audio of the voice agent’s response to the user in their browser, as it’s generated
The useLayercodeAgent 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.
To connect a client (browser) to your Layercode voice agent, you must first authorize the session. The SDK will automatically send a POST request to the path (or url if your backend is on a different domain) passed in the authorizeSessionEndpoint option. In this endpoint, you will need to call the Layercode REST API to generate a client_session_key and conversation_id (if it’s a new conversation).
If your backend is on a different domain, set authorizeSessionEndpoint to the full URL (e.g., https://your-backend.com/api/authorize).
Why is this required?
Your Layercode API key should never be exposed to the frontend. Instead, your backend acts as a secure proxy: it receives the frontend’s request, then calls the Layercode authorization API using your secret API key, and finally returns the 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:
Frontend:
The SDK automatically sends a POST request to your authorizeSessionEndpoint with a request body.
Your Backend:
Your backend receives this request, then makes a POST request to the Layercode REST API /v1/agents/web/authorize_session endpoint, including your LAYERCODE_API_KEY as a Bearer token in the headers.
Layercode:
Layercode responds with a client_session_key (and a conversation_id), which your backend returns to the frontend.
Frontend:
The SDK uses the client_session_key to establish a secure WebSocket connection to Layercode.
Example backend authorization endpoint code:
Copy
export const dynamic = "force-dynamic";import { NextResponse } from "next/server";export const POST = async (request: Request) => { // Here you could do any user authorization checks you need for your app const endpoint = "https://api.layercode.com/v1/agents/web/authorize_session"; const apiKey = process.env.LAYERCODE_API_KEY; if (!apiKey) { throw new Error("LAYERCODE_API_KEY is not set."); } const requestBody = await request.json(); if (!requestBody || !requestBody.agent_id) { throw new Error("Missing agent_id in request body."); } try { const response = await fetch(endpoint, { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}`, }, body: JSON.stringify(requestBody), }); if (!response.ok) { const text = await response.text(); throw new Error(text || response.statusText); } return NextResponse.json(await response.json()); } catch (error: any) { console.log("Layercode authorize session response error:", error.message); return NextResponse.json({ error: error.message }, { status: 500 }); }};
The AudioVisualization component is used to visualize the audio from the voice agent. It uses the agentAudioAmplitude value returned from the useLayercodeAgent hook to drive the height of the audio bars with a simple animation.
app/ui/AudioVisualization.tsx
Copy
export function AudioVisualization({ amplitude, height = 46 }: { amplitude: number; height?: number }) { // Calculate the height of each bar based on amplitude const maxHeight = height; const minHeight = Math.floor(height / 6); const barWidth = Math.floor(minHeight); // Create multipliers for each bar to make middle bars taller const multipliers = [0.2, 0.5, 1.0, 0.5, 0.2]; // Boost amplitude by 7 and ensure it's between 0 and 1 const normalizedAmplitude = Math.min(Math.max(amplitude * 7, 0), 1); return ( <div className="w-auto flex items-center gap-[2px]" style={{ height: `${height}px` }}> {multipliers.map((multiplier, index) => { const barHeight = minHeight + normalizedAmplitude * maxHeight * multiplier; return ( <div key={index} className="flex flex-col items-center" style={{ height: `${barHeight}px`, width: `${barWidth}px`, }} > {/* Top rounded cap */} <div className="bg-[#FF5B41] dark:bg-[#FF7B61] transition-all duration-20" style={{ width: "100%", height: `${barWidth}px`, borderTopLeftRadius: "9999px", borderTopRightRadius: "9999px", }} /> {/* Middle straight section */} <div className="bg-[#FF5B41] dark:bg-[#FF7B61] transition-all duration-20" style={{ width: "100%", height: `calc(100% - ${2 * barWidth}px)`, borderRadius: 0, }} /> {/* Bottom rounded cap */} <div className="bg-[#FF5B41] dark:bg-[#FF7B61] transition-all duration-20" style={{ width: "100%", height: `${barWidth}px`, borderBottomLeftRadius: "9999px", borderBottomRightRadius: "9999px", }} /> </div> ); })} </div> );}
The ConnectionStatusIndicator component is used to display the connection status of the voice agent. It uses the status value returned from the useLayercodeAgent hook to display the connection status.
Because the useLayercodeAgent 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 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 agent and set the Turn Taking to Push to Talk.
