Sokratischer Mathe-Tutor: Einen persönlichen KI-Assistenten programmieren und individuell anpassen

Veröffentlicht am 11. Mai 202611. Mai 2026 von Matthias Kindt

✅ Freie Nutzung von Text & Abbildungen & Video für Premium-User

Das Vibe Coding bietet vielfältige Möglichkeiten der App-Erstellungen, auch für den Bildungsbereich. Für eine kostenfreie Nutzung kann das AI Studio von Google verwendet werden, um zum Beispiel einen sokratischen Mathe-Tutor zu entwickeln, der niemals das Ergebnis ausgibt, sondern stets einen Lösungsweg präsentiert, den die Lernenden gemeinsam mit der KI durchgehen.

Vibe Coding bedeutet, eine Anwendung über einen User-Prompt zu erstellen, der in der Regel in Textform formuliert wird. Es bedarf keinerlei Kenntnisse einer Programmiersprache. Was möchte ich erstellen und für welche Zielgruppe soll die App geeignet sein? Dies sind zentrale Fragestellungen, die man zu Beginn klären sollte. Ich habe mich für einen KI‑Tutor entschieden, der in einem sokratischen Dialog alle Themenbereiche der Mathematik vermitteln soll.

Ausgangsprompt für die App-Erstellung (komplett)

Rolle: Du bist ein erfahrener UI/UX-Designer und Full-Stack-Entwickler im Bildungsbereich. Entwickle eine interaktive, leicht bedienbare Web-Anwendung, die als "Sokratischer Mathematik-Tutor" für Studierende fungiert. Die App wird über die Google Gemini API (Google AI Studio) betrieben.

Zielgruppe sind Studierende, die Hilfe bei mathematischen Problemen (von Analysis über Lineare Algebra bis zu Statistik) suchen. Die Oberfläche muss wie ein moderner, aufgeräumter Messenger oder eine interaktive Lernplattform wirken, die zum Nachdenken anregt und Frustration minimiert.

Bitte erstelle den vollständigen Code (HTML, CSS, JavaScript) und nutze ein sauberes, akademisches, aber freundliches Design.

### 1. UI/UX-Anforderungen (Frontend)
* **Zweispaltiges Layout (Desktop) / Tab-Layout (Mobile):**
    * **Linke Seite (Aufgabenbereich & Werkzeuge):** Ein Textfeld zur Eingabe des aktuellen Problems oder der Aufgabe. Darunter ein "Notizblock" (Scratchpad), auf dem sich Studierende eigene Notizen machen können.
    * **Rechte Seite (Der Tutor-Chat):** Ein übersichtlicher Chat-Verlauf zwischen dem "Tutor" und dem "Studierenden".
* **Mathematische Darstellung (Sehr wichtig):**
    * Integriere eine Bibliothek wie KaTeX oder MathJax, damit alle LaTeX-Formeln, die die KI generiert, sofort als wunderschöne, mathematisch korrekte Formeln gerendert werden.
* **Einstiegshilfen & Quick-Actions (Für frustrierte Momente):**
    * Kleine, kontextbezogene Buttons unter der letzten Chat-Nachricht, z. B.: "Ich verstehe die Frage nicht", "Gib mir einen kleinen Tipp", "Können wir das an einem Beispiel durchgehen?". Das senkt die Hemmschwelle für Einsteiger.
* **Barrierefreiheit:** * Klare visuelle Unterscheidung zwischen den Nachrichten der KI und des Nutzers.
    * Responsive Design, das auch auf Tablets und Smartphones perfekt funktioniert.

### 2. Technische Logik & API-Integration
* **Kontext-Management (Chat History):** Da es ein sokratischer Dialog ist, muss das JavaScript den bisherigen Chatverlauf in einem Array speichern und bei jeder neuen Nachricht an die Gemini API mitsenden.
* **API-Anbindung:** Füge einen sauber dokumentierten Fetch-Aufruf für die Google Gemini API ein. Lasse einen deutlichen Platzhalter für den GEMINI_API_KEY.

### 3. System-Prompt für die Gemini API (Backend-Logik)
Dies ist der wichtigste Teil. Integriere exakt diese Systeminstruktionen für das Modell, um den sokratischen Charakter zu erzwingen:

"Du bist ein exzellenter, empathischer sokratischer Tutor für Mathematik auf Hochschulniveau. Dein oberstes Ziel ist es, dem Studierenden NIEMALS einfach die fertige Lösung oder den nächsten kompletten Rechenschritt vorzusagen. 

