Add a voice AI agent to your app

"use client";

import { useVoxera } from "@voxera/sdk-react";

export function VoiceButton() {
  const call = useVoxera();

  return (
    <section aria-label="Voice assistant">
      <button
        type="button"
        disabled={call.isBusy}
        onClick={() => {
          if (call.isActive) {
            void call.leave();
          } else {
            void call.start({
              appKey: "vx_pk_live_...", // Publishable key, never vx_sk_*.
              serverUrl: "https://rtc.voxera-voice.com",
              agentId: "your-agent-id",
            });
          }
        }}
      >
        {call.isBusy ? "Connecting…" : call.isActive ? "End call" : "Talk to the agent"}
      </button>
      <p role="status">{call.connectionStatus}</p>
      {call.error ? <p role="alert">{call.error}</p> : null}
      {call.autoplayBlocked ? (
        <button type="button" onClick={() => void call.resumeAudio()}>
          Tap to hear the agent
        </button>
      ) : null}
      {call.messages.map((message) => (
        <p key={message.id}><strong>{message.role}:</strong> {message.content}</p>
      ))}
    </section>
  );
}