Integrating Voice AI into Your Systems
Learn how to integrate AgentForce's AI voice support into your existing customer service infrastructure.
Web SDK Integration
The AgentForce Web SDK provides web developers a simple API for interacting with the realtime call functionality of our voice AI system.
yarn add @vapi-ai/webor with npm:
npm install @vapi-ai/webImplementation Example
Here's a complete example of implementing the AgentForce voice AI in a React application:
import React, { useState } from 'react';
import Vapi from '@vapi-ai/web';
// Initialize Vapi with your public key
const vapi = new Vapi('your-public-key');
function AIVoiceSupport() {
const [callStatus, setCallStatus] = useState('idle');
const [callId, setCallId] = useState(null);
const startCall = async () => {
try {
setCallStatus('connecting');
const call = await vapi.start('your-assistant-id');
setCallId(call.id);
setCallStatus('connected');
// Listen for call end
call.onCallEnded(() => {
setCallStatus('ended');
setCallId(null);
});
} catch (error) {
console.error('Error starting call:', error);
setCallStatus('error');
}
};
const endCall = async () => {
if (callId) {
try {
await vapi.end(callId);
setCallStatus('ending');
// The onCallEnded handler will update the state
} catch (error) {
console.error('Error ending call:', error);
}
}
};
return (
<div className="p-6 max-w-md mx-auto bg-white rounded-xl shadow-md">
<h2 className="text-xl font-bold mb-4">AI Voice Support</h2>
<div className="mb-4">
<div className="text-sm text-gray-500 mb-2">Status: {callStatus}</div>
{callStatus === 'connected' && (
<div className="text-sm text-green-500">Call in progress</div>
)}
</div>
{callStatus === 'idle' || callStatus === 'ended' || callStatus === 'error' ? (
<button
onClick={startCall}
className="w-full py-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-700"
>
Start AI Voice Call
</button>
) : (
<button
onClick={endCall}
className="w-full py-2 px-4 bg-red-600 text-white rounded hover:bg-red-700"
disabled={callStatus === 'ending'}
>
End Call
</button>
)}
</div>
);
}
export default AIVoiceSupport;Advanced Configuration
AgentForce's voice AI can be customized to fit your specific business needs. Here are some advanced configuration options:
Customize the voice, tone, and speaking style of your AI agent to match your brand identity.
Learn MoreConnect your AI agent to your company's knowledge base to provide accurate and contextual responses.
Learn MoreConnect your AI agent to your CRM system to access customer data and provide personalized support.
Learn MoreTrack call metrics, customer satisfaction, and AI agent performance with detailed analytics.
Learn More