Pipecat App Base

Overview

The PipecatAppBase component reduces the boilerplate code required to bootstrap a new Pipecat Client application.

It handles the common setup tasks that are typically the same across most applications, providing a simpler developer experience:

Creates a Pipecat Client instance and manages its lifecycle.
Wraps children with the necessary providers (such as ThemeProvider and PipecatClientProvider).
Provides connect and disconnect handlers (sync or async).
Mounts any available audio tracks using the Pipecat React <PipecatClientAudio /> component.
Passes through transport and client options from the constructor.
Automatically disconnects and disposes the client when unmounting.
Surfaces error states to the child components.
Optionally disables theme provider based on noThemeProvider prop.
Optionally disables audio output for the bot based on noAudioOutput prop.

This component creates the PipecatClientProvider context for you. Child components will be able to use all Pipecat Client SDK hooks and components.

Parent / adjacent state changes will trigger component re-renders, which will recycle the Pipecat client instance. We recommend using this component at the highest order in your application, and not nesting it inside other components.

The PipecatAppBase component can be used in two ways:

1. Render Prop Pattern (Function Children)

This pattern gives you access to the client instance, connection handlers and state, allowing you to build custom UI that have direct access to these props:

import {
  PipecatAppBase,
  ErrorCard,
  SpinLoader,
} from "@pipecat-ai/voice-ui-kit";

export default function Home() {
  return (
    <PipecatAppBase
      transportType="smallwebrtc"
      connectParams={{
        webrtcUrl: "/api/offer",
      }}
    >
      {({ client, handleConnect, handleDisconnect, error }) =>
        !client ? (
          <SpinLoader />
        ) : error ? (
          <ErrorCard error={error} />
        ) : (
          <div>
            <button onClick={handleConnect}>Connect</button>
            <button onClick={handleDisconnect}>Disconnect</button>
          </div>
        )
      }
    </PipecatAppBase>
  );
}

2. Direct Children Pattern

This pattern is simpler when you want to use the built-in components that already handle connection state internally (e.g. using Pipecat React hooks).

import {
  PipecatAppBase,
  ConnectButton,
  ControlBar,
  UserAudioControl,
} from "@pipecat-ai/voice-ui-kit";

export default function Home() {
  return (
    <PipecatAppBase
      transportType="smallwebrtc"
      connectParams={{
        webrtcUrl: "/api/offer",
      }}
    >
      <div>
        <ConnectButton />
        <ControlBar>
          <UserAudioControl />
        </ControlBar>
      </div>
    </PipecatAppBase>
  );
}

3. Without Theme Provider

You can disable the theme provider wrapper by setting noThemeProvider={true}:

import { PipecatAppBase } from "@pipecat-ai/voice-ui-kit";

export default function Home() {
  return (
    <PipecatAppBase
      transportType="smallwebrtc"
      connectParams={{
        webrtcUrl: "/api/offer",
      }}
      noThemeProvider={true}
    >
      <YourCustomComponent />
    </PipecatAppBase>
  );
}

4. Auto-Connect on Mount

You can automatically connect to the session when the component mounts by setting connectOnMount={true}:

import { PipecatAppBase } from "@pipecat-ai/voice-ui-kit";

export default function Home() {
  return (
    <PipecatAppBase
      transportType="smallwebrtc"
      connectParams={{
        webrtcUrl: "/api/offer",
      }}
      connectOnMount={true}
    >
      <YourCustomComponent />
    </PipecatAppBase>
  );
}

5. Disable Audio Output

You can disable audio output for the bot by setting noAudioOutput={true}:

import { PipecatAppBase } from "@pipecat-ai/voice-ui-kit";

export default function Home() {
  return (
    <PipecatAppBase
      transportType="smallwebrtc"
      connectParams={{
        webrtcUrl: "/api/offer",
      }}
      noAudioOutput={true}
    >
      <YourCustomComponent />
    </PipecatAppBase>
  );
}

6. Transport Options

You can pass transport-specific configuration options:

import { PipecatAppBase } from "@pipecat-ai/voice-ui-kit";

export default function Home() {
  return (
    <PipecatAppBase
      transportType="smallwebrtc"
      connectParams={{
        webrtcUrl: "/api/offer",
      }}
    >
      <YourCustomComponent />
    </PipecatAppBase>
  );
}

Props

Prop	Type	Default
`connectParams`	`TransportConnectionParams`	-
`transportType`	`"smallwebrtc" \| "daily"`	-
`transportOptions?`	`SmallWebRTCTransportConstructorOptions \| DailyTransportConstructorOptions`	-
`clientOptions?`	`PipecatClientOptions`	-
`noThemeProvider?`	`boolean`	`false`
`themeProps?`	`Partial<ThemeProviderProps>`	-
`connectOnMount?`	`boolean`	`false`
`noAudioOutput?`	`boolean`	`false`
`children`	`((props: PipecatBaseChildProps) => React.ReactNode) \| React.ReactNode`	-

Child Props

The PipecatAppBase component passes the following props to its children when using the render prop pattern:

Prop	Type	Default
`client`	`PipecatClient \| null`	-
`handleConnect?`	`() => void \| Promise<void>`	-
`handleDisconnect?`	`() => void \| Promise<void>`	-
`error?`	`string \| null`	-