Update

demo/README.md

@@ -59,6 +59,48 @@ demo/
 2. **LeRobot Arena Server** running on port 8000
 3. **Built JavaScript Client** (automatically installed as dependency)
 
+## ⚙️ Server Configuration
+
+The demo automatically detects the correct server URL based on the environment:
+
+- **Development mode**: `http://localhost:8000` (when running on localhost)
+- **Production mode**: `https://blanchon-robottransportserver.hf.space/api` (when deployed)
+
+### Environment Variable Override
+
+You can override the default server URL by setting the `PUBLIC_SERVER_URL` environment variable:
+
+```bash
+# For development with custom server
+export PUBLIC_SERVER_URL=http://localhost:8000
+
+# For production with HuggingFace Space
+export PUBLIC_SERVER_URL=https://blanchon-robottransportserver.hf.space/api
+
+# For custom server deployment
+export PUBLIC_SERVER_URL=https://your-custom-server.com/api
+```
+
+### Setting Environment Variables
+
+#### Option 1: Create a `.env` file
+```bash
+# In demo/.env
+PUBLIC_SERVER_URL=http://localhost:8000
+```
+
+#### Option 2: Runtime environment variable
+```bash
+# Set via window object (for runtime configuration)
+window.__SERVER_URL__ = 'http://localhost:8000';
+```
+
+#### Option 3: Build-time environment variable
+```bash
+# When building
+PUBLIC_SERVER_URL=https://your-server.com/api bun run build
+```
+
 ## 🚀 Quick Start
 
 ### 1. Install Dependencies

demo/src/lib/index.ts

@@ -1 +1,35 @@
 // place files you want to import through the `$lib` alias in this folder.
+
+/**
+ * Get the server URL based on environment variables and dev/prod mode
+ * Priority: ENV variable > dev mode (localhost:8000) > prod mode (HF Space)
+ */
+export function getServerUrl(): string {
+  // Check for environment variable first
+  if (typeof window !== 'undefined') {
+    // Client-side: check for runtime environment variable
+    const envUrl = (window as any).__SERVER_URL__;
+    if (envUrl) {
+      return envUrl;
+    }
+  } else {
+    // Server-side: check for build-time environment variable
+    const envUrl = process.env.PUBLIC_SERVER_URL;
+    if (envUrl) {
+      return envUrl;
+    }
+  }
+
+  // Fall back to dev/prod detection
+  if (typeof window !== 'undefined') {
+    // Client-side: check if we're in development
+    const isDev = window.location.hostname === 'localhost' || 
+                  window.location.hostname === '127.0.0.1' ||
+                  window.location.hostname.startsWith('192.168.');
+    
+    return isDev ? 'http://localhost:8000' : 'https://blanchon-robottransportserver.hf.space/api';
+  }
+  
+  // Server-side fallback
+  return 'http://localhost:8000';
+}

demo/src/lib/settings.svelte.ts

@@ -0,0 +1,9 @@
+import { getServerUrl } from './index.js';
+
+interface Settings {
+	transportServerUrl: string;
+}
+
+export const settings: Settings = $state({
+	transportServerUrl: getServerUrl()
+});

demo/src/routes/+page.svelte

@@ -3,6 +3,8 @@
 	import { robotics } from '@robothub/transport-server-client';
 	import type { robotics as roboticsTypes } from '@robothub/transport-server-client';
 	import { goto } from '$app/navigation';
+	import { settings } from '$lib/settings.svelte.js';
+	
 
 	// Server status
 	let serverStatus = $state<'checking' | 'connected' | 'error'>('checking');
