Skip to Content
Introduction

Vocobase Voice SDK

Build voice-enabled AI applications in minutes, not months.

What is Vocobase?

Vocobase is a platform for creating and deploying conversational voice AI agents. With our dashboard, you can create custom agents with unique personalities, voices, and behaviors — then integrate them into your applications using our React SDK.

Key Features

  • No-code agent creation — Configure your AI agent’s personality, voice, and behavior through our intuitive dashboard
  • React SDK — Drop-in components and hooks for seamless integration
  • Real-time transcripts — Access conversation history with timestamps and latency metrics
  • Multiple languages — Support for English, Spanish, French, Hindi, and more
  • Usage analytics — Track sessions, duration, and costs in real-time

Two Ways to Integrate

1. Drop-in Component

Get started in seconds with our pre-styled <VoiceAgent /> component:

import { VoiceAgent } from '@vocobase/voice-client-sdk'
import '@vocobase/voice-client-sdk/styles.css'
 
function App() {
  return (
    <VoiceAgent
      apiKey="your_api_key"
      agentName="my-agent"
    />
  )
}

2. Headless Hooks

Build custom interfaces with full control:

import { VoiceSessionProvider, useVoiceSession, useConnectionState } from '@vocobase/voice-client-sdk'
 
function App() {
  return (
    <VoiceSessionProvider apiKey="your_api_key" agentName="my-agent">
      <CustomVoiceUI />
    </VoiceSessionProvider>
  )
}
 
function CustomVoiceUI() {
  const { connect, disconnect } = useVoiceSession()
  const { isConnected } = useConnectionState()
 
  return (
    <button onClick={isConnected ? disconnect : connect}>
      {isConnected ? 'End Call' : 'Start Call'}
    </button>
  )
}
  • Getting Started — Install the SDK and set up your first agent
  • Quick Start — Build a working voice interface in 5 minutes
  • Components — Full component API reference
  • Hooks — Headless hooks for custom UIs
  • Examples — Real-world integration examples

How It Works

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   Your App      │────▶│   Vocobase SDK  │────▶│  Vocobase API   │
│   (React)       │◀────│   (WebRTC)      │◀────│  (Voice AI)     │
└─────────────────┘     └─────────────────┘     └─────────────────┘
        │                       │                       │
        │                       │                       │
    User speaks           Audio streamed          AI processes
    into mic              in real-time            and responds
  1. User speaks — The SDK captures audio from the user’s microphone
  2. Real-time streaming — Audio is streamed to our servers via WebRTC
  3. AI processing — Your configured agent processes the speech and generates a response
  4. Response playback — The AI’s response is synthesized and played back to the user
  5. Transcript updates — Both sides of the conversation are available in real-time

Requirements

  • React 18 or later
  • A Vocobase account with API credentials
  • Modern browser with WebRTC support (Chrome, Firefox, Safari, Edge)
Last updated on
Getting Started