open-index/open-npm huggingface dataset:
npm package: @pipecat-ai/client-js
Description: <h1><div align="center">  <img alt="pipecat js" width="500px" height="auto" src="https://raw.githubusercontent.com/pipecat-ai/pipecat-client-web/main/pipecat-js.png"> </div></h1>
Latest version: 1.7.0

<h1><div align="center">
 <img alt="pipecat js" width="500px" height="auto" src="https://raw.githubusercontent.com/pipecat-ai/pipecat-client-web/main/pipecat-js.png">
</div></h1>

[![Docs](https://img.shields.io/badge/documentation-blue)](https://docs.pipecat.ai/client/introduction)
![NPM Version](https://img.shields.io/npm/v/@pipecat-ai/client-js)

## Install

```bash
yarn add @pipecat-ai/client-js
# or
npm install @pipecat-ai/client-js
```

## Quick Start

Instantiate a `PipecatClient` instance, wire up the bot's audio, and start the conversation:

```ts
import { RTVIEvent, RTVIMessage, PipecatClient } from "@pipecat-ai/client-js";
import { DailyTransport } from "@pipecat-ai/daily-transport";

const pcClient = new PipecatClient({
  transport: new DailyTransport(),
  enableMic: true,
  enableCam: false,
  callbacks: {
    onConnected: () => {
      console.log("[CALLBACK] User connected");
    },
    onDisconnected: () => {
      console.log("[CALLBACK] User disconnected");
    },
    onTransportStateChanged: (state: string) => {
      console.log("[CALLBACK] State change:", state);
    },
    onBotConnected: () => {
      console.log("[CALLBACK] Bot connected");
    },
    onBotDisconnected: () => {
      console.log("[CALLBACK] Bot disconnected");
    },
    onBotReady: () => {
      console.log("[CALLBACK] Bot ready to chat!");
    },
  },
});

try {
  await pcClient.startBotAndConnect({ endpoint: "https://your-connect-end-point-here/connect" });
} catch (e) {
  console.error(e.message);
}

// Events
pcClient.on(RTVIEvent.TransportStateChanged, (state) => {
  console.log("[EVENT] Transport state change:", state);
});
pcClient.on(RTVIEvent.BotReady, () => {
  console.log("[EVENT] Bot is ready");
});
pcClient.on(RTVIEvent.Connected, () => {
  console.log("[EVENT] User connected");
});
pcClient.on(RTVIEvent.Disconnected, () => {
  console.log("[EVENT] User disconnected");
});
```

## API

Please see API reference [here](https://docs.pipecat.ai/client/reference/js/introduction).
npm package: @pipecat-ai/daily-transport
Description: Pipecat Daily Transport Package
Author: Daily.co
Latest version: 1.6.1

# Pipecat's Real-Time Voice Inference - Daily Transport

[![Docs](https://img.shields.io/badge/documentation-blue)](https://docs.pipecat.ai/client/js/transports/daily)
![NPM Version](https://img.shields.io/npm/v/@pipecat-ai/daily-transport)
[![Demo](https://img.shields.io/badge/Demo-coral)](https://github.com/pipecat-ai/pipecat/tree/main/examples/simple-chatbot)

Daily transport package for use with `@pipecat-ai/client-js`.

## Installation

```bash copy
npm install \
@pipecat-ai/client-js \
@pipecat-ai/daily-transport
```

## Overview

The DailyTransport class provides a WebRTC transport layer using [Daily.co's](https://daily.co) infrastructure. It handles audio/video device management, WebRTC connections, and real-time communication between clients and bots.

## Features

- 🎥 Complete camera device management
- 🎤 Microphone input handling
- 🔊 Speaker output control
- 📡 WebRTC connection management
- 🤖 Bot participant tracking
- 📊 Audio level monitoring
- 💬 Real-time messaging
  
## Usage

### Basic Setup

```javascript
import { PipecatClient } from "@pipecat-ai/client-js";
import { DailyTransport } from "@pipecat-ai/daily-transport";

const pcClient = new PipecatClient({
    transport: new DailyTransport({ dailyFactoryOptions }),
    enableCam: false,  // Default camera off
    enableMic: true,   // Default microphone on
    callbacks: {
      // Event handlers
    },
    // ...
});

pcClient.connect({
  url: 'https://your.daily.co/room'
});
// OR...
pcClient.connect({
  endpoint: 'https://your-server/connect', // endpoint to return url
});
```

## API Reference

### Constructor Options

```typescript
interface DailyTransportConstructorOptions {
  dailyFactoryOptions?: DailyFactoryOptions;  // Daily.co specific configuration
}
```

### States

The transport can be in one of these states:
- "initializing"
- "initialized"
- "connecting"
- "connected"
- "ready"
- "disconnecting"
- "error"

## Events

The transport implements the various [Pipecat event handlers](https://docs.pipecat.ai/client/js/api-reference/callbacks). Check out the docs or samples for more info.

## Error Handling

The transport includes error handling for:
- Connection failures
- Device errors
- Authentication issues
- Message transmission problems

## License
BSD-2 Clause
npm package: @pipecat-ai/small-webrtc-transport
Description: Pipecat Small WebRTC Transport Package
Author: Daily.co
Latest version: 1.10.0

# Pipecat's Real-Time Voice Inference - Small WebRTC Transport

[![Docs](https://img.shields.io/badge/documentation-blue)](https://docs.pipecat.ai/client/js/transports/small-webrtc)
![NPM Version](https://img.shields.io/npm/v/@pipecat-ai/small-webrtc-transport)
[![Demo](https://img.shields.io/badge/Demo-forestgreen)](https://github.com/pipecat-ai/pipecat/tree/main/examples/p2p-webrtc)

Small WebRTC transport package for use with `@pipecat-ai/client-js`.

## Installation

```bash copy
npm install \
@pipecat-ai/client-js \
@pipecat-ai/small-webrtc-transport
```

## Overview

The SmallWebRTCTransport class provides a WebRTC transport layer establishing a PeerConnection with Pipecat SmallWebRTCTransport. It handles audio/video device management, WebRTC connections, and real-time communication between client and bot.

## Features

- 🎥 Complete camera device management
- 🎤 Microphone input handling
- 📡 WebRTC connection management
- 🤖 Bot participant tracking
- 💬 Real-time messaging
  
## Usage

### Basic Setup

```javascript
import { PipecatClient } from "@pipecat-ai/client-js";
import { SmallWebRTCTransport } from "@pipecat-ai/small-webrtc-transport";

const pcClient = new PipecatClient({
    transport: new SmallWebRTCTransport(),
    enableCam: false,  // Default camera off
    enableMic: true,   // Default microphone on
    callbacks: {
      // Event handlers
    },
});

pcClient.connect({
  connection_url: 'https://your.server/offer_endpoint'
});
// OR...
pcClient.connect({
  endpoint: 'https://your-server/connect', // endpoint to return connection_url
});
```

## API Reference

### States

The transport can be in one of these states:
- "initializing"
- "initialized"
- "connecting"
- "connected"
- "ready"
- "disconnecting"
- "error"

## Events

The transport implements the various [Pipecat event handlers](https://docs.pipecat.ai/client/js/api-reference/callbacks). Check out the docs or samples for more info.

## Error Handling

The transport includes error handling for:
- Connection failures
- Device errors

## License
BSD-2 Clause
npm package: @pipecat-ai/ui
Latest version: 0.0.11

# Pipecat UI Components


## Styling

Pipecat UI is build using [Tailwind 4](https://tailwindcss.com/). 

You can customize the look and feel of components by either modifying the theme variables or replacing it entirely.

To avoid style conflicts, the theme (and all associated variables and utilities) are scoped with a `pipecat-ai` prefix. If you are using individual components vs. one of the premade containers (such as the Widget), you must ensure you include a higher-order component on the page with this class name.

```jsx
import { CircularWaveform } from "@pipecat-ai/ui/visualizations";
import "@pipecat-ai/ui/styles.css";

const MyApp = () => {
    return (
        <div className="pipecat-ui">
            {/** Place components here **/}
            <CircularWaveform />
        </div>
    );
};
```

### Modifying styles

You can modify any of the framework variables from within the `.pipecat-ui` scope like so:

```css
.pipecat-ui {
  --font-sans: var(--my-custom-font);
}
```

### Theme variables

```css
--font-sans
--font-mono

--shadow-long
--shadow-xshort

--radius-panel
--height-panel-header
--width-widget
--width-widget-panel
--height-widget-panel
--spacing-widget-v
--spacing-widget-h
--spacing-widget-gap

--color-background
--color-foreground
--color-card
--color-card-foreground
--color-popover
--color-popover-foreground
--color-primary
--color-primary-foreground
--color-secondary
--color-secondary-foreground
--color-muted
--color-muted-foreground
--color-accent
--color-accent-foreground
--color-destructive
--color-border
--color-input
--color-ring
--color-subtle
--color-mute
--color-mute-foreground

--color-chart-1
--color-chart-2
--color-chart-3
--color-chart-4
--color-chart-5
```

### Dark mode

Pipecat UI will follow system defaults for light mode or dark mode, or look for a `.dark` class as part of either the `pipecat-ui` container or `html` element on the page

```
<html class="dark">
```
or
```
<div class="pipecat-ui dark">
```
npm package: @pipecat-ai/websocket-transport
Description: Pipecat Base Transport for RealTime WebSocket APIs Package
Author: Daily.co
Latest version: 1.6.2

# Websocket Transport

[![Demo](https://img.shields.io/badge/Demo-forestgreen)](https://github.com/pipecat-ai/pipecat/tree/main/examples/websocket/README.md)
![NPM Version](https://img.shields.io/npm/v/@pipecat-ai/websocket-transport)

Websocket transport package for use with `@pipecat-ai/client-js`.

## Installation

```bash copy
npm install \
@pipecat-ai/client-js \
@pipecat-ai/websocket-transport
```

## Overview

The WebSocketTransport class provides a Websocket transport layer establishing a connection with Pipecat WebSocketTransport. It handles audio device management and real-time communication between client and bot.

## Features

- 🎤 Microphone input handling
- 🤖 Bot participant tracking
- 💬 Real-time messaging

## Usage

### Basic Setup

```javascript
import { PipecatClient } from "@pipecat-ai/client-js";
import { WebSocketTransport } from "@pipecat-ai/websocket-transport";

const pcClient = new PipecatClient({
    transport: new WebSocketTransport(),
    enableMic: true,   // Default microphone on
    callbacks: {
      // Event handlers
    },
});

pcClient.connect({
  ws_url: 'https://your.websocket/endpoint'
});
// OR...
pcClient.connect({
  endpoint: 'https://your-server/connect', // endpoint to return ws_url
});
```

## API Reference

### States

The transport can be in one of these states:
- "initializing"
- "initialized"
- "connecting"
- "connected"
- "ready"
- "disconnecting"
- "error"

## Events

The transport implements the various [Pipecat event handlers](https://docs.pipecat.ai/client/js/api-reference/callbacks). Check out the docs or samples for more info.

## Error Handling

The transport includes error handling for:
- Connection failures
- Device errors

## License
BSD-2 Clause