# Luftglanz AI Chat System
Ein intelligenter KI-Assistent für die Luftglanz Website, der Kunden bei Fragen zu Drohnen-Reinigungsservices und AGO Quart Produkten unterstützt.
## 🚀 Features
- **Intelligente Antworten**: Basiert auf OpenAI GPT-3.5-turbo mit spezifischem Produktwissen
- **Deutsche Sprache**: Kommuniziert natürlich auf Deutsch
- **Produktwissen**: Umfassendes Wissen über AGO Quart Grünbelagentferner
- **Responsive Design**: Funktioniert perfekt auf Desktop und Mobile
- **Sicher**: Unterstützt sowohl PHP-Backend als auch direkte API-Aufrufe
- **Persistent**: Speichert Konversationshistorie lokal
## 📁 Dateien
### JavaScript
- `js/ai-chat.js` - Haupt-Chat-System mit Frontend-Logik
- `css/components/ai-chat.css` - Styling für den Chat-Widget
### PHP Backend
- `ai-chat-api.php` - Sicherer PHP-Endpoint für OpenAI API-Aufrufe
### Demo & Test
- `ai-chat-demo.html` - Demo-Seite zum Testen des Chat-Systems
## 🛠️ Installation
### 1. Dateien einbinden
Fügen Sie diese Zeilen in den `` Ihrer HTML-Seiten ein:
```html
```
Fügen Sie vor dem schließenden `` Tag ein:
```html
```
### 2. API-Konfiguration
**Option A: PHP Backend (Empfohlen)**
- Der API-Key ist sicher im PHP-Backend gespeichert
- Keine weitere Konfiguration nötig
**Option B: Direkte API-Aufrufe**
- API-Key ist im JavaScript sichtbar (weniger sicher)
- Für Entwicklung und Tests geeignet
### 3. Server-Anforderungen
Für PHP Backend:
- PHP 7.0+
- cURL-Erweiterung aktiviert
- Internetverbindung für OpenAI API
## 💡 Verwendung
### Automatische Initialisierung
Der Chat wird automatisch geladen, wenn die Seite vollständig geladen ist:
```javascript
document.addEventListener('DOMContentLoaded', () => {
window.aiChat = new AIChat();
});
```
### Manueller Test
Öffnen Sie `ai-chat-demo.html` in Ihrem Browser, um das System zu testen.
## 🎯 Produktwissen
Der KI-Assistent verfügt über umfassendes Wissen zu:
### AGO Quart Grünbelagentferner
- **Funktion**: Hochwirksam gegen Algen, Grünbeläge und Flechten
- **Wirkdauer**: Bis zu 18 Monate aktive Schutzwirkung
- **Anwendung**: Nur auf trockene Flächen, 8h kein Regen
- **Reichweite**: 0,5L Flasche für ca. 100m² (19,90 €)
- **Mischungsverhältnisse**:
- Leichte Beläge: 1:20 mit Wasser
- Starke Beläge: 1:10 mit Wasser
### Drohnen-Services
- Professionelle Anwendung mit Drohnen
- Präzise, gleichmäßige Verteilung
- Sichere Anwendung auf steilen Dächern
- Kosteneffektiv vs. Gerüstaufbau
### Sicherheitsinformationen
- Korrekte Anwendungshinweise
- Sicherheitsdatenblätter
- Umweltschutz-Aspekte
## 🔧 Anpassungen
### Produktwissen erweitern
Bearbeiten Sie die `productKnowledge` Variable in:
- `js/ai-chat.js` (Zeile ~XX)
- `ai-chat-api.php` (Zeile ~XX)
### Styling anpassen
Ändern Sie Farben und Design in `css/components/ai-chat.css`:
```css
:root {
--primary-color: #2980b9;
--accent-color: #00adb8;
/* Weitere Farb-Variablen... */
}
```
### API-Einstellungen
In `js/ai-chat.js` können Sie anpassen:
- `model`: OpenAI Modell (z.B. 'gpt-4')
- `max_tokens`: Maximale Antwortlänge
- `temperature`: Kreativität der Antworten (0.0 - 1.0)
## 📱 Mobile Optimierung
Der Chat ist vollständig responsive:
- Tablet: Kompakte Darstellung
- Smartphone: Vollbild-Chat
- Touch-optimierte Bedienung
## 🔒 Sicherheit
### PHP Backend Vorteile:
- API-Key nicht im Frontend sichtbar
- Server-seitige Validierung
- Rate-Limiting möglich
- Logging und Monitoring
### Best Practices:
- Verwenden Sie immer das PHP Backend in Production
- Überwachen Sie API-Kosten regelmäßig
- Implementieren Sie Rate-Limiting bei Bedarf
## 🐛 Troubleshooting
### Chat erscheint nicht
- Prüfen Sie Browser-Konsole auf JavaScript-Fehler
- Stellen Sie sicher, dass alle CSS/JS-Dateien geladen werden
- Testen Sie mit `ai-chat-demo.html`
### API-Fehler
- Prüfen Sie API-Key Gültigkeit
- Kontrollieren Sie Internetverbindung
- Schauen Sie in Browser-Netzwerk-Tab für Details
### PHP Backend Probleme
- Prüfen Sie PHP-Fehlerlog
- Stellen Sie sicher, dass cURL aktiviert ist
- Testen Sie API-Key mit direktem curl-Aufruf
## 📊 Monitoring
### API-Kosten überwachen
- Besuchen Sie das OpenAI Dashboard
- Setzen Sie Ausgabenlimits
- Überwachen Sie monatliche Nutzung
### Performance
- Chat-Antwortzeiten überwachen
- Conversation History begrenzen (aktuell: 10 Nachrichten)
- Cache häufige Fragen falls nötig
## 🔄 Updates
### Produktwissen aktualisieren
1. Bearbeiten Sie die Knowledge-Base in beiden Dateien
2. Testen Sie mit Demo-Seite
3. Deployen Sie auf Live-System
### OpenAI API Updates
- Überwachen Sie OpenAI Changelogs
- Testen Sie neue Modelle in Development
- Aktualisieren Sie Prompts bei Bedarf
## 💬 Support
Bei Fragen oder Problemen:
1. Prüfen Sie die Browser-Konsole
2. Testen Sie mit der Demo-Seite
3. Kontaktieren Sie das Entwicklungsteam
---
**Version**: 1.0
**Letztes Update**: Juli 2025
**Kompatibilität**: Alle modernen Browser, PHP 7.0+