--- title: "Client (Browser) | Micdrop" description: "Handle real-time voice conversations in the browser with microphone input, speaker output, voice activity detection and WebSocket streaming." url: "https://micdrop.dev/docs/client" --- * [Getting Started](/docs/getting-started) * [Client (Browser)](/docs/client) * [Installation](/docs/client/installation) * [React Hooks](/docs/client/react-hooks) * [Start/Stop Call](/docs/client/start-stop-call) * [Pause/Resume Call](/docs/client/pause-resume-call) * [Mute/Unmute Call](/docs/client/mute-unmute-call) * [Call State](/docs/client/call-state) * [Display Conversation Messages](/docs/client/display-conversation-messages) * [Handling Tool Calls](/docs/client/handling-tool-calls) * [Device Management](/docs/client/devices-management) * [Voice Activity Detection (VAD)](/docs/client/vad) * [Turn Detection](/docs/client/turn-detection) * [Reducing Latency](/docs/client/latency) * [Error Handling](/docs/client/error-handling) * Utility Classes * [Mic](/docs/client/utility-classes/mic) * [MicdropClient](/docs/client/utility-classes/micdrop-client) * [MicRecorder](/docs/client/utility-classes/mic-recorder) * [Speaker](/docs/client/utility-classes/speaker) * [Client (React Native)](/docs/react-native) * [Installation](/docs/react-native/installation) * [Hooks and Call State](/docs/react-native/hooks) * [Audio Output and Devices](/docs/react-native/audio-output) * [Voice Activity Detection (VAD)](/docs/react-native/vad) * [Turn Detection](/docs/react-native/turn-detection) * [Using Another Audio Library](/docs/react-native/custom-audio) * [Server (Node.js)](/docs/server) * [Installation](/docs/server/installation) * [With Fastify](/docs/server/with-fastify) * [With NestJS](/docs/server/with-nestjs) * [Auth and Parameters](/docs/server/auth-and-parameters) * [First Message](/docs/server/first-message) * [Dictation and Text-Only Calls](/docs/server/dictation) * [Realtime Models](/docs/server/realtime) * [Partial Messages](/docs/server/partial-messages) * [Save Messages](/docs/server/save-messages) * [Resume a Conversation](/docs/server/resume-conversation) * [Recording Audio](/docs/server/recording-audio) * [Error Handling](/docs/server/error-handling) * [Tools](/docs/server/tools) * [Extract Value from Answer](/docs/server/extract) * [Auto End Call](/docs/server/auto-end-call) * [Semantic Turn Detection](/docs/server/semantic-turn-detection) * [Noise Filtering](/docs/server/noise-filtering) * [Micdrop Protocol](/docs/server/protocol) * [AI Integrations](/docs/ai-integration) * Provided Integrations * [AI SDK](/docs/ai-integration/provided-integrations/ai-sdk) * [Cartesia](/docs/ai-integration/provided-integrations/cartesia) * [ElevenLabs](/docs/ai-integration/provided-integrations/elevenlabs) * [Gemini](/docs/ai-integration/provided-integrations/gemini) * [Gladia](/docs/ai-integration/provided-integrations/gladia) * [Gradium](/docs/ai-integration/provided-integrations/gradium) * [Kokoro](/docs/ai-integration/provided-integrations/kokoro) * [Mistral](/docs/ai-integration/provided-integrations/mistral) * [OpenAI](/docs/ai-integration/provided-integrations/openai) * [Piper](/docs/ai-integration/provided-integrations/piper) * [Pocket TTS](/docs/ai-integration/provided-integrations/pocket-tts) * [Qwen3-TTS](/docs/ai-integration/provided-integrations/qwen-tts) * [Whisper](/docs/ai-integration/provided-integrations/whisper) * Custom Integrations * [Agent (LLM)](/docs/ai-integration/custom-integrations/custom-agent) * [Speech-to-Text (STT)](/docs/ai-integration/custom-integrations/custom-stt) * [Text-to-Speech (TTS)](/docs/ai-integration/custom-integrations/custom-tts) * Fallback Strategies * [FallbackAgent](/docs/ai-integration/fallback-strategies/agent-fallback) * [FallbackSTT](/docs/ai-integration/fallback-strategies/stt-fallback) * [FallbackTTS](/docs/ai-integration/fallback-strategies/tts-fallback) * [Local Models](/docs/ai-integration/local-models) * [Local LLM](/docs/ai-integration/local-models/agent) * [Local STT](/docs/ai-integration/local-models/speech-to-text) * [Local TTS](/docs/ai-integration/local-models/text-to-speech) * [Latency and Memory](/docs/ai-integration/local-models/performance) * [Explorations](/docs/ai-integration/local-models/explorations) * [MiniCPM5-2B](/docs/ai-integration/local-models/explorations/minicpm) * [Mistral 7B](/docs/ai-integration/local-models/explorations/mistral-7b) * [Voxtral Mini 3B](/docs/ai-integration/local-models/explorations/voxtral-stt) * [Voxtral TTS 4B](/docs/ai-integration/local-models/explorations/voxtral-tts) * [AuK and AuK-Flash](/docs/ai-integration/local-models/explorations/auk) * [IA Vocale Souveraine 🇫🇷🇪🇺](/docs/ai-integration/sovereign-voice-ai) * [Migration](/docs/migration) * [Upgrade to v3](/docs/migration/v3) [Micdrop](/) › [Documentation](/docs/getting-started) # Client (Browser) Micdrop client handles real-time voice conversations in the browser with microphone input, speaker output, [voice activity detection](/docs/client/vad), and WebSocket communication. ## Installation Terminal window ``` npm install @micdrop/web ``` That’s it 🎉 The client is ready to use in any browser, with any framework. ## One call, two platforms Everything on this page also runs on a phone. The call itself, the protocol, the state and the [voice activity detection](/docs/client/vad) live in `@micdrop/client`, and each platform only brings its microphone and its speaker: You are building for You install You import from A browser `@micdrop/web` `@micdrop/web` iOS and Android `@micdrop/react-native` `@micdrop/react-native` Both re-export the whole shared API, so the pages of this section apply to both. Read [React Native](/docs/react-native) for what a phone does differently. See [Installation](/docs/client/installation) for more details. ## Quick Example ``` import { Micdrop } from '@micdrop/web' // Start a voice conversationawait Micdrop.start({ url: 'ws://localhost:8081',}) ``` ## Browser Support Fully tested on desktop and mobile: * ✅ Chrome/Chromium * ✅ Firefox * ✅ Safari * ✅ Edge Target browsers must support the following APIs: * **WebSocket API** - For real-time communication * **Web Audio API** - For audio processing and playback * **MediaDevices API** - For microphone access * **MediaRecorder API** - For audio recording [Previous← Getting Started](/docs/getting-started)[NextInstallation →](/docs/client/installation) On this page * [Installation](#installation) * [One call, two platforms](#one-call-two-platforms) * [Quick Example](#quick-example) * [Browser Support](#browser-support)