What client tools do
Client tools let your AI voice agent act on your website in the middle of a conversation. They are JavaScript functions on your own page that the agent can call while it talks: it passes the values it heard from the visitor and speaks the result back. For example: search a catalogue, apply a discount code or jump to a section.
Client tools belong to the Web SDK provider of the Calls channel, the in-browser voice button that needs no phone number. They run in the visitor’s browser, not on your servers, and the handler is your own page code.
What you need
- An agent with instructions and a knowledge base. The voice agent is built from them when you connect the channel.
- Access to your website’s HTML or JavaScript build.
- A short list of page actions and the exact page function each one should run.
- A browser with a microphone; visitors must allow mic access.
Web SDK calls land in the client’s chat with transcript and recording and bill like phone calls.
Set up client tools step by step
- Open Channels, select your agent and open the Calls channel.
- Set Provider to Web SDK.
- Pick a voice under Voice (Optional) (use Play preview) and tune the shared settings: First Message, LLM, Speech Speed, Max Call Duration (minutes), Additional languages.
- Click Create SDK Agent and copy the Agent ID from Connection Details.
- Turn on Connect agent to this channel. New Calls channels start switched off.
- Paste the embed into your page: the calls.js script tag and a call to MyChatBotCalls.mount with your agent_id and an optional name.
- Add a client_tools object to the mount call. Each key is a tool name, for example applyDiscountCode, with a definition (a description plus parameters) and a handler, the function that returns a result.
- Open the page, click the microphone button and ask for the action out loud.
Set the agent up through the MyChatBot connector in Claude? Ask it for the embed code, and it fills in your real Agent ID.
Options that matter
- Parameters are a flat map. Each parameter name maps to type, description and required, where type is string, number or boolean. A JSON Schema with an object type and properties is rejected without warning: the call connects, but the agent never receives the tool.
- Return a short confirmation. Whatever the handler returns is spoken back into the conversation, so return something like Applied SPRING10, 10% off rather than nothing.
- Precise descriptions. The agent reads the definition: say what the tool does and what each parameter means.
- Embed options. Everything except agent_id is optional: color, position (bottom-right or bottom-left), target to render inside an element, transcript (collapsed, open or off), and the onCallStart and onCallEnd callbacks.
- npm. In a JavaScript build, install @mychatbot/client and pass the same tools as clientTools to start(), with a caller ID from defaultCallerId().
Common problems and fixes
- The agent never uses the tool. Check the parameters format first: a JSON Schema instead of the flat map drops the tool silently.
- The tool runs, but the agent says nothing useful. Make the handler return a short confirmation.
- An action does not fire. Check that the tool’s handler is wired to the matching page function.
- The call does not start. The page must stay open and the visitor must allow the microphone. Also confirm Connect agent to this channel is on and the Agent ID matches Connection Details.
- The agent answers from old instructions. Click Sync Agent after editing them. The knowledge base is a snapshot from channel creation, so changing which integrations feed the agent means recreating the Calls channel.
- You need human operator transfer, auto-recall or outbound dialing. These are phone-only: use SIP Trunk or Twilio Account.
What to read next
- Build a Voice Agent in 10 Minutes
- Instructions and Tools: tell the agent when to use each tool.
- Reduce Voice Latency and Multi-language Voice Agents.
- MCP (Model Context Protocol) Integration: external services and APIs.
- AI voice agents for calls.