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 { RTVIClient } from "@pipecat-ai/client-js";
import {
  RTVIClientProvider,
  RTVIClientAudio,
  useRTVIClient,
} from "@pipecat-ai/client-react";
import { DailyTransport } from "@pipecat-ai/pipecat-daily";

// Create the client instance
const client = new RTVIClient({
  params: {
    baseUrl: process.env.PIPECAT_API_URL || "/api",
    endpoint: {
      connect: "/connect",
    },
  },
  transport: new DailyTransport(),
  enableMic: true,
});

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

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

  return (
    <button onClick={() => client.connect()}>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.