


Custom React Dashboard for the Xeneon Edge
TL;DR: I turned a Corsair Xeneon Edge into a dedicated desk dashboard for Home Assistant, Spotify, Google Calendar, Todoist, Plex, etc.
I'm an Art Director by trade, and I built this over a few evenings using Cursor, mostly as a vibe-coding experiment. It’s now something I can’t live without.
It’s a React + NextJS app that runs in Docker on an Ubuntu server. The Xeneon Edge is connected to the machine and in the host OS simply runs Chromium in kiosk mode.
What it does… today
The dashboard brings together the things I interact with most throughout the day, plus a few other conveniences that I thought would be nice to have:
- Smart home controls via the Home Assistant API
- Weather, and thermostat via Environment Canada + Ecboee
- Google Calendar, with a meeting countdown overlay with snooze function :)
- Todoist tasks
- UniFi camera feeds
- Spotify remote control
- Plex and other media server notifications
As someone who listens to music all day, the Spotify integration was a must. I decided to take things further and built an AI-powered enrichment layer with Claude that generates better artist bios, recommends similar artists, and suggests albums based on my listening habits. So far, it's honestly been producing better recommendations than Spotify itself.
To keep everything fast and inexpensive, almost everything is cached in Supabase after the first lookup. Artist metadata, recommendations, and album information are stored and reused, keeping loading times fast while keeping token usage minimal.
The companion app
I also built a small companion app that sits in my mac’s Menu Bar and provides basic integration between the dashboard and the mac. Currently it allows me to:
- Join Zoom or Teams meetings directly from upcoming Google Calendar events displayed on the dashboard
- Toggle my mic and camera, open the chat, initiate sharing my screen etc.
- Automatically switch to a Figma Launch Pad with shortcuts for my favourite plugins whenever Figma is active
- Drive context-aware pages based on what I'm doing on my Mac (still a work in progress)
The hardware
Months ago, I made a walnut desk shelf and put some standard t-track on the underside in a few places. Once I realized the Xeneon had ¼-20 threads on the back, I designed and printed a bracket that allows it to float below my main display. I love it when things work out… The Xeneon sits at the perfect spot, so its easy to reach and low enough that it's not a distraction while working. Keeps the desk clear so I can slide stuff under it too.
I thought I’d share in hopes it provides inspiration to anyone wanting to accomplish something similar. The barrier to entry was fairly low.
Anyhow, happy to answer any questions or hear ideas for features you'd add.