🤖 Grok Code Fast Card

A Lovelace custom card providing a unified chat interface for real-time provisioning, editing, and technical debugging of Home Assistant configurations, accessed directly within the Dashboard.

⚠️ Important: This card requires the xAI Conversation with the Grok Code Fast service configured in Home Assistant.

✨ Features

💬 Interactive Chat: Chat bubble style interface with conversation history
💾 Auto-save: Persistent chat history and code using localStorage
⌨️ Send on Enter: Optional keyboard shortcut (configurable checkbox)
📎 File Attachments: Upload and send files (text, JSON, etc.) with your prompts
♻️ Code Iteration: Automatically sends current code for refinement and updates
👤 Multi-User Support: Tracks user context for personalized service
🔄 Conversation Continuity: Maintains context across multiple user devices (Laptop, Tablet, etc..)
🌙 Theme Support: Follows Home Assistant theme colors
🎨 Responsive Design: Adapts to any screen size

🔧 Requirements

Required: xAI Conversation Integration with Grok Code Fast Service

This card is specifically designed to work with the xAI Conversation integration's Grok Code Fast service:

✅ Install the xAI Conversation integration

Without the xAI Conversation integration, this card will not function.

Home Assistant Version

Home Assistant 2025.10 or newer
Frontend with container queries support (2025.7+ recommended)

📦 Installation

Via HACS (Recommended)

Click this badge to install xAI Conversation via HACS

Click this badge to install Grok Code Fast Card via HACS

Manual

Open HACS
Go to "Frontend"
Click the three dots menu → "Custom repositories"
Add this repository URL: https://github.com/pajeronda/grok-code-fast-card
Click "Install"

Manual Installation

Download grok-code-fast-card.js from this repository
Copy to /config/www/
Add resource to Lovelace:
- Go to Settings → Dashboards → Resources
- Click + ADD RESOURCE
- Enter:
  - URL: /local/www/grok-code-fast-card.js
  - Type: JavaScript Module
- Click CREATE
Refresh browser cache (Ctrl+Shift+R)

🚀 Usage

mode card:

fullscreen:

Add Card to Dashboard

Edit your dashboard
Click + ADD CARD
Search for "Grok Code Fast Card"
Click SAVE

Or add manually in YAML mode:

type: custom:grok-code-fast-card
theme: <your theme>

Example with panel mode:

- type: panel
    path: code
    title: GROK CODE FAST
    cards:
      - type: custom:grok-code-fast-card
        theme: <your theme>

Example with Browser mod:

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    initial_style: normal
    style_sequence:
      - normal
      - fullscreen
      - wide
    title: '(tap 👆 here)'
    content:
      type: custom:grok-code-fast-card
      theme: <your theme>

Optional Configuration

The card works without configuration.

⚙️ Features Explained

File Attachments

Upload files to provide context for Grok:

📎 Attach Button: Click paperclip icon to select files
🖼️ Supported Types: Images (PNG, JPG, GIF), text files, JSON, YAML, code files
👁️ Preview: Attached files shown as badges with filename and size
❌ Remove: Click X on badge to remove attachment before sending
📤 Auto-clear: Attachments cleared after successful send
💾 Storage: File metadata saved in chat history

Send on Enter

Enable the checkbox in the footer to send messages with Enter key:

✅ Enter: Send message (when checkbox enabled)
✅ Shift+Enter: Always adds new line (regardless of checkbox)
✅ Unchecked: Enter adds new line normally

Chat History

💬 Bubble-style chat interface
👤 User messages align right (blue background)
🤖 Grok responses align left (card background)
📋 All text is selectable and copyable
📎 File attachments shown as badges in user messages
💾 Auto-saves to localStorage

Code Editor

✨ Syntax highlighting for Jinja2/YAML
🔢 Line numbers enabled
📏 Auto-height on desktop, fixed on mobile
📋 One-click copy button
🎨 Follows Home Assistant theme
♻️ Code Iteration: Current code automatically sent with each request for refinement

Conversation Continuity

🔄 Context Preservation: Each response includes a unique ID
🧠 Memory: Previous response ID sent with next request
💬 Natural Flow: Grok remembers conversation context
👤 User Tracking: Maintains separate conversations per user

📝 Example Prompts

Try these with the Grok Code Fast service:

Basic prompts:

"Create an automation to turn on lights when motion is detected"
"Fix this template: {{ states('sensor.temp') * 2 }}"
"Make a template sensor for average temperature from 3 sensors"
"Help me create a script to announce weather via TTS"
"Generate a Lovelace card config for displaying energy usage"
"Create a binary sensor that checks if it's nighttime"

With file attachments:

Upload screenshot: "Explain what this error means and how to fix it"
Attach JSON file: "Parse this API response and create sensors for each value"
Send image: "Create an automation based on this state machine diagram"
Upload config file: "Review this automation and suggest improvements"

Code iteration:

First: "Create a motion light automation"
Then: "Add a condition to only work at night"
Then: "Also add a delay before turning off"
(Card automatically sends current code for context)

🐛 Troubleshooting

Card not showing

✅ Check resource is loaded: Settings → Dashboards → Resources
✅ Verify file exists at /config/www/community/grok-code-fast-card/grok-code-fast-card.js
✅ Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
✅ Check browser console (F12) for errors

No response from Grok

❌ Most Common: xAI Conversation integration not installed
✅ Verify integration: Settings → Devices & Services → look for "xAI Conversation"
✅ Check service exists: Developer Tools → Services → search "grok_code_fast"
✅ Check Home Assistant logs for integration errors

Chat not saving

✅ Ensure browser localStorage is enabled
✅ Check no browser extensions are blocking storage
✅ Private/Incognito mode may block localStorage
✅ Check browser console for storage errors

File attachments not working

✅ Check file size (large files may cause issues)
✅ Verify file type is supported (images, text, JSON, YAML, etc.)
✅ Check browser console for file reading errors
✅ Ensure browser supports FileReader API

Conversation context lost

✅ Verify xAI Conversation integration supports conversation memory
✅ Check browser console for service call logs
✅ Clear localStorage and restart conversation if corrupted

Formatting issues

✅ Ensure Home Assistant 2025.1+
✅ Update to latest Home Assistant version
✅ Test in different browser (Chrome/Firefox/Safari)
✅ Check if browser supports CSS container queries

🤝 Contributing

Contributions welcome! Please:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

MIT License - see LICENSE file for details

👤 Author

Pajeronda

GitHub: @pajeronda
Repository: grok-code-fast-card
Repository: xai conversation

⭐ Support

If you find this card useful:

⭐ Star the repository
🐛 Report bugs via Issues
💡 Suggest features via Discussions
📢 Share with the Home Assistant community

🔗 Related Projects

xAI Conversation Integration - Required integration that provides the Grok Code Fast service
Home Assistant - Open source home automation platform

Legal Notes

API Usage: This integration requires an active xAI account and a valid API key. Use of the xAI API is subject to xAI's terms of service.
Trademarks: xAI, Grok, and related logos are registered trademarks of xAI Corp. This project is an unofficial integration developed by @pajeronda and is not affiliated with, sponsored by, or endorsed by xAI Corp.

Made with ❤️ by Pajeronda • v1.0.2 • Updated 2025-11-19

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
LICENSE		LICENSE
README.md		README.md
grok-code-fast-card.js		grok-code-fast-card.js
hacs.json		hacs.json

License

pajeronda/grok-code-fast-card

Folders and files

Latest commit

History

Repository files navigation