wip - pcc-transport example

2025-04-01 18:25:09 +00:00
parent 0fede6bb48
commit 8f33f00c3f
19 changed files with 6177 additions and 0 deletions
--- a/examples/pcc-transport/client-react/src/app/api/connect/route.ts
+++ b/examples/pcc-transport/client-react/src/app/api/connect/route.ts
@@ -0,0 +1,44 @@
+import { NextResponse, NextRequest } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { MY_CUSTOM_DATA } = await request.json();
+
+    const response = await fetch(
+      'https://api.pipecat.daily.co/v1/public/simple-chatbot/start',
+      {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${process.env.PIPECAT_CLOUD_API_KEY}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          // Create Daily room
+          createDailyRoom: true,
+          // Optionally set Daily room properties
+          dailyRoomProperties: { start_video_off: true },
+          // Optionally pass custom data to the bot
+          body: { MY_CUSTOM_DATA },
+        }),
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`API responded with status: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    // Transform the response to match what RTVI client expects
+    return NextResponse.json({
+      room_url: data.dailyRoom,
+      token: data.dailyToken,
+    });
+  } catch (error) {
+    console.error('API error:', error);
+    return NextResponse.json(
+      { error: 'Failed to start agent' },
+      { status: 500 }
+    );
+  }
+}
--- a/examples/pcc-transport/client-react/src/app/globals.css
+++ b/examples/pcc-transport/client-react/src/app/globals.css
@@ -0,0 +1,82 @@
+body {
+  margin: 0;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+}
+
+.app {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.controls button {
+  padding: 8px 16px;
+  margin-left: 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.connect-btn {
+  background-color: #4caf50;
+  color: white;
+}
+
+.disconnect-btn {
+  background-color: #f44336;
+  color: white;
+}
+
+.main-content {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.bot-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.video-container {
+  width: 640px;
+  height: 360px;
+  background-color: #ddd;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.video-container video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.mic-enabled {
+  background-color: #4caf50;
+  color: white;
+}
+
+.mic-disabled {
+  background-color: #f44336;
+  color: white;
+}
--- a/examples/pcc-transport/client-react/src/app/layout.tsx
+++ b/examples/pcc-transport/client-react/src/app/layout.tsx
@@ -0,0 +1,21 @@
+import './globals.css';
+import { RTVIProvider } from '@/providers/RTVIProvider';
+
+export const metadata = {
+  title: 'Pipecat React Client',
+  description: 'Pipecat RTVI Client using Next.js',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <RTVIProvider>{children}</RTVIProvider>
+      </body>
+    </html>
+  );
+}
--- a/examples/pcc-transport/client-react/src/app/page.tsx
+++ b/examples/pcc-transport/client-react/src/app/page.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import {
+  RTVIClientAudio,
+  RTVIClientVideo,
+  useRTVIClientTransportState,
+} from '@pipecat-ai/client-react';
+import { ConnectButton } from '../components/ConnectButton';
+import { StatusDisplay } from '../components/StatusDisplay';
+import { DebugDisplay } from '../components/DebugDisplay';
+
+function BotVideo() {
+  const transportState = useRTVIClientTransportState();
+  const isConnected = transportState !== 'disconnected';
+
+  return (
+    <div className="bot-container">
+      <div className="video-container">
+        {isConnected && <RTVIClientVideo participant="bot" fit="cover" />}
+      </div>
+    </div>
+  );
+}
+
+export default function Home() {
+  return (
+    <div className="app">
+      <div className="status-bar">
+        <StatusDisplay />
+        <ConnectButton />
+      </div>
+
+      <div className="main-content">
+        <BotVideo />
+      </div>
+
+      <DebugDisplay />
+      <RTVIClientAudio />
+    </div>
+  );
+}