Build a Home Assistant Dashboard With AI: A Step-by-Step Guide

1. Introduction: The Dashboard Is the Face of Your Smart Home

🏠 This guide is part of our Home Assistant Brand DNA – the local-first smart home we actually trust, and the platform this whole dashboard runs on.

The dashboard is the face of your smart home — and the part where a lot of people quietly give up. It’s either overloaded with a hundred tiles nobody can parse, or so minimal you can never find the thing you actually need. Getting it right by hand means learning the quirks of half a dozen card types, and that’s exactly the kind of fiddly, syntax-heavy work where an AI co-pilot shines.

With an AI doing the YAML, you can build a tidy, genuinely good-looking dashboard surprisingly fast. This is the complete path — from preparation to a finished, cross-device layout that looks right on a hallway tablet and a phone alike. It’s the second part of a series: if you haven’t yet seen how to connect an AI to Home Assistant sensibly in the first place, start with part one, because the entity-list trick it introduces is the foundation everything below stands on.

Ad

The Engine Behind the Tablet (opens in a new tab)

Home Assistant Green is the ready-to-run hub that powers a wall-tablet dashboard — local, fast, no subscription.

---

2. Step 1: The Foundation — Your Entity List

Before a single card exists, the AI needs your inventory. Generate the complete list of every device and entity once, via Developer Tools → Template, with this template:

{% for s in states -%}
{%- set did = device_id(s.entity_id) -%}
{{ (device_attr(did,'name_by_user') or device_attr(did,'name')) if did else '(no device)' }};{{ area_name(s.entity_id) or '—' }};{{ s.entity_id }};{{ s.name | replace('\n',' ') | replace(';',',') }};{{ s.state }}
{% endfor %}

Out comes a list in the format Device ; Area ; entity_id ; Name ; State. Hand that list to the AI and it knows every ID, every room and every current value. That single step saves you most of the debugging later, because nothing gets guessed. A tile that points at a real, correctly-named entity works the first time; a tile built on a hopeful light.living_room that doesn’t exist just sits there blank, and you waste twenty minutes finding out why.

---

3. Step 2: Define the Goal Before You Start

A good dashboard doesn’t begin with cards — it begins with questions. Get clear, for yourself and for the AI:

• Who uses it? Just you, or the whole family?
• On which device? A wall tablet in the hallway (kiosk mode), the phone, the browser — or all of them?
• What must be visible at a glance? And what’s allowed to disappear behind a single tap?

In our own project the brief was clear: a lean, Apple-inspired dashboard for a hallway tablet that also looks good on a phone. The guiding idea — the home screen shows only what matters, everything else is exactly one tap away. Warnings (a window left open, a low battery, high humidity) only appear when they’re relevant; the rest of the time the screen stays calm and quiet.

The more precisely you can state that concept, the better the AI’s first draft will be. “Make me a dashboard” gets you mush. “A calm hallway-tablet home screen with status chips on top, three big tiles for battery, energy price and hot water, and warnings that only show when triggered” gets you something you can actually refine.

Ad

A Host That Renders Anything (opens in a new tab)

A Raspberry Pi 5 with an SSD runs HACS and custom cards smoothly — the flexible base for an ambitious dashboard.

---

4. Step 3: Choose the Right Cards

Home Assistant ships good cards out of the box — Tile and Sections — that already look tidy. If you want more character, you reach into HACS (the Home Assistant Community Store). Three custom cards have earned their place in our setup, each for one strength:

• Mushroom — sleek, rounded tiles. The workhorse for the look.
• Bubble Card — expandable pop-ups. Perfect for the “home screen stays empty, details open in a sheet” principle.
• card-mod — CSS polish. Round corners, tweak colours and — especially handy — show or hide cards depending on state (this is how the self-hiding warning banners work).

You don’t need all three. Native cards are enough for a clean result; the HACS cards lift it to the next level. The key move: tell the AI exactly what you have installed. A model that knows you’re running Mushroom and Bubble Card writes to those cards; one that’s left guessing reaches for a card you don’t have, and the tile renders blank.

---

5. Step 4: Work Iteratively — The Actual Build

Now the pleasant part. Instead of demanding everything at once, you work in rounds:

1. Describe one area. For example: “Build me a home screen with status chips on top (weather, alarm, open windows), then house battery, energy price and hot water as big tiles, and quick-action buttons for ‘All lights off’ and ‘Hot-water boost’.”
2. Let the AI generate the YAML — and explicitly ask it to validate every entity against your list.
3. Paste it in via the Raw editor: open the dashboard → Edit (pencil) → three-dot menu → Raw configuration editor → drop the content in → save.
4. Look, give feedback, refine. “The battery shows up twice”, “make the room tiles fully clickable”, “optimise the arrangement for the tablet” — that’s exactly how the dashboard grows.

