create-local-voice-agent 1.0.3 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-local-voice-agent",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "CLI to scaffold production-ready, containerized Voice AI Agents using LiveKit, Python, and Docker",
   "type": "module",
   "main": "src/index.js",
@@ -27,6 +27,7 @@
     "templates/"
   ],
   "dependencies": {
+    "@inquirer/input": "^5.0.8",
     "@inquirer/prompts": "^8.3.0",
     "commander": "^14.0.3",
     "ejs": "^4.0.1"

package/src/index.js

@@ -1,8 +1,22 @@
 import { Command } from 'commander';
-import { select, input, confirm } from '@inquirer/prompts';
+import { select, confirm } from '@inquirer/prompts';
+import input from '@inquirer/input';
 import { execSync } from 'node:child_process';
+import os from 'node:os';
 import { scaffold } from './scaffold.js';
 
+function getLocalIp() {
+  const nets = os.networkInterfaces();
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name]) {
+      if (net.family === 'IPv4' && !net.internal) {
+        return net.address;
+      }
+    }
+  }
+  return '127.0.0.1';
+}
+
 // ─── Ollama API Fetching ──────────────────────────────────────────────
 async function fetchOllamaModels(ollamaIp = '127.0.0.1') {
   try {
@@ -172,6 +186,7 @@ program
     let includeFrontend = true;
     let shouldAutoStart = false;
     let ollamaIp = 'localhost';
+    let hostIp = getLocalIp();
 
     // ─── AUTO MODE ────────────────────────────────────────────────
     if (setupMode === 'auto') {
@@ -308,6 +323,12 @@ program
       shouldAutoStart = false;
     }
 
+    hostIp = await input({
+      message:
+        '🌐 Enter the IP address where this agent will run (Press Enter to use detected IP):',
+      default: getLocalIp(),
+    });
+
     // ─── Scaffold ─────────────────────────────────────────────────
     await scaffold({
       projectName,
@@ -317,6 +338,7 @@ program
       modelName,
       language,
       ollamaIp,
+      hostIp,
     });
 
     console.log(`\n✅ Project "${projectName}" created successfully!\n`);
@@ -345,4 +367,4 @@ program
     }
   });
 
-program.parse();
+program.parse();

package/src/scaffold.js