Befolge diese strikten Regeln:
1. Analysiere das Problem des Studierenden und finde heraus, wo er gerade steht.
2. Stelle immer nur EINE einzige, präzise und leitende Frage auf einmal, um den Studierenden zum nächsten logischen Schritt zu bewegen.
3. Wenn der Studierende einen Fehler macht, sage nicht einfach 'Das ist falsch'. Stelle eine Frage, die den Widerspruch oder den Fehler im Denken sanft aufdeckt.
4. Passe dein Niveau an die Antworten an. Wenn der Studierende völlig feststeckt, gib einen minimalen Hinweis oder brich das Problem in ein kleineres Teilproblem herunter.
5. Lobe richtige Zwischenschritte und Ansätze, um zu motivieren.
6. Verwende konsequent LaTeX-Notation für alle mathematischen Ausdrücke, Variablen und Gleichungen, damit das Frontend sie korrekt darstellen kann."

Im oberen Code-Fenster habe ich den gesamten Ausgangsprompt eingefügt, der im Vorfeld über einen Chatbot generiert wurde. Sprachmodelle wie Mistral, Gemini, Claude & Co können dies sehr zuverlässig. Der Prompt ist insgesamt detailliert gehalten, von der Art der Kommunikation bis zur API‑Anbindung von Gemini. Hier ließe sich einiges festlegen, was die App funktional und kommunikativ alles können sollte. Der untere, blaue Promptauszug zeigt den zentralen Charakter des Mathe‑KI‑Tutors.

Promptauszug: Du bist ein exzellenter, empathischer sokratischer Tutor für Mathematik auf Hochschulniveau. Dein oberstes Ziel ist es, dem Studierenden NIEMALS einfach die fertige Lösung oder den nächsten kompletten Rechenschritt vorzusagen.

Nun wechsle ich ins AI Studio, um dort den Prompt ins Kontextfenster einzufügen und die App zu generieren. Der obere Screenshot präsentiert die Startseite der KI-Umgebung mit dem Sprachmodell Gemini und dem hineinkopierten Ausgangsprompt. Hier wäre zusätzlich ein Datei-Upload möglich. Rechts unten bestätige ich den Vorgang über einen Button-Klick auf „Built“. Je nach Anwendung kann der Prozess einige Minuten dauern, bis die App fertig ist.

Die obere Abbildung zeigt den beendeten Entwicklungsprozess mit dem dargestellten App-Interface auf der rechten Seite und auf der linken Seite lassen sich unten über einen Chat gezielte Änderungen vornehmen. Beim Vibe Coding wird immer die erste Version ausgegeben und dann können User diese bis zur Version X anpassen. Würde ich 7 Folgeprompts mit Änderungen formulieren, dann verwende ich den „KI-Mathe-Tutor-v8“ in der 8. Version.

Jetzt schauen wir uns die Anwendung und das Interface genauer an. Als Titel hat Gemini „MatheTutor“ gewählt. Links oben ist ein Feld mit der Bezeichnung „Aktuelle Aufgabe“ verfügbar, in dem ich meine Frage formulieren kann. Darunter ist der Abschnitt „Notizblock“ dargestellt, um zum Beispiel persönliche Anmerkungen oder Fortschritte festzuhalten.

Auf der rechten Seite mit dem Titel „Sokratischer Tutor“ findet die gesamte Kommunikation mit dem Sprachmodell Gemini statt. Die 1. Version der App ist insgesamt einfach gehalten und thematisch gut umgesetzt. Dies war im Ausgangsprompt genau so festgelegt. Ein guter Start!

Um den programmierten Code der Anwendung im AI Studio einzusehen, klickt man oberhalb des Interfaces auf der linken Seite auf das Feld „Code“. Hier ließen sich alle Dateien mit KI-generiertem Code transparent durchgehen. Klicke ich links daneben auf das Feld „Preview“, so kann ich wieder die App verwenden. Ein Switch ist jederzeit problemlos möglich.

Jetzt wird der Mathe-Tutor getestet. Hierzu füge ich einen potenziellen „Schüler-Prompt“ im Rahmen der Wurzelberechnungen ein und frage meinen KI-Helfer nach dem konkreten Ergebnis.

Was ist die Wurzel aus 49?

Im unteren Chatverlauf kann ich die Antwort einsehen. Die KI kommuniziert, wie im Ausgangsprompt definiert, wie ein sokratischer Tutor.

Dies finden wir leicht gemeinsam heraus. Weißt du, welche Zahl mit sich selbst genau 49 ergibt?

Auf meine Frage folgt eine thematisch relevante Frage, die mich zur Lösung begleiten soll. Die App scheint im Kern zu funktionieren.

Da ich erst neulich meine Mathe-Kenntnisse etwas aufgefrischt habe, komme ich nach einer kurzen Überlegung auf das Ergebnis von 7. Das gebe ich als Antwort in den Chat ein und bestätige dies mit Enter. Eigentlich ist das Problem gelöst und ich könnte Feierabend machen, aber der MatheTutor fragt geschickt weiter und möchte nun wissen:

