Lumi - MagicMirrorReact — Smart Mirror Desktop App

Minimal README for local development and deployment notes.

Requirements

• Node.js 18+ (Windows)
• npm
• Recommended: rotate any API keys you exposed

Setup

1. Clone repo and install deps

cd C:\MagicMirrorReact
npm install

2. Create a .env in the repo root (DO NOT commit). Example:

DAILY_API_KEY=your_daily_api_key_here
PORT=3001
VITE_ELEVENLABS_API_KEY=
VITE_GEMINI_API_KEY=
VITE_ELEVENLABS_AGENT_ID=

If you previously published a key, rotate it immediately.

Run locally

Open a terminal in VS Code (Ctrl+`).

Frontend (Vite)

npm run dev

Backend (Express / ts-node)

# install dev tools if missing (one-time)
npm install --save-dev ts-node typescript @types/node

# run server
npx ts-node server.ts
# or if you add a script:
# npm run start:server

Run both together (optional, will need changes)

# using concurrently (add to package.json first)
npm install --save-dev concurrently
npm run start

AI commands

The built-in AI supports voice/text commands for quick interactions:

• Start a game: e.g. "start game" or "play game"
• Start a call: e.g. "start call" or "video call"
• Ask questions: general Q&A requests directed to the assistant

Technologies used

• Figma — UI/UX design and mockups
• ElevenLabs — text-to-speech (TTS) for voice output
• Google Gemini — LLM used for assistant responses
• Daily.co — video call rooms (backend creates rooms)
• React, Vite, Tailwind CSS — frontend stack

Deploying / Production

• Vercel: add a serverless function under /api/create-room.ts that uses process.env.DAILY_API_KEY. Define DAILY_API_KEY in Vercel dashboard (Environment Variables).
• Do not bundle dotenv or server-only code into the client. Keep secrets on the server.

Security checklist

• Rotate any leaked API keys now.
• Add .env to .gitignore.
• Restrict CORS origins on the backend.
• Use HTTPS for public endpoints.
• Limit room lifetimes and permissions in the Daily room properties.

Troubleshooting

• process is not defined in the browser: remove dotenv or server-only code from client bundle; use server or build-time env vars.
• callFrame null: ensure component runs in browser, pass nullable ref to useCallFrame, and verify dynamic room URL is valid.
• Check server logs and Vercel function logs for runtime errors.

Contacts / Next steps

• Add a Vercel serverless function and update frontend fetch to /api/create-room for production.
• Add concurrently or ts-node-dev scripts for smoother local dev.