How to Add Voice AI to Your Website Chatbot (Step-by-Step Guide)

Why Your Chatbot Needs a Microphone

Your website chatbot handles hundreds of conversations daily. But there's a gap: customers who don't want to type.

Maybe they're on mobile with tiny keyboards. Maybe they speak better than they write. Maybe they're multitasking. Whatever the reason, adding voice input to your chatbot removes friction and opens your support to a wider audience.

In this guide, we'll walk through exactly how to add voice capabilities to your existing chatbot—from microphone capture to real-time transcription.

Prerequisites

Before we start, you'll need:

Note: If you're using Agent Rush, voice is built-in. Just enable it in Settings → Advanced → Voice Input. This guide is for those who want to understand the internals or build custom implementations.

Architecture Overview

Here's how voice input flows through your system:

Browser Microphone
      ↓
MediaRecorder API (captures audio chunks)
      ↓
Web Audio API (real-time waveform visualization)
      ↓
Audio Blob (WebM/OGG format)
      ↓
Upload to Server (/api/upload)
      ↓
STT Service (Sarvam, Whisper, Google, etc.)
      ↓
Transcribed Text
      ↓
AI Agent Processes Query
      ↓
Streaming Response Back to User

Step 1: Capture Audio with MediaRecorder

The MediaRecorder API is the foundation. It captures audio from the user's microphone in a web-standard format.

// Request microphone permission
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

// Create recorder with preferred format
const mimeType = MediaRecorder.isTypeSupported('audio/webm')
  ? 'audio/webm'
  : 'audio/ogg';

const mediaRecorder = new MediaRecorder(stream, { mimeType });

// Collect audio chunks
const chunks = [];
mediaRecorder.ondataavailable = (e) => {
  if (e.data.size > 0) chunks.push(e.data);
};

// Start recording
mediaRecorder.start();

// Stop after 30 seconds (STT services have limits)
setTimeout(() => mediaRecorder.stop(), 30000);

Key considerations:

Step 2: Visualize Audio with Web Audio API

A silent recording button feels broken. Users need visual feedback that their voice is being captured. The Web Audio API's AnalyserNode gives you real-time frequency data.

const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;

const source = audioContext.createMediaStreamSource(stream);
source.connect(analyser);

// Read frequency data in animation loop
const dataArray = new Uint8Array(analyser.frequencyBinCount);

function visualize() {
  analyser.getByteFrequencyData(dataArray);

  // Use dataArray values (0-255) to animate wave bars
  const average = dataArray.reduce((a, b) => a + b) / dataArray.length;

  // Update your UI - bars, circles, orbs, etc.
  updateWaveBars(dataArray);

  requestAnimationFrame(visualize);
}

visualize();

Pro tip: Don't connect the analyser to audioContext.destination—you don't want to play back the user's own voice through their speakers.

Step 3: Upload and Transcribe

When recording stops, convert the chunks to a blob and upload to your server for transcription.

mediaRecorder.onstop = async () => {
  const audioBlob = new Blob(chunks, { type: mimeType });

  const formData = new FormData();
  formData.append('file', audioBlob, 'recording.webm');

  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
  });

  const { transcribedText } = await response.json();
  // Now send transcribedText to your AI agent
};

On the server side, forward the audio to your STT service:

// Server: /api/upload
const sttResponse = await fetch('https://api.sarvam.ai/speech-to-text', {
  method: 'POST',
  headers: { 'api-subscription-key': process.env.SARVAM_API_KEY },
  body: audioFormData,
});

const { transcript } = await sttResponse.json();

Step 4: Choose Your STT Provider

Different providers excel at different things:

For Indian businesses, we recommend Sarvam AI. Their Saaras v2 model is specifically trained on Indian accents, code-switching patterns, and regional languages. It handles "Hinglish" (Hindi-English mixing) remarkably well.

Step 5: Handle Edge Cases

Voice input introduces unique challenges:

Microphone Denied

try {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
} catch (err) {
  if (err.name === 'NotAllowedError') {
    // Show text input as primary, hide mic button
    showTextInputFallback();
  }
}

Background Noise

Network Errors

Browser Compatibility

Step 6: Optimize the Experience

Small touches make voice input feel polished:

Performance Tips

// Always clean up
function stopRecording() {
  mediaRecorder.stop();
  stream.getTracks().forEach(track => track.stop());
  audioContext.close();
}

The Result

When done right, voice input transforms your chatbot experience:

Your chatbot goes from a text box to a conversation partner. And in a market where customer experience is the differentiator, that's a powerful upgrade.