React

npm install @vox-ai/react
# or
yarn add @vox-ai/react
# or
pnpm add @vox-ai/react

import { useConversation } from "@vox-ai/react";

const conversation = useConversation();

// 마이크 권한이 필요한 이유를 UI에서 안내한 후 호출
await navigator.mediaDevices.getUserMedia({ audio: true });

const conversation = useConversation({
  /* options */
});

const conversation = useConversation({
  onConnect: () => console.log("Connected"),
  onDisconnect: () => console.log("Disconnected"),
  onMessage: (message) => console.log(`${message.source}: ${message.text}`),
  onError: (error) => console.error("Error:", error),
  onStatusChange: (status) => console.log("Status:", status),
  onAgentStateChange: (agentState) => console.log("Agent state:", agentState),
});

const conversation = useConversation();

const conversationId = await conversation.startSession({
  agentId: "<your-agent-id>",
  apiKey: "<your-api-key>",
  visitorId: "visitor_1024",
});

await conversation.endSession();

conversation.setVolume({ volume: 0.5 });

const [value, setValue] = useState("");

return (
  <>
    <input value={value} onChange={(e) => setValue(e.target.value)} />
    <button
      onClick={async () => {
        await conversation.sendUserMessage(value);
        setValue("");
      }}
    >
      전송
    </button>
  </>
);

// 음소거
await conversation.setMicMuted(true);

// 해제
await conversation.setMicMuted(false);

const conversationId = conversation.getId();

const messages = conversation.getMessages();

const agentState = conversation.getAgentState();
// "initializing" | "idle" | "listening" | "thinking" | "speaking" | undefined

const inputLevel = conversation.getInputVolume();
const outputLevel = conversation.getOutputVolume();

const inputFrequency = conversation.getInputByteFrequencyData();
const outputFrequency = conversation.getOutputByteFrequencyData();

const changed = await conversation.changeInputDevice({
  inputDeviceId: "your-device-id",
});

const changed = await conversation.changeOutputDevice({
  outputDeviceId: "your-device-id",
});

const { status, agentState, isSpeaking, micMuted, messages } = useConversation();

const conversation = useConversation({
  textOnly: true,
});

await conversation.startSession({
  agentId: "<your-agent-id>",
  apiKey: "<your-api-key>",
});

await conversation.sendUserMessage("안녕하세요");

const conversationId = await conversation.startSession({
  agentId: "<your-agent-id>",
  apiKey: "<your-api-key>",
  dynamicVariables: {
    userName: "홍길동",
    userType: "premium",
    accountBalance: 50000,
  },
  metadata: {
    sessionId: "sess_abc123",
    source: "web-app",
  },
});

import { useConversation } from "@vox-ai/react";
import { useState } from "react";

function VoiceWidget() {
  const conversation = useConversation({
    onConnect: () => console.log("Connected"),
    onDisconnect: () => console.log("Disconnected"),
    onAgentStateChange: (agentState) => console.log("Agent state:", agentState),
    onMessage: (msg) => console.log(`${msg.source}: ${msg.text}`),
    onError: (err) => console.error("Error:", err),
  });

  const start = async () => {
    await navigator.mediaDevices.getUserMedia({ audio: true });
    await conversation.startSession({
      agentId: "your-agent-id",
      apiKey: "your-api-key",
    });
  };

  return (
    <div>
      <p>Status: {conversation.status}</p>
      <p>Agent State: {conversation.agentState ?? "unknown"}</p>
      <p>Speaking: {conversation.isSpeaking ? "Yes" : "No"}</p>

      <button
        onClick={start}
        disabled={conversation.status !== "disconnected"}
      >
        시작
      </button>
      <button
        onClick={async () => {
          await conversation.endSession();
        }}
      >
        종료
      </button>
    </div>
  );
}