Ich habe mich mit der Frage beschäftigt, wie weit sich eine Smart-Home-Oberfläche wie Home Assistant mit Unterstützung von Künstlicher Intelligenz in kurzer Zeit nachbauen lässt. Mein Ziel war es, ein funktionales Dashboard zu erstellen, allerdings ohne Backend-Anbindung oder echte Geräteintegration. Mich hat vor allem interessiert, wie sich moderne KI-Tools wie Claude Code im Zusammenspiel mit aktuellen Frontend-Technologien wie React, Vite und Tailwind einsetzen lassen. Dabei wollte ich herausfinden, wie viel eigenständige Arbeit die KI tatsächlich übernehmen kann, welche technischen Hürden auftreten und wie realistisch ein solches Experiment für Entwickler und Smart-Home-Interessierte ist.

Ausgangssituation und Zielsetzung

Für mein Experiment habe ich mit einer komplett leeren Projektstruktur begonnen. Es ging nicht darum, Home Assistant als System zu ersetzen, sondern dessen grundlegende Oberfläche und Funktionen prototypisch nachzubilden. Dazu habe ich einen klar formulierten Prompt vorbereitet, der die KI anleiten sollte, ein Dashboard mit Sidebar, interaktiven Karten und realistischen Mock-Daten zu erstellen.

Mir war wichtig, dass keine echte Geräteanbindung notwendig ist. Der Fokus lag auf der reinen Frontend-Entwicklung. Als Technologien habe ich React für die Komponentenstruktur, Vite für die schnelle Projektinitialisierung und Tailwind CSS für das Styling vorgegeben.

Die KI sollte als Co-Pilot agieren und möglichst viele Aufgaben eigenständig übernehmen, von der Projektstruktur bis zur Implementierung einzelner UI-Komponenten.

Einsatz von Claude Code als KI-Tool

Ich habe Claude Code als KI-Entwicklungsumgebung genutzt, um den Prompt auszuführen. Nach dem Start hat die KI selbstständig ein neues React-Projekt mit Vite initialisiert, die notwendigen Abhängigkeiten installiert und die Grundstruktur angelegt.

Auffällig war, dass Claude Code nicht nur einzelne Dateien generiert hat, sondern auch eigenständig mehrere Coding-Agents eingesetzt hat. Diese haben parallel an verschiedenen Komponenten gearbeitet, etwa an der Sidebar oder an Karten für Sensoren und Mediaplayer.

Die KI hat dabei nicht nur Standard-Code erzeugt, sondern auf Basis der Vorgaben individuelle Komponenten entwickelt. Das Vorgehen war nachvollziehbar und die Fortschritte im Projektverzeichnis gut sichtbar.

Der initiale Prompt

Claude Code Prompt: Home Assistant MVP (30-Minute Live Coding Demo)

Context & Goal

Build a minimal viable product of Home Assistant during a 30-minute live coding session using Claude Code. The purpose is to demonstrate how fast development with Claude Code can be — this will be recorded/streamed as a showcase video.

Core Requirements

Visual Fidelity

• Replicate Home Assistant's actual UI as closely as possible: the sidebar navigation, top toolbar, card-based dashboard layout, color scheme (dark mode preferred — HA's dark blue/grey theme), typography, and iconography.
• Use Material Design Icons (MDI) or a similar icon set that matches HA's look.
• The app should be indistinguishable from real Home Assistant at first glance in a demo video.

Pages to Implement (priority order)

1. Overview/Dashboard — The main card-based grid with device status cards (lights, thermostat, sensors, media player, weather). Cards should be interactive (toggle lights, adjust thermostat slider, etc.) with smooth animations and state changes.
2. Sidebar Navigation — Matching HA's sidebar: Overview, Energy, Map, Logbook, History, Settings icons/labels. Only Overview needs to be functional; others can be placeholder pages with a "Coming soon" state.
3. Device Detail Modal/Panel — Clicking a card opens a detail view (e.g., light brightness/color controls, thermostat schedule view).

Interactivity & "Wow Factor"

