### Install Micdrop Client Package

Source: https://micdrop.dev/docs/getting-started

Installs the necessary package for the Micdrop client in the browser. This allows for capturing voice input and initiating voice conversations.

```bash
npm install @micdrop/client  

```

--------------------------------

### Prompt for Monorepo Setup with Micdrop (CLI)

Source: https://micdrop.dev/docs/getting-started

An example prompt for an AI agent (like Cursor or Claude Code) to create a Turbo monorepo structure. It specifies the creation of a client and server, integrating Micdrop and using Fastify for the server.

```bash
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.  

```

--------------------------------

### Install Micdrop Server Packages (Node.js)

Source: https://micdrop.dev/docs/getting-started

Installs the Micdrop server package along with integrations for OpenAI, Gladia (Speech-to-Text), and ElevenLabs (Text-to-Speech). These are required for setting up the AI backend.

```bash
npm install @micdrop/server @micdrop/openai @micdrop/gladia @micdrop/elevenlabs  

```

--------------------------------

### Micdrop Server Setup with AI Integrations (Node.js)

Source: https://micdrop.dev/docs/getting-started

Sets up a Micdrop server using Node.js, integrating with OpenAI for agent capabilities, Gladia for Speech-to-Text, and ElevenLabs for Text-to-Speech. Requires the respective Micdrop packages and API keys set as environment variables.

```javascript
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,
    }),
  })
})

```

--------------------------------

### Install Micdrop Server Package

Source: https://micdrop.dev/docs/server/installation

Installs the core Micdrop server package using npm. This is the first step to integrate Micdrop server capabilities into your project.

```bash
npm install @micdrop/server
```

--------------------------------

### Install Gladia STT for Micdrop Server

Source: https://micdrop.dev/docs/ai-integration/provided-integrations/gladia

Installs the Gladia STT package for integration with the Micdrop server. This is the initial setup step.

```bash
npm install @micdrop/gladia  

```

--------------------------------

### Install Micdrop Server Dependencies and AI Providers

Source: https://micdrop.dev/docs/server/installation

Installs necessary server dependencies including the WebSocket library and type definitions, along with optional AI provider packages for Speech-to-Text and Text-to-Speech.

```bash
# Install Micdrop server and WebSocket
npm install @micdrop/server ws
npm install -D @types/ws

# Install AI providers
npm install @micdrop/openai @micdrop/gladia @micdrop/elevenlabs
```

--------------------------------

### MicRecorder Usage Example with VAD

Source: https://micdrop.dev/docs/client/utility-classes/mic-recorder

Demonstrates how to instantiate and use the MicRecorder class for audio recording. It shows how to get a microphone stream, start recording, and listen for events like speech detection and audio chunks. Dependencies include the '@micdrop/client' library and the browser's MediaDevices API.

```typescript
import { MicRecorder } from '@micdrop/client'

// Create a new recorder instance with VAD config (string, VAD instance, or array)
const recorder = new MicRecorder('volume')

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

// Start recording
await recorder.start(stream)

// Listen for events
recorder.on('StartSpeaking', () => {
  console.log('User started speaking')
})

recorder.on('StopSpeaking', () => {
  console.log('User stopped speaking')
})

recorder.on('Chunk', (blob: Blob) => {
  // Handle audio chunk
  console.log('Received audio chunk:', blob)
})
```

--------------------------------

### Micdrop Client Usage (JavaScript)

Source: https://micdrop.dev/docs/getting-started

Demonstrates how to use the Micdrop client in JavaScript to start a voice conversation and listen for events like state changes and call endings. Requires the '@micdrop/client' package.

```javascript
import { Micdrop } from '@micdrop/client'  
  
// Start a voice conversation  
Micdrop.start({
  url: 'ws://localhost:8081',
})
  
// Listen for events  
Micdrop.on('StateChange', (state) => {
  console.log('Conversation:', state.conversation)
  console.log('isAssistantSpeaking:', state.isAssistantSpeaking)
})
  
Micdrop.on('EndCall', () => {
  console.log('Call ended by assistant')
})

```

--------------------------------

### Run Micdrop Server using tsx or Node.js

Source: https://micdrop.dev/docs/server/installation

Provides commands to execute the TypeScript server file. It includes instructions for installing 'tsx' for direct TypeScript execution or for compiling the TypeScript code to JavaScript first and then running it with Node.js.

```bash
# Install tsx for TypeScript execution
npm install -g tsx

# Run the server
tsx server.ts

# Or compile and run
npx tsc server.ts
node server.js
```

--------------------------------

### Install AI SDK and OpenAI Provider

Source: https://micdrop.dev/docs/ai-integration/provided-integrations/ai-sdk

Installs the core AI SDK package and the OpenAI provider. Ensure you have npm or yarn installed.

```bash
npm install @micdrop/ai-sdk
npm install @ai-sdk/openai
```

--------------------------------

### Create Basic WebSocket Server with Micdrop and AI Integration

Source: https://micdrop.dev/docs/server/installation

Sets up a Node.js WebSocket server using the 'ws' library and integrates MicdropServer with AI components for handling voice conversations. It requires API keys for OpenAI, Gladia, and ElevenLabs, which should be configured in the environment.

