Client Tools

Overview

Client tools are JavaScript handlers that run in the visitor's browser when the agent decides to call a function. For ElevenLabs-backed agents, the tool itself — name, description, parameter schema — is defined on the ElevenLabs side (in the agent's Tools configuration). D-ID does not store the tool definition; the only thing you do on the D-ID side is register the frontend handler that runs when the tool is called.

You also need to enable two events in ElevenLabs so the tool calls reach D-ID. Without those events, D-ID never sees the call and your handler never runs.

Enable tool events in ElevenLabs

In the ElevenLabs dashboard, open your agent and select the Advanced tab. Scroll to the Client events section, click Add event, and add each of the following:

• agent_tool_request
• agent_tool_response

Both events must be enabled. The request event tells D-ID a tool is being called; the response event closes the loop so the agent receives the handler's return value.

Define the tool in ElevenLabs

In your ElevenLabs agent dashboard, open the Tools tab and add a tool. Set:

• Type — Client tool.
• Name — the identifier you'll use when registering the handler (e.g. get_user_cart).
• Description — what the tool does. The ElevenLabs LLM uses this to decide when to call it.
• Parameters — the JSON schema the LLM will follow when producing arguments.

D-ID does not need a matching tool definition. The name is the only thing that ties the ElevenLabs tool to your frontend handler.

Register the handler

Register the handler in your frontend using the same name you set in ElevenLabs. The handler runs when the agent calls the tool; whatever it returns is sent back to the ElevenLabs LLM as the tool result.

With the Client SDK

import { createAgentManager } from '@d-id/client-sdk';

const agentManager = createAgentManager('v2_agt_abc123', {
  auth: { type: 'key', clientKey: '<CLIENT_KEY>' },
  callbacks: { /* ... */ },
});

agentManager.registerClientTool('get_user_cart', async (args) => {
  const cart = readCartFromStore();
  return JSON.stringify({
    items: cart.items,
    total: cart.total,
    currency: cart.currency,
  });
});

await agentManager.connect();

With the Agents UI Embed

<script src="https://agent.d-id.com/index.js"
        data-name="did-agent"
        data-agent-id="v2_agt_abc123"
        data-client-key="<CLIENT_KEY>">
</script>

<script>
  window.DID_AGENTS_API.events.on('connection', ({ state }) => {
    if (state !== 'Connected') return;

    window.DID_AGENTS_API.functions.registerClientTool(
      'get_user_cart',
      async (args) => {
        const cart = readCartFromStore();
        return JSON.stringify({
          items: cart.items,
          total: cart.total,
          currency: cart.currency,
        });
      }
    );
  });
</script>

Handler contract

See Client Tools for full details on the handler contract, lifecycle, and observability callbacks.

FAQ