React SDK Overview

Build React applications with Pipecat’s React client library

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
• Built-in conversation state with real-time speech progress
• 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,
  usePipecatConversation,
} 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 and conversation hooks
function VoiceBot() {
  const client = usePipecatClient();
  const { messages } = usePipecatConversation();

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

  return (
    <div>
      <button onClick={handleClick}>Start Conversation</button>
      <ul>
        {messages.map((msg, i) => (
          <li key={`${msg.createdAt}-${i}`}>
            <strong>{msg.role}:</strong>{" "}
            {msg.parts?.map((part, j) => (
              <span key={j}>
                {typeof part.text === "string"
                  ? part.text
                  : `${part.text.spoken}${part.text.unspoken}`}
              </span>
            ))}
          </li>
        ))}
      </ul>
    </div>
  );
}

Explore the SDK

Components

Ready-to-use components for audio, video, and visualization

Hooks

React hooks for accessing client functionality

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