The Pipecat React SDK provides React-specific components and hooks for building voice and multimodal AI applications. It wraps the core JavaScript SDK functionality in an idiomatic React interface that handles:

  • React context for client state management
  • Components for audio and video rendering
  • Hooks for accessing client functionality
  • Media device management
  • Event handling through hooks

Installation

Install the SDK, core client, and a transport implementation (e.g. Daily for WebRTC):

npm install @pipecat-ai/client-js
npm install @pipecat-ai/client-react
npm install @pipecat-ai/daily-transport

Example

Here’s a simple example using Daily as the transport layer:

import { PipecatClient } from "@pipecat-ai/client-js";
import {
  PipecatClientProvider,
  PipecatClientAudio,
  usePipecatClient,
} from "@pipecat-ai/client-react";
import { DailyTransport } from "@pipecat-ai/daily-transport";

// Create the client instance
const client = new PipecatClient({
  transport: new DailyTransport(),
  enableMic: true,
});

// Root component wraps the app with the provider
function App() {
  return (
    <PipecatClientProvider client={client}>
      <VoiceBot />
      <PipecatClientAudio />
    </PipecatClientProvider>
  );
}

// Component using the client
function VoiceBot() {
  const client = usePipecatClient();

  const handleClick = async () => {
    await client.connect({
      endpoint: `${process.env.PIPECAT_API_URL || "/api"}/connect`
    });
  };

  return (
    <button onClick={handleClick}>Start Conversation</button>;
  );
}

Explore the SDK

The Pipecat React SDK builds on top of the JavaScript SDK to provide an idiomatic React interface while maintaining compatibility with the RTVI standard.