<script
  src="https://api.thinnest.ai/embed/widget.js"
  data-publishable-key="pk_live_abc123xyz"
  data-agent-id="YOUR_AGENT_PUBLIC_ID"
  data-widget-type="voice"
  async
></script>

User clicks voice button on your website
        ↓
Browser requests microphone permission
        ↓
WebRTC connection established with thinnestAI
        ↓
User speaks → STT → Agent processes → TTS → User hears response
        ↓
Call ends when user clicks "Hang up"

<!-- Widget with both chat and voice enabled -->
<script
  src="https://api.thinnest.ai/embed/widget.js"
  data-publishable-key="pk_live_abc123xyz"
  data-agent-id="YOUR_AGENT_PUBLIC_ID"
  data-widget-type="combined"
  async
></script>

npm install @thinnest-ai/voice-sdk

import ThinnestVoice from "@thinnest-ai/voice-sdk";

const voice = new ThinnestVoice("YOUR_API_KEY");

// Start talking to your agent
await voice.start("YOUR_AGENT_PUBLIC_ID");

// Listen for transcripts
voice.on("transcript", (msg) => {
  console.log(`${msg.role}: ${msg.text}`);
});

// End the call
voice.stop();

import { useState, useEffect, useRef } from "react";
import ThinnestVoice from "@thinnest-ai/voice-sdk";

function VoiceAgent({ agentId }: { agentId: string }) {
  const voiceRef = useRef<ThinnestVoice>();
  const [status, setStatus] = useState("idle");

  useEffect(() => {
    // Initialize with your API key
    voiceRef.current = new ThinnestVoice("YOUR_API_KEY");

    voiceRef.current.on("status-change", ({ status }) => setStatus(status));
    
    return () => voiceRef.current?.stop();
  }, []);

  const toggle = async () => {
    if (status === "active") {
      await voiceRef.current?.stop();
    } else {
      await voiceRef.current?.start(agentId);
    }
  };

  return (
    <div>
      <button onClick={toggle}>
        {status === "active" ? "End Call" : "Start Call"}
      </button>
      <p>Status: {status}</p>
    </div>
  );
}