npm install livekit-client

npm install @livekit/components-react @livekit/components-styles

const response = await fetch(
  `https://api.vonative.com/v1/assistants/${ASSISTANT_UUID}/initiate-call`,
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${API_KEY}`,
    },
  }
);

const { session_id, room_name, token, livekit_url } = await response.json();

import { Room } from "livekit-client";

const room = new Room();

// Optional: enable microphone automatically on connect
room.on("connected", () => {
  room.localParticipant.setMicrophoneEnabled(true);
});

// Handle incoming audio tracks (the AI agent's voice)
room.on("trackSubscribed", (track, publication, participant) => {
  if (track.kind === "audio") {
    track.attach(document.getElementById("audio-container"));
  }
});

// Handle disconnection
room.on("disconnected", () => {
  console.log("Call ended");
});

await room.connect(livekit_url, token);

import {
  LiveKitRoom,
  RoomAudioRenderer,
  useVoiceAssistant,
  useTrackTranscription,
} from "@livekit/components-react";
import "@livekit/components-styles";

function VoiceCall({ livekitUrl, token }) {
  return (
    <LiveKitRoom
      serverUrl={livekitUrl}
      token={token}
      connect={true}
      onError={(error) => console.error("Connection error:", error)}
    >
      <RoomAudioRenderer />
      <VoiceControls />
    </LiveKitRoom>
  );
}

function VoiceControls() {
  const { agentAudioTrack, voiceAssistant } = useVoiceAssistant();
  const { segments } = useTrackTranscription(agentAudioTrack);

  return (
    <div>
      <p>Status: {voiceAssistant.state}</p>
      <div>
        {segments.map((seg, i) => (
          <p key={i}>{seg.text}</p>
        ))}
      </div>
    </div>
  );
}

// Vanilla JS
room.disconnect();

// React — just unmount the LiveKitRoom component

// Backend cleanup
await fetch(
  `https://api.vonative.com/v1/sessions/${session_id}/end`,
  {
    method: "POST",
    headers: { Authorization: `Bearer ${API_KEY}` },
  }
);