```typescript
import { MicdropServer } from '@micdrop/server'
import { ElevenLabsTTS } from '@micdrop/elevenlabs'
import { GladiaSTT } from '@micdrop/gladia'
import { OpenaiAgent } from '@micdrop/openai'
import { WebSocketServer } from 'ws'

const wss = new WebSocketServer({ port: 8081 })

wss.on('connection', (socket) => {
  // Setup AI components
  const agent = new OpenaiAgent({
    apiKey: process.env.OPENAI_API_API_KEY || '',
    systemPrompt: 'You are a helpful voice assistant. Keep responses concise.',
  })

  const stt = new GladiaSTT({
    apiKey: process.env.GLADIA_API_KEY || '',
  })

  const tts = new ElevenLabsTTS({
    apiKey: process.env.ELEVENLABS_API_KEY || '',
    voiceId: process.env.ELEVENLABS_VOICE_ID || '',
  })

  // Create voice conversation handler
  new MicdropServer(socket, {
    firstMessage: 'Hello! How can I help you today?',
    agent,
    stt,
    tts,
  })
})

console.log('🎤 Micdrop server running on ws://localhost:8081')
```

--------------------------------

### Micdrop Client Integration in Vanilla JavaScript/TypeScript

Source: https://micdrop.dev/docs/client/installation

Demonstrates how to start, listen for state changes, and stop a voice conversation using the Micdrop client in vanilla JavaScript or TypeScript. It shows basic usage of the Micdrop API.

```javascript
import { Micdrop } from '@micdrop/client'

// Start a voice conversation
await Micdrop.start({
  url: 'ws://localhost:8081',
  vad: ['volume', 'silero'],
})

// Listen for state changes
Micdrop.on('StateChange', (state) => {
  console.log('Listening:', state.isListening)
  console.log('Processing:', state.isProcessing)
  console.log('Assistant speaking:', state.isAssistantSpeaking)
})

// Stop the conversation
await Micdrop.stop()
```

--------------------------------

### Start Microphone with Specific Device ID (JavaScript)

Source: https://micdrop.dev/docs/client/utility-classes/mic

Provides an example of starting the microphone using a specific device ID. This function is asynchronous and returns a Promise that resolves to the `MediaStream` object for the microphone input. This is useful when the user has multiple audio input devices.

```javascript
const stream = await Mic.start(deviceId)
```

--------------------------------

### Micdrop Client Integration in Vue.js

Source: https://micdrop.dev/docs/client/installation

Provides an example of integrating the Micdrop client into a Vue.js application. It demonstrates how to use methods to start and stop the voice conversation within a Vue component's template and script.

```vue
<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>
```

--------------------------------

### Configure Environment Variables for AI Providers

Source: https://micdrop.dev/docs/server/installation

Defines the necessary environment variables for connecting to AI services like OpenAI, ElevenLabs, and Gladia. These variables store API keys and voice configurations, ensuring secure and personalized AI interactions.

```dotenv
OPENAI_API_KEY=your_openai_api_key_here
ELEVENLABS_API_KEY=your_elevenlabs_api_key_here
ELEVENLABS_VOICE_ID=your_preferred_voice_id
GLADIA_API_KEY=your_gladia_api_key_here
```

--------------------------------

### Install @micdrop/openai

Source: https://micdrop.dev/docs/ai-integration/provided-integrations/openai

Installs the @micdrop/openai package using npm. This is the first step to integrate OpenAI functionalities into your Micdrop server.

```bash
npm install @micdrop/openai  

```

--------------------------------

### Start and Stop Microphone with Mic Module (JavaScript)

Source: https://micdrop.dev/docs/client/utility-classes/mic

Demonstrates how to start and stop the microphone using the Mic module. It shows how to use the default device or a specific device ID, and how to stop the stream and clean up resources. The `start` function returns a Promise resolving to a MediaStream, and `stop` is a void function.

```javascript
import { Mic } from '@micdrop/client'  
  
// Start microphone with default device  
const stream = await Mic.start()  
  
// Start microphone with specific device  
const deviceStream = await Mic.start('device-id')  
  
// Stop microphone and cleanup when done  
Mic.stop()
```

--------------------------------

### Micdrop Client and React Hooks Integration

Source: https://micdrop.dev/docs/client/installation

Shows how to integrate Micdrop into a React application by installing the `@micdrop/react` package and using the `useMicdropState` hook. It provides a functional component example for managing voice chat states.

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

```javascript
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>
  )
}
```

--------------------------------

### Quick Start: Micdrop Client Device Management

Source: https://micdrop.dev/docs/client/devices-management

This snippet demonstrates the basic usage of the Micdrop client to get available microphone and speaker devices and change the selected devices. It requires the '@micdrop/client' package.

```javascript
import { Micdrop } from '@micdrop/client'
  
// Get available devices  
console.log('Microphones:', Micdrop.micDevices)
console.log('Speakers:', Micdrop.speakerDevices)
  
// Change devices  
await Micdrop.changeMicDevice('mic-device-id')
await Micdrop.changeSpeakerDevice('speaker-device-id')
```

--------------------------------

