---
title: "Handling Tool Calls | Micdrop"
description: "Monitor and respond to AI agent tool executions in real-time on the client side."
url: "https://micdrop.dev/docs/client/handling-tool-calls"
---

*   [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)

# Handling Tool Calls

Monitor and respond to AI agent tool executions in real-time on the client side.

## Overview

When AI agents use tools (functions) during conversations, you can monitor these tool calls on the client side. Tool calls and their results are now part of the conversation history, making them easy to display and track. This is useful for:

*   **Real-time UI updates**: Show users what actions the AI is performing
*   **Progress indicators**: Display loading states during tool execution
*   **Interactive confirmations**: Allow users to approve/deny tool actions
*   **Analytics and logging**: Track tool usage and effectiveness
*   **Conversation history**: Tool calls appear in the conversation alongside messages

## Basic Tool Call Monitoring

You can monitor tool calls in two ways:

### 1\. Through Conversation History

Tool calls and results are automatically added to the conversation history:

```
import { Micdrop } from '@micdrop/client'
// Access conversation including tool calls and resultsconst conversation = Micdrop.conversation
conversation.forEach((item, index) => {  switch (item.role) {    case 'tool_call':      console.log('Tool called:', item.toolName)      console.log('Parameters:', JSON.parse(item.parameters))      break    case 'tool_result':      console.log('Tool result:', item.toolName)      console.log('Output:', JSON.parse(item.output))      break    case 'user':    case 'assistant':      console.log(`${item.role}: ${item.content}`)      break  }})
```

### 2\. Through Real-time Events

Listen for tool call events using the Micdrop client:

```
import { Micdrop } from '@micdrop/client'
// Listen for tool calls from the AI agentMicdrop.on('ToolCall', (toolCall) => {  console.log('AI is using tool:', toolCall.name)  console.log('Parameters:', toolCall.parameters)  console.log('Result:', toolCall.output)})
```

Only tools with the `emitOutput` option enabled will emit `ToolCall` events.

## Tool Call Structure

Each tool call event contains complete information about the tool execution:

```
interface ToolCall {  name: string // Name of the tool that was called  parameters: any // Parameters passed to the tool  output: any // Result returned by the tool}
```

## React Example

Update your interface based on specific tool calls:

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

## Server-side implementation

[Agents can pass tool calls output](/docs/ai-integration/custom-integrations/custom-agent#core-interfaces) to the client by emitting the `ToolCall` event.

For example, the [OpenAI Agent](/docs/ai-integration/provided-integrations/openai#tool-call-events) emits the `ToolCall` event when a tool is called with the `emitOutput` option enabled.

[Previous← Display Conversation Messages](/docs/client/display-conversation-messages)[NextDevice Management →](/docs/client/devices-management)

On this page

*   [Overview](#overview)
*   [Basic Tool Call Monitoring](#basic-tool-call-monitoring)
*   [1\. Through Conversation History](#1-through-conversation-history)
*   [2\. Through Real-time Events](#2-through-real-time-events)
*   [Tool Call Structure](#tool-call-structure)
*   [React Example](#react-example)
*   [Server-side implementation](#server-side-implementation)