> ## Documentation Index
> Fetch the complete documentation index at: https://anam.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Add ElevenLabs client tools

> Configure an ElevenLabs client tool and register a JavaScript SDK handler to display notifications and return results to the conversation.

Let your agent take action in your app, such as displaying a notification during a conversation. Build on your working session from the [three-step quickstart](/docs/integrations/elevenlabs/agents#quickstart) by adding client tools.

This example includes an ElevenLabs client tool named `show_notification`. When the agent calls it, Anam forwards the call to the JavaScript SDK in the browser. The handler displays the requested message and returns a result to the ElevenLabs conversation.

Start with the [browser session setup](/docs/integrations/elevenlabs/start-session), then add the tool and handler below.

## Configure the tool in ElevenLabs

In the ElevenLabs agent dashboard, open **Tools** and add the following tool:

| Setting | Value |
| - | - |
| Tool Type | **Client** |
| Name | `show_notification` |
| Wait for response | Enabled |
| Required parameter | `message` (String) |

Tool and parameter names are case-sensitive. Describe the tool as displaying a message on screen when the user asks for one. The [ElevenLabs client tools guide](https://elevenlabs.io/docs/eleven-agents/customization/tools/client-tools) shows where to find these settings.

## Register the handler

Register the handler before starting the Anam stream:

```typescript theme={"system"}
const unregisterToolHandlers = [
  anamClient.registerToolCallHandler("show_notification", {
    onStart: async ({ arguments: args }) => {
      if (typeof args.message !== "string" || !args.message.trim()) {
        throw new Error("message must be a non-empty string");
      }

      const message = args.message.trim();
      setNotification(message);
      return `Displayed the notification: ${message}`;
    },
    onFail: async ({ errorMessage }) => {
      console.error("show_notification failed:", errorMessage);
    },
  }),
];

await anamClient.streamToVideoElement("avatar-video");
```

Returning a string from `onStart` sends that value back as the tool result. With **Wait for response** enabled, ElevenLabs adds it to the conversation context before the agent continues. Keep the functions in `unregisterToolHandlers` and call them when the session ends or the component unmounts. The [Anam client tools docs](/docs/personas/tools/client-tools) cover the full handler lifecycle.

The [complete example](https://github.com/anam-org/anam-cookbook/tree/main/examples/elevenlabs-server-side-agent-nextjs) includes argument validation, a notification UI, handler cleanup, and a status panel for checking tool calls.

## Keep building

<CardGroup cols={2}>
  <Card title="Director Notes" icon="arrow-right" href="/docs/integrations/elevenlabs/director-notes">
    Add expressions that follow your agent's voice.
  </Card>

  <Card title="Session customisation" icon="arrow-right" href="/docs/integrations/elevenlabs/session-customisation">
    Personalise conversations with user-specific variables and agent settings.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.