React SDK Overview

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

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>
  );
}