The LayercodeClient is the core client for all JavaScript frontend SDKs, providing audio recording, playback, and real-time communication with the Layercode agent.
The endpoint to authorize the session (should return a client_session_key and session_id).
Note: From Mon Sep 1, 12:00 UTC, the response will include conversation_id instead of session_id (see REST API page).
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 || 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 }); }};