---
title: "Display Conversation Messages | Micdrop"
description: "Display and manage conversation messages between the user and AI assistant during voice calls."
url: "https://micdrop.dev/docs/client/display-conversation-messages"
---

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

# Display Conversation Messages

Display and manage conversation messages between the user and AI assistant during voice calls.

## Accessing Messages

The conversation is available through the Micdrop state and contains all messages exchanged during the current session.

### Basic Usage

Access conversation messages using the state:

```
import { Micdrop } from '@micdrop/client'
// Get current conversationconst conversation = Micdrop.conversation
console.log('Total messages:', conversation.length)conversation.forEach((message, index) => {  console.log(`${message.role}: ${message.content}`)})
```

### Message Structure

Each item in the conversation can be a regular message, tool call, or tool result:

```
type MicdropConversationItem =  | MicdropConversationMessage  | MicdropConversationToolCall  | MicdropConversationToolResult
interface MicdropConversationMessage {  role: 'user' | 'assistant' | 'system'  content: string  metadata?: Record<string, any>}
interface MicdropConversationToolCall {  role: 'tool_call'  toolName: string  parameters: string // JSON string}
interface MicdropConversationToolResult {  role: 'tool_result'  toolName: string  output: string // JSON string}
```

**Message Types:**

*   **`MicdropConversationMessage`**: Regular conversation messages
    *   `'user'`: Messages from the user (transcribed speech)
    *   `'assistant'`: Messages from the AI assistant
    *   `'system'`: System messages (rare, used for debugging)
*   **`MicdropConversationToolCall`**: When the AI agent calls a tool/function
*   **`MicdropConversationToolResult`**: The result/output from a tool execution

## Message Events

Listen for message events to handle real-time updates:

```
import { Micdrop } from '@micdrop/client'
Micdrop.on('StateChange', (state) => {  console.log('Messages:', state.conversation)})
```

## React Integration

Use the React hook to automatically update your UI when new messages arrive:

```
import { useMicdropState } from '@micdrop/react'
function ConversationDisplay() {  const { conversation } = useMicdropState()
  return (    <div className="conversation">      {conversation.map((message, index) => (        <div key={index} className={`message ${message.role}`}>          <strong>{message.role}:</strong> {message.content}        </div>      ))}    </div>  )}
```

### Complete React Component Example

Here’s a full-featured conversation component with styling and auto-scroll that show tool calls:

```
import { useMicdropState } from '@micdrop/react'import { useEffect, useRef } from 'react'
interface Props {  className?: string}
export default function Conversation({ className }: Props) {  const { conversation } = useMicdropState()  const bottomRef = useRef<HTMLDivElement>(null)
  // Auto-scroll to bottom when new messages arrive  useEffect(() => {    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })  }, [conversation.length])
  const renderMessage = (item: (typeof conversation)[0], index: number) => {    switch (item.role) {      case 'user':      case 'assistant':      case 'system':        return (          <div            key={index}            className={`max-w-[80%] p-3 rounded-xl ${              item.role === 'assistant'                ? 'bg-green-100 ml-0 mr-auto rounded-bl-none'                : item.role === 'user'                  ? 'bg-white ml-auto mr-0 rounded-br-none'                  : 'bg-gray-50 mx-auto'            }`}          >            {item.content}          </div>        )
      case 'tool_call':        return (          <div            key={index}            className="max-w-[80%] p-3 rounded-xl bg-blue-50 ml-0 mr-auto border-l-4 border-blue-300"          >            <div className="text-sm text-blue-600 font-medium mb-1">              🔧 Tool Call: {item.toolName}            </div>            <div className="text-xs text-blue-500 font-mono bg-blue-100 p-2 rounded">              {JSON.stringify(JSON.parse(item.parameters), null, 2)}            </div>          </div>        )
      case 'tool_result':        return (          <div            key={index}            className="max-w-[80%] p-3 rounded-xl bg-purple-50 ml-0 mr-auto border-l-4 border-purple-300"          >            <div className="text-sm text-purple-600 font-medium mb-1">              📋 Tool Result: {item.toolName}            </div>            <div className="text-xs text-purple-500 font-mono bg-purple-100 p-2 rounded">              {JSON.stringify(JSON.parse(item.output), null, 2)}            </div>          </div>        )
      default:        return null    }  }
  return (    <div className={`flex flex-col overflow-y-auto p-6 ${className}`}>      <div className="flex flex-col gap-4">        {conversation.map((item, index) => renderMessage(item, index))}        <div ref={bottomRef} />      </div>    </div>  )}
```

## Clearing Conversation

Clear the conversation history when needed (doesn’t apply on server):

```
import { Micdrop } from '@micdrop/client'
// Clear all messagesMicdrop.conversation = []
```

The conversation is automatically cleared when the call starts, not when it ends.

[Previous← Call State](/docs/client/call-state)[NextHandling Tool Calls →](/docs/client/handling-tool-calls)

On this page

*   [Accessing Messages](#accessing-messages)
*   [Basic Usage](#basic-usage)
*   [Message Structure](#message-structure)
*   [Message Events](#message-events)
*   [React Integration](#react-integration)
*   [Complete React Component Example](#complete-react-component-example)
*   [Clearing Conversation](#clearing-conversation)