useDTMF

Overview

useDTMF provides a sendTone function that sends a DTMF tone or sequence via the connected Pipecat transport. The kit re-exports this hook from @pipecat-ai/client-react for convenience.

It must be used within a PipecatClientProvider context. Tones can only be sent when the transport is connected; calling sendTone while disconnected will throw.

Usage

Basic

import { useDTMF } from "@pipecat-ai/voice-ui-kit";

export function DialButton() {
  const { sendTone } = useDTMF();

  return (
    <button onClick={() => sendTone("5")}>
      Press 5
    </button>
  );
}

Sending a sequence

import { useDTMF } from "@pipecat-ai/voice-ui-kit";

export function ExtensionDialer() {
  const { sendTone } = useDTMF();

  const dial = () => {
    try {
      sendTone("1234#");
    } catch (err) {
      console.error("Failed to send DTMF:", err);
    }
  };

  return <button onClick={dial}>Dial extension 1234</button>;
}

sendTone throws when the transport is not ready or the connected bot does not support DTMF (RTVI protocol version earlier than 2.0.0). Wrap calls in a try/catch or use the onError prop on DTMFKeypad which handles this automatically.

import { useDTMF } from "@pipecat-ai/voice-ui-kit";

export function SafeDialer({ sequence }: { sequence: string }) {
  const { sendTone } = useDTMF();

  const handleSend = () => {
    try {
      sendTone(sequence);
    } catch (err) {
      console.error("DTMF send failed:", err);
    }
  };

  return <button onClick={handleSend}>Send {sequence}</button>;
}

API

Return

Prop	Type	Default
`sendTone`	`(sequence: string) => void`	-

Changelog

v0.12.02026-07-16: Added. Re-exports useDTMF from @pipecat-ai/client-react for sending DTMF tones.

Overview

Usage

Basic

Sending a sequence

With error handling

API

Return

See Also

Changelog

On this page