### Basic Micdrop Server Setup with OpenAI, ElevenLabs, and Gladia

Source: https://micdrop.dev/docs/ai-integration

Demonstrates the basic setup of the MicdropServer using OpenAI for AI agents, ElevenLabs for text-to-speech, and Gladia for speech-to-text. Requires API keys for each service.

```typescript
import { MicdropServer } from '@micdrop/server'  
import { OpenaiAgent } from '@micdrop/openai'  
import { ElevenLabsTTS } from '@micdrop/elevenlabs'  
import { GladiaSTT } from '@micdrop/gladia'  
  
new MicdropServer(socket, {  
  // AI Agent for conversation  
  agent: new OpenaiAgent({  
    apiKey: process.env.OPENAI_API_API_KEY,  
    model: 'gpt-4-turbo-preview',  
  }),  
  
  // Speech-to-Text  
  stt: new GladiaSTT({  
    apiKey: process.env.GLADIA_API_KEY,  
    language: 'en',  
  }),  
  
  // Text-to-Speech  
  tts: new ElevenLabsTTS({  
    apiKey: process.env.ELEVENLABS_API_KEY,  
    voiceId: 'voice-id-here',  
  }),  
})
```

--------------------------------

### Micdrop Device Selection Example

Source: https://micdrop.dev/docs/client/utility-classes/micdrop-client

Demonstrates how to select specific microphone and speaker devices using their respective IDs. This example assumes `micdrop.micDevices` and `micdrop.speakerDevices` are populated.

```javascript
const micDeviceId = micdrop.micDevices[0].deviceId
const speakerDeviceId = micdrop.speakerDevices[0].deviceId
await micdrop.changeMicDevice(micDeviceId)
await micdrop.changeSpeakerDevice(speakerDeviceId)
```

--------------------------------

### Quick Start Micdrop Server with WebSocket

Source: https://micdrop.dev/docs/server

Sets up a basic Micdrop server instance using Node.js and the WebSocket library. It demonstrates initializing the server with an agent, speech-to-text, and text-to-speech services.

```javascript
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_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,
    }),
  })
})
```

--------------------------------

### Start Micdrop Call with Basic Configuration (JavaScript)

Source: https://micdrop.dev/docs/client/start-stop-call

Initiates a voice conversation by starting the Micdrop client connection and microphone with minimal configuration. Requires the WebSocket server URL.

```javascript
import { Micdrop } from '@micdrop/client'

await Micdrop.start({
  url: 'ws://localhost:8081',
})
```

--------------------------------

### Micdrop Client Integration in Angular

Source: https://micdrop.dev/docs/client/installation

Illustrates how to integrate the Micdrop client into an Angular component. It shows the necessary import statements and how to define methods for starting and stopping the voice call within the component's TypeScript file and template.

```typescript
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()
  }
}
```

--------------------------------

### ElevenLabs TTS Configuration Example

Source: https://micdrop.dev/docs/ai-integration/provided-integrations/elevenlabs

A complete example of configuring the ElevenLabsTTS client with API key, voice ID, model, language, and voice settings for integration with MicdropServer.

```typescript
import { ElevenLabsTTS } from '@micdrop/elevenlabs'  

const tts = new ElevenLabsTTS({
  apiKey: 'your-elevenlabs-api-key',
  voiceId: 'your-voice-id', // Get this from ElevenLabs dashboard  
  modelId: 'eleven_turbo_v2_5', // Choose based on your needs  
  language: 'en',
  voiceSettings: {
    stability: 0.5,
    similarity_boost: 0.75,
  },
})

// Use with MicdropServer  
new MicdropServer(socket, {
  tts,
  // ... other options  
})

```

--------------------------------

### Install @micdrop/mistral Package

Source: https://micdrop.dev/docs/ai-integration/provided-integrations/mistral

Installs the @micdrop/mistral package using npm. This is the first step to integrating Mistral AI into your project.

```bash
npm install @micdrop/mistral  

```

--------------------------------

### Install Micdrop Client Package with npm

Source: https://micdrop.dev/docs/client/installation

Installs the Micdrop client package using npm. This is the primary package for browser-based voice conversations and has no additional configuration or dependencies.

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

--------------------------------

### Initialize and Manage MicdropClient Call (JavaScript)

Source: https://micdrop.dev/docs/client/utility-classes/micdrop-client

Demonstrates how to initialize the MicdropClient, start, pause, resume, and stop a call. It also shows how to listen for state changes, call endings, and errors.

```javascript
import { MicdropClient } from '@micdrop/client'  
  
// Start a call  
const micdrop = new MicdropClient({
  // URL of the WebSocket server (using @micdrop/server)  
  url: 'wss://your-server.com/ws',
  // Parameters (optional) to check auth or provide other data  
  params: {
    authorization: '1234',
    lang: navigator.language,
  },
  // Voice Activity Detection (see docs)  
  vad: ['volume', 'silero'],
  // Disable ability for the user to interrupt the assistant when it is speaking  
  disableInterruption: true,
  // Enable debug logging  
  debugLog: true,
})

// Start the call  
// You can also pass options instead or in addition to the constructor  
await micdrop.start()

// Pause/resume  
micdrop.pause()
micdrop.resume()

// Stop the call  
await micdrop.stop()

// Listen for state changes  
micdrop.on('StateChange', (state) => {
  console.log('State:', state) // See below for state properties  
})

// Listen for end of call  
// Can be triggered via prompting (see server docs)  
micdrop.on('EndCall', () => {
  console.log('Call ended by assistant')  
})

// Listen for errors  
micdrop.on('Error', (error) => {
  console.error('Error occurred:', error)
})
```

