Converse Logo
Client SDKs

Client SDKs

Add AI voice and chat to any app. One package per platform — installs in seconds, handles everything internally.

What client SDKs do

Client SDKs run on your user's device. Voice can use an origin-restricted publishable key or a short-lived session from your backend; chat uses an origin-restricted publishable key and durable HTTPS requests. Secret keys never belong in client code.

Available Platforms

Features (All Platforms)

Voice Calls

Connect to AI agents with real-time voice. Mic, speaker, state — all managed.

Chat

Durable HTTPS messaging with idempotent submission and bounded reply polling.

State Machine

voiceState (idle→connecting→active→ended) + agentState (listening→thinking→speaking)

UI Components

Pre-built visualizers and chat views — swap colors/sizes, same props.

Voice Token Auth

A tokenProvider can fetch a short-lived voice session from your backend.

Custom Branding

Zero Converse branding exposed to end users. Full customization.

Voice Token Architecture

// Production flow:

┌──────────────┐ ┌───────────────┐ ┌─────────────────┐

│ Your App │ │ Your Backend │ │ Converse Cloud │

│ (Client SDK)│ │ (Server SDK) │ │ │

├──────────────┤ ├───────────────┤ ├─────────────────┤

│ tokenProvider│────▶│ createWebCall │────▶│ validates key │

│ │◀────│ return session│◀────│ returns session │

│ connect(session)│─────────────────────────▶│ voice session │

│ state events │◀─────────────────────────────│ voice events │

└──────────────┘ └───────────────┘ └─────────────────┘

Quick Example (React)

tsx
import { useConverseVoice, ConverseOrb } from '@converse/sdk/components';

function VoiceAgent() {
  const { voiceState, agentState, connect, disconnect } = useConverseVoice({
    agentId: 'agent_xxx',
    tokenProvider: async () => {
      const res = await fetch('/api/token', { method: 'POST', body: JSON.stringify({ agentId: 'agent_xxx' }) });
      return res.json();
    },
  });

  return (
    <ConverseOrb
      state={agentState}
      size="lg"
      color="#7c3aed"
      onClick={voiceState === 'idle' ? connect : disconnect}
    />
  );
}