The Pipecat React SDK provides hooks for accessing client functionality, managing media devices, and handling events.

​
useRTVIClient

Provides access to the RTVIClient instance originally passed to RTVIClientProvider.

import { useRTVIClient } from "@pipecat-ai/client-react";

function MyComponent() {
  const rtviClient = useRTVIClient();
}

​
useRTVIClientEvent

Allows subscribing to RTVI client events. It is advised to wrap handlers with useCallback.

​
Arguments

  • event (RTVIEvent, required)
  • handler (function, required)
import { useCallback } from "react";
import { RTVIEvent, TransportState } from "@pipecat-ai/client-js";
import { useRTVIClientEvent } from "@pipecat-ai/client-react";

function EventListener() {
  useRTVIClientEvent(
    RTVIEvent.TransportStateChanged,
    useCallback((transportState: TransportState) => {
      console.log("Transport state changed to", transportState);
    }, [])
  );
}

​
useRTVIClientMediaDevices

Manage and list available media devices.

import { useRTVIClientMediaDevices } from "@pipecat-ai/client-react";

function DeviceSelector() {
  const {
    availableCams,
    availableMics,
    selectedCam,
    selectedMic,
    updateCam,
    updateMic,
  } = useRTVIClientMediaDevices();

  return (
    <>
      <select
        name="cam"
        onChange={(ev) => updateCam(ev.target.value)}
        value={selectedCam?.deviceId}
      >
        {availableCams.map((cam) => (
          <option key={cam.deviceId} value={cam.deviceId}>
            {cam.label}
          </option>
        ))}
      </select>
      <select
        name="mic"
        onChange={(ev) => updateMic(ev.target.value)}
        value={selectedMic?.deviceId}
      >
        {availableMics.map((mic) => (
          <option key={mic.deviceId} value={mic.deviceId}>
            {mic.label}
          </option>
        ))}
      </select>
    </>
  );
}

​
useRTVIClientMediaTrack

Access audio and video tracks.

​
Arguments

  • trackType (“audio” | “video”, required)
  • participantType (“bot” | “local”, required)
import { useRTVIClientMediaTrack } from "@pipecat-ai/client-react";

function MyTracks() {
  const localAudioTrack = useRTVIClientMediaTrack("audio", "local");
  const botAudioTrack = useRTVIClientMediaTrack("audio", "bot");
}

​
useRTVIClientTransportState

Returns the current transport state.

import { useRTVIClientTransportState } from "@pipecat-ai/client-react";

function ConnectionStatus() {
  const transportState = useRTVIClientTransportState();
}
ComponentsSDK Introduction