--------------------------------

### React Quick Start with Micdrop Hooks

Source: https://micdrop.dev/docs/client/react-hooks

A quick start example demonstrating how to use Micdrop hooks in a React component to display the current state of the voice conversation. It uses `useMicdropState` to access listening, processing, and speaking statuses.

```jsx
import { Micdrop } from '@micdrop/client'  
import { useMicdropState, useMicdropError } from '@micdrop/react'  
  
function VoiceChat() {  
  const state = useMicdropState()  
  
  return (  
    <div>  
      {state.isListening && <p>🎤 Listening...</p>}  
      {state.isProcessing && <p>🤔 Processing...</p>}  
      {state.isAssistantSpeaking && <p>🔊 Assistant speaking...</p>}  
    </div>  
  )  
}  


```

--------------------------------

### Install @micdrop/elevenlabs Package

Source: https://micdrop.dev/docs/ai-integration/provided-integrations/elevenlabs

Installs the ElevenLabs package for @micdrop/server using npm. This is the initial step to integrate ElevenLabs TTS functionality.

```bash
npm install @micdrop/elevenlabs  

```

--------------------------------

### Micdrop Client Usage via CDN

Source: https://micdrop.dev/docs/client/installation

Demonstrates how to use the Micdrop client directly from a CDN in simple HTML pages or for quick prototyping. It shows the necessary script tag with the module type and how to initiate a voice call.

```javascript
<script type="module">
  import { Micdrop } from 'https://unpkg.com/@micdrop/client@latest/dist/index.js'

  await Micdrop.start({
    url: 'ws://localhost:8081/',
  })
</script>
```

--------------------------------

### Install Micdrop Server and NestJS WebSocket Packages

Source: https://micdrop.dev/docs/server/with-nestjs

Installs the necessary Micdrop server packages along with NestJS WebSocket and platform-ws packages required for real-time communication.

```bash
npm install @micdrop/server @nestjs/websockets @nestjs/platform-ws  
```

--------------------------------

### Install @micdrop/cartesia Package

Source: https://micdrop.dev/docs/ai-integration/provided-integrations/cartesia

Installs the Cartesia TTS package for Node.js environments using npm.

```bash
npm install @micdrop/cartesia  
```

--------------------------------

### Install Micdrop Server and Fastify Dependencies

Source: https://micdrop.dev/docs/server/with-fastify

Installs the necessary packages for Micdrop server, Fastify, and its WebSocket plugin using npm. This command is typically run in the project's root directory.

```bash
npm install @micdrop/server @fastify/websocket fastify
```

--------------------------------

### Cost-Optimized Micdrop Server Setup with Mistral, Gladia, and Cartesia

Source: https://micdrop.dev/docs/ai-integration

Illustrates a cost-optimized setup for MicdropServer, utilizing Mistral for AI agents, Gladia for speech-to-text, and Cartesia for low-latency text-to-speech. Requires respective API keys.

```typescript
// Use different providers for optimal cost/quality balance  
new MicdropServer(socket, {  
  agent: new MistralAgent({  
    // Cost-effective LLM  
    apiKey: process.env.MISTRAL_API_KEY,  
    model: 'mistral-large-latest',  
  }),  
  
  stt: new GladiaSTT({  
    // Fast, affordable STT  
    apiKey: process.env.GLADIA_API_KEY,  
  }),  
  
  tts: new CartesiaTTS({  
    // Low-latency TTS  
    apiKey: process.env.CARTESIA_API_KEY,  
    voiceId: 'cartesia-voice-id',  
  }),  
})
```

--------------------------------

### Start and Stop Micdrop Call

Source: https://micdrop.dev/docs/client/utility-classes/micdrop-client

Initiates and terminates the microphone and WebSocket connection for a call. The `start` method takes optional configuration, while `stop` performs a clean shutdown.

```typescript
async start(options?: MicdropOptions): Promise<void>

async stop(): Promise<void>
```

--------------------------------

### Agent Constructor and Conversation Initialization

Source: https://micdrop.dev/docs/ai-integration/custom-integrations/custom-agent

Initializes the Agent with provided options and sets up the conversation history starting with the system prompt.

```typescript
constructor(protected options: Options) {
  super()
  this.conversation = [{ role: 'system', content: options.systemPrompt }]
}
```

--------------------------------

### Start Micdrop Microphone Before Call (JavaScript)

Source: https://micdrop.dev/docs/client/start-stop-call

Starts the microphone independently before initiating a call, useful for permission checks and audio testing. The call can then be started separately. `Micdrop.start()` automatically starts the microphone if it's not already running.

```javascript
// Start microphone first
await Micdrop.startMic({
  vad: ['volume', 'silero'],
})

// Then start the call when you want
await Micdrop.start({
  url: 'ws://localhost:8081',
})
```

