Design openHAB dashboards with AI

The AI ​​era has arrived in openHAB—at least for me. I had long hesitated to switch to openHAB because HomeAssistant offers a better UI and user experience. While openHAB is flexible, it offers few attractive, ready-made UIs.

AI is changing that now. Within an hour, I was able to build dashboards that would have been virtually unthinkable just months ago without a massive amount of effort.

Here is a selection of what I’ve created so far.

So beautiful!

Looks good but how do you do it?
Do you put in a template code?

Hi @dandjo!

Great job!

It would be interesting to show the generated code, especially when that code generates (creates) widgets.

This would help many people find a good starting point, both for ideas and for implementing openHAB in their own environments.

Hi guys,

not sure if it helps, but here’s the yml of my overview page. Feel free to distill what you like.

overview.yml.txt (517.7 KB)

Have a look at: GitHub - dandjo/openhab-widgets: Custom widgets for openHAB · GitHub

Nice, I’ve been dipping my toes into this as well via the MCP server addon for OH tied in with Claude AI directly

Recently I used a home assistant python bridge script designed for my specific amplifier (shared on the HA community forum) as a base to build a python connector/proxy to connect my whole home audio system to MQTT > OH, along with a corresponding python MQTT bridge for a Cambridge Audio streaming device. The proxy was needed to allow both the bridge and my existing wall panels to communicate with the amplifier simultaneously. Claude helped me debug this issue then architect and build the solution.

Here’s the control page for the audio system as a whole, also built entirely by Claude. I did no direct py or yaml coding myself, with the final architecture looking more or less like this (again, thanks Claude)

And my control page in OH. It’s not as pretty as your dashboard, but its a work in progress.

This is awesome - thanks for sharing! May I ask which AI providers you used and how well they worked for you?

I’m using Claude Code Fable at the moment.

Free Claude Sonnet 5 via the claude for windows desktop app.

Hi @dandjo ,

can you tell me a little bit more about the following part of your GitHub-readme?

The widgets are generated from Python by the script that builds my whole MainUI, which keeps the cards of the dashboard and the device pages consistent

What does the python script do? Can you also add it to your repository?

Thanks,
Norbert

Hi @nobbi123,

they generate the widgets. I will provide them. Have a look in the next hours. :slight_smile:

Cheers.

Could you also please share the icons. I’m mainly interested in your energy flow widget which looks really cool.

The icons are basically material:* and the SVGs of the flowicons should be included in the widgets.

@dandjo I’d love to learn how you asked / prompted the AI to build such a beautiful page!

I have now tested the energy flow widget. It’s really great but I still have few issues with it. For some reason the titles of the devices are missing, e.g.Wärmepumpe (see the pictures below).


I’m right now charging my car with a power of 8.4kW but the widget shows 0.008kW so I guess the power is divided by 1000 somewhere.

I’m using ABB energy meters e.g. for my heat pump and I can read the meter value but there are no Modbus registers for daily usage. I guess I need to read the meter value each morning from influxdb and calculate the daily usage in kWh. I haven’t defined all the Things and Items yet so some data is missing in the widget. So far the widget looks really cool.

@jlikonen I removed the titles at GitHub since the icons already describe the appliance. This is by design. :slight_smile:

The widgets expect SI values, so Watts for power. Maybe worth thinking about building them to let the consumer decide which units to have. I’ll have a look.

dandjo, ok, thanks. I have managed to get all the heute values working. I have changed the EV charging power to W. One more thing, how do you define “Eigenverbrauch” and “Autarkie”?

Eigenverbrauch: Self-consumption is calculated based on PV yield and feed-in.

Autarkie: Self-sufficiency is calculated based on grid consumption and self-consumption. The lower the grid consumption, the higher the level of self-sufficiency.

OK, thanks. Which parameters (in Geman) are they in you code?