Migrate bot-ready-signalling example to Pipecat client SDK

bot-ready-signalling/README.md

@@ -1,8 +1,16 @@
 # Bot ready signaling
 
-A simple Pipecat example demonstrating how to handle signaling between the client and the bot,
-ensuring that the bot starts sending audio only when the client is available,
-thereby avoiding the risk of cutting off the beginning of the audio.
+A simple Pipecat example demonstrating how to handle signaling between the
+client and the bot, ensuring that the bot starts sending audio only after the
+client is ready to play it, so the first words of the greeting are never
+clipped.
+
+The handshake uses the standard RTVI `client-ready` / `bot-ready` flow that
+ships with Pipecat: `RTVIProcessor` is auto-attached to every `PipelineTask`,
+the Pipecat client SDK signals `client-ready` once the transport reaches the
+`ready` state, and the bot's `on_client_ready` handler calls `set_bot_ready()`
+and pushes the first `TTSSpeakFrame`. No custom `sendAppMessage` plumbing is
+needed.
 
 ## Quick Start
 

bot-ready-signalling/client/javascript/.nvmrc

@@ -0,0 +1 @@
+22

bot-ready-signalling/client/javascript/README.md

@@ -1,10 +1,13 @@
 # JavaScript Implementation
 
-Basic implementation using the [Pipecat JavaScript SDK](https://docs.pipecat.ai/client/js/introduction).
+Basic implementation using the [Pipecat JavaScript SDK](https://docs.pipecat.ai/client/js/introduction)
+with the [Daily transport](https://docs.pipecat.ai/api-reference/client/js/transports).
 
 ## Setup
 
-1. Run the bot server. See the [server README](../../README).
+> Requires Node 22+ (`@daily-co/daily-js` declares `engines.node >= 22.14.0`). A `.nvmrc` is included; run `nvm use` if you use nvm.
+
+1. Run the bot server. See the [top-level README](../../README.md).
 
 2. Navigate to the `client/javascript` directory:
 
@@ -24,4 +27,15 @@ npm install
 npm run dev
 ```
 
-5. Visit http://localhost:5173 in your browser.
+5. Visit http://localhost:5173 in your browser, then click **Connect**.
+
+## How the bot-ready handshake works
+
+The Pipecat JavaScript client signals `client-ready` automatically once the
+transport reaches the `ready` state. The bot's `on_client_ready` handler then
+calls `set_bot_ready()` and pushes the first `TTSSpeakFrame`, so the greeting
+is never clipped. The previous `sendAppMessage("playable")` workaround is no
+longer needed.
+
+Bot audio is rendered by attaching the remote audio track to a hidden `<audio>`
+element inside the `onTrackStarted` callback. See `src/app.js`.

bot-ready-signalling/client/javascript/index.html

@@ -19,8 +19,6 @@
       </div>
     </div>
 
-    <audio id="bot-audio" autoplay></audio>
-
     <div class="debug-panel">
       <h3>Debug Info</h3>
       <div id="debug-log"></div>

bot-ready-signalling/client/javascript/package.json

@@ -15,6 +15,7 @@
     "vite": "^6.3.5"
   },
   "dependencies": {
-    "@daily-co/daily-js": "0.74.0"
+    "@pipecat-ai/client-js": "^1.7.0",
+    "@pipecat-ai/daily-transport": "^1.6.1"
   }
 }