• All dashboard cards should have working state toggles with visual feedback (light cards glow when on, thermostat shows animated temperature arc, etc.).
• Include realistic mock data — room names, device names, temperature readings, energy stats, weather data that looks real (not "Device 1", "Sensor A").
• Add subtle animations: card state transitions, sidebar hover effects, toggle switches, slider interactions.
• Include a working time/date display in the header that updates in real time.

Network Device Discovery (Stretch Goal)

• If achievable within the time constraint, implement local network device discovery (e.g., mDNS/SSDP scan or ARP table lookup) that shows at least one real device found on the network.
• Display discovered devices in an "Integrations" or "Devices" section.
• If full discovery isn't feasible, simulate it with a realistic loading animation + "discovery" flow that feels authentic.

Technical Guidance

• Stack: React + Vite + Tailwind CSS. Set up the project first, start the dev server immediately (npm run dev), and keep it running throughout the session so I can watch progress live in the browser as you build.
• State management: React useState/useReducer. No backend needed — mock all data in-memory.
• No authentication required — skip login screens, go straight to dashboard.
• Responsive: Optimize for desktop (1920×1080) since this is a demo video. Mobile is not needed.
• Development flow: After initial setup, build incrementally — sidebar first, then dashboard cards, then interactivity. Commit after each major feature so progress is visible.

What NOT to Build

• No real device control or MQTT/Zigbee/Z-Wave integration
• No user authentication or multi-user support
• No automation engine or scripting
• No add-on store or HACS
• No full settings/configuration pages

Success Criteria

A viewer watching the demo video should think: "Wait, did they just build Home Assistant from scratch in 30 minutes?" — that's the reaction we're going for.

Technische Umsetzung und Komponentenstruktur

Die generierte Projektstruktur entsprach einem typischen React-Setup mit zusätzlichen Verzeichnissen für Assets und Komponenten. Die Sidebar wurde als eigene TypeScript-Komponente angelegt, ebenso wie verschiedene Karten für die Darstellung von Gerätezuständen.

Für die Visualisierung von Sensordaten und Mediaplayern hat die KI Mock-Daten integriert, sodass die Oberfläche auch ohne Backend dynamisch wirkte. Die Komponenten waren modular aufgebaut und ließen sich im späteren Verlauf leicht erweitern.

Im Terminal konnte ich die einzelnen Schritte der KI nachvollziehen: von der Installation der Frameworks bis zum Erstellen und Anpassen der Komponenten. Die Arbeitsteilung zwischen den Coding-Agents hat die Entwicklung spürbar beschleunigt.

Grenzen, Voraussetzungen und Besonderheiten

Das Experiment hat gezeigt, dass KI-gestützte Entwicklung im Frontend-Bereich bereits sehr effizient ablaufen kann. Allerdings gibt es klare Grenzen: Ohne Backend-Anbindung bleibt das Dashboard rein visuell und kann keine echten Geräte steuern.

Für Einsteiger ist es hilfreich, wenn Grundkenntnisse in React und der Projektstruktur vorhanden sind. Die KI nimmt zwar viele Aufgaben ab, aber technisches Verständnis ist weiterhin notwendig, um Ergebnisse zu prüfen und anzupassen.

Auffällig war, dass die KI bei komplexeren Anforderungen gelegentlich Rückfragen stellt oder zusätzliche Prompts benötigt. Für produktive Umgebungen wäre ein manueller Review der generierten Komponenten unerlässlich.

Erweiterungsmöglichkeiten und Einordnung

Das von der KI erstellte Dashboard kann als Basis für eigene Smart-Home-Projekte dienen. Mit Backend-Anbindung und echter Geräteintegration ließe sich das Konzept weiter ausbauen.

Alternativ könnten auch andere KI-Tools oder Frameworks eingesetzt werden, um spezifische Anforderungen besser abzudecken. Die Kombination aus KI-Unterstützung und klassischer Entwicklung eröffnet neue Möglichkeiten für schnelle Prototypen.

Aus meiner Sicht eignet sich dieser Ansatz vor allem für Entwickler, die experimentieren oder erste Entwürfe testen möchten, ohne von Anfang an eine vollständige Systemintegration zu benötigen.