> ## 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.

# Quickstart

> Get a Pipecat voice app running in minutes with the CLI.

<View title="React" icon="react">
  <Callout icon="react" color="#FFC107">
    You are currently viewing the React version of this page. Use the dropdown
    to the right to customize this page for your client framework.
  </Callout>
</View>

<View title="JavaScript" icon="js">
  <Callout icon="js" color="#FFC107">
    You are currently viewing the JavaScript version of this page. Use the
    dropdown to the right to customize this page for your client framework.
  </Callout>
</View>

<View title="React" icon="react">
  This quickstart guide will help you build your first Pipecat voice AI bot with
  a React front-end and run it locally. You'll create a simple conversational
  agent that you connect and talk to in real-time via your browser.
</View>

<View title="JavaScript" icon="js">
  This quickstart guide will help you build your first Pipecat voice AI bot with
  a vanilla JavaScript front-end and run it locally. You'll create a simple
  conversational agent that you connect and talk to in real-time via your
  browser.
</View>

<Note>
  The CLI generates React and vanilla JavaScript projects. For React Native, iOS, Android, or
  C++, see [Building a Voice UI](/client/guides/building-a-voice-ui) to get started without
  the CLI.
</Note>

## Prerequisites

* Python 3.11+ and [uv](https://docs.astral.sh/uv/getting-started/installation/)
* Node.js 18+

## Step 1: Scaffold your project

```bash theme={null}
# Install the Pipecat CLI
uv tool install pipecat-ai-cli

# Scaffold the quickstart project
pipecat init
```

The CLI will guide you through the setup. Choose the following options:

<View title="React" icon="react">
  * **Project name**: `my-voice-app`
  * **Bot type**: `Web/Mobile`
  * **Client framework**: `React`
  * **React dev server**: `Vite`
  * **Transport**: `SmallWebRTC`

  The rest is up to you! The CLI generates a complete project with two main directories:

  * `bot/` — a Python Pipecat bot
  * `client/` — a React front-end built on the [Voice UI Kit](/client/voice-ui-kit)
</View>

<View title="JavaScript" icon="js">
  * **Project name**: `my-voice-app`
  * **Bot type**: `Web/Mobile`
  * **Client framework**: `Vanilla JS`
  * **Transport**: `SmallWebRTC`

  The rest is up to you! The CLI generates a complete project with two main directories:

  * `bot/` — a Python Pipecat bot
  * `client/` — a vanilla JavaScript front-end built on the Pipecat JS SDK
</View>

## Step 2: Start the bot

```bash theme={null}
cd my-voice-app/bot
cp env.example .env       # add your API keys
uv sync
uv run bot.py
```

The bot starts at `http://localhost:7860`.

## Step 3: Start the client

```bash theme={null}
cd ../client
npm install
npm run dev
```

Open `http://localhost:5173`, click **Connect**, allow microphone access, and start talking.

<Note>
  **First run note**: The initial startup may take \~20 seconds as Pipecat
  downloads required models and imports. Subsequent runs will be much faster.
</Note>

🎉 **Success!** Your bot is running locally. Now let's deploy it to production so others can use it.

***

## Understanding the Quickstart Client

<View title="React" icon="react">
  The React app is built on the [Voice UI Kit](/client/voice-ui-kit) — Pipecat's library of pre-built voice UI components. Here's what each file does:

  **`src/config.ts`** — transport configuration. By default it uses SmallWebRTC for local development. To switch to Daily for production, add your Daily credentials and update `AVAILABLE_TRANSPORTS`.

  ```ts theme={null}
  const botStartUrl =
    import.meta.env.VITE_BOT_START_URL || "http://localhost:7860/start";

  export const DEFAULT_TRANSPORT: TransportType = "smallwebrtc";
  ```

  **`src/main.tsx`** — entry point. `PipecatAppBase` handles transport creation, connection lifecycle, loading states, and errors, passing a ready `client` down to your app via a render prop.

  ```tsx theme={null}
  <PipecatAppBase connectParams={connectParams} transportType={transportType}>
    {({ client, handleConnect, handleDisconnect, error }) =>
      !client ? <SpinLoader /> :
      error ? <ErrorCard>{error}</ErrorCard> :
      <App client={client} handleConnect={handleConnect} ... />
    }
  </PipecatAppBase>
  ```

  **`src/components/App.tsx`** — the UI. Built entirely from Voice UI Kit components:

  | Component           | What it does                                                     |
  | ------------------- | ---------------------------------------------------------------- |
  | `ConnectButton`     | Connect/disconnect button with built-in loading and error states |
  | `UserAudioControl`  | Mic mute/unmute toggle                                           |
  | `ConversationPanel` | Live transcript of the conversation                              |
  | `EventsPanel`       | Real-time stream of RTVI events — useful during development      |
</View>

<View title="JavaScript" icon="js">
  The vanilla JS app is built directly on the Pipecat JS SDK. Here's what each file does:

  **`src/config.js`** — transport configuration. By default it uses SmallWebRTC for local development. Also exports a `createTransport()` helper that dynamically imports the correct transport package. To switch to Daily for production, add your Daily credentials and update `AVAILABLE_TRANSPORTS`.

  ```js theme={null}
  const botStartUrl =
    import.meta.env.VITE_BOT_START_URL || "http://localhost:7860/start";

  export const DEFAULT_TRANSPORT = "smallwebrtc";
  ```

  **`src/app.js`** — the entire client UI, implemented as a `VoiceChatClient` class. On construction it wires up DOM elements and event listeners. Calling `connect()` creates a `PipecatClient`, sets up the audio track, and starts the bot:

  ```js theme={null}
  async connect() {
    const transport = await createTransport(this.transportType);
    this.client = new PipecatClient({
      transport,
      enableMic: true,
      callbacks: {
        onUserTranscript: (data) => { if (data.final) this.addConversationMessage(data.text, 'user'); },
        onBotTranscript: (data) => { this.addConversationMessage(data.text, 'bot'); },
        // ...
      },
    });
    await this.client.startBotAndConnect(TRANSPORT_CONFIG[this.transportType]);
  }
  ```

  **`index.html`** — the page structure. Contains the transport selector, connect button, mic toggle, conversation log, and events panel that `app.js` references by ID.

  | Element                    | What it does                                                |
  | -------------------------- | ----------------------------------------------------------- |
  | `#connect-btn`             | Connect/disconnect button                                   |
  | `#mic-btn` / `#mic-status` | Mic mute/unmute toggle                                      |
  | `#conversation-log`        | Live transcript of the conversation                         |
  | `#events-log`              | Real-time stream of RTVI events — useful during development |
</View>

<View title="React" icon="react">
  ## Deploying to production

  The `env.example` file shows the production configuration. Point `VITE_BOT_START_URL` at your deployed bot's start endpoint:

  ```bash theme={null}
  # Pipecat Cloud
  VITE_BOT_START_URL="https://api.pipecat.daily.co/v1/public/{agentName}/start"
  VITE_BOT_START_PUBLIC_API_KEY="your-public-api-key"
  ```

  <Tip>
    The client app is a static site — build it with `npm run build` and deploy to
    any static hosting provider (Vercel, Netlify, S3, etc.).
  </Tip>
</View>

## Next steps

<View title="React" icon="react">
  <CardGroup cols={2}>
    <Card title="Voice UI Kit" icon="palette" href="/client/voice-ui-kit">
      Customize themes, swap components, and extend the generated UI
    </Card>

    <Card title="Building a Voice UI" icon="code" href="/client/guides/building-a-voice-ui">
      Build a React voice app from scratch — understand the SDK without
      abstractions
    </Card>

    <Card title="Core Concepts" icon="book-open" href="/client/rtvi-standard">
      Understand transports, sessions, events, and media
    </Card>

    <Card title="Deploy your bot" icon="cloud" href="/pipecat-cloud/introduction">
      Deploy to Pipecat Cloud for production
    </Card>
  </CardGroup>
</View>

<View title="JavaScript" icon="js">
  <CardGroup cols={2}>
    <Card title="Building a Voice UI" icon="code" href="/client/guides/building-a-voice-ui">
      Build a voice app from scratch — understand the SDK without abstractions
    </Card>

    <Card title="Core Concepts" icon="book-open" href="/client/rtvi-standard">
      Understand transports, sessions, events, and media
    </Card>

    <Card title="Deploy your bot" icon="cloud" href="/pipecat-cloud/introduction">
      Deploy to Pipecat Cloud for production
    </Card>
  </CardGroup>
</View>