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);
}, [])
);
}
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>
</>
);
}
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();
}