This back-and-forth is the AI’s real strength. You don’t need to know how a mushroom-template-card is structured — you describe the result, and the AI handles the syntax. Each round is cheap, so you experiment freely: try a layout, dislike it, ask for a different one, and you’ve lost two minutes instead of an evening.

A concrete example of where this pays off: the self-hiding warning banner. The brief is simple in plain English — “show a red banner only when a window is open, and make it vanish completely when everything’s shut.” Writing that by hand means wiring a card-mod template that reads the state of a group and toggles display: none, which is exactly the kind of finicky syntax most people never learn. With the AI you just describe the behaviour, hand it the entity for your window group from the list, and ask it to hide the card when the state is off. Two rounds later the hallway tablet sits quiet all day and only lights up red when it actually matters — and you never touched a line of CSS yourself. That single pattern, repeated for low batteries and high humidity, is what makes a dashboard feel calm instead of cluttered.

---

6. Step 5: One Layout for Every Device

A dashboard has to work on the tablet and the phone. The trick is Home Assistant’s Sections view: it arranges cards responsively on its own — multiple columns on a wide tablet, stacked into one column on a narrow phone. So on a hallway tablet in landscape you use the space optimally (ideally with no scrolling at all), while on the phone everything stacks neatly underneath itself.

For a kiosk tablet, it’s worth telling the AI to increase the column count so the home screen fits the available height and never needs scrolling. These are the kinds of details you test on the actual device and nudge over a round or two — the AI gets you 90% there, and the last 10% is you standing in the hallway saying “a touch bigger, and move the alarm chip left.”

Ad

Real Entities to Fill It (opens in a new tab)

A Zigbee coordinator gives your dashboard live, local tiles — sensors and buttons that respond instantly, internet or not.

---

7. The Most Common Traps (and How to Dodge Them)

• Guessed entities. Without the entity list, the AI invents IDs. Always supply the list and have it cross-check.
• Misleading IDs. An entity called light.wohnzimmerlampe_2 might physically hang in the dining room. Trust the area from the export, not the name of the ID.
• Missing HACS cards. If the YAML uses a custom card you haven’t installed, the tile stays blank. Tell the AI what you’ve got.
• Version-dependent syntax. Some extensions (Bubble Card, for instance) change their format across major versions. Tell the AI the version and the code fits.
• Group IDs with a suffix. Create a light group called “Floor lamp” when the name’s already taken and Home Assistant assigns light.stehlampe_2. Rename such IDs cleanly in the entity settings — otherwise the tile points at nothing.

---

8. Bonus: Write Your Conventions Down

As the dashboard grows, a few fixed rules keep it consistent. Two examples from our own project:

• Lamps: several smart bulbs in one fixture get merged into a single light group; the dashboard always controls the group, never the individual bulbs.
• Function rooms vs. living rooms: motion light in the cellar always switches on; outside it only switches on after dark.

You can keep conventions like these in a small notes file — we use a CLAUDE.md in the project — and hand it to the AI, so the style stays uniform across many sessions. It’s the same instinct as a house style guide: write the rule once, and every future round inherits it instead of relitigating it.

---

📌 FAQ – Frequently Asked Questions

Do I need HACS cards to build a good Home Assistant dashboard?

No. The native Tile and Sections cards already look tidy and responsive on their own. HACS cards like Mushroom, Bubble Card and card-mod take it to the next level visually, but you can build a clean, useful dashboard with stock cards alone. Just tell the AI what you actually have installed.

How do I stop the AI from inventing entities on my dashboard?

Give it your exported entity list and explicitly ask it to validate every entity it uses against that list. Without the list it guesses IDs; with it, the cards point at real devices. Trust the area from the export rather than the name of the ID.

How do I make a Home Assistant dashboard work on both tablet and phone?

Use the Sections view. It arranges cards responsively — multiple columns on a wide tablet, a single stacked column on a phone. For a kiosk tablet, ask the AI to increase the column count so the home screen fits the height without scrolling.

What are Mushroom, Bubble Card and card-mod?

They’re popular HACS custom cards. Mushroom gives sleek rounded tiles, Bubble Card adds pop-up sheets so the home screen stays empty until you tap, and card-mod is CSS polish — rounding corners, recoloring, and hiding cards based on state (the trick behind self-hiding warning banners).

How do I paste AI-generated YAML into my dashboard?

Open the dashboard, click Edit (pencil), open the three-dot menu and choose Raw configuration editor. Paste the YAML there and save. Always keep a backup snapshot first so you can roll back if a card misbehaves.