@@ -51,6 +51,7 @@ export async function scaffold({
   modelName = 'qwen3-vl:2b',
   language = 'en',
   ollamaIp = 'localhost',
+  hostIp = '127.0.0.1',
 }) {
   const projectDir = path.resolve(process.cwd(), projectName);
 
@@ -71,6 +72,7 @@ export async function scaffold({
     modelName,
     language,
     ollamaIp,
+    hostIp,
     cpuLimit,
   };
 
@@ -99,4 +101,3 @@ export async function scaffold({
 
   console.log(`\n📁 Generated files in ./${projectName}/`);
 }
-

package/templates/docker-compose.yml.ejs

@@ -36,18 +36,17 @@ services:
       redis:
         condition: service_healthy
     ports:
-      - "7880:7880"       # HTTP / WebSocket
-      - "7881:7881"       # RTC TCP
-      - "50000-50050:50000-50050/udp"   # WebRTC UDP (strictly limited range)
+      - "7880:7880"
+      - "7881:7881"
+      - "50000-50050:50000-50050/udp"
     environment:
-      - LIVEKIT_KEYS=${LIVEKIT_API_KEY}:${LIVEKIT_API_SECRET}
+      - "LIVEKIT_KEYS=${LIVEKIT_API_KEY}: ${LIVEKIT_API_SECRET}"
+      - "NODE_IP=<%= hostIp %>"
+      - "UDP_PORT=50000-50050"
+      - "REDIS_HOST=redis:6379"
     command: >
-      --config /etc/livekit.yaml
       --bind 0.0.0.0
-      --redis-host redis:6379
-      --rtc.port-range-start 50000
-      --rtc.port-range-end 50050
-      --rtc.tcp-port 7881
+      --dev
 
   # ─── Python Voice Agent ────────────────────────────────────────────
   agent:

package/templates/frontend/app/page.tsx.ejs

@@ -6,31 +6,102 @@ import {
   RoomAudioRenderer,
   useVoiceAssistant,
   BarVisualizer,
+  Chat,
   DisconnectButton,
 } from "@livekit/components-react";
 import "@livekit/components-styles";
 
 function VoiceAssistantUI() {
   const { state, audioTrack } = useVoiceAssistant();
+  const [temperature, setTemperature] = useState(0.7);
+  const [selectedModel, setSelectedModel] = useState("qwen3-vl:2b");
 
   return (
     <div
       style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
         gap: "1rem",
-        padding: "2rem",
+        padding: "1rem 0",
+        textAlign: "left",
       }}
     >
-      <h2>Agent Status: {state}</h2>
-      <BarVisualizer
-        state={state}
-        barCount={5}
-        trackRef={audioTrack}
-        style={{ width: "300px", height: "80px" }}
-      />
-      <DisconnectButton>Disconnect</DisconnectButton>
+      <section
+        style={{
+          border: "1px solid #e5e7eb",
+          borderRadius: "12px",
+          padding: "1rem",
+          background: "#ffffff",
+        }}
+      >
+        <h2 style={{ marginTop: 0, marginBottom: "0.5rem" }}>Voice + Text</h2>
+        <p style={{ marginTop: 0, color: "#374151" }}>Agent Status: {state}</p>
+        <BarVisualizer
+          state={state}
+          barCount={5}
+          trackRef={audioTrack}
+          style={{ width: "100%", height: "80px" }}
+        />
+        <div
+          style={{
+            marginTop: "1rem",
+            border: "1px solid #e5e7eb",
+            borderRadius: "10px",
+            overflow: "hidden",
+            minHeight: "340px",
+          }}
+        >
+          <Chat />
+        </div>
+      </section>
+
+      <aside
+        style={{
+          border: "1px solid #e5e7eb",
+          borderRadius: "12px",
+          padding: "1rem",
+          background: "#f8fafc",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <h3 style={{ margin: 0 }}>Control Panel</h3>
+
+        <div>
+          <h4 style={{ margin: "0 0 0.5rem 0" }}>System Status</h4>
+          <p style={{ margin: 0, color: "#374151" }}>Connection State: {state}</p>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+          <h4 style={{ margin: 0 }}>Model Settings</h4>
+          <label style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
+            <span>Temperature: {temperature.toFixed(2)}</span>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.01"
+              value={temperature}
+              onChange={(event) => setTemperature(Number(event.target.value))}
+            />
+          </label>
+          <label style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
+            <span>Select Model</span>
+            <select
+              value={selectedModel}
+              onChange={(event) => setSelectedModel(event.target.value)}
+              style={{ padding: "0.5rem", borderRadius: "8px", border: "1px solid #d1d5db" }}
+            >
+              <option value="qwen3-vl:2b">qwen3-vl:2b</option>
+              <option value="qwen3-vl:4b">qwen3-vl:4b</option>
+              <option value="llama3.2:3b">llama3.2:3b</option>
+            </select>
+          </label>
+        </div>
+
+        <DisconnectButton>Disconnect</DisconnectButton>
+      </aside>
     </div>
   );
 }
@@ -40,12 +111,23 @@ export default function Home() {
   const [error, setError] = useState<string | null>(null);
   const [connected, setConnected] = useState(false);
   const [serverUrl, setServerUrl] = useState("");
+  const [showSecurityWarning, setShowSecurityWarning] = useState(false);
 
   useEffect(() => {
     if (typeof window !== "undefined") {
-      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-      const defaultUrl = `${protocol}//${window.location.hostname}:7880`;
-      setServerUrl(process.env.NEXT_PUBLIC_LIVEKIT_URL || defaultUrl);
+      let envUrl = process.env.NEXT_PUBLIC_LIVEKIT_URL;
+      // Aggressively override if the baked-in variable is empty, localhost, or 127.0.0.1
+      if (!envUrl || envUrl.includes("127.0.0.1") || envUrl.includes("localhost")) {
+        const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+        envUrl = `${protocol}//${window.location.hostname}:7880`;
+      }
+      setServerUrl(envUrl);
+
+      const isInsecureRemoteHost =
+        window.location.protocol === "http:" &&
+        window.location.hostname !== "localhost" &&
+        window.location.hostname !== "127.0.0.1";
+      setShowSecurityWarning(isInsecureRemoteHost);
     }
   }, []);
 
@@ -63,9 +145,27 @@ export default function Home() {
     fetchToken();
   }, []);
 
+  const securityBanner = showSecurityWarning ? (
+    <div
+      style={{
+        background: "#fee2e2",
+        border: "1px solid #ef4444",
+        color: "#991b1b",
+        borderRadius: "10px",
+        padding: "0.85rem 1rem",
+        marginBottom: "1rem",
+        fontWeight: 600,
+      }}
+    >
+      ⚠️ Microphone access is blocked by browsers over HTTP on remote IPs. Use HTTPS, Ngrok,
+      or enable 'Insecure origins treated as secure' in chrome://flags.
+    </div>
+  ) : null;
+
   if (error) {
     return (
       <div style={{ padding: "2rem", textAlign: "center" }}>
+        {securityBanner}
         <h1>Error</h1>
         <p>{error}</p>
       </div>
@@ -75,14 +175,16 @@ export default function Home() {
   if (!token) {
     return (
       <div style={{ padding: "2rem", textAlign: "center" }}>
+        {securityBanner}
         <p>Connecting to voice agent...</p>
       </div>
     );
   }
 
   return (
-    <main style={{ padding: "2rem", textAlign: "center" }}>
+    <main style={{ padding: "2rem", textAlign: "center", maxWidth: "1200px", margin: "0 auto" }}>
       <h1><%= projectName %></h1>
+      {securityBanner}
       {!connected && (
         <button
           type="button"