import React, { useState } from 'react'; import { Play, MessageSquare, Mic, Volume2, Zap, AlertCircle, Copy, Check } from 'lucide-react'; const VoiceWebSocketDocs = () => { const [activeTab, setActiveTab] = useState('start'); const [copiedCode, setCopiedCode] = useState(null); const copyCode = (code, id) => { navigator.clipboard.writeText(code); setCopiedCode(id); setTimeout(() => setCopiedCode(null), 2000); }; const tabs = [ { id: 'start', label: 'Getting Started', icon: Play }, { id: 'send', label: 'Send Audio', icon: Mic }, { id: 'receive', label: 'Receive Response', icon: Volume2 }, { id: 'barge', label: 'Barge-in', icon: Zap } ]; const startMessage = { type: "start", token: "", session_id: "sess_1729958473000", agent_id: "agent-uuid", lang: "id", sr: 16000 }; const responses = { ready: { type: "ready", session_id: "sess_..." }, sttReady: { type: "stt.ready" }, partial: { type: "stt.partial", text: "Halo apa kabar" }, final: { type: "stt.final", text: "Halo apa kabar hari ini?" }, sentence: { stepType: "sentence", chatId: "9e4...", sentenceId: 123456, contentStep: "Halo! Senang bertemu dengan Anda.", audioBase64: "//uQxAA...", audioMime: "audio/mp3", chunkIndex: 0, isLastChunk: false, seq: 12 } }; return (

{/* Header */}

Voice WebSocket API

Real-time voice conversations with STT and TTS streaming

{/* Quick Info Cards */}

Endpoint


            ws://host:port/chat/agent/voice-ws

Audio Format

PCM16LE, Mono, 16 kHz

Response

Chunked MP3, 22.05 kHz

{/* Interactive Tabs */}

{tabs.map(tab => { const Icon = tab.icon; return ( ); })}

{/* Getting Started Tab */} {activeTab === 'start' && (

1. Connect to WebSocket

{`const ws = new WebSocket("ws://your-host/chat/agent/voice-ws");
ws.binaryType = "arraybuffer";`}

2. Send Start Message

{`ws.send(JSON.stringify(${JSON.stringify(startMessage, null, 2)}));`}

Server Responses

{JSON.stringify(responses.ready)}

{JSON.stringify(responses.sttReady)}

)} {/* Send Audio Tab */} {activeTab === 'send' && (

Audio Requirements

PCM16LE

Format

Mono

1 Channel

16 kHz

Sample Rate

Recommended Frame Sizes

20 ms 640 bytes Recommended

40 ms 1,280 bytes Good

50 ms 1,600 bytes Acceptable

Send Binary Audio

{`// Send PCM16 audio frames
ws.send(int16Array.buffer);`}

)} {/* Receive Response Tab */} {activeTab === 'receive' && (

Message Types

Partial Transcript (while speaking)

{JSON.stringify(responses.partial, null, 2)}

Final Transcript

{JSON.stringify(responses.final, null, 2)}

Agent Audio Response (Chunked MP3)

{JSON.stringify(responses.sentence, null, 2)}

Important

Audio comes in multiple chunks. Collect all chunks where isLastChunk: false then play when you receive isLastChunk: true

)} {/* Barge-in Tab */} {activeTab === 'barge' && (

What is Barge-in?

Allows users to interrupt the AI agent mid-speech, just like natural conversations.

Server Triggers Barge

{`{
  "type": "barge",
  "seq": 12,
  "reason": "content_partial"
}`}

Gate Conditions

Setting	Default	Meaning
`MIN_PARTIAL_CHARS`	10	Min characters to trigger
`MIN_PARTIAL_WORDS`	2	Min words to trigger
`MIN_CONFIDENCE`	0.30	STT confidence threshold
`BARGE_COOLDOWN`	0.8s	Min time between barges

What to do when barge happens:

Stop playing all audio from old seq
Update currentSeq to new value
Only play audio matching new seq

Manual Barge-in

{`// User clicks "Stop" button
ws.send(JSON.stringify({ type: "barge" }));`}

)}

{/* Try It Section */}

Ready to Try It?

See a working implementation with full source code

View on GitHub

); }; export default VoiceWebSocketDocs;