--- title: "Getting Started | Micdrop" description: "Get up and running with Micdrop to build real-time voice conversations with AI agents." url: "https://micdrop.dev/docs/getting-started" --- * [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) # Getting Started Get up and running with [Micdrop](/) to build real-time voice conversations with AI agents. ## Quick Setup ### Client (Browser) Install the browser package and start capturing voice input: Terminal window ``` npm install @micdrop/client ``` If you’re using React, you can also install [@micdrop/react](/docs/client/react-hooks) package to get a ready-to-use React hooks. ``` import { Micdrop } from '@micdrop/client' // Start a voice conversationMicdrop.start({ url: 'ws://localhost:8081',}) // Listen for eventsMicdrop.on('StateChange', (state) => { console.log('Conversation:', state.conversation) console.log('isAssistantSpeaking:', state.isAssistantSpeaking)}) Micdrop.on('EndCall', () => { console.log('Call ended by assistant')}) ``` ### Server (Node.js) Install the server package and set up AI integrations: Terminal window ``` npm install @micdrop/server @micdrop/openai @micdrop/gladia @micdrop/elevenlabs ``` This example uses OpenAI, Gladia and ElevenLabs. You can use other providers with a [provided or custom integrations](https://github.com/Godefroy/micdrop/blob/main/ai-integration). ``` import { MicdropServer } from '@micdrop/server'import { OpenaiAgent } from '@micdrop/openai'import { GladiaSTT } from '@micdrop/gladia'import { ElevenLabsTTS } from '@micdrop/elevenlabs'import { WebSocketServer } from 'ws' const wss = new WebSocketServer({ port: 8081 }) wss.on('connection', (socket) => { // Handle voice conversation new MicdropServer(socket, { firstMessage: 'How can I help you today?', agent: new OpenaiAgent({ apiKey: process.env.OPENAI_API_KEY, systemPrompt: 'You are a helpful assistant', }), stt: new GladiaSTT({ apiKey: process.env.GLADIA_API_KEY, }), tts: new ElevenLabsTTS({ apiKey: process.env.ELEVENLABS_API_KEY, voiceId: process.env.ELEVENLABS_VOICE_ID, }), })}) ``` Don’t forget to set the API keys in the environment variables. ## Demos See Micdrop in action: * **Main Demo** * **[Client](https://github.com/Godefroy/micdrop/tree/main/examples/demo-client)** - React application with full UI * **[Server](https://github.com/Godefroy/micdrop/tree/main/examples/demo-server)** - Server setup with fastify * **[Form Demo](https://github.com/Godefroy/micdrop-form-demo)** - A demo app showcasing Micdrop’s capabilities for voice-assisted form filling using OpenAI and tool calling. ## Setup Documentation MCP To vibe code your Micdrop implementation faster with Cursor, Claude Code or any other agent, [install Context7 MCP](https://github.com/upstash/context7). Once the MCP is installed, you can prompt like this: ``` create a turbo monorepo in current folder with a client and a server in a new /apps folder:- server: a simple fastify server with Typescript that implements a micdrop server (use context7)- client: a simple React webapp with micdrop client. show play/stop/pause buttons and conversation, no other UI. make it beautiful and futuristic. ``` ## Troubleshooting **Microphone not working?** * Check browser permissions for microphone access * Ensure you’re serving over HTTPS in production **WebSocket connection fails?** * Verify the server is running on the correct port * Check firewall settings **AI responses not working?** * Verify all API keys are set correctly * Check the server console for error messages [NextClient (Browser) →](/docs/client) On this page * [Quick Setup](#quick-setup) * [Client (Browser)](#client-browser) * [Server (Node.js)](#server-nodejs) * [Demos](#demos) * [Setup Documentation MCP](#setup-documentation-mcp) * [Troubleshooting](#troubleshooting)