An interactive RGB event-lighting simulator that combines HTML, CSS, JavaScript, n8n workflow automation, and Groq AI to transform natural-language instructions into lighting commands.
The AI-Powered RGB Event Light Simulator is a web-based lighting control system designed to demonstrate how traditional RGB lighting controls can be extended with artificial intelligence and workflow automation.
Instead of manually selecting RGB values or lighting effects, users can communicate with the simulator using natural-language commands such as:
"Make the light blue."
"Make the light purple and slowly fade."
"Make the light green at 40 percent brightness."
The command is sent from the browser to an n8n webhook, processed through Groq AI, converted into structured lighting instructions, and returned to the browser.
The JavaScript application then interprets the response and applies the appropriate lighting configuration to the virtual RGB light.
Control the Red, Green, and Blue channels independently to create different colors.
The current RGB values are displayed in real time.
Adjust the brightness of the virtual light from low intensity to full brightness.
Control the speed of supported lighting effects.
Turn the virtual light:
- ON
- OFF
The simulator supports multiple lighting behaviors, including:
- Static
- Flash
- Strobe
- Fade
- Rainbow
- Party
Quickly apply predefined colors without manually adjusting each RGB channel.
Return the simulator to its default lighting state.
Users can control the lighting by describing what they want in normal language.
For example:
make the light blue
or:
make the light purple and slowly fade
or:
make the light green at 40 percent brightness
The AI interprets the request and converts it into structured lighting instructions.
🧠 How It Works
The system follows this architecture:
USER
│
▼
RGB LIGHT SIMULATOR
HTML / CSS / JS
│
│ Natural-language command
▼
n8n WEBHOOK
│
▼
GROQ AI
│
│ AI interpretation
▼
STRUCTURED RESPONSE
│
▼
n8n RESPONSE
│
▼
JAVASCRIPT CLIENT
│
┌───────────┼───────────┐
│ │ │
▼ ▼ ▼
COLOR BRIGHTNESS MODE
│ │ │
└───────────┼───────────┘
▼
VIRTUAL RGB LIGHT
In simple terms
User command
↓
Browser
↓
n8n
↓
Groq AI
↓
Structured lighting response
↓
JavaScript
↓
RGB light changes
🤖 AI Command System
The AI command interface is the main intelligent feature of the project.
Instead of manually configuring every lighting parameter, users can describe their desired lighting experience.
Example 1
User:
make the light blue
The AI interprets the request and returns the appropriate color configuration.
Example 2
User:
make the light purple and slowly fade
The AI can determine:
Color → Purple
Mode → Fade
Speed → Slow
Example 3
User:
make the light green at 40 percent brightness
The AI can determine:
Color → Green
Brightness → 40%
This creates a more natural interface between the user and the lighting system.
🔗 n8n AI Gateway
The browser communicates with the AI system through an n8n webhook.
n8n acts as the workflow automation and integration layer between the frontend application and the AI provider.
The workflow follows this general structure:
Webhook
↓
HTTP Request
↓
Groq AI
↓
AI Response
↓
Response Processing
↓
Webhook Response
This architecture separates the frontend application from the AI processing layer.
📦 Structured AI Response
The AI response is designed to provide structured lighting information rather than only plain text.
A conceptual response can look like:
{
"action": "set_light",
"color": {
"red": 0,
"green": 0,
"blue": 255
},
"brightness": 100,
"speed": 5,
"mode": "static",
"power": true
}
The JavaScript application receives the response, processes the values, and applies them to the simulator.
🛠️ Technologies Used
Technology Purpose
HTML5 Application structure
CSS3 Interface design and visual effects
JavaScript Application logic and light control
n8n Workflow automation and AI gateway
Groq AI Natural-language command interpretation
Webhooks Communication between frontend and n8n
JSON Structured data communication
Git Version control
GitHub Source-code hosting
📁 Project Structure
RGB-LIGHT-PROJECT/
│
├── index.html
├── style.css
├── script.js
└── README.md
index.html
Contains the structure of the RGB lighting simulator and command interface.
style.css
Controls the application's visual design, layout, colors, glow effects, buttons, controls, and presentation.
script.js
Contains the application's behavior, including:
RGB slider handling
Brightness control
Speed control
Power control
Lighting modes
Presets
Reset functionality
Command interpretation
AI communication
AI response handling
Lighting state updates
README.md
Contains the project documentation, architecture, setup instructions, features, and development information.
🧩 Development Phases
The project was developed progressively, starting from basic RGB controls and eventually introducing AI-powered natural-language control.
Phase 1 — RGB Controls
Connect the RGB sliders to the virtual light.
Phase 2 — RGB Value Display
Display the current RGB values in the interface.
Phase 3 — Brightness
Add brightness control to adjust the visual intensity of the light.
Phase 4 — Speed
Add speed control for lighting effects.
Phase 5 — Power
Add ON/OFF control.
Phase 6 — Lighting Modes
Introduce different lighting behaviors such as:
Static
Flash
Strobe
Fade
Rainbow
Party
Phase 7 — Presets
Add predefined colors for quick lighting changes.
Phase 8 — Reset
Add the ability to restore the simulator to its default state.
Phase 9 — Structured Commands
Introduce command interpretation so natural-language instructions can be translated into lighting actions.
Phase 10 — AI Command Gateway
Connect the frontend to an n8n AI gateway and Groq AI so users can control the simulator using natural-language commands.
💻 Getting Started
1. Clone the repository
git clone https://github.com/smartexploit/RGB-LIGHT-PROJECT.git
2. Enter the project directory
cd RGB-LIGHT-PROJECT
3. Open the project
Open the project folder in Visual Studio Code.
You can then open index.html directly in a browser or use a local development server such as the VS Code Live Server extension.
⚙️ AI Gateway Configuration
The AI functionality depends on the n8n workflow connected to the frontend.
The general communication flow is:
Frontend
↓
n8n Webhook
↓
AI Request
↓
Groq AI
↓
Structured Response
↓
Frontend
The n8n workflow must be configured and available for AI commands to work.
🔐 Security
API credentials and private secrets should never be placed directly inside frontend code or committed to GitHub.
Keep API keys and other sensitive credentials inside the appropriate secure environment.
🧪 Example Commands
Try commands such as:
make the light red
make the light blue
make the light green at 40 percent brightness
make the light purple and slowly fade
make the light blue and flash
turn the light off
turn the light on
You can also experiment with natural-language descriptions such as:
Create a calm purple atmosphere for an evening event with a slow transition.
The goal is to allow users to describe the desired lighting experience instead of manually configuring every parameter.
🎯 Project Goals
The project explores how fundamental web-development concepts can evolve into an AI-enabled application.
The development journey follows this progression:
HTML
↓
CSS
↓
JavaScript
↓
Interactive RGB controls
↓
Lighting effects
↓
API communication
↓
n8n automation
↓
AI integration
↓
Natural-language lighting control
The project therefore serves as both:
An interactive RGB lighting simulator
A practical demonstration of AI-powered workflow automation
📚 Learning Outcomes
This project provided practical experience with:
HTML structure
CSS styling
RGB color representation
JavaScript DOM manipulation
JavaScript event handling
Application state
Timers and animation
Webhooks
HTTP requests
JSON
API integration
Workflow automation
AI integration
Natural-language processing
Frontend-to-AI communication
Git
GitHub
Debugging
API testing
Iterative development
🐛 Development & Debugging
The project went through multiple iterations during development.
Some of the challenges encountered included:
CSS not initially reflecting correctly
Browser displaying an outdated version of a file
RGB controls not updating as expected
JavaScript command-processing issues
Webhook configuration problems
HTTP request configuration
Invalid JSON formatting
AI response handling
n8n workflow configuration
Connecting the frontend to the production webhook
These challenges became part of the development process and helped shape the final working system.
🔐 Security Notes
Never commit sensitive information such as:
API keys
Passwords
Access tokens
Private credentials
Authentication secrets
to GitHub.
If credentials are required for development, use environment variables or secure configuration.
🚧 Current Status
🟢 Version 1.0 — Working AI Gateway
The current version includes:
✅ RGB lighting simulation
✅ Manual RGB controls
✅ Brightness control
✅ Speed control
✅ Power control
✅ Lighting modes
✅ Color presets
✅ Reset functionality
✅ Natural-language commands
✅ n8n webhook integration
✅ Groq AI integration
✅ Structured AI responses
✅ Browser-side command execution
✅ Git version control
✅ GitHub repository
🔮 Future Improvements
The project can be extended in several directions.
Possible future improvements include:
Physical RGB LED hardware integration
ESP32 integration
Arduino integration
DMX lighting integration
Multiple physical light fixtures
Saved lighting scenes
AI-generated event presets
Voice commands
Real-time lighting synchronization
Mobile optimization
User authentication
Lighting schedules
Persistent lighting states
Multiple AI providers
Production deployment
🌍 Real-World Possibilities
Although the current implementation is a simulator, the architecture can eventually be extended to physical event-lighting systems.
A future implementation could look like:
User
↓
AI Lighting Assistant
↓
n8n
↓
Lighting Controller
↓
ESP32 / Arduino / DMX
↓
Physical RGB Event Lights
This creates a potential foundation for an AI-assisted event-lighting control system.
👨💻 Project Journey
This project represents a practical learning journey from fundamental RGB concepts to AI-powered automation.
The project started with frontend fundamentals and progressively introduced:
RGB color control
JavaScript interactions
Lighting effects
API communication
Webhooks
Workflow automation
AI integration
Natural-language control
The project demonstrates a simple development principle:
Start with a working foundation, then progressively connect more powerful technologies to it.
📌 Current Milestone
Project: AI-Powered RGB Event Light Simulator
Version: 1.0
Status: 🟢 Working Prototype
AI Gateway: n8n + Groq AI
Frontend: HTML + CSS + JavaScript
Repository: GitHub
🤝 Contributing
Contributions, suggestions, and ideas are welcome.
To contribute:
Fork the repository
Create a feature branch
Make your changes
Test the application
Commit your changes
Open a pull request
📄 License
A license can be added as the project moves toward public distribution.
🙏 Acknowledgements
This project was developed as part of a practical learning journey focused on:
Web development
AI engineering
Workflow automation
API integration
Practical problem solving
Iterative development
The project emphasizes learning through implementation, experimentation, debugging, and continuous improvement.
💡 Built With
HTML • CSS • JavaScript • n8n • Groq AI • Git • GitHub
⭐ If you find the project interesting, consider starring the repository and following the development journey.
### After you paste it
Do **only this**:
1. Save `README.md` with **Ctrl + S**
2. Don't change anything else.
3. Run:
```powershell
git status