Get started with Next.js (frontend)

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

'use client';
import VoiceAgent from './ui/VoiceAgent';

export default function Home() {
  return (
    <div className="w-full min-h-[80vh] flex items-center justify-center">
      <VoiceAgent />
    </div>
  );
}

import { Context } from 'hono';
import { env } from 'cloudflare:workers';

export const onRequestPost = async (c: Context) => {
  try {
    const response = await fetch("https://api.layercode.com/v1/agents/web/authorize_session", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${env.LAYERCODE_API_KEY}`,
      },
      body: JSON.stringify({ agent_id: "your-agent-id", conversation_id: null }),
    });
    if (!response.ok) {
      console.log('response not ok', response.statusText);
      return c.json({ error: response.statusText });
    }
    const data: { client_session_key: string; conversation_id: string; config?: Record<string, any> } = await response.json();
    return c.json(data);
  } catch (error) {
    return c.json({ error: error });
  }
};

import type { RequestHandler } from 'express';

export const onRequestPost: RequestHandler = async (req, res) => {
  try {
    const response = await fetch("https://api.layercode.com/v1/agents/web/authorize_session", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${process.env.LAYERCODE_API_KEY}`,
      },
      body: JSON.stringify({ agent_id: "your-agent-id", conversation_id: null }),
    });
    if (!response.ok) {
      console.log('response not ok', response.statusText);
      return res.status(500).json({ error: response.statusText });
    }
    const data: { client_session_key: string; conversation_id: string; config?: Record<string, any> } = await response.json();
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: (error as Error).message });
  }
};

import os
import httpx
from fastapi.responses import JSONResponse


@app.post("/authorize")
async def authorize_endpoint(request: Request):
    api_key = os.getenv("LAYERCODE_API_KEY")
    if not api_key:
        return JSONResponse({"error": "LAYERCODE_API_KEY is not set."}, status_code=500)
    try:
        body = await request.json()
    except Exception:
        return JSONResponse({"error": "Invalid JSON body."}, status_code=400)
    if not body or not body.get("agent_id"):
        return JSONResponse({"error": "Missing agent_id in request body."}, status_code=400)
    endpoint = "https://api.layercode.com/v1/agents/web/authorize_session"
    try:
        async with httpx.AsyncClient() as client:
            response = await client.post(
                endpoint,
                headers={
                    "Content-Type": "application/json",
                    "Authorization": f"Bearer {api_key}",
                },
                json=body,
            )
        if response.status_code != 200:
            return JSONResponse({"error": response.text}, status_code=500)
        return JSONResponse(response.json())
    except Exception as error:
        print("Layercode authorize session response error:", str(error))
        return JSONResponse({"error": str(error)}, status_code=500)

import { useButtonHold } from '../hooks/useButtonHold';
import { MicrophoneIcon } from '../icons/MicrophoneIcon';
export function MicrophoneButtonPushToTalk({ triggerUserTurnStarted, triggerUserTurnFinished }: { triggerUserTurnStarted: () => void; triggerUserTurnFinished: () => void }) {
  // When using push-to-talk turn taking in your Layercode voice agent, you'll need to call triggerUserTurnStarted and triggerUserTurnFinished when the user holds down the microphone button or spacebar.
  // The useButtonHold hook handles this state, and also include debouncing so that short accidental clicks are ignored.
  const { isVisuallyPressed, handlePressStart, handlePressEnd } = useButtonHold({
    onPressStart: triggerUserTurnStarted,
    onPressEnd: triggerUserTurnFinished,
    key: 'Space',
  });

  return (
    <button
      className={`h-12 px-4 rounded-full flex items-center gap-2 justify-center cursor-pointer outline-none focus:outline-none transition-colors duration-200 select-none ${
        isVisuallyPressed ? 'bg-[#FF5B41]' : 'bg-gray-800 dark:bg-gray-700 hover:bg-black dark:hover:bg-gray-800'
      }`}
      onMouseDown={handlePressStart}
      onMouseUp={handlePressEnd}
      onMouseLeave={handlePressEnd}
      onTouchStart={handlePressStart}
      onTouchEnd={handlePressEnd}
    >
      <div className="text-sm font-medium text-white whitespace-nowrap">Hold while speaking</div>
      <MicrophoneIcon />
    </button>
  );
}