Example · Next.js

1. Pasang SDK

npm install @vonip/sdk

2. Server action TTS (App Router)

app/actions/tts.ts

"use server";
export async function generateVoice(text: string) {
  const r = await fetch(`${process.env.VONIP_API_URL}/v1/tts`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.VONIP_SECRET_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ text, voice: "anime_voice" }),
  });
  if (!r.ok) throw new Error("Terjadi kendala sementara, coba lagi nanti.");
  return r.json(); // { audio_url, ... }
}

3. Modal SDK di client component

app/components/VoiceButton.tsx

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

export function VoiceButton() {
  useEffect(() => {
    Vonip.init({ apiKey: process.env.NEXT_PUBLIC_VONIP_KEY! });
    Vonip.on("generated", ({ audioUrl }) => {
      // upload ke server / kirim ke channel chat / dsb
      console.log(audioUrl);
    });
  }, []);

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

4. Environment

.env.local

NEXT_PUBLIC_VONIP_KEY=pk_test_xxx
VONIP_SECRET_KEY=sk_live_xxx
VONIP_API_URL=https://api.vonip.ai