---
title: "Installation | Micdrop"
description: "Install Micdrop client package for browser-based voice conversations."
url: "https://micdrop.dev/docs/client/installation"
---

*   [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)
    *   [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)
        
    
*   [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)
    *   [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)
        *   [Gladia](/docs/ai-integration/provided-integrations/gladia)
        *   [Gradium](/docs/ai-integration/provided-integrations/gradium)
        *   [Mistral](/docs/ai-integration/provided-integrations/mistral)
        *   [OpenAI](/docs/ai-integration/provided-integrations/openai)
        
    *   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)
        
    *   [IA Vocale Souveraine 🇫🇷🇪🇺](/docs/ai-integration/sovereign-voice-ai)
    

[Micdrop](/) › [Documentation](/docs/getting-started)

# Installation

Install Micdrop client package for browser-based voice conversations.

## Package Installation

Terminal window

```
npm install @micdrop/client
```

That’s it! No additional configuration or dependencies needed.

## Framework Integration

### Vanilla JavaScript/TypeScript

```
import { Micdrop } from '@micdrop/client'
// Start a voice conversationawait Micdrop.start({  url: 'ws://localhost:8081',  vad: ['volume', 'silero'],})
// Listen for state changesMicdrop.on('StateChange', (state) => {  console.log('Listening:', state.isListening)  console.log('Processing:', state.isProcessing)  console.log('Assistant speaking:', state.isAssistantSpeaking)})
// Stop the conversationawait Micdrop.stop()
```

### React

For React applications, also install the React hooks package:

Terminal window

```
npm install @micdrop/react
```

```
import { Micdrop } from '@micdrop/client'import { useMicdropState } from '@micdrop/react'
function VoiceChat() {  const state = useMicdropState()  const handleStart = () => Micdrop.start({ url: 'ws://localhost:8081/' })  const handleStop = () => Micdrop.stop()
  return (    <div>      <button onClick={handleStart}>Start</button>      <button onClick={handleStop}>Stop</button>      {state.isListening && <p>🎤 Listening...</p>}      {state.isProcessing && <p>🤔 Processing...</p>}      {state.isAssistantSpeaking && <p>🔊 Assistant speaking...</p>}    </div>  )}
```

Learn more about [Micdrop React hooks](/docs/client/react-hooks).

### Vue.js

```
<template>  <div>    <button @click="startCall">Start Call</button>    <button @click="stopCall">Stop Call</button>  </div></template>
<script>  import { Micdrop } from '@micdrop/client'
  export default {    methods: {      async startCall() {        await Micdrop.start({          url: 'ws://localhost:8081/',        })      },      async stopCall() {        await Micdrop.stop()      },    },  }</script>
```

### Angular

```
import { Component } from '@angular/core'import { Micdrop } from '@micdrop/client'
@Component({  selector: 'app-voice-chat',  template: `    <button (click)="startCall()">Start Call</button>    <button (click)="stopCall()">Stop Call</button>  `,})export class VoiceChatComponent {  async startCall() {    await Micdrop.start({      url: 'ws://localhost:8081/',    })  }
  async stopCall() {    await Micdrop.stop()  }}
```

## CDN Usage

For quick prototyping or simple HTML pages:

```
<script type="module">  import { Micdrop } from 'https://unpkg.com/@micdrop/client@latest/dist/index.js'
  await Micdrop.start({    url: 'ws://localhost:8081/',  })</script>
```

[Previous← Client (Browser)](/docs/client)[NextReact Hooks →](/docs/client/react-hooks)

On this page

*   [Package Installation](#package-installation)
*   [Framework Integration](#framework-integration)
*   [Vanilla JavaScript/TypeScript](#vanilla-javascripttypescript)
*   [React](#react)
*   [Vue.js](#vuejs)
*   [Angular](#angular)
*   [CDN Usage](#cdn-usage)