React hooks for accessing Pipecat client functionality
PipecatClient
PipecatClientProvider
import { usePipecatClient } from "@pipecat-ai/client-react"; function MyComponent() { const pcClient = usePipecatClient(); await pcClient.connect({ endpoint: 'https://your-pipecat-api-url/connect', requestData: { // Any custom data your /connect endpoint requires } }); }
useCallback
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); }, []) ); }
import { usePipecatClientMediaDevices } from "@pipecat-ai/client-react"; function DeviceSelector() { const { availableCams, availableMics, selectedCam, selectedMic, updateCam, updateMic, } = usePipecatClientMediaDevices(); 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> </> ); }
import { usePipecatClientMediaTrack } from "@pipecat-ai/client-react"; function MyTracks() { const localAudioTrack = usePipecatClientMediaTrack("audio", "local"); const botAudioTrack = usePipecatClientMediaTrack("audio", "bot"); }
import { usePipecatClientTransportState } from "@pipecat-ai/client-react"; function ConnectionStatus() { const transportState = usePipecatClientTransportState(); }
import { usePipecatClientCamControl } from "@pipecat-ai/client-react"; function CamToggle() { const { enableCam, isCamEnabled } = usePipecatClientCamControl(); return ( <button onClick={() => enableCam(!isCamEnabled)}> {isCamEnabled ? "Disable Camera" : "Enable Camera"} </button> ); }
import { usePipecatClientMicControl } from "@pipecat-ai/client-react"; function MicToggle() { const { enableMic, isMicEnabled } = usePipecatClientMicControl(); return ( <button onClick={() => enableMic(!isMicEnabled)}> {isMicEnabled ? "Disable Microphone" : "Enable Microphone"} </button> ); }