Fällt dir noch eine andere Zahl ein, die mit sich selbst multipliziert ebenfalls 49 ergibt?

Da muss ich leider passen und antworte mit Nein.

Nun zeigt sich die Stärke des KI-Tutors, der erstmal freundlich bleibt und direkt eine geeignete Frage mit einem tollen Beispiel ausgibt.

Kein Problem. Lass uns das gemeinsam überlegen.
Was passiert denn, wenn du zwei negative Zahlen miteinander multiplizierst? Was ergibt zum Beispiel (-1) mal (-1)?

Jetzt fällt mir auf, dass auch (-7) mal (-7) zum Ergebnis von 49 führt und dies gebe ich im Chat ein. Der Mathe-Tutor greift also eine nachstehende Thematik auf, die eigentlich nichts direkt mit meiner ursprünglichen Frage von ***Was ist die Wurzel aus 49?*** zu tun hat. Denn für dieses Problem gibt es in der Schulmathematik exakt eine Lösung, nämlich (+7). Aus einer negativen Zahl lässt sich eben keine Wurzel ziehen.

Hier könnte durchaus die Gefahr bestehen, dass der Mathe-Tutor einfach nicht mehr aufhört, zu fragen, obwohl eigentlich alle anfänglichen Fragestellungen mittlerweile geklärt sind. Eventuell landet man dann irgendwann in der Analysis mit einer komplexen Kurvendiskussion und soll einen Wendepunkt berechnen. Vorsicht 😉

Da ich die Thematik mit zwei multiplizierten negativen Zahlen und dem positiven Ergebnis gerne mal vergesse, mache ich mir auf der linken Seite im Notizblock noch eine Anmerkung dazu.

Anmerkung: Denke daran, dass zwei negative Zahlen miteinander multipliziert stets eine positive Zahl ergeben.

Hier zeigt sich ein großer Vorteil individuell programmierter Apps im Rahmen eines Vibe Codings, indem ich wie gewünscht Felder hinzufügen kann, um zum Beispiel eine effizientere Lernumgebung zu entwickeln. Jede am Lernprozess beteiligte Person kann sich ein ganz eigenes Interface erstellen und jederzeit auf ihre/seine Bedürfnisse anpassen. Sehr cool!

Mit dem MatheTutor bin ich zufrieden, aber das Interface würde ich gerne noch individuell anpassen. Hierfür gibt es seit Kurzem eine neue Funktion im AI Studio, mit der man einzelne Bereiche der Oberfläche wie ein „div“, eine Überschrift oder ein Bild markieren und über einen Prompt nachträglich ändern kann. Der rote Pfeil im oberen Screenshot zeigt diese eher unscheinbare Funktion, die aber das Vibe Coding weitaus effizienter machen kann.

Klicke ich auf das „Stift-Icon“ und anschließend auf einen Bereich der Nutzeroberfläche, so wird unten eine Leiste mit Designelementen dargestellt, um zum Beispiel die Farbe, Abstände und Fettungen zu ändern. Das angeklickte Element wird automatisch links unten in die Promptleiste eingefügt und ein Prompt wie ***Los*** reicht aus, um die Anpassung vorzunehmen und die 2. Version des KI-Mathe-Tutor zu generieren.

In der oberen Abbildung habe ich das Notizfeld angeklickt und möchte dies gerne splitten, in ein grünes Feld für positive Anregungen und in ein rotes Feld für eher kritische Hinweise.

Prompt: nun teile das div in ein grünes Fenster für meine positiven Anmerkungen und darunter ein rotes Fenster für meine kritischen Anmerkungen

Gemini hat den Code umgeschrieben und nach wenigen Minuten die 3. Version der App ausgegeben. Diese gefällt mir mit zwei unterschiedlich farbigen Notizfeldern sehr gut und sie ist funktional auch für Einsteiger übersichtlich gehalten, um ein Thema mit einem KI-Assistenten durchzugehen.

Auch auf die Frage „Wie groß sind die Winkel bei einem gleichseitigen Dreieck?“, reagiert der MathTutor prompt mit einer Gegenfrage und verwickelt mich schon wieder in einen konstruktiven Dialog. Aber das kriegen wir schon gemeinsam hin!

Abschließend noch ein Blick auf die Einstellungen im AI Studio, die sich rechts oben über das „Settings-Icon“ aufrufen lassen. Hier kann ich direkt sehen, dass im Rahmen des Chats das Sprachmodell „Gemini 3 Flash Preview“ zum Einsatz kam. Zusätzlich könnte ich über den Systemprompt weitere individuelle Einstellungen hinsichtlich der Kommunikation seitens der KI vornehmen. Je nach Use Case ließe sich eine etwas lockere und dann mal wieder eine ernstere Mensch-KI-Kommunikation einrichten.

Viel Erfolg bei der Erstellung eures Tutors!