Client And Frameworks
Browser voice primitives and framework-native wrappers for React, Vue, Svelte, Angular, HTMX, and script-tag embeds.
#Framework Wrappers
React exports VoiceWidget, VoiceCallPlayer, VoiceLiveAgentConsole, dashboards, proof views, traces, hooks, and controller hooks.
Vue exports matching components plus composables like useVoiceStream(), useVoiceController(), and useVoiceOpsStatus().
Svelte exports createVoice* store factories and reuses createVoiceController from the client entrypoint.
Angular exports injectable services for widgets, streams, controllers, provider dashboards, traces, proof, and live operations.
Embed exports an ESM widget and a prebuilt IIFE bundle at /embed/voice-widget.js.
TSX
import { VoiceWidget, useVoiceOpsStatus } from "@absolutejs/voice/react";
export function VoicePanel() {
const ops = useVoiceOpsStatus({ url: "/api/voice/ops/status" });
return <VoiceWidget url="wss://api.example.com/voice/realtime" />;
}#Browser Primitives
createVoiceConnection(), createVoiceController(), createVoiceStream(), createMicrophoneCapture(), createVoiceAudioPlayer().
bindVoiceBargeIn(), createVoiceDuplexController(), createVoiceBargeInMonitor(), createVoiceLiveTurnLatencyMonitor().
createVoiceBrowserMediaReporter(), browser voice support checks, browser noise suppression, and conversation analytics.
#Widgets And Stores
Every operations/proof surface has fetch*, create*Store(), view-model, render*HTML(), mount*, define*Element(), and optional CSS helpers where applicable.
Widget families include ops status/action center/history, delivery runtime, platform coverage, proof trends, reconnect profile evidence, provider status/capabilities/contracts, routing status, turn quality/latency, trace timeline, session snapshot/observability, call debugger, call player, live viewer, live agent console, profile comparison, simulation controls, and workflow status.
#Example Streams
The example keeps framework parity by using the same route builder and reconnect report path in React, Vue, Svelte, Angular, HTML, and HTMX. React uses useVoiceStream(); vanilla/HTML uses createVoiceStream().
TS
import { useVoiceStream } from "@absolutejs/voice/react";
import { createVoiceStream } from "@absolutejs/voice/client";
const reconnectReportPath = "/api/voice/reconnect-traces";
const reactVoice = useVoiceStream<SavedIntake>(
getVoiceRoutePath("guided", provider, routing, engine, profileId, sessionId),
{ reconnectReportPath }
);
const vanillaVoice = createVoiceStream<SavedIntake>(
getVoiceRoutePath("general", provider, routing, engine, profileId),
{ reconnectReportPath }
);