Example · React (Vite / CRA)

import { useEffect } from "react";
import Vonip from "@vonip/sdk";

export default function App() {
  useEffect(() => {
    Vonip.init({ apiKey: import.meta.env.VITE_VONIP_KEY });
    Vonip.on("generated", (d) => {
      const a = new Audio(d.audioUrl); a.play();
    });
  }, []);

  return (
    <button onClick={() => Vonip.open({ mode: "voice" })}>
      🎙 Coba AI Voice
    </button>
  );
}

Hook reusable

import { useEffect, useState } from "react";
import Vonip from "@vonip/sdk";

export function useVonip(apiKey: string) {
  const [ready, setReady] = useState(false);
  useEffect(() => {
    Vonip.init({ apiKey });
    setReady(true);
  }, [apiKey]);

  return {
    ready,
    open: (mode: "voice" | "tts" | "convert" = "voice") => Vonip.open({ mode }),
    tts: Vonip.tts.bind(Vonip),
    on: Vonip.on.bind(Vonip),
  };
}