Add ElevenLabs client tools

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 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, 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 shows where to find these settings.

Register the handler

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 cover the full handler lifecycle. The complete example includes argument validation, a notification UI, handler cleanup, and a status panel for checking tool calls.

Keep building

Director Notes

Add expressions that follow your agent’s voice.

Session customisation

Personalise conversations with user-specific variables and agent settings.

Last modified on October 8, 2026

ElevenLabs Agents

Upgrade your avatar

Help

Add ElevenLabs client tools

Configure the tool in ElevenLabs

Register the handler

Keep building

Director Notes

Session customisation

​Configure the tool in ElevenLabs

​Register the handler

​Keep building

Director Notes

Session customisation

Configure the tool in ElevenLabs

Register the handler

Keep building