AI Twin Player Integration

npm install @streamoji/aitwin

function TwinDemo() {
  const twinRef = useRef<AiTwinHandle>(null);

  return (
    <AiTwin
      ref={twinRef}
      id="olivia"
      onReady={() => console.log("face ready")}
      onStatusChange={(status) => console.log("status", status)}
      onError={(message) => console.error(message)}
    />
  );
}

<button
  type="button"
  onClick={() => void twinRef.current?.speakText("Hi, how are you?")}
>
  Speak
</button>

<button
  type="button"
  onClick={() => twinRef.current?.stop()}
>
  Stop
</button>

import { useRef } from "react";
import {
  AiTwin,
  fetchAiTwin,
  type AiTwinHandle,
} from "@streamoji/aitwin";

function VoiceTwin() {
  const twinRef = useRef<AiTwinHandle>(null);

  const handleConnect = async () => {
    const authToken = "client_…"; // from your backend
    const twin = await fetchAiTwin("modi");

    await twinRef.current?.connect({
      authToken,
      voiceId: twin.voiceId,              // optional
      personaId: twin.knowledgeContextId, // optional, when present
      speakingRate: 0.85,                 // optional, default 0.85
    });
  };

  const handleDisconnect = async () => {
    await twinRef.current?.disconnect();
  };

  return (
    <>
      <AiTwin
        ref={twinRef}
        id="modi"
        authToken="client_…"
        onUserTranscript={(text, final) => {
          if (final) console.log("user:", text);
        }}
        onBotOutput={(text) => console.log("bot:", text)}
        onStatusChange={(status) => console.log("status:", status)}
        onError={(msg) => console.error(msg)}
      />
      <button type="button" onClick={() => void handleConnect()}>
        Connect mic
      </button>
      <button type="button" onClick={() => void handleDisconnect()}>
        Disconnect
      </button>
    </>
  );
}

curl -X POST "https://us-central1-streamoji-265f4.cloudfunctions.net/getAiTwinAuthToken" \
  -H "Content-Type: application/json" \
  -H "Client-Id: YOUR_CLIENT_ID" \
  -H "Client-Secret: YOUR_64_CHAR_API_KEY" \
  -d '{
    "userId": "end-user-123",
    "userName": "Jane Doe"
  }'

// Backend only — never run this in the browser
const CLIENT_ID = process.env.AITWIN_CLIENT_ID;
const CLIENT_SECRET = process.env.AITWIN_CLIENT_SECRET;

async function getAiTwinAuthToken({
  userId,
  userName,
  maxAvatarCreations,
  maxCreditsUtilization,
  expiresIn,
}) {
  const body = { userId, userName };
  if (typeof maxAvatarCreations === "number") {
    body.maxAvatarCreations = maxAvatarCreations;
  }
  if (typeof maxCreditsUtilization === "number") {
    body.maxCreditsUtilization = maxCreditsUtilization;
  }
  if (typeof expiresIn === "number") {
    body.expiresIn = expiresIn; // seconds; -1 = no expiry; omit = 30 min default
  }

  const response = await fetch(
    "https://us-central1-streamoji-265f4.cloudfunctions.net/getAiTwinAuthToken",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Client-Id": CLIENT_ID,
        "Client-Secret": CLIENT_SECRET,
      },
      body: JSON.stringify(body),
    },
  );

  const data = await response.json();
  if (!response.ok || !data.success) {
    throw new Error(data.error ?? "Auth token generation failed");
  }

  return data.authToken; // e.g. "client_eyJ..."
}

// Frontend — pass the token from your backend API
<AiTwin
  ref={twinRef}
  id="olivia"
  authToken={authToken}
/>