Add client/server quickstart example

2025-07-28 14:07:42 -04:00
parent c5483411f2
commit eca366bfac
15 changed files with 3016 additions and 0 deletions
--- a/examples/client-server-web/client/.gitignore
+++ b/examples/client-server-web/client/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/examples/client-server-web/client/index.html
+++ b/examples/client-server-web/client/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pipecat UI</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/src/style.css" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
+</html>
--- a/examples/client-server-web/client/package-lock.json
+++ b/examples/client-server-web/client/package-lock.json
--- a/examples/client-server-web/client/package.json
+++ b/examples/client-server-web/client/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "node_modules/.bin/vite",
+    "build": "node_modules/.bin/tsc && vite build",
+    "preview": "node_modules/.bin/vite preview"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react-swc": "^3.8.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.5"
+  },
+  "dependencies": {
+    "@fontsource-variable/geist": "^5.2.6",
+    "@fontsource-variable/geist-mono": "^5.2.6",
+    "@pipecat-ai/client-js": "^1.0.1",
+    "@pipecat-ai/client-react": "^1.0.1",
+    "@pipecat-ai/small-webrtc-transport": "^1.0.0",
+    "@pipecat-ai/daily-transport": "^1.0.0",
+    "@pipecat-ai/voice-ui-kit": "^0.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  }
+}
--- a/examples/client-server-web/client/public/favicon.svg
+++ b/examples/client-server-web/client/public/favicon.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.3088 5.05615C3.64682 4.92779 4.02833 5.02411 4.26653 5.29797L7.36884 8.86461H16.6312L19.7335 5.29797C19.9717 5.02411 20.3532 4.92779 20.6912 5.05615C21.0292 5.18452 21.253 5.51072 21.253 5.87504V13.75H24V15.5H19.5181V8.19909L17.6762 10.3167C17.5115 10.506 17.2738 10.6146 17.0241 10.6146H6.9759C6.72616 10.6146 6.48854 10.506 6.32383 10.3167L4.48193 8.19909V15.5H0V13.75H2.74699V5.87504C2.74699 5.51072 2.97078 5.18452 3.3088 5.05615Z" fill="black"/>
+<path d="M19.5181 17.25H24V19H19.5181V17.25Z" fill="black"/>
+<path d="M0 17.25H4.48193V19H0V17.25Z" fill="black"/>
+<path d="M9.25301 14.3333C9.25301 14.9777 8.73517 15.5 8.09639 15.5C7.4576 15.5 6.93976 14.9777 6.93976 14.3333C6.93976 13.689 7.4576 13.1667 8.09639 13.1667C8.73517 13.1667 9.25301 13.689 9.25301 14.3333Z" fill="black"/>
+<path d="M17.0602 14.3333C17.0602 14.9777 16.5424 15.5 15.9036 15.5C15.2648 15.5 14.747 14.9777 14.747 14.3333C14.747 13.689 15.2648 13.1667 15.9036 13.1667C16.5424 13.1667 17.0602 13.689 17.0602 14.3333Z" fill="black"/>
+</svg>
--- a/examples/client-server-web/client/public/pipecat-logo.svg
+++ b/examples/client-server-web/client/public/pipecat-logo.svg
@@ -0,0 +1,7 @@
+<svg width="332" height="192" viewBox="0 0 332 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.7718 0.769635C50.4477 -0.990844 55.7252 0.330188 59.0204 4.08595L101.936 53H230.064L272.98 4.08595C276.275 0.330188 281.552 -0.990844 286.228 0.769635C290.904 2.53011 294 7.00367 294 12V120H332V144H270V43.8728L244.52 72.9141C242.242 75.5111 238.955 77 235.5 77H96.5C93.0452 77 89.7581 75.5111 87.4796 72.9141L62 43.8728V144H0V120H38V12C38 7.00367 41.0958 2.53011 45.7718 0.769635Z" fill="black"/>
+<path d="M270 168H332V192H270V168Z" fill="black"/>
+<path d="M0 168H62V192H0V168Z" fill="black"/>
+<path d="M128 128C128 136.837 120.837 144 112 144C103.163 144 96 136.837 96 128C96 119.164 103.163 112 112 112C120.837 112 128 119.164 128 128Z" fill="black"/>
+<path d="M236 128C236 136.837 228.837 144 220 144C211.163 144 204 136.837 204 128C204 119.164 211.163 112 220 112C228.837 112 236 119.164 236 128Z" fill="black"/>
+</svg>
--- a/examples/client-server-web/client/src/index.tsx
+++ b/examples/client-server-web/client/src/index.tsx
@@ -0,0 +1,28 @@
+import {
+  ConsoleTemplate,
+  FullScreenContainer,
+  ThemeProvider,
+} from '@pipecat-ai/voice-ui-kit';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+//@ts-ignore - fontsource-variable/geist is not typed
+import '@fontsource-variable/geist';
+//@ts-ignore - fontsource-variable/geist is not typed
+import '@fontsource-variable/geist-mono';
+
+createRoot(document.getElementById('root')!).render(
+  // @ts-ignore
+  <StrictMode>
+    <ThemeProvider>
+      <FullScreenContainer>
+        <ConsoleTemplate
+          transportType="smallwebrtc"
+          connectParams={{
+            connectionUrl: '/api/offer',
+          }}
+        />
+      </FullScreenContainer>
+    </ThemeProvider>
+  </StrictMode>
+);
--- a/examples/client-server-web/client/src/style.css
+++ b/examples/client-server-web/client/src/style.css
@@ -0,0 +1,7 @@
+@import "@pipecat-ai/voice-ui-kit/styles.css";
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
--- a/examples/client-server-web/client/tsconfig.json
+++ b/examples/client-server-web/client/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2016",
+    "module": "ESNext",
+    "lib": ["ES2016", "DOM", "DOM.Iterable"],
+    "types": ["node"],
+    "skipLibCheck": true,
+    "jsx": "preserve",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "allowJs": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "esModuleInterop": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/examples/client-server-web/client/vite.config.js
+++ b/examples/client-server-web/client/vite.config.js
@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+
+export default defineConfig({
+  base: "./", //Use relative paths so it works at any mount path
+  plugins: [react()],
+  publicDir: "public",
+  server: {
+    allowedHosts: true, // Allows external connections like ngrok
+    proxy: {
+      // Proxy /api requests to the backend server
+      "/api": {
+        target: "http://0.0.0.0:7860", // Replace with your backend URL
+        changeOrigin: true,
+      },
+    },
+  },
+});