Learning Timeline
Key Insights
API Token Security Tips
When providing an API Token to an AI, ensure you are using a private session. If you are concerned about privacy, you can ask the AI to create a 'placeholder' in the code, then manually insert the token yourself into the HTML file.
Google Home Display Workaround
Google Home often struggles to display standard Lovelace dashboards. Using a locally hosted 'Custom HTML' method is the most stable way to display AI data without login issues or timeouts.
Prompts
Smart HTML Dashboard Generation
Target:
Claude
I want you to act as an expert web developer for Home Assistant. Write a single-file HTML dashboard with embedded CSS and JavaScript. This dashboard should connect to my Home Assistant instance using an API Long-Lived Access Token. Create a clean UI that displays my current energy usage, living room temperature, and a daily greeting. Use modern dark-mode styling.
Step by Step
Workflow to Generate & Display an AI Dashboard on Google Home
- Open the Claude.ai or ChatGPT interface to start your code generation session.
- Provide a specific prompt to generate the HTML code for your desired dashboard (e.g., 'Create a minimalist HTML dashboard for Home Assistant').
- Navigate to your user profile in Home Assistant and scroll down to generate a 'Long-Lived Access Token'.
- Provide that API Token to Claude so the AI can integrate 'fetch data' functionality to pull real-time sensor data from Home Assistant into the HTML code.
- Copy the completed HTML code generated by the AI.
- Use the File Editor in Home Assistant to create a new file under the `/config/www/` directory (e.g., `dashboard_ai.html`).
- Paste the code into the file and click 'Save'.
- Access your Google Home device via the Home Assistant 'Media' tab or use the 'Google Cast' service.
- Enter the local URL of the file (e.g., `http://homeassistant.local:8123/local/dashboard_ai.html`) to cast it directly to your Google Home smart display.
