Web SDK

@voice213/agent-client puts your agent inside your own website or app, with your own interface. It takes care of the hard parts of real-time voice: the microphone, streaming audio both ways, interruptions, echo, transcripts and errors. You decide what the page looks like.

npm install @voice213/agent-client

import { AgentCall } from "@voice213/agent-client";

const call = new AgentCall({ agentId: "k3x9m2p7q4wz" });

call.on("status", (status) => (statusLabel.textContent = status)); // connecting → connected → ended
call.on("mode", (mode) => orb.classList.toggle("speaking", mode === "speaking"));
call.on("message", ({ role, text }) => addLine(role, text));
call.on("error", (error) => showError(error.code, error.message));

talkButton.addEventListener("click", () => call.start()); // from a click: browsers require it
hangUpButton.addEventListener("click", () => call.end());

"use client";
import { useAgentCall } from "@voice213/agent-client/react";

export function TalkToUs() {
  const { status, isSpeaking, transcript, error, start, end } = useAgentCall({ agentId: "k3x9m2p7q4wz" });

  return (
    <section>
      {status === "connected" ? <button onClick={end}>Hang up</button> : <button onClick={start} disabled={status === "connecting"}>Talk to us</button>}
      <p>{status === "connected" ? (isSpeaking ? "Speaking…" : "Listening…") : status}</p>
      {error && <p role="alert">{error.message}</p>}
      {transcript.map((m) => (
        <p key={m.id} dir="auto"><b>{m.role === "user" ? "You" : "Agent"}:</b> {m.text}</p>
      ))}
    </section>
  );
}

<script src="https://cdn.jsdelivr.net/npm/@voice213/agent-client@0.2.0/dist/voice213.global.js" integrity="sha384-uC0Le1b+8b6nZJG677oFQhHDxkXIBxBpQlUAAagUB87AO8yyCfYNurb87rOCGVKw" crossorigin="anonymous" defer></script>

<voice213-agent agent-id="k3x9m2p7q4wz" variant="inline" lang="fr"></voice213-agent>

​What's in the package

TypeScript types are included for every entry point, and every entry point works with import and require.

​Before you start

• A published agent. Copy its public id (12 letters and digits, such as k3x9m2p7q4wz) from its Publish page. A draft agent, or one with Enable link and widget turned off, answers NOT_FOUND.
• Your site in Allowed websites, if you set that list. Otherwise the call is refused with ORIGIN. Add http://localhost:3000 (or your dev port) while you develop.
• HTTPS. Browsers only open the microphone on secure pages (localhost counts).
• A click. Browsers only start the microphone and sound from a user gesture, so call start() in a click handler.

​How a call works

​Audio built for voice

• Echo-free on laptops. In Chrome and Edge, the agent's voice goes through WebRTC so the browser's echo canceller can remove it from the microphone, and the agent never hears itself. Everywhere, quiet sound reaching the microphone while the agent speaks is sent as silence, while a caller speaking up still interrupts.
• Clean input. The microphone is filtered before it drops to the 16 kHz the agent hears, so high-frequency noise doesn't fold back into the voice.
• Smooth output. The agent's voice plays through a small adaptive jitter buffer that grows after network hiccups. It fades out in 4 ms when the caller interrupts: no clicks, no stale words.
• Off the main thread. All audio runs in AudioWorklets, so a busy page doesn't stutter the call.

​Next