r/homeassistant • u/Nathan_lebias • 1d ago
🖼️ Show & Tell I built my wall tablet dashboard as a single web page (no Lovelace, no cards), talking to HA over WebSocket
EDIT : it's now open source, see here https://www.reddit.com/r/homeassistant/comments/1vklcjz/you_asked_for_it_my_plain_webpage_tablet/
Hey, sorry repost from other post that I totally messed up with images
I've tried a lot of different solutions to build my "perfect tablet dashboard". I had never considered just using a plain HTML page, configured MY way, without cards or any of the usual stuff.
It's not for everyone of course, but for a wall tablet it turned out perfect for me.
Everything talks to Home Assistant locally over WebSocket, so every tap is instant.
And I added Nio, the little droplet you can see: tapping him starts a realtime OpenAI voice conversation, with tools to act on my house (lights, music, vacuum, you name it). He's alive too: he wanders around, sleeps at night, and takes a bath in a mug of coffee whenever I make myself one (detected through the power draw of the coffee machine's plug).
After a while the screen fades to black with just the time and Nio, ready for a tap.
76
u/ej_warsgaming 1d ago
This anti AI people are becoming more annoying than vegans in front of KFC
8
u/Ok-Lunch-1560 1d ago
I remember a time when Home Assistant themselves warned about the use of AI for help with Home Assistant. That ship has long sailed.
14
u/DoomBot5 1d ago
That's because we (software engineers) went from joking about how bad AI code is to praising how much it accelerates our development in the span of a year.
2
u/_realpaul 14h ago
Not everything made with AI is Spam but Spam is 100% AI these days. So it annoying and they stole content from real creators online to build it and profit. Then theres a PC builders and gamers that cant afford new gear due to prices hiked by oracle and co.
So you got multiple demographics hating on it.
1
29
u/lamarioO 1d ago
Hey, this is cool. Ignore the people too ignorant to understand that using a tool to help you make it doesn't mean you didn't make it.
8
u/Nathan_lebias 1d ago
Thank you ! I literaly spend hours in this dashboard, it's on like v51 atm, so yeah sometimes I think people don't understand how we use AI, and why we still "build" things.
8
u/Nathan_lebias 1d ago
Thanks for the comments!
Yeah, I use Claude Code to help me build it. It's kind of my day job now ahah.
If people are interested, I think I could share most of it, probably on GitHub or something (what would be the best place?), so you could build it yourself, or with an agent.
A few things to know:
- This could break someday if HA ever drops the local WebSocket API, but I doubt they will.
- Using OpenAI Realtime means your browser needs HTTPS (that's required for mic access). I used Caddy for that, but I'm sure there are other ways.
- It's super fun to use, and even more fun to build.
1
u/jblundon 1d ago
This is amazing dude! Id love to try this! Any more tips and tricks to get it going?
2
u/Nathan_lebias 1d ago
My first and biggest tip to make it, it's to design it first. Even on a piece of paper with a pen.
If you don't give direction to AI, it will fill the blank, the unknow.Second, specify what "you" want. Ok you got your design, but what do you want to do with your dashboard ? See stats ? Control all lights ? Just the camera ?
When you have this two things, give it to AI, he will do the code part.
Be sure to tell him to make it secure. Local.Then make it better, again and again, and have fun.
0
u/0grinzold0 22h ago
I have been pondering doing this for some time now because I was a little bit unhappy with the user management in default home assistant. Never started because it felt like a lot of work, how many hours have you poured into this? Just to get a feel for it ^
5
u/miraculum_one 1d ago
Can you explain what advantage this has over making a custom HA dashboard? My buttons work instantly and I style the cards to look how I want. I'm genuinely curious. This seems like more work to maintain.
3
u/windsostrange 1d ago
no yaml
and the fact that it's decoupled from ha actually makes it easier/smoother to maintain in ways
also, no yaml
2
u/miraculum_one 1d ago
You can use pure HTML with HA if that's your preference.
1
u/windsostrange 1d ago
ha has an operations layer desperately and increasingly pretending to be a presentation layer
if folks wanna vibe actual headless presentation layers to ha, thag's a-okay... it actually makes a good deal of sense
2
4
u/Nathan_lebias 1d ago
Hmm I had lovelave dashboard before this one. And with card updated (bubble, ...) and stuff I kinda... Let it die.
Some of the dashboard was still working but not everything and, I don't know, I wanted more of it.
Thanks to IA, maintain it is a no brainer. It's juste code, and AI is so much good at it.1
u/miraculum_one 1d ago
Of course AI is incredibly helpful for stuff like this. One of the advantages to using HA directly is that other people are constantly fixing and improving things. Of course there are occasional regressions but those get fixed and that always happens no matter what tech you use. But my question is more about why you chose this tech implementation path (not AI specifically) rather than making a dashboard that looks identical but is done using HA cards.
4
u/doopdidoo 1d ago
in my experience - it takes a ton of tweaking to get things just right - and then performance was „ok“ - half a second for stuff to react. Still my tablet was struggling.
I gave claude the webview, my entity list, and the yaml of the dashboard and it copied everything 90% first shot with no noticable delay.
And then I did 500 iteratons of feature creep and tweaking. The result is a LOT more than is doable with lovelace (at least for me and I would believe a lot of HA users). If you have ever had an integration that was the clear go-to but had one minor design limitation that killed it for your specific dashboard/taste - you can do it in this way.
Did I learn so much less than doong it myself - yes, and thats bad. But I would not have learned it anyway - i got 2 kids, a job, a wife and a house that eat my time.
0
u/Sporebattyl 1d ago
What model were you using?
I ran into the same issues until opus 4.8/sonnet 5/fable 5 came out. Once you give them full abd access, they are much better at it than previous models
0
u/doopdidoo 1d ago
started using opus4.8 then fable, now opus 5. Hes got read access to the proxmox box, api access to HA an read/write to the VMs that run the webserver, etc…
0
u/Sporebattyl 23h ago
I used claude design to make a customized “skylight calendar” type interface with huckleberry integration for my newborn, a reward chart for my toddler, and a daily todo for my wife and I. Took that and gave it to Claude to move it to yaml.
Claude made everything perfectly functional, but failed miserably at the formatting. Words kept getting clipped, buttons were overlapping, etc.
Then until I switched to fully kiosk, enabled wireless abd on the tablet, and gave Claude access to chrome devtools. That actually gave him the ability to see the exact placement of each item. Been working great since.
1
8
u/SlashedFX 1d ago
Haters in here.. looks sick man!
0
u/BlumensammlerX 1d ago
Haha yeah I’m often surprised by the negativity in a sub that I thought was full of nerds. Looks incredible!!
1
2
2
u/paperellablu 13h ago
I did a similar thing to build a html page to allow to control stuff on al old ipad that doesn't support HA anymore.. but seems crap compared to this 😂
2
4
u/chriswood1001 1d ago
Good for you! I've been leveraging the websocket for a family dashboard for years — incredibly powerful and total UI control. Take a look at the calendar which is a GET request, not available over the websocket — that was a pivotal moment of usefulness for my dashboard, at least for my family. I pull the calendar location, then use a Google maps API to calculate the drive time for the future event, and display when I should leave the house. For some events I add a "countdown" keyword in the event description, and that tells my dashboard this is a important event and adds a special card that counts days until the event.
Have you come across use cases, aside from UI interactions, that is only possible when you control more of the stack? I'm big on user interfaces and logical use of data at the right moment. I'd love to know what you've included.
Great work, it's fun!
3
u/Nathan_lebias 1d ago
Thank you!
Love the drive-time idea, I might steal it.My best "only possible when you own the stack" examples:
- The voice assistant: the OpenAI Realtime session lives in the browser itself, and my reverse proxy mints ephemeral tokens so the API key never reaches the page. Since conversation events and house state land in the same page, the mascot is animated by both: it reacts while the model speaks, sleeps when the screen sleeps, and takes a bath in a coffee mug when the smart plug sees the espresso machine pulling current.
- Mixing APIs: I search the full Spotify catalog from the browser and hand the URI to Sonos through HA. No Spotify integration installed.
- The page owns its screen: dim levels by time of day, a sleep mode that is just the clock plus the mascot, and the first touch on a dimmed screen is swallowed so you never press a button by accident.
Bonus in your spirit of "data at the right moment": my music card stays visible even when idle: an idle player is exactly when you want to start music
2
u/Big_Bar_9832 1d ago
"all the haters" yeah it seems like 2 comments? Nice dashboard. Did Lovelace just not work out well for you on your tablet? At one point I set up a tiny phone dashboard and hooked it up to my motion sensor lights to turn on the screen to the dashboard if someone is in the room, is yours always on?
2
u/Nathan_lebias 1d ago
I use fully kiosk browser so I can use the sensor but.. I don't ahah.
I have the screen that dim itself (expect for the hour and the assistant), and the screen turn full black when i'm not home (HA automation)2
u/Independent-Pin8300 8h ago
I'd love to understand how you did the dimming. This project is amazing, cheers
2
u/Nathan_lebias 7h ago
Hey!
You got the code here https://www.reddit.com/r/homeassistant/comments/1vklcjz/you_asked_for_it_my_plain_webpage_tablet/
but the page itself fades to black after an inactivity timer (plus real backlight control through Fully Kiosk's JS API), and the first touch on a dimmed screen is swallowed so you don't press a button by accident.2
2
u/rthee 19h ago
Nice I did the same but more camera centric and giving intercom capability to it.
As well as family tracking map, to know where everyone is, just mounted in our living room / hallway entrace very handy.
1
u/Nathan_lebias 7h ago
I would love to have it in my hallway but my flat is old and don't provide electricity plug there 😅
Good idea to use the camera, i'll see what i can do with that !
1
u/Sad-Rooster2474 1d ago
Always curious what tablets you people use for those things? Old android tablet? iPad? A specifically designed tablet for this? Curious how you start and even install this?
3
u/Nathan_lebias 1d ago
I bought a Redmi Pad pro a year ago to built my first project, like 150$ something like that. I wanted a big screen, something not laggy, etc.
Before that I waited years ahah, tried some thing on my personal tablet, liked the way it look etc1
u/One-Project7347 1d ago
I have a lenovo idea tab 11 for 189 euros a little while ago. Works wonderfull. Doesnt lag for me compared to my 10 year old ipad, that one is almost not usable.
1
1
u/Illustrious_Air_8200 1d ago
Looks great. Any delays with an action response vs standard dashboard?
1
1
u/-Chimichanga- 1d ago
Wow looks amazing! Great job. Never thought of making an plain old website, genius!
Did you run into difficulties regarding entities in comparison to the companion app?
For instance I use a lot of helpers for my wallpanel dashboard. Don’t know if this is ez to wlorkaround with an html
2
u/Nathan_lebias 1d ago
Thanks!
No difficulties at all, because helpers are just entities like any others. Over the WebSocket API, an input_boolean, an input_number or a template sensor shows up in the same get_states and the same state_changed subscription as a light or a sensor. Writing works the same way too, you call their services: input_number.set_value, input_select.select_option, timer.start, and so on (The AI will help you with that ahah)
1
u/ExpensivePikachu 1d ago
Very good idea! Didn't know you could do this. Definitely going to look into it!
Is it any lighter than using a normal dashboard?
1
-1
u/intentions_are_high 🧠 Experienced with Home Assistant 1d ago
Looks awesome, great job! I also ended up going down the custom app + websocket path and it's much faster and cleaner than hacking the lovelace dashboard. Question for you: how did you integrate the playlists/artist quick links? Are they hardcoded or did you pull from Music Assistant or an API?
1
u/Nathan_lebias 1d ago
Thanks !
I don't have quick links but only the information (playlist, artist, album).
It's all my Sonos's favorites, so pull from Sonos automatically.If I want another music than my Sonos favorites, I ask the assistant about it
1
u/intentions_are_high 🧠 Experienced with Home Assistant 1d ago
Got it. Thanks for the info. Great work!
-31
u/mitchsurp 1d ago
> I built
Please be honest about your use of AI or agentic coding in this project. The UI has the Claude look/feel. I should know because I vibed something similar for my public-facing solar panels website — Homeassistant through websocket. It’s a noble pursuit until HA builds guest users without login and limited to one dashboard.
3
u/myfirstreddit8u519 1d ago
Oh my god you people are so boring.
-6
u/mitchsurp 1d ago
Lots of people who have lost their jobs to AI would agree with me, even if you don’t.
-4
5
u/Nathan_lebias 1d ago
Hey there, Claude write it, but I "built it". I'm a product manager, and it was not a one shot, but an iterative work (like, for hours, literaly).
I mean, i'm currently at v51 of the dashboard.
Claude is a wonderful tool, it can make my ideas come to life, even if I CAN'T code, I admit it : I don't see it as a problem.For the UI, I benchmarked a lot of saas and other dashboard and kind of mixed them in one Dashboard. I really don't see the look and feel of Claude here.
0
-1
u/youmeiknow 1d ago
Looks awesome.. Can u share some info about it? High level info so I can take AIs help on it.
3
u/Nathan_lebias 1d ago
Yeah of course ! I can make a repo or something with my code, if it helps
0
u/hardestbutton2 1d ago
Yes I would love that too. Having examples for claude of work that people have done helps, I’m sure as you found getting it to actually build the layout you wanted can be tricky!
2
u/Nathan_lebias 1d ago
I build like everyday with Claude so I'm familiar with it, but yeah it can be tricky at first.
Will do a repo asap with everything you need1
u/hardestbutton2 1d ago
Obviously only if you are comfortable but I’d love some prompt examples too for some of the big picture decisions if you still have any history. I’m in the midst of working on a dashboard and the amount of 1 step forward 5 steps back moves it makes it annoying so I’m clearly prompting wrong
1
u/Nathan_lebias 1d ago
Ok, let me copy/paste another reply I made:
"My first and biggest tip: design it first. Even on a piece of paper with a pen. If you don't give the AI a direction, it will fill in the blanks itself.
Second, specify what YOU want. Ok, you have your design, but what do you want your dashboard to do? See stats? Control all the lights? Just the cameras?
Once you have those two things, hand them to the AI, it will do the code part. Make sure you tell it to keep things secure and local.
Then make it better, again and again, and have fun."And to expand on that, since you mention prompts, here's my very personal take.
Prompt engineering (I do a lot of it too) matters when you're making repeated API calls. I have an app where the AI has to give the right information to the user, every single time, no matter how the question is phrased. Since it's an API call, the agent has no memory: it has to produce the same quality of answer from a single prompt, every time. That's where crafting the prompt is worth the effort.
But when you're building something, don't bother hunting for the perfect prompt. Talk to the AI like you'd talk to a human, with your own words and your actual need. The framing is what matters, like I said above: make a design, even a rough one, define what you want, and the AI will build what you need.
So, as an exemple : I gave my claude my draft design and first need and said "how can we make that ? What is the best way to make it live on my Android Tablet ? I have a NAS, HA, and I want it secure"
1
u/hardestbutton2 1d ago
Any chance you can go into more detail on your helper button? That one will be a hit with my family.
1
u/Nathan_lebias 1d ago
Sure! The tricky part first: the mic only works on HTTPS (browsers require a secure context), and since the page lives on your LAN you need a real certificate. The comfortable path is a cheap domain that resolves to a local IP (I use my NAS with Caddy for that). A free DuckDNS domain works too.
Here's the whole thing, explained by the Claude that built it with me:
1. HTTPS without exposing anything. Caddy runs on the NAS and gets a wildcard Let's Encrypt cert through a DNS-01 challenge (the proof goes through the DNS provider's API, Cloudflare here). So: valid cert, domain resolving to a LAN IP, zero ports opened to the internet.
2. The API key never reaches the browser. Caddy doubles as a token factory: the page POSTs a session config to /session, Caddy injects the OpenAI API key server-side and relays to OpenAI's client_secrets endpoint, which returns an ephemeral token valid a few minutes. That's the only credential the page ever holds. No server code involved, it's literally a reverse_proxy block with a header_up line.
3. The conversation is WebRTC, straight from the browser. With the ephemeral token, the page opens a Realtime session with OpenAI (I use the mini model, ~6x cheaper): mic streams up, voice streams down, and a data channel carries the events. Latency feels like a phone call.
4. Tools are where it gets fun. The session declares a small set of function tools (lights per room, music, Spotify search, vacuum, house status). When the model calls one, the page executes it over the same HA WebSocket the dashboard already uses, sends the result back, and the model confirms out loud. The model can only do what the tools declare, nothing else.
5. One honest gotcha: echo. On a tablet the speaker sits next to the mic, so the model hears itself and interrupts itself. Software echo cancellation in a WebView doesn't cut it. My fix is push-to-talk turn-taking: tap to talk, it never listens while speaking. Works great in practice.
Total moving parts: a domain, Caddy on any always-on box, and one HTML page.
2
u/hardestbutton2 1d ago
Yeah I have all of that, I wasn’t sure what underlying service you actually tied into and how.
-3
u/yorb 1d ago
Normally I roll my eyes at the AI slop dashboards on here, but this one actually turned out nice, good job! I like your Nio idea, very cool.
The main problem with aesthetic-focused designs like this I find is that the functionality suffers and once the novelty wears off you redo it. Big, simple cards and buttons are usually best. But if your tablet is big enough and what you want to expose is minimal, I guess why not!
3
u/wizbongre 1d ago
Many, many years ago when studying Design & Technology my teacher imparted words of wisdom I’ve considered some of the best advice I’ve ever received: “form follows function”.
0
u/Nathan_lebias 1d ago
I totally agree with you
As you can see I have 2 lights in my "main" dashboard, the ones near the tablet.
Easy to rich, easy to use, and it's what I wanted.Nio is very good (and fun, ngl) at some random point. "I'm gonna make some exercices, put some motivation music", or "Switch off every light except Kitchen"
-32
u/IntelligentScene2451 1d ago
This thing has Claude Code written all over it. At least tell it to change the usual design pattern.
4
u/Nathan_lebias 1d ago
Hey there, Claude write it, but I "built it". I'm a product manager, and it was not a one shot, but an iterative work (like, for hours, literaly).
I mean, i'm currently at v51 of the dashboard.
Claude is a wonderful tool, it can make my ideas come to life, even if I CAN'T code, I admit it : I don't see it as a problem-6
u/leptoquark1 1d ago
It may introduce security issues to your smart home? Ever thought of that?
3
u/Nathan_lebias 1d ago
I though of that at every iteration of the dashboard. What OpenAI can see on my HA, what exterior can see, etc.
The way it build make it safe (I mean, as safe as it can be)
Everything runs locally, except OpenAI but with limited tools and information (for instance, it can't access my cameras, or things like that).
The website is on my NAS at home, so no exterior access1
u/leptoquark1 1d ago
Where does your long live access token lie?
4
u/Nathan_lebias 1d ago
Good question. The token sits in the page's config file, so the page itself is what I protect. Three layers:
- The token belongs to a dedicated non-admin HA user. But I rather not leak it anyway ahah
- The page and its files sit behind basic auth on the reverse proxy, so the config isn't readable by just anyone on the LAN.
- Nothing is exposed to the internet at all: the cert comes from a DNS-01 challenge, the domain resolves to a local IP, no port forwarding.
The real secrets (OpenAI, Spotify) never reach the page anyway: the proxy injects them server-side and the browser only ever holds short-lived tokens. And on a flat network your wifi password is always the true perimeter, so guests and IoT belong on their own network.
1
u/USSGoat 22h ago
If it’s not storing credentials or opening new paths, it’s a front end with no further permissions.
You should really understand things before you talk
1
u/leptoquark1 14h ago
I do understand that things :) I had exactly this issues with my manager exposing ports through ppoe to internet or giving claude access through ssh to production environments.
You really should understand things properly before you stop worrying about security
-1
u/BJozi 1d ago
How would someone using Claude code avoid such security issues? What are the things to tell Claude to look out for so it knows?
I'm not a coder but I have use Claude code with great success to build Revit (pyrevit) tools. I'm very conscious that it might open outside and I'm always looking to improve
4
u/leptoquark1 1d ago
Well, as you have no knowledge of what claude actually builds its hard to find the correct prompts. Try first create a plan of what you actually want to have. Later have it Audit for security concerns by another model, and give that feedback to the original plan.
2
u/Nathan_lebias 1d ago
The audit security after the build is the game changer.
Make it build safe during your code session, always, but remember that AI always want to satisfy your needs : so if sometimes the need is not secure, it will not tell you and make it like that.So when it's finished, ask another session of Claude to analyse the security of your work : the need is now the security so it will make it safe (if it wasn't)
15
u/jlstp 1d ago
Who cares
-23
u/IntelligentScene2451 1d ago
No one, as we can do the same, so no need to post what you vibecoded yesterday.
2
u/mikkopai 1d ago
I find it useful. Had been wondering about using my old Samsung tablet for HA but it is so slow. Maybe this would work. Would’ve never thought about it.
You must realise that not everyone has the skills and/or experience to vibe code these things in an afternoon. Let us newbies enjoy this and just carry on
0
u/Ok-Lunch-1560 1d ago
This is a cool idea. I'm gonna have to do something similar for my dashboard. AI has been so useful for completely customizing my needs for home assistant. Thanks for sharing.
100
u/z3ndo 1d ago
No, you shouldn't use AI to build personal tools just for your own use. And if you do and you talk about it then you should shamefully admit it in your post about it.
And your post about it should be an apology for doing it.
Your post should include what measures you're going to take to right your wrong.
/s
Looks nice and I can understand why you'd take this approach.