Ein No-Code Editor für die Erstellung interaktiver LiaScript-Bildungsinhalte mit KI-Unterstützung. Perfekt für Lehrende ohne Programmierkenntnisse.
- KI-gestützte Content-Erstellung: Nutzen Sie Google Gemini, um LiaScript-Kurse in natürlicher Sprache zu erstellen
- Vorlagen als Referenz: Geben Sie URLs zu bestehenden LiaScript-Kursen an, an denen sich die KI orientieren soll (NEU!)
- Live-Vorschau: Sehen Sie Ihre Inhalte sofort gerendert
- No-Code: Keine Markdown- oder Programmierkenntnisse erforderlich
- Interaktive Elemente: Quiz, Code-Beispiele, Animationen und mehr
- Export: Speichern Sie Ihren generierten Code als .md-Datei
- Kostenlos: Nutzt das kostenlose Google Gemini API
- Node.js 18+ installiert
- Google Gemini API Key (kostenlos erhältlich)
# Dependencies installieren
npm install
# Entwicklungsserver starten
npm run dev
# Production Build erstellen
npm run build- Besuchen Sie Google AI Studio
- Melden Sie sich mit Ihrem Google-Konto an
- Klicken Sie auf "Create API Key"
- Kopieren Sie den generierten Key
- Fügen Sie ihn in der App ein (wird lokal im Browser gespeichert)
Kostenlose Limits:
- 15 Requests pro Minute
- 1 Million Tokens pro Minute
- 1500 Requests pro Tag
Für die meisten Lehr-Szenarien völlig ausreichend!
Beim ersten Start werden Sie aufgefordert, Ihren Google Gemini API Key einzugeben. Dieser wird lokal in Ihrem Browser gespeichert.
Beschreiben Sie im Chat-Panel links, was Sie erstellen möchten:
Beispiel-Prompts:
"Erstelle eine Lektion über Photosynthese für 7. Klasse mit Quiz"
"Erstelle eine interaktive Präsentation über die Französische Revolution"
"Erstelle ein Python-Tutorial für Anfänger mit Code-Beispielen"
"Füge noch 3 Multiple-Choice-Fragen hinzu"
Die rechte Seite zeigt Ihren generierten LiaScript-Kurs sofort an. Sie können:
- Den Code als .md-Datei herunterladen
- Den Code in die Zwischenablage kopieren
- Den generierten Markdown-Code anzeigen
Klicken Sie auf "Erweiterte Optionen" um Vorlagen als Referenz anzugeben:
- Fügen Sie URLs zu bestehenden LiaScript-Kursen hinzu (z.B. von GitHub)
- Die KI analysiert Stil, Struktur und didaktischen Ansatz
- Ihr neuer Kurs wird basierend auf diesen Vorlagen erstellt
Beispiel-URLs:
- LiaScript-Kurse auf GitHub (raw.githubusercontent.com)
- Öffentlich verfügbare .md-Dateien mit LiaScript-Syntax
- Ihre eigenen bestehenden Kurse
Hinweise:
- Maximum 50 KB pro Vorlage
- Mehrere Vorlagen möglich
- Token-Verbrauch wird angezeigt
Chatten Sie weiter mit der KI, um Ihren Kurs zu verfeinern:
"Mache die Erklärung einfacher"
"Füge mehr Bilder hinzu"
"Erstelle ein zusätzliches Quiz"
"Ändere die Sprache zu Englisch"
Die KI kennt alle LiaScript-Features:
- Quiz: Multiple Choice, Single Choice, Text-Eingabe
- Code-Blöcke: Mit Syntax-Highlighting für alle Programmiersprachen
- Multimedia: Bilder, Videos, Audio
- Animationen: Schrittweise Enthüllung von Inhalten
- Text-to-Speech: Automatische Sprachausgabe
- Interaktive Diagramme: Charts, Graphen, etc.
liascript-ai-companion/
├── src/
│ ├── components/
│ │ ├── AIChat.vue # KI-Chat-Interface
│ │ └── LiaScriptPreview.vue # LiaScript Live-Vorschau
│ ├── App.vue # Haupt-App-Komponente
│ ├── main.js # App-Entry-Point
│ └── style.css # Globale Styles
├── index.html # HTML-Entry-Point
├── vite.config.js # Vite-Konfiguration
├── package.json # Dependencies
└── README.md # Dokumentation
- Frontend: Vue 3 (Composition API)
- Build Tool: Vite
- KI-Integration: Google Gemini 1.5 Flash
- LiaScript: Offizielle LiaScript LiveEditor Integration
Die Architektur ist vorbereitet für mehrere KI-Provider. Um ChatGPT oder Claude hinzuzufügen:
-
Installieren Sie die entsprechende SDK:
npm install openai # oder npm install @anthropic-ai/sdk -
Erweitern Sie
AIChat.vueum Provider-Auswahl -
Implementieren Sie die Provider-spezifische API-Logik
Bearbeiten Sie LIASCRIPT_SYSTEM_PROMPT in src/components/AIChat.vue, um das Verhalten der KI anzupassen.
npm run build
# Der dist/ Ordner kann auf jedem statischen Hosting deployed werdenAlternativ können Sie den API Key als Umgebungsvariable setzen:
# .env.local
VITE_GEMINI_API_KEY=your_api_key_hereDann in AIChat.vue:
const defaultKey = import.meta.env.VITE_GEMINI_API_KEYAchtung: Bei Client-Side Apps wird der Key im Frontend sichtbar. Für Production-Anwendungen sollten Sie einen Backend-Proxy verwenden.
- Stellen Sie sicher, dass der API Key korrekt kopiert wurde
- Überprüfen Sie bei Google AI Studio, ob der Key aktiv ist
- Sie haben das kostenlose Limit erreicht (1500 Requests/Tag)
- Warten Sie bis zum nächsten Tag oder upgraden Sie
- Überprüfen Sie Ihre Internetverbindung
- Die App benötigt Zugriff auf https://liascript.github.io
- Die App validiert den generierten Code automatisch und zeigt Warnungen an
- Nutzen Sie den "Markdown anzeigen" Button, um den Code zu prüfen
- Die KI wurde mit detaillierten LiaScript-Regeln trainiert (siehe LIASCRIPT_QUALITY_GUIDE.md)
- Bei Fehlern: Bitten Sie die KI, spezifische Fehler zu korrigieren
- LiaScript Dokumentation
- LiaScript LiveEditor
- Google Gemini API Docs
- LiaScript Beispiele
- LiaScript Quality Guide - Wie wir die Code-Qualität verbessert haben
- LiaScript Template - Vollständiges Beispiel für korrekten LiaScript-Code
- Vorlagen-URLs - Liste mit nützlichen LiaScript-Kurs-URLs, die als Vorlagen dienen können
MIT
Beiträge sind willkommen! Öffnen Sie ein Issue oder Pull Request.
Bei Fragen oder Problemen:
- Öffnen Sie ein Issue auf GitHub
- Kontaktieren Sie die LiaScript Community
Erstellt für Lehrende, die großartige Bildungsinhalte ohne technische Hürden erstellen möchten.