@@ -29,10 +31,8 @@
 		debugInfo.connectionAttempts++;
 
 		try {
-			// Use relative URL so it works in both development and production
-			const baseUrl = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:7860';
-			const apiUrl = `${baseUrl}/api`;
-			const client = new robotics.RoboticsClientCore(apiUrl);
+			// Use the configured server URL
+			const client = new robotics.RoboticsClientCore(settings.transportServerUrl);
 			const roomList = await client.listRooms('');
 			rooms = roomList;
 			serverInfo = { rooms: roomList.length, version: '1.0.0' };

demo/src/routes/[workspaceId]/+page.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { settings } from '$lib/settings.svelte.js';
 	import { onMount } from 'svelte';
 	import { robotics, video } from '@robothub/transport-server-client';
 	import type { robotics as roboticsTypes, video as videoTypes } from '@robothub/transport-server-client';
+	
 
 	// Get data from load function
 	let { data } = $props();
@@ -41,7 +43,7 @@
 
 			// Load robotics rooms
 			try {
-				roboticsClient = new robotics.RoboticsClientCore('http://localhost:8000');
+				roboticsClient = new robotics.RoboticsClientCore(settings.transportServerUrl);
 				roboticsRooms = await roboticsClient.listRooms(workspaceId);
 			} catch (err) {
 				roboticsError = 'Failed to load robotics rooms';
@@ -50,7 +52,7 @@
 
 			// Load video rooms
 			try {
-				videoClient = new video.VideoClientCore('http://localhost:8000');
+				videoClient = new video.VideoClientCore(settings.transportServerUrl);
 				videoRooms = await videoClient.listRooms(workspaceId);
 			} catch (err) {
 				videoError = 'Failed to load video rooms';

demo/src/routes/[workspaceId]/robotics/+page.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { robotics } from '@robothub/transport-server-client';
 	import type { robotics as roboticsTypes } from '@robothub/transport-server-client';
+	
 
 	// Get data from load function
 	let { data } = $props();
@@ -42,7 +43,7 @@
 		try {
 			loading = true;
 			error = '';
-			client = new robotics.RoboticsClientCore('http://localhost:8000');
+			client = new robotics.RoboticsClientCore(settings.transportServerUrl);
 			rooms = await client.listRooms(workspaceId);
 			debugInfo.responseTime = Date.now() - startTime;
 		} catch (err) {

demo/src/routes/[workspaceId]/robotics/consumer/+page.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { settings } from '$lib/settings.svelte.js';
 	import { onMount } from 'svelte';
 	import { robotics } from '@robothub/transport-server-client';
 	import type { robotics as roboticsTypes } from '@robothub/transport-server-client';
+	
 
 	// Get data from load function
 	let { data } = $props();
@@ -70,7 +72,7 @@
 			connecting = true;
 			error = '';
 
-			consumer = new robotics.RoboticsConsumer('http://localhost:8000');
+			consumer = new robotics.RoboticsConsumer(settings.transportServerUrl);
 
 			// Set up event handlers
 			consumer.onConnected(() => {

demo/src/routes/[workspaceId]/robotics/producer/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { settings } from '$lib/settings.svelte.js';
 	import { onMount } from 'svelte';
 	import { robotics } from '@robothub/transport-server-client';
+	
 
 	// Get data from load function
 	let { data } = $props();
@@ -98,7 +100,7 @@
 			connecting = true;
 			error = '';
 
-			producer = new robotics.RoboticsProducer('http://localhost:8000');
+			producer = new robotics.RoboticsProducer(settings.transportServerUrl);
 
 			producer.onConnected(() => {
 				connected = true;
@@ -138,7 +140,7 @@
 			connecting = true;
 			error = '';
 
-			producer = new robotics.RoboticsProducer('http://localhost:8000');
+			producer = new robotics.RoboticsProducer(settings.transportServerUrl);
 
 			producer.onConnected(() => {
 				connected = true;

demo/src/routes/[workspaceId]/video/+page.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { settings } from '$lib/settings.svelte.js';
 	import { onMount } from 'svelte';
 	import { video } from '@robothub/transport-server-client';
 	import type { video as videoTypes } from '@robothub/transport-server-client';
+	
 
 	// Get data from load function
 	let { data } = $props();
@@ -42,7 +44,7 @@
 		try {
 			loading = true;
 			error = '';
-			client = new video.VideoClientCore('http://localhost:8000');
+			client = new video.VideoClientCore(settings.transportServerUrl);
 			rooms = await client.listRooms(workspaceId);
 			debugInfo.responseTime = Date.now() - startTime;
 		} catch (err) {

demo/src/routes/[workspaceId]/video/consumer/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { settings } from '$lib/settings.svelte.js';
 	import { onMount } from 'svelte';
 	import { video } from '@robothub/transport-server-client';
+	
 
 	// Get data from load function
 	let { data } = $props();
@@ -78,7 +80,7 @@
 			connecting = true;
 			error = '';
 
-			consumer = new video.VideoConsumer('http://localhost:8000');
+			consumer = new video.VideoConsumer(settings.transportServerUrl);
 
 			// Set up event handlers
 			consumer.onConnected(() => {

demo/src/routes/[workspaceId]/video/producer/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { settings } from '$lib/settings.svelte.js';
 	import { onMount } from 'svelte';
 	import { video } from '@robothub/transport-server-client';
+	
 
 	// Get data from load function
 	let { data } = $props();
@@ -129,7 +131,7 @@
 			connecting = true;
 			error = '';
 
-			producer = new video.VideoProducer('http://localhost:8000');
+			producer = new video.VideoProducer(settings.transportServerUrl);
 
 			producer.onConnected(() => {
 				connected = true;
@@ -193,7 +195,7 @@
 			connecting = true;
 			error = '';
 
-			producer = new video.VideoProducer('http://localhost:8000');
+			producer = new video.VideoProducer(settings.transportServerUrl);
 
 			producer.onConnected(() => {
 				connected = true;