--------------------------------

### Configure Micdrop Call Start Options (JavaScript)

Source: https://micdrop.dev/docs/client/start-stop-call

Starts a Micdrop call with advanced configuration options, including parameters for authentication, Voice Activity Detection (VAD), interruption settings, and debug logging. The WebSocket server URL is required.

```javascript
await Micdrop.start({
  url: 'ws://localhost:8081/',

  params: {
    language: 'en-US',
    userId: '123',
  },

  vad: ['volume', 'silero'],

  disableInterruption: false,

  debugLog: true,
})
```

--------------------------------

### Initialize MistralAgent and Integrate with MicdropServer

Source: https://micdrop.dev/docs/ai-integration/provided-integrations/mistral

Demonstrates how to initialize the MistralAgent with API key, model, and system prompt, and then integrate it with MicdropServer. This setup is crucial for enabling AI-powered conversations.

```javascript
import { MistralAgent } from '@micdrop/mistral'  
import { MicdropServer } from '@micdrop/server'  
  
const agent = new MistralAgent({
  apiKey: process.env.MISTRAL_API_KEY || '',  
  model: 'mistral-large-latest',
  systemPrompt: 'You are a helpful assistant',
})

// Use with MicdropServer  
new MicdropServer(socket, {
  agent,
  // ... other options  
})

```

--------------------------------

### Start Call API

Source: https://micdrop.dev/docs/client/start-stop-call

Manage voice conversations by starting the Micdrop client connection and microphone. This endpoint allows for configuration of authentication, voice activity detection, and other call parameters.

```APIDOC
## POST /micdrop/start

### Description
Starts a voice conversation by initiating the Micdrop client connection and microphone.

### Method
POST

### Endpoint
`/micdrop/start`

### Parameters
#### Request Body
- **url** (string) - Required - WebSocket server URL.
- **params** (object) - Optional - Authentication and custom parameters.
  - **authorization** (string) - Optional - Bearer token for authentication.
  - **[key]** (any) - Optional - Custom parameters for server-side validation.
- **vad** (array) - Optional - Voice Activity Detection configuration (e.g., `['volume', 'silero']`).
- **disableInterruption** (boolean) - Optional - Disable interruption when the assistant speaks.
- **debugLog** (boolean) - Optional - Enable debug logging.

### Request Example
```json
{
  "url": "ws://localhost:8081",
  "params": {
    "language": "en-US",
    "userId": "123",
    "authorization": "Bearer your-jwt-token"
  },
  "vad": ["volume", "silero"],
  "disableInterruption": false,
  "debugLog": true
}
```

### Response
#### Success Response (200)
Indicates the call has started successfully.

#### Response Example
```json
{
  "status": "started"
}
```

### Error Handling
Handles connection, authentication, and other startup errors.
- **Unauthorized**: User is not authorized.
- **Mic**: Microphone permission issues.
- **MissingUrl**: WebSocket URL is not provided.
- **Connection**: Network connection issues.
- **InternalServer**: Server-side error.
- **BadRequest**: Invalid request format.
- **NotFound**: Endpoint not found on the server.
- **Unknown**: Other unexpected errors.
```

--------------------------------

### Start Microphone with VAD Configuration

Source: https://micdrop.dev/docs/client/utility-classes/micdrop-client

Activates the microphone, optionally allowing for device selection and Voice Activity Detection (VAD) configuration. This can be used to prepare the microphone before a call begins.

```typescript
async startMic(params: {
  vad?: VADConfig
  deviceId?: string
}): Promise<void>
```

--------------------------------

### Install @micdrop/react Package

Source: https://micdrop.dev/docs/client/react-hooks

Install the @micdrop/react package using npm to integrate Micdrop voice conversations into your React application. This is the first step before using any of the provided hooks.

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

--------------------------------

### Start Micdrop with Different VAD Configurations

Source: https://micdrop.dev/docs/client/vad

Demonstrates how to initialize Micdrop with various Voice Activity Detection (VAD) settings, including default volume-based, AI-based Silero, and combinations of multiple VADs. This is done using the `Micdrop.start` method.

```javascript
import { Micdrop } from '@micdrop/client'

// Use volume-based detection (default)
await Micdrop.start({
  url: 'ws://localhost:8081',
  vad: 'volume',
})

// Use AI-based detection for better accuracy
await Micdrop.start({
  url: 'ws://localhost:8081',
  vad: 'silero',
})

// Combine multiple VADs for best results
await Micdrop.start({
  url: 'ws://localhost:8081',
  vad: ['volume', 'silero'],
})
```

--------------------------------

### Start Real-time Voice Conversation with Micdrop Client

Source: https://micdrop.dev/docs/client

This JavaScript code snippet demonstrates how to initiate a real-time voice conversation using the Micdrop client. It requires the WebSocket server URL as input. Ensure your browser supports WebSocket, Web Audio, MediaDevices, and MediaRecorder APIs.

```javascript
import { Micdrop } from '@micdrop/client'  
  
// Start a voice conversation  
await Micdrop.start({
  url: 'ws://localhost:8081',
})
```

--------------------------------

### Basic Error Handling with handleError - JavaScript

Source: https://micdrop.dev/docs/server/error-handling

Demonstrates basic error handling for server-side connections using the `handleError` utility. It catches exceptions during component setup and logs them to the socket. Dependencies include '@micdrop/server'.

```javascript
import { MicdropServer, handleError } from '@micdrop/server'  
  
wss.on('connection', async (socket) => {  
  try {  
    // Setup AI components  
    const agent = new OpenaiAgent({  
      apiKey: process.env.OPENAI_API_KEY,  
    })
    new MicdropServer(socket, { agent, tts })
  } catch (error) {
    // Handle setup errors
    handleError(socket, error)
  }
})
```

--------------------------------

### Monitor Micdrop Call State Changes During Startup (JavaScript)

Source: https://micdrop.dev/docs/client/start-stop-call

Listens for 'StateChange' events emitted by Micdrop to track the startup progress, such as when the call is beginning or has successfully started. This allows for UI updates or logging.

```javascript
Micdrop.on('StateChange', (state) => {
  if (state.isStarting) {
    console.log('Starting call...')
  }

  if (state.isStarted) {
    console.log('Call started! Ready for conversation.')
  }
})
```

--------------------------------

### MicDrop Speaker Module Usage Example (JavaScript)

Source: https://micdrop.dev/docs/client/utility-classes/speaker

Demonstrates how to use the Speaker module to change output devices, play audio blobs, stop playback, and monitor volume and playing events. Assumes audio is in pcm_s16le format. Requires Web Audio API and device selection support.

```javascript
import { Speaker } from '@micdrop/client'  
  
// Change to a specific output device  
await Speaker.changeDevice('device-id')  
  
// Play an audio blob (pcm_s16le)  
const audioResponse = await fetch('audio.wav')  
if (audioResponse.ok) {  
  const audioBlob = await audioResponse.blob()  
  await Speaker.playAudio(audioBlob)  
}  
  
// Stop playback and cleanup  
Speaker.stopAudio()  
  
// Monitor volume changes using the audio analyser  
// Volume is in dB range -100 to 0  
Speaker.analyser.on('volume', (volume: number) => {  
  // Convert to 0-100 range for visualization if needed  
  const normalizedVolume = Math.max(0, volume + 100)  
  console.log('Current volume:', normalizedVolume)  
})  
  
// Listen for playing events  
Speaker.on('StartPlaying', () => {  
  console.log('Speaker started playing')  
})  
Speaker.on('StopPlaying', () => {  
  console.log('Speaker stopped playing')  
})
```

--------------------------------

### Handle Micdrop Call Startup Errors (JavaScript)

Source: https://micdrop.dev/docs/client/start-stop-call

Implements error handling for the Micdrop `start` function using a try-catch block. It logs errors and includes a switch statement to handle specific error codes like 'Unauthorized', 'Mic', 'Connection', etc., providing tailored user feedback.

```javascript
try {
  await Micdrop.start({
    url: 'ws://localhost:8081',
  })
  console.log('Call started successfully!')
} catch (error) {
  console.error('Failed to start call:', error.code, error.message)

  switch (error.code) {
    case 'Unauthorized':
      break
    case 'Mic':
      break
    case 'MissingUrl':
      break
    case 'Connection':
      break
    case 'InternalServer':
      break
    case 'BadRequest':
      break
    case 'NotFound':
      break
    case 'Unknown':
      break
    default:
      break
  }
}
```

--------------------------------

### React Example: Update UI Based on Tool Calls

Source: https://micdrop.dev/docs/client/handling-tool-calls

Utilize the `useMicdropState` hook in React to listen for 'ToolCall' events and dynamically update the user interface. This example demonstrates handling different tool types like 'save_user_data' and 'send_email' to display relevant information or status updates to the user.

```javascript
import { useMicdropState } from '@micdrop/react'  
import { useState, useEffect } from 'react'  
  
function SmartInterface() {  
  const [userProfile, setUserProfile] = useState(null)  
  const [emailStatus, setEmailStatus] = useState(null)  
  const { isStarted } = useMicdropState()  
  
  useEffect(() => {  
    if (!isStarted) return  
  
    const handleToolCall = (toolCall) => {  
      // Handle different tool types  
      switch (toolCall.name) {  
        case 'save_user_data':  
          // Update user profile in UI  
          if (toolCall.output.success) {  
            setUserProfile({  
              ...toolCall.parameters,  
              id: toolCall.output.userId,  
              lastUpdated: new Date(),  
            })  
          }  
          break  
  
        case 'send_email':  
          // Show email status  
          setEmailStatus({  
            sent: toolCall.output.sent,  
            messageId: toolCall.output.messageId,  
            recipient: toolCall.parameters.to,  
            timestamp: new Date(),  
          })  
          break  
  
        case 'search_database':  
          // Could trigger a UI update with search results  
          console.log(`Found ${toolCall.output.results.length} results`)  
          break  
      }  
    }  
  
    Micdrop.on('ToolCall', handleToolCall)  
  
    return () => {  
      Micdrop.off('ToolCall', handleToolCall)  
    }  
  }, [isStarted])  
  
  return (  
    <div className="smart-interface">  
      {userProfile && (  
        <div className="user-profile">  
          <h3>User Profile</h3>  
          <p>Name: {userProfile.name}</p>  
          <p>Email: {userProfile.email}</p>  
          <p>ID: {userProfile.id}</p>  
          <small>  
            Last updated: {userProfile.lastUpdated.toLocaleString()}  
          </small>  
        </div>  
      )}  
  
      {emailStatus && (  
        <div className="email-status">  
          <h3>Email Status</h3>  
          <p>  
            {emailStatus.sent ? '✅ Sent' : '❌ Failed'} to{' '}  
            {emailStatus.recipient}  
          </p>  
          {emailStatus.messageId && (  
            <small>Message ID: {emailStatus.messageId}</small>  
          )}  
        </div>  
      )}  
    </div>  
  )  
}
```

--------------------------------

### Basic Fastify Server Setup with Micdrop

Source: https://micdrop.dev/docs/server/with-fastify

Sets up a basic Fastify server with WebSocket support and integrates the Micdrop server for handling voice calls. It configures AI components like OpenAI, Gladia Speech-to-Text, and ElevenLabs Text-to-Speech. The server listens on port 8081.

```javascript
import { MicdropServer } from '@micdrop/server'
import { OpenaiAgent } from '@micdrop/openai'
import { GladiaSTT } from '@micdrop/gladia'
import { ElevenLabsTTS } from '@micdrop/elevenlabs'
import Fastify from 'fastify'

const fastify = Fastify({ logger: true })

// Register WebSocket support
await fastify.register(import('@fastify/websocket'))

// WebSocket route for voice calls
fastify.register(async function (fastify) {
  fastify.get('/call', { websocket: true }, (connection, request) => {
    // Setup AI components
    const agent = new OpenaiAgent({
      apiKey: process.env.OPENAI_API_KEY || '',
      systemPrompt: 'You are a helpful voice assistant built with Fastify',
    })

    const stt = new GladiaSTT({
      apiKey: process.env.GLADIA_API_KEY || '',
    })

    const tts = new ElevenLabsTTS({
      apiKey: process.env.ELEVENLABS_API_KEY || '',
      voiceId: process.env.ELEVENLABS_VOICE_ID || '',
    })

    // Handle voice conversation
    new MicdropServer(connection.socket, {
      firstMessage: 'Hello from Fastify! How can I help you?',
      agent,
      stt,
      tts,
    })
  })
})

// Start server
try {
  await fastify.listen({ port: 8081, host: '0.0.0.0' })
  console.log('🎤 Fastify + Micdrop server running on http://localhost:8081')
} catch (err) {
  fastify.log.error(err)
  process.exit(1)
}
```

--------------------------------

### Implement Simple Echo Agent (TypeScript)

Source: https://micdrop.dev/docs/ai-integration/custom-integrations/custom-agent

A straightforward example of a custom agent that extends the base `Agent` class. The `generateAnswer` method is implemented to simply echo back the last user message. It includes a simulated delay and streams the response.

```typescript
import { Agent, MicdropConversationMessage } from '@micdrop/server'
import { PassThrough } from 'stream'

class EchoAgent extends Agent {
  protected async generateAnswer(stream: PassThrough): Promise<void> {
    // Get the last user message
    const lastUserMessage = this.conversation
      .filter((msg) => msg.role === 'user')
      .pop() as MicdropConversationMessage

    if (lastUserMessage) {
      // Simulate a delay before responding
      await new Promise((resolve) => setTimeout(resolve, 100))

      const response = `You said: "${lastUserMessage.content}""

      // Stream the response
      stream.write(response)

      // Add to conversation
      this.addAssistantMessage(response)
    }
  }

  cancel(): void {
    // Nothing to cancel for this simple implementation
  }
}

// Usage
const echoAgent = new EchoAgent({
  systemPrompt: 'You are an echo agent that repeats what users say.',
})

echoAgent.addUserMessage('Hello!')
const stream = echoAgent.answer()

stream.on('data', (chunk) => {
  console.log('Chunk:', chunk.toString())
})

stream.on('end', async () => {
  console.log('Stream ended')
  echoAgent.destroy()
})
```

--------------------------------

### Monitor Speaker Output with Vanilla JavaScript

Source: https://micdrop.dev/docs/client/devices-management

This Vanilla JavaScript example demonstrates how to monitor speaker output levels using the `@micdrop/client` library. It allows you to listen for volume changes, log them to the console, and update your UI accordingly. Remember to call `Speaker.analyser.off` to clean up the event listener when it's no longer needed.

```javascript
import { Speaker } from '@micdrop/client'
  
// Listen to speaker volume changes
const onSpeakerVolumeChange = (volume: number) => {
  console.log('Speaker volume:', volume, 'dB')
  // Update your UI with the volume level
  updateSpeakerVolumeIndicator(volume)
}
  
// Start listening to volume events
Speaker.analyser.on('volume', onSpeakerVolumeChange)
  
// Stop listening (cleanup)
Speaker.analyser.off('volume', onSpeakerVolumeChange)

```

--------------------------------

### Extract Custom Tag Content from Assistant Responses with Node.js

Source: https://micdrop.dev/docs/server/extract

This Node.js example shows how to configure an OpenaiAgent to extract content enclosed within custom start and end tags from assistant responses. The extracted content is passed to a callback function for further processing, such as creating a task, and can be saved to message metadata. The system prompt guides the assistant to use the specified tags.

```javascript
const agent = new OpenaiAgent({
  apiKey: process.env.OPENAI_API_KEY || '',
  systemPrompt: `You are a task management assistant.
  When creating tasks, wrap the task details in <TASK></TASK> tags at the end.`,
  extract: {
    startTag: '<TASK>',
    endTag: '</TASK>',
    callback: (taskData) => {
      console.log('New task created:', taskData)
      createTask(taskData)
    },
    saveInMetadata: true,
  },
})
```

--------------------------------

### Handle EndCall Event in Micdrop

Source: https://micdrop.dev/docs/client/start-stop-call

Listens for the 'EndCall' event from the assistant to gracefully stop the Micdrop call. This ensures the call is ended when the assistant signals it, for example, after the user says 'Bye bye'.

```javascript
Micdrop.on('EndCall', () => {
  console.log('🔚 Call ended by assistant')
  Micdrop.stop()
})
```

--------------------------------

### Initialize AI SDK Agent with OpenAI Model

Source: https://micdrop.dev/docs/ai-integration/provided-integrations/ai-sdk

Demonstrates how to initialize the AiSdkAgent using an OpenAI model. It configures the model, system prompt, and optional AI SDK settings.

```typescript
import { AiSdkAgent } from '@micdrop/ai-sdk'
import { MicdropServer } from '@micdrop/server'
import { openai } from '@ai-sdk/openai' // or any other provider

const agent = new AiSdkAgent({
  model: openai('gpt-4o'), // Use any AI SDK compatible model
  systemPrompt: 'You are a helpful assistant',

  // Custom AI SDK settings (optional)
  settings: {
    temperature: 0.7,
    maxTokens: 150,
  },
})

// Use with MicdropServer
new MicdropServer(socket, {
  agent,
  // ... other options
})
```

--------------------------------

### Initialize OpenAI STT with MicdropServer (JavaScript)

Source: https://micdrop.dev/docs/ai-integration/provided-integrations/openai

Demonstrates the usage of OpenaiSTT for real-time speech-to-text with MicdropServer. It requires an API key and allows configuration of the transcription model, language, and timeout.

```javascript
import { OpenaiSTT } from '@micdrop/openai'  
import { MicdropServer } from '@micdrop/server'  

const stt = new OpenaiSTT({
  apiKey: process.env.OPENAI_API_KEY || '',
  model: 'gpt-4o-transcribe', // Default real-time transcription model
  language: 'en', // Optional: specify language for better accuracy
  prompt: 'Transcribe the incoming audio in real time.', // Optional: custom prompt
  transcriptionTimeout: 4000, // Optional: timeout in ms for transcription
})

// Use with MicdropServer
new MicdropServer(socket, {
  stt,
  // ... other options
})

```

--------------------------------

### Initialize Gladia STT with Micdrop Server (JavaScript)

Source: https://micdrop.dev/docs/ai-integration/provided-integrations/gladia

Initializes the GladiaSTT class with an API key and integrates it with MicdropServer. Requires the Gladia API key for authentication.

```javascript
import { GladiaSTT } from '@micdrop/gladia'  
import { MicdropServer } from '@micdrop/server'  
  
const stt = new GladiaSTT({
  apiKey: process.env.GLADIA_API_KEY || '',  
})
  
// Use with MicdropServer  
new MicdropServer(socket, {
  stt,
  // ... other options  
})

```

--------------------------------

### Initialize OpenAI Agent with MicdropServer (JavaScript)

Source: https://micdrop.dev/docs/ai-integration/provided-integrations/openai

Demonstrates how to initialize and use the OpenaiAgent with MicdropServer. It requires an OpenAI API key and allows configuration of the model, system prompt, and custom API settings.

```javascript
import { OpenaiAgent } from '@micdrop/openai'  
import { MicdropServer } from '@micdrop/server'  
  
const agent = new OpenaiAgent({
  apiKey: process.env.OPENAI_API_KEY || '',
  model: 'gpt-4o', // Default model
  systemPrompt: 'You are a helpful assistant',
  
  // Custom OpenAI Responses API settings (optional)
  settings: {
    temperature: 0.7,
    max_output_tokens: 150,
  },
})

// Use with MicdropServer
new MicdropServer(socket, {
  agent,
  // ... other options
})

```

--------------------------------

### Authenticate Micdrop Call Connection (JavaScript)

Source: https://micdrop.dev/docs/client/start-stop-call

Starts a Micdrop call while passing authentication parameters, such as a JWT token, to the server for validation. The WebSocket server URL is required.

```javascript
await Micdrop.start({
  url: 'ws://localhost:8081',
  params: {
    authorization: 'Bearer your-jwt-token',
  },
})
```

--------------------------------

### Install Micdrop React Package

Source: https://micdrop.dev/docs/client/call-state

Installs the official React package for Micdrop, which provides hooks for seamless integration with React applications. This package simplifies state management for voice calls within a React environment.

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