Developer Documentation
Production-ready voice agents with sub-second latency, reliable tool calling, and bidirectional app communication. No infrastructure to manage.
Real-time voice over WebRTC with optimized STT/TTS pipelines.
Bidirectional: agent drives your UI, app sends events back.
MCP servers, HTTP APIs, or 7,000+ apps via Zapier.
Web, mobile, or phone from a single config.
Real-time streaming out of the box. Zero setup.
Transcripts, recordings, and usage data.
Quick Start
Go from zero to a working voice UI in under an hour.
Create a free account, configure your voice agent with a system prompt, and get a phone number and API key in minutes.
Create accountYour backend proxies a single API call to generate short-lived connection tokens. Keep your API key server-side.
# Your backend endpoint
curl -X POST "https://vocalbridgeai.com/api/v1/token" \
-H "X-API-Key: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{"participant_name": "User"}'
Pick your framework, install, and connect in a few lines. Audio, transcripts, and heartbeats are handled automatically.
npm install @vocalbridgeai/sdk
import { VocalBridge } from '@vocalbridgeai/sdk';
const vb = new VocalBridge({
auth: { tokenUrl: '/api/voice-token' },
participantName: 'User',
});
// Live transcript streaming
vb.on('transcript', ({ role, text }) => {
console.log(`[${role}] ${text}`);
});
// Handle agent-triggered actions
vb.on('agentAction', ({ action, payload }) => {
handleAction(action, payload);
});
await vb.connect();
// Mic is live. Agent audio plays automatically.
npm install @vocalbridgeai/react
import { VocalBridgeProvider, useVocalBridge, useTranscript }
from '@vocalbridgeai/react';
function App() {
return (
<VocalBridgeProvider
auth={{ tokenUrl: '/api/voice-token' }}
participantName="User">
<VoiceUI />
</VocalBridgeProvider>
);
}
function VoiceUI() {
const { state, connect, disconnect } = useVocalBridge();
const { transcript } = useTranscript();
return (
<div>
<button onClick={state === 'connected' ? disconnect : connect}>
{state === 'connected' ? 'End Call' : 'Start Voice Chat'}
</button>
{transcript.map((e, i) => (
<p key={i}><b>{e.role}:</b> {e.text}</p>
))}
</div>
);
}
Use the Vocal Bridge CLI to review call logs, update prompts, and manage your agent without leaving the terminal.
# Install
pip install vocal-bridge
# Authenticate
vb auth login
# Review call logs and transcripts
vb logs
# Update your agent's prompt
vb prompt edit
# View full integration docs
vb docs
Key Feature
Bidirectional communication between your voice agent and your app. The agent can drive your UI, and your app can notify the agent.
The agent triggers actions in your UI during conversation.
vb.on('agentAction', ({ action, payload }) => {
if (action === 'show_product') {
showProductCard(payload.productId);
}
if (action === 'navigate') {
router.push(payload.path);
}
});
Your app sends events to the agent to keep it in context.
// User clicked a buy button in your UI
await vb.sendAction('user_clicked_buy', {
productId: '123',
quantity: 2
});
// Agent responds: "Great choice!"
Handle agent-triggered actions with a hook.
import { useAgentActions } from '@vocalbridgeai/react';
function VoiceUI() {
useAgentActions((action, payload) => {
if (action === 'show_product') {
showProductCard(payload.productId);
}
if (action === 'navigate') {
router.push(payload.path);
}
});
// ...
}
Send events to the agent from any component.
import { useVocalBridge } from '@vocalbridgeai/react';
function BuyButton({ productId }) {
const { sendAction } = useVocalBridge();
return (
<button onClick={() =>
sendAction('user_clicked_buy', {
productId, quantity: 1
})
}>Buy Now</button>
);
}
// Agent responds: "Great choice!"
Configure client actions from the dashboard or via vb config set --client-actions-file actions.json. Each action has a name, description, and direction. See the full developer guide for the complete reference.
Bring Your Own Agent
Already have a chatbot, RAG system, or LLM agent? Give it a voice. Vocal Bridge handles the real-time voice layer while your existing agent handles domain logic.
vb config set --ai-agent-enabled true
import { VocalBridge } from '@vocalbridgeai/sdk';
const vb = new VocalBridge({
auth: { tokenUrl: '/api/voice-token' },
});
// One callback — SDK handles the rest
vb.onAIAgentQuery(async (query) => {
// Forward to your existing agent
const answer = await yourAgent.ask(query);
return answer; // spoken back to the user
});
await vb.connect();
import { useAIAgent } from '@vocalbridgeai/react';
function MyApp() {
// One hook — queries are forwarded automatically
useAIAgent({
onQuery: async (query) => {
const answer = await yourAgent.ask(query);
return answer; // spoken back to the user
},
});
return <VoiceUI />;
}
How it works: User speaks → voice agent determines domain question → sends query_agent via data channel → your app forwards to your agent → response is spoken back. The voice agent fills naturally while waiting.
Developer Tools
npm install @vocalbridgeai/sdk
Connect, stream transcripts, send/receive client actions, and manage audio. Works in any JS environment.
npm install @vocalbridgeai/react
React hooks and Provider. useVocalBridge(), useTranscript(), and useAgentActions() for idiomatic React.
pip install vocal-bridge
Manage agents, review call logs, download recordings, update prompts, and access the full developer docs with vb docs — all from your terminal.
Native slash commands inside Claude Code. Manage your agent, stream debug events, and update configs without leaving your AI assistant.
# Claude Code
/plugin marketplace add vocalbridgeai/vocal-bridge-marketplace
/plugin install vocal-bridge@vocal-bridge
# Or via npx
npx skills add vocalbridgeai/vocal-bridge-claude-plugin
Also supports Flutter/Dart, Swift (iOS), and Kotlin (Android) via WebRTC SDKs. See the full developer guide for platform-specific instructions.
The full developer guide covers API reference, authentication details, all SDK methods, AI Agent mode, MCP tools, post-processing, and more.
vb docs
Create your free account, deploy an agent, and integrate it into your app. No credit card required.