Next.js

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

​

Setup

To get started, you’ll need a Layercode account and a voice pipeline 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.

​

How it works

​

Connect to a Layercode voice pipeline

We use the React SDK 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 Next.js application:

import { useLayercodePipeline } from '@layercode/react-sdk';
import { MicrophoneIcon } from '../icons/MicrophoneIcon';

export default function VoiceAgent() {
  const { agentAudioAmplitude, status } = useLayercodePipeline({
    pipelineId: process.env.NEXT_PUBLIC_LAYERCODE_PIPELINE_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 useLayercodePipeline hook accepts the following parameters:

• Your pipeline ID, found in the Layercode Dashboard
• The endpoint to authorize the client session (see Authorize Client Session)
• An optional callback function for handling data messages (not shown in example above)

On mount, the useLayercodePipeline hook will:

1. 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.
2. Establish a WebSocket connection to Layercode (using the client session key)
3. Capture microphone audio from the user and stream it to the Layercode voice pipeline for transcription
4. (At this stage, Layercode will call the Hosted Backend or Your Backend webhook to generate a response, and then convert the response from text to speech)
5. Playback audio of the voice agent’s response to the user in their browser, as it’s generated

The 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.

By default, your voice pipeline will handle turn taking in automatic mode. But you can configure your voice pipeline to use push to talk mode. If you are using push to talk mode see the push-to-talk instructions in the repo README and read about how the VoiceAgentPushToTalk component works below.

​

Authorizing Sessions

To connect a client (browser) to your Layercode voice pipeline, 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 session_id (if it’s a new session).

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:

1. Frontend: The SDK automatically sends a POST request to your authorizeSessionEndpoint with a request body.

2. Your Backend: Your backend receives this request, then makes a POST request to the Layercode REST API /v1/pipelines/authorize_session endpoint, including your LAYERCODE_API_KEY as a Bearer token in the headers.

3. Layercode: Layercode responds with a client_session_key (and a session_id), which your backend returns to the frontend.

4. Frontend: The SDK uses the client_session_key to establish a secure WebSocket connection to Layercode.

Example backend authorization endpoint code:

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/pipelines/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.pipeline_id) {
    throw new Error("Missing pipeline_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 });
  }
};

​

Components

​

AudioVisualization

The 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.

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>
  );
}

​

ConnectionStatusIndicator

The 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.

export function ConnectionStatusIndicator({ status }: { status: string }) {
  return (
    <div className="justify-self-start flex items-center gap-2 bg-white dark:bg-gray-800 sm:px-3 p-1 rounded-full shadow-sm dark:shadow-gray-900/30">
      <div className={`w-3 h-3 rounded-full ${status === "connected" ? "bg-green-500" : status === "connecting" ? "bg-yellow-500" : "bg-red-500"}`} />
      <span className="text-sm text-gray-700 dark:text-gray-300 hidden sm:block">
        {status === "connected" ? "Connected" : status === "connecting" ? "Connecting..." : status === "error" ? "Connection Error" : "Disconnected"}
      </span>
    </div>
  );
}

​

VoiceAgentPushToTalk (optional)

Because the 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 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.

import { useLayercodePipeline } from '@layercode/react-sdk';
import { AudioVisualization } from './AudioVisualization';
import { ConnectionStatusIndicator } from './ConnectionStatusIndicator';
import { MicrophoneButtonPushToTalk } from './MicrophoneButtonPushToTalk';

export default function VoiceAgentPushToTalk() {
  const { agentAudioAmplitude, status, triggerUserTurnStarted, triggerUserTurnFinished } = useLayercodePipeline({
    pipelineId: process.env.NEXT_PUBLIC_LAYERCODE_PIPELINE_ID!,
    authorizeSessionEndpoint: '/api/authorize',
    onDataMessage: (data) => {
      console.log('Received data msg', data);
    },
  });

return (

<div className="w-96 h-96 border border-white rounded-lg flex flex-col gap-20 items-center justify-center">
  <h1 className="text-gray-800 text-xl font-bold">Voice Agent Demo</h1>
  <AudioVisualization amplitude={agentAudioAmplitude} height={75} />
  <div className="flex flex-col gap-4 items-center justify-center">
    <MicrophoneButtonPushToTalk triggerUserTurnStarted={triggerUserTurnStarted} triggerUserTurnFinished={triggerUserTurnFinished} />
    <ConnectionStatusIndicator status={status} />
  </div>
</div>
); }