> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.

# Clienttools

**Clienttools** stellen je assistent in staat functies aan de clientzijde uit te voeren. Anders dan [webhooktools](/docs/nl/eleven-agents/customization/tools/webhook-tools) kunnen clienttools de assistent acties laten uitvoeren, zoals browserevents activeren, functies aan de clientzijde uitvoeren of meldingen naar een UI sturen.

## Overzicht

Applicaties kunnen vereisen dat assistenten rechtstreeks met de omgeving van de gebruiker communiceren. Tools aan de clientzijde geven je assistent de mogelijkheid om bewerkingen aan de clientzijde uit te voeren.

Hier zijn enkele voorbeelden waarbij clienttools nuttig kunnen zijn:

* **UI-events activeren**: Laat een assistent browserevents activeren, zoals waarschuwingen, modals of meldingen.
* **Interactie met de DOM**: Laat een assistent het Document Object Model (DOM) aanpassen voor dynamische contentupdates of om gebruikers door complexe interfaces te begeleiden.

> **Info**
>
> Gebruik [webhook- tools](/docs/nl/eleven-agents/customization/tools/webhook-tools) om API's aan de serverzijde aan te roepen.

## Handleiding

### Vereisten

* Een [ElevenLabs-account](https://elevenlabs.io)
* Een geconfigureerde ElevenLabs conversatieagent ([maak er hier een](https://elevenlabs.io/app/agents))

#### Een nieuwe tool aan de clientzijde maken

Configureer een clienttool met de naam `logMessage` en een verplichte stringparameter `message` ("Het bericht dat naar de console moet worden gelogd").

#### Toevoegen via het dashboard

Ga naar het dashboard van je agent. Klik in het gedeelte **Tools** op **Add Tool**. Zorg dat **Tool Type** is ingesteld op **Client**. Configureer vervolgens het volgende:

| Instelling   | Parameter                                                                                      |
| ------------ | ---------------------------------------------------------------------------------------------- |
| Naam         | logMessage                                                                                     |
| Beschrijving | Gebruik deze tool aan de clientzijde om een bericht naar de client van de gebruiker te loggen. |

Maak vervolgens een nieuwe parameter `message` met de volgende configuratie:

| Instelling   | Parameter                                                                                            |
| ------------ | ---------------------------------------------------------------------------------------------------- |
| Gegevenstype | String                                                                                               |
| ID           | message                                                                                              |
| Verplicht    | true                                                                                                 |
| Beschrijving | Het bericht dat naar de console moet worden gelogd. Zorg dat het bericht informatief en relevant is. |

![Instelling van de logMessage-clienttool](/docs/_fern-img/f7ed25d49a2a814b76112f3e385d471e0dc8444705e11f2f6fad0bd23f1eae12.webp)

#### Toevoegen via de CLI

#### Een configuratiebestand voor de tool maken

Sla het volgende op als `tool_configs/log_message.json`:

```json
{
  "type": "client",
  "name": "logMessage",
  "description": "Use this client-side tool to log a message to the user's client.",
  "expects_response": false,
  "parameters": {
    "type": "object",
    "properties": {
      "message": {
        "type": "string",
        "description": "The message to log in the console."
      }
    },
    "required": ["message"]
  }
}
```

#### De tool toevoegen

```bash
elevenlabs tools add "logMessage" --type "client" --config-path ./tool_configs/log_message.json
```

#### Naar de tool verwijzen vanuit je agent

Bewerk `agent_configs/<agent-name>.json` om de ID van de tool toe te voegen aan `conversation_config.agent.prompt.tool_ids` en push vervolgens:

```bash
elevenlabs agents push --agent "<agent-name>"
```

#### Toevoegen via de API

```python
from elevenlabs import ElevenLabs, ToolRequestModel

elevenlabs = ElevenLabs()

tool = elevenlabs.conversational_ai.tools.create(
    request=ToolRequestModel(
        tool_config={
            "type": "client",
            "name": "logMessage",
            "description": "Use this client-side tool to log a message to the user's client.",
            "expects_response": False,
            "parameters": {
                "type": "object",
                "properties": {
                    "message": {
                        "type": "string",
                        "description": "The message to log in the console.",
                    }
                },
                "required": ["message"],
            },
        }
    )
)

elevenlabs.conversational_ai.agents.update(
    agent_id="agent_7101k5zvyjhmfg983brhmhkd98n6",
    conversation_config={
        "agent": {"prompt": {"tool_ids": [tool.id]}},
    },
)
```

```typescript
import { ElevenLabsClient } from "@elevenlabs/elevenlabs-js";

const elevenlabs = new ElevenLabsClient();

const tool = await elevenlabs.conversationalAi.tools.create({
  toolConfig: {
    type: "client",
    name: "logMessage",
    description: "Use this client-side tool to log a message to the user's client.",
    expectsResponse: false,
    parameters: {
      type: "object",
      properties: {
        message: {
          type: "string",
          description: "The message to log in the console.",
        },
      },
      required: ["message"],
    },
  },
});

await elevenlabs.conversationalAi.agents.update("agent_7101k5zvyjhmfg983brhmhkd98n6", {
  conversationConfig: {
    agent: { prompt: { toolIds: [tool.id] } },
  },
});
```

#### De clienttool in je code registreren

Anders dan webhooktools moeten clienttools in je code worden geregistreerd.

Gebruik de volgende code om de clienttool te registreren:

**`Python`**

```python title="Python" focus={4-16}
from elevenlabs import ElevenLabs
from elevenlabs.conversational_ai.conversation import Conversation, ClientTools

def log_message(parameters):
    message = parameters.get("message")
    print(message)

client_tools = ClientTools()
client_tools.register("logMessage", log_message)

conversation = Conversation(
    client=ElevenLabs(api_key="your-api-key"),
    agent_id="agent_7101k5zvyjhmfg983brhmhkd98n6",
    requires_auth=True,
    client_tools=client_tools,
    # ...
)

conversation.start_session()
```

**`JavaScript`**

```javascript title="JavaScript" focus={2-10}
// ...
const conversation = await Conversation.startSession({
  // ...
  clientTools: {
    logMessage: async ({message}) => {
      console.log(message);
    }
  },
  // ...
});
```

**`Swift`**

```swift title="Swift" focus={2-10}
// ...
var clientTools = ElevenLabsSDK.ClientTools()

clientTools.register("logMessage") { parameters async throws -> String? in
    guard let message = parameters["message"] as? String else {
        throw ElevenLabsSDK.ClientToolError.invalidParameters
    }
    print(message)
    return message
}
```

> **Note**
>
> De namen van de tool en parameters in de agentconfiguratie zijn hoofdlettergevoelig en **moeten** overeenkomen met de namen die in je code zijn geregistreerd.

#### Testen

Start een gesprek met je agent en zeg bijvoorbeeld:

> *Log een bericht in de console met de tekst Hello World*

Je zou een `Hello World`-log in je console moeten zien verschijnen.

#### Volgende stappen

Nu je een basis-event aan de clientzijde hebt ingesteld, kun je:

* Complexere clienttools verkennen, zoals modals openen, naar pagina's navigeren of interactie met de DOM.
* Clienttools combineren met webhooks aan de serverzijde voor full-stackinteracties.
* Clienttools gebruiken om gebruikersbetrokkenheid te vergroten en tijdens gesprekken realtime feedback te geven.

### Resultaten van clienttools doorgeven aan de gesprekscontext

Wanneer je wilt dat je agent gegevens van een clienttool terugkrijgt, zorg er dan voor dat je in de toolconfiguratie de optie **Wait for response** aanvinkt.

![Optie Wait for response in de configuratie van de clienttool](/docs/_fern-img/0ecc615fc9f25446b67369fd3e010e34b39549a22146a2483ea17251206caf1e.webp)

Zodra de clienttool is toegevoegd, wacht de agent bij het aanroepen van de functie op de reactie en voegt deze toe aan de gesprekscontext.

**`Python`**

```python title="Python"
def get_customer_details():
    # Fetch customer details (e.g., from an API or database)
    customer_data = {
        "id": 123,
        "name": "Alice",
        "subscription": "Pro"
    }
    # Return the customer data; it can also be a JSON string if needed.
    return customer_data

client_tools = ClientTools()
client_tools.register("getCustomerDetails", get_customer_details)

conversation = Conversation(
    client=ElevenLabs(api_key="your-api-key"),
    agent_id="agent_7101k5zvyjhmfg983brhmhkd98n6",
    requires_auth=True,
    client_tools=client_tools,
    # ...
)

conversation.start_session()
```

**`JavaScript`**

```javascript title="JavaScript"
const clientTools = {
  getCustomerDetails: async () => {
    // Fetch customer details (e.g., from an API)
    const customerData = {
      id: 123,
      name: "Alice",
      subscription: "Pro"
    };
    // Return data directly to the agent.
    return customerData;
  }
};

// Start the conversation with client tools configured.
const conversation = await Conversation.startSession({ clientTools });
```

In dit voorbeeld wordt de functie uitgevoerd op de client wanneer de agent **getCustomerDetails** aanroept. De agent ontvangt de geretourneerde gegevens, die vervolgens worden gebruikt als onderdeel van de gesprekscontext. De waarden uit de reactie kunnen optioneel ook worden toegewezen aan dynamische variabelen, vergelijkbaar met [webhooktools](https://elevenlabs.io/docs/eleven-agents/customization/tools/webhook-tools). Let op: systeemtools kunnen dynamische variabelen niet bijwerken.

### Problemen oplossen

#### Tools worden niet geactiveerd

* Zorg dat de namen van de tool en parameters in de agentconfiguratie overeenkomen met de namen die in je code zijn geregistreerd.
* Bekijk het gesprekstranscript in het agentdashboard om te controleren of de tool wordt uitgevoerd.

#### Consolefouten

* Open de browserconsole om op fouten te controleren.
* Zorg dat je code de nodige foutafhandeling bevat voor ongedefinieerde of onverwachte parameters.

## Best practices

#### Geef tools intuïtieve namen met gedetailleerde beschrijvingen

Als je merkt dat de assistent niet de juiste tools aanroept, moet je mogelijk de toolnamen en beschrijvingen bijwerken zodat de assistent duidelijker begrijpt wanneer elke tool moet worden geselecteerd. Gebruik geen afkortingen of acroniemen om tool- en argumentnamen in te korten.

Je kunt ook gedetailleerd beschrijven wanneer een tool moet worden aangeroepen. Bij complexe tools moet je beschrijvingen voor elk argument opnemen, zodat de assistent weet welke informatie hij aan de gebruiker moet vragen om dat argument te verzamelen.

#### Geef toolparameters intuïtieve namen met gedetailleerde beschrijvingen

Gebruik duidelijke en beschrijvende namen voor toolparameters. Geef indien van toepassing in de beschrijving de verwachte indeling voor een parameter op (bijvoorbeeld YYYY-mm-dd of dd/mm/yy voor een datum).

#### Overweeg om in de systeemprompt van je assistent aanvullende informatie te geven over hoe en wanneer tools moeten worden aangeroepen

Duidelijke instructies in je systeemprompt kunnen de nauwkeurigheid van toolaanroepen door de assistent aanzienlijk verbeteren. Geef de assistent bijvoorbeeld instructies zoals de volgende:

```plaintext
Use `check_order_status` when the user inquires about the status of their order, such as 'Where is my order?' or 'Has my order shipped yet?'.
```

Geef context voor complexe scenario's. Bijvoorbeeld:

```plaintext
Before scheduling a meeting with `schedule_meeting`, check the user's calendar for availability using check_availability to avoid conflicts.
```

#### LLM-selectie

> **Warning**
>
> Bij het gebruik van tools raden we aan om modellen met hoge intelligentie te kiezen, zoals GPT 6 of Claude Sonnet 5.5.

Het is belangrijk om te weten dat de keuze van LLM bepalend is voor het succes van functieaanroepen. Sommige LLM's kunnen moeite hebben met het extraheren van de relevante parameters uit het gesprek.