How to build a voice agent in Next.js

.env.local

CRACKLE_API_KEY=ck_your_key_here
CRACKLE_AGENT_ID=ua_your_agent_id

app/api/call/route.ts

// app/api/call/route.ts: starts a call with your API key, which never leaves the server.
export async function POST() {
  const response = await fetch('https://goblins-call-api.onrender.com/v1/calls', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.CRACKLE_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ agentId: process.env.CRACKLE_AGENT_ID }),
  });
  if (!response.ok) return Response.json(await response.json(), { status: 502 });

  // Only what the browser needs to join one room.
  const { callId, livekitUrl, token } = await response.json();
  return Response.json({ callId, livekitUrl, token });
}

Terminal

npm install livekit-client

app/talk-button.tsx

// app/talk-button.tsx
'use client';

import { useEffect, useRef, useState } from 'react';
import { Room, RoomEvent } from 'livekit-client';

export default function TalkButton() {
  const room = useRef<Room | null>(null);
  const [state, setState] = useState<'idle' | 'connecting' | 'live'>('idle');

  // Leaving the page hangs up, even while the call is still connecting.
  useEffect(() => () => {
    room.current?.disconnect();
    room.current = null;
  }, []);

  async function start() {
    // Hold the room before anything can fail, so a failure or leaving the page always reaches it.
    const next = new Room();
    room.current = next;
    setState('connecting');

    const ended = () => {
      if (room.current !== next) return;
      room.current = null;
      setState('idle');
    };
    // Play the agent's voice as soon as it arrives, and remove it when the call ends.
    next.on(RoomEvent.TrackSubscribed, (track) => {
      if (track.kind === 'audio') document.body.appendChild(track.attach());
    });
    next.on(RoomEvent.TrackUnsubscribed, (track) => track.detach().forEach((element) => element.remove()));
    next.on(RoomEvent.Disconnected, ended);

    try {
      const response = await fetch('/api/call', { method: 'POST' });
      if (!response.ok) throw new Error('The call could not be started.');
      const session = await response.json();
      if (room.current !== next) return; // the page was left while waiting

      await next.connect(session.livekitUrl, session.token);
      await next.localParticipant.setMicrophoneEnabled(true);
      if (room.current === next) setState('live');
    } catch {
      // The room may be connected already, as when the visitor blocks the microphone: leave it.
      next.disconnect();
      ended();
    }
  }

  if (state === 'live') return <button onClick={() => room.current?.disconnect()}>Hang up</button>;
  return (
    <button onClick={start} disabled={state === 'connecting'}>
      {state === 'connecting' ? 'Connecting…' : 'Talk to us'}
    </button>
  );
}