> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pipecat.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# React SDK Overview

> The Pipecat React SDK wraps PipecatClient with React components and hooks for building voice and multimodal AI applications.

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):

```bash theme={null}
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:

```tsx theme={null}
import { PipecatClient } from "@pipecat-ai/client-js";
import {
  PipecatClientProvider,
  PipecatClientAudio,
  usePipecatClient,
  usePipecatConversation,
} from "@pipecat-ai/client-react";
import type { BotOutputText } 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) => {
              if (typeof part.text === "string") {
                return <span key={j}>{part.text}</span>;
              }
              const { spoken, unspoken } = part.text as BotOutputText;
              return <span key={j}>{`${spoken}${unspoken}`}</span>;
            })}
          </li>
        ))}
      </ul>
    </div>
  );
}
```

## Explore the SDK

> [card] [Components](https://docs.pipecat.ai/api-reference/client/react/components.md)
>
> Ready-to-use components for audio, video, and visualization

> [card] [Hooks](https://docs.pipecat.ai/api-reference/client/react/hooks.md)
>
> React hooks for accessing client functionality

The Pipecat React SDK builds on top of the [JavaScript SDK](https://docs.pipecat.ai/api-reference/client/js/overview.md) to provide an idiomatic React interface while maintaining compatibility with the RTVI standard.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.