Aktuelle Projekte
Web Applikationen, die ich seit August 2026 entwickelt habe, jedes in vollem Umfang: was es kann, wie es funktioniert, worauf es läuft und das echte Projekt zum Ausprobieren.
Das Körper-Labor
Das Körper-Labor: eine Kurs-Website mit einem echten Produkt darin.
Ein sechswöchiges Human-Design-Gesundheitsexperiment in der kleinen Gruppe braucht mehr als eine Landingpage: Warteliste, Einladungen, ein persönlicher Bereich für jede Teilnehmerin und ein Werkzeug für die Kursleiterin, mit dem sich all das ohne Entwickler betreiben lässt. Genau das ist hier gebaut, von der ersten Anfrage bis zu Woche 6.
Klick dich durch: beantworte eine Hausaufgabe, zieh eine Notiz, wechsle die Bodygraph-Ansicht, lade das Reading als PDF. Gespeichert wird nichts.
Ausgangslage
Das Körper-Labor verbindet Human Design mit konkreten Experimenten in vier Lebensbereichen: Ernährung, Schlaf, Bewegung und Umgebung. Jede Teilnehmerin bekommt ein persönliches Reading, geschrieben für ihr Chart, und prüft die Impulse an ihrem eigenen Körper. Die Gruppe ist klein, der Start individuell.
Die Website muss das ruhig und glaubwürdig erklären, Interessierte auf eine Warteliste bringen und nach der Einladung in einen geschützten Bereich führen, der genau das hält, was der Kurs verspricht.
Was die Plattform umfasst
Öffentliche Website
Eine ruhige Seite im Stil „Sunrise studio“: das Problem, die vier Labs, was man bekommt, ein Bodygraph mit allen 64 Toren, Ablauf, Fragen und Antworten. Dazu eine Seite „Was du bekommst“, auf der man den echten Teilnehmerbereich mit einer Beispielperson ausprobieren kann.
Warteliste und Einladungen
Interessierte tragen sich ein, die Kursleiterin lädt gezielt ein. Bestätigungs-, Einladungs- und Bezahl-Mails, Registrierung mit Geburtsdaten und Adresse, Rechnung als PDF.
Teilnehmerbereich
Dashboard, das Reading Woche für Woche als Text und PDF, der eigene Bodygraph, ein 7-Tage-Audit zu Schlaf und Energie, Hausaufgaben mit Antworten, eine Notizwand, die Termine mit der Kursleiterin und der eigene Ablauf vom Startdatum bis Woche 6.
Admin-Konsole
Kontakte und Termine, ein Editor für die Wochentexte, Dashboard, Bodygraph-Werkzeuge, der Schlaf-Tracker, Einstellungen und das Brain als Wissensspeicher dahinter.
Automatik
Erinnerungen an offene Aufgaben und Hinweise zum Schlaf-Tracker laufen täglich per Zeitplan, damit nichts von Hand angestoßen werden muss.
Eigene Chart-Berechnung
Das Chart einer Teilnehmerin wird aus ihren Geburtsdaten berechnet, mit Zeitzone und historischer Sommerzeit am Geburtsort. Dafür steht eine eigene Bibliothek, die auch den Dream Rave und die Geometrie des Bodygraphs liefert. So gibt es keine Abhängigkeit von einem fremden Dienst, und das Ergebnis lässt sich nachvollziehen.
Zusammenspiel mit dem Brain
Die Wochentexte müssen nicht jedes Mal neu geschrieben werden: Das Brain hält zu jedem Merkmal die Texte der Kursleiterin bereit und stellt sie im Reading, im Agenten und per MCP-Server zur Verfügung. Mehr dazu in der Referenz „Human Design Brain“.
Technik
- Next.js 15 (App Router), React 18 und TypeScript; Tailwind für das Designsystem.
- PostgreSQL für Kontakte, Wochen, Notizen, Audit und Brain; Resend für alle Mails.
- Serverseitig erzeugte PDFs für Reading, Bodygraph und Rechnung; Tiptap als Editor für die Wochentexte.
- Vercel AI SDK für den Agenten im Konto, ein selbst gebauter MCP-Server für die Wochentexte.
- Eigene Bibliothek für Chart und Dream Rave; Vercel für Hosting und Zeitpläne.
- Helles und dunkles Theme und ein Cookie-Dialog.
Human Design Brain
Brain: ein Wissensspeicher, der Readings schreibt, statt sie neu zu tippen.
Jedes Reading von Hand neu zu schreiben, ist der Engpass einer Kursleiterin, und ein Chatbot ohne Fundament erfindet. Das Brain löst beides mit einer einfachen Idee: ein Eintrag je Human-Design-Merkmal, und das Chart sagt, welche Einträge gelten.
Fahr über ein Tor im Bodygraph, öffne den Eintrag, folge den Verknüpfungen im Graph, frag den HD Agent. Beispieldaten, nichts Echtes.
Das Problem
- Dasselbe Wissen wird immer wieder neu geschrieben: Ein Profil 4/1 oder der Kanal 20/34 kommt bei vielen Teilnehmerinnen vor, und jedes Mal denselben Text anzupassen kostet Stunden.
- Das Wissen liegt verstreut: in alten Readings, in rund 190 transkribierten Kurs-Videos mit etwa 440.000 Wörtern und manches nur im Kopf.
- Ein KI-Assistent ohne Fundament erfindet. Im Namen der Kursleiterin Dinge zu behaupten, die sie so nie sagen würde, ist bei Gesundheitsthemen ein Risiko.
- Teilnehmerinnen brauchen den Text zur richtigen Zeit: Wer in Woche 1 ist, soll nicht schon alle Tore lesen.
Die Idee: ein Schlüssel je Merkmal
Ein Chart hat eine endliche, bekannte Menge an Merkmalen: Typ, Autorität, Profil, Definition, Zentren, Schaltkreise, Kanäle, Tore, Kreuze. Jedes bekommt genau einen Eintrag mit einem sprechenden Schlüssel wie kanal-20-34 oder tor-29. Aus den Geburtsdaten entsteht die Liste der Schlüssel eines Charts, und jeder Eintrag, der dazu passt, steht bereit. Das ist deterministisch, erklärbar und billig. Eine Vektorsuche wurde bewusst nicht gebaut.
Im Text steht ein Platzhalter für den Vornamen, der beim Übernehmen ersetzt wird: einmal geschrieben, trotzdem persönlich. Ein Eintrag kann außerdem für mehrere Merkmale gelten, etwa eine Hausaufgabe für alle Generatoren.
Wie Wissen hineinkommt
Reading übernehmen
Die Kapitel einer Woche werden per KI in Einträge zerlegt. Der Wortlaut bleibt, der Name wird zum Platzhalter. Gespeichert wird nur, was angekreuzt ist, und vorhandene Schlüssel werden nie überschrieben.
Kurs-Videos
Videos werden transkribiert und als Transkript abgelegt. Daraus entstehen Analysen je Thema, die ihre Quellen offenlegen.
Handarbeit
Ein Editor mit Markdown, Backlinks und Vorschau.
Per Prompt
Über einen selbst gebauten MCP-Server kann die Kursleiterin in Claude suchen, anlegen und überarbeiten.
Wie es wieder herauskommt
Im Reading
Passende Einträge werden als Kapitel in eine Woche kopiert, der Platzhalter wird zum Vornamen. Die Kursleiterin prüft und passt an, bevor die Woche freigeschaltet wird.
Im Agenten
Der Chat-Agent im Konto bekommt die zum Chart passenden Einträge, liest sie und antwortet zuerst aus dem Wortlaut der Kursleiterin.
Im HD Agent (MCP)
Zehn Werkzeuge in Claude Desktop: suchen, lesen, anlegen, ändern, löschen und mit Teilnehmerinnen und deren Wochen arbeiten. Lesen vor Schreiben, Löschen nur nach ausdrücklichem OK.
Im Bodygraph
Eine Seitenleiste zeigt die Texte zu den eigenen Merkmalen und schaltet sich mit dem Kurs frei: Woche 1 Zentren, Woche 2 Kanäle, Woche 3 Tore, Woche 4 Linien.
Nachvollziehbar statt „magisch“
Jede Änderung an einem Eintrag wird mit Datum, Urheber (Editor, Import, KI-Agent, System) und Version samt Vergleich zur Vorversion protokolliert, per Datenbank-Trigger, also auch bei direkten Änderungen. Quellen und Verweise stehen in eigenen Spalten, nicht im Text. Im Dashboard sieht man Kennzahlen, die Abdeckung je Merkmalsgruppe und die 64 Tore im Bodygraph, grün wo ein Eintrag existiert. Der Graph zeigt alle Einträge und Verknüpfungen als Netz.
Zahlen
- 783 Einträge und 2.717 Verknüpfungen
- 190 Kurs-Transkripte mit rund 442.000 Wörtern, dazu 12 Analysen
- 64 Tore mit 384 Linien, 36 Kanäle, 12 Profile, 192 Inkarnationskreuze
- Alle Merkmalsgruppen vollständig abgedeckt
Entscheidungen und Grenzen
Wortlaut vor Zusammenfassung: Die KI strukturiert, sie schreibt nicht um. Der Agent ist geerdet: Er antwortet aus dem Brain und sagt, wenn es nichts zum Thema gibt. Keine Namen im Text, weil Einträge in andere Wochen kopiert werden.
Ehrlich zu den Grenzen: Es gibt keine semantische Suche und keine Versionierung der Bedeutung, nur den Verlauf je Eintrag. Es gibt ein gemeinsames Admin-Login, also keine Unterscheidung von Personen im Verlauf. Die Transkription braucht ffmpeg und läuft lokal. Einige Texte sind noch mit Fachquellen abzugleichen. Das Brain ersetzt keine Beratung, es beschleunigt die Arbeit der Kursleiterin.
Technik
- Next.js 15, React 18, TypeScript; PostgreSQL mit Tabellen für Einträge, Verlauf und Rubriken.
- PL/pgSQL-Trigger für den Verlauf, mit dem Urheber als Sitzungsvariable.
- Vercel AI SDK über das AI Gateway für Import, Agent und Spezialisten, mit Ausweichmodell.
- Ein selbst gebauter MCP-Server mit zehn Werkzeugen; ein zweiter für die Wochentexte.
- Eigene Kraft-Simulation in SVG für den Graph, Mermaid für den Leitfaden im Admin.
Zur Demo
Die Demo oben läuft ausschließlich auf erfundenen Beispieldaten (208 Einträge, 220 Verknüpfungen). Die Zahlen im Text sind die des echten Systems; echte Einträge, Teilnehmerdaten und Transkripte sind nicht Teil der Seite.
Label-Konfigurator
Label-Konfigurator: ein Messe-iPad, auf dem Besucher ihre eigene Flasche gestalten.
Am Messestand soll aus einem Gespräch etwas werden, das man mitnehmen kann: eine echte Flasche mit dem eigenen Logo. Der Label-Konfigurator macht daraus einen Vorgang von wenigen Minuten, direkt auf dem iPad, und liefert dem Vertrieb nebenbei die Kontaktdaten.
Geh durch wie ein Besucher: Logo wählen, Slogan schreiben, ausdrucken. Danach unter Anfragen den eigenen Eintrag finden.
Ausgangslage
Unternehmen sollen auf Messen und Gipfeltreffen ein Getränk mit ihrem eigenen Logo und Slogan gestalten und als Geschenk mitnehmen können. Das Label ist dabei kein Mockup, sondern das echte, druckfähige Etikett der Flasche: gleiche Maße, gleiches Layout, gleiche Zertifikatsmarken.
Der Besucher steht am Stand, das Licht ist hell, die Zeit ist knapp. Der Ablauf muss deshalb schnell, antippbar und auf einen Blick verständlich sein. Der Verkauf braucht am Ende drei Dinge: eine abgeschlossene Gestaltung, nutzbare Kontaktdaten und ein fertiges Label.
Der Ablauf am iPad
Gestalten
Zuerst das Design, dann die Daten: Wer sein Label schon gebaut hat, gibt eher echte Kontaktdaten an. Logo suchen oder aus der Liste der eingeladenen Kunden wählen, Slogan aus Vorlagen oder frei, dazu Position, Größe, Schrift, Farbe und optionale Zertifikatsmarken. Die Flasche rechts bleibt stehen und wächst mit.
Kontakt
Firma und Name genügen, die E-Mail-Adresse ist optional. Eingeladene Kunden werden beim Tippen vorgeschlagen. Eine ungültige Adresse wird sofort bemängelt.
Vorschau
Die große Flasche zeigt, was gedruckt wird. „Label ausdrucken“ schickt den Aufkleber 51 × 120 mm an den Drucker, „Per E-Mail zusenden“ verschickt das PDF. „Fertig, nächster Besucher“ setzt alles für die nächste Person zurück.
Kiosk-Verhalten
Eine Startseite mit Live-Uhr, ein Rücksprung dorthin nach einstellbarer Inaktivität (10 bis 60 Sekunden), ein Dialog zum Fortsetzen einer gespeicherten Konfiguration und ein Info-Panel mit dem kompletten Produktblatt, damit am Stand nichts nachgeschlagen werden muss.
Vorschau gleich Druck
Das wichtigste Prinzip: Was der Besucher sieht, ist, was gedruckt wird. Die Vorschau und das PDF rechnen mit denselben Koordinaten, das Label wird im Browser per Canvas und jsPDF als druckfertiges PDF in 51 × 120 mm erzeugt. Jede Änderung am Layout wurde gegen beides geprüft, nicht nur gegen die Bildschirmansicht.
Logos finden statt hochladen
Besucher haben ihr Logo selten als Datei dabei, aber ihren Firmennamen im Kopf. Deshalb sucht die App: aus Firmenname oder Adresse werden Kandidaten aus mehreren Quellen zusammengetragen (Logo-Dienst, Wikipedia in mehreren Sprachen, Favicon und ein serverseitiges Auslesen der Webseite mit einem Headless-Browser). Der Besucher tippt auf den passenden Vorschlag. Eine Liste eingeladener Kunden und ein Datei-Upload ergänzen das.
Der Admin-Bereich
Anfragen
Jede Gestaltung wird als Anfrage gespeichert, mit gerendertem PDF und Vorschaubild. Reiter für offene, bearbeitete, abgeschlossene, archivierte Anfragen und einen eigenen Reiter für den Messestand. Suche über Firma, Kontakt, E-Mail und Slogan, Sammelaktionen zum Archivieren und Löschen.
Status und Verlauf
Abgeschickt, In Bearbeitung, Verschickt. Jede Änderung landet mit Zeitpunkt im Verlauf der Anfrage, auch das erneute Senden einer Mail oder das Verschieben zwischen Messe und Web.
Bearbeiten und neu drucken
Eine Anfrage lässt sich im Konfigurator wieder öffnen, um Logo, Slogan, Farbe und Position anzupassen und neu zu drucken. Die Kontaktdaten des Kunden bleiben dabei unveränderbar.
E-Mail-Qualität
„E-Mails prüfen“ markiert Unsinns- und nicht zustellbare Adressen. Die Bestätigung an den Kunden lässt sich aus der Anfrage heraus erneut senden, mit änderbarem Empfänger.
Einstellungen
Messe-Modus, Uhr auf der Startseite, Inaktivitäts-Zeit, bis zu acht Slogan-Vorlagen (je 42 Zeichen), der Text der Bestätigungs-E-Mail und die Adresse für Admin-Benachrichtigungen. Alles ohne Entwickler.
Statusseite für Kunden
Wer eine Mail erhält, kann über einen geschützten Link den Stand seiner Anfrage ansehen, nur lesend.
Pro Messe nutzbar
Die erste Fassung entstand für die DigitalX. Im November folgt die nächste Messe, für die die App angepasst wird. Dafür gibt es den Messe-Modus: Wird er vor der Messe eingeschaltet, landen alle Anfragen im eigenen Reiter, getrennt von echten Web-Anfragen, und lassen sich nach der Messe gesammelt auswerten oder löschen. An Gestaltung und Druck ändert er nichts. Slogans, Texte und Zeiten stellt das Team selbst um, Neues wie Logos eingeladener Kunden oder Produktmotive kommt pro Messe dazu.
Technik
- React 18, TypeScript und Vite, mit React Router und Framer Motion; Icons von Lucide.
- Vercel Functions für die API: Anfragen, Einstellungen, Anmeldung, Logo-Suche, Hochladen.
- Neon Postgres für Anfragen, Verlauf und Einstellungen; Vercel Blob für Logos, PDFs und Vorschaubilder.
- Resend und React Email für die Kunden- und Admin-Mails im Look des Kunden; keine Mails, wenn Mitarbeiter des Kunden die App selbst nutzen; doppelte Absendungen werden erkannt.
- Druck-PDF im Browser per Canvas und jsPDF, deckungsgleich mit der SVG-Vorlage der echten Flasche.
- Admin-Anmeldung mit signierten Sitzungen (JWT), Cookie-Dialog, helles und dunkles Theme.
- Eckige Formen, Unternehmensfarben und die Hausschrift des Kunden als verbindliches Designsystem.
Entwicklung
Seit Anfang Mai 2026 in Entwicklung, mit rund 195 Commits. Aus einem Frontend-Prototyp wurde über den Sommer eine produktionsreife App mit Admin-Bereich, Datenbank, E-Mail-Versand und iPad-Optimierung. Der Messe-Modus kam im September dazu.
Die Demo oben zeigt das echte Design (Flasche, Label, Schriften, Produktblatt). Der Ablauf ist ein eigener Nachbau; die Anfragen und die Firmenlogos in der Auswahl sind erfunden, und es wird nichts gespeichert.
Private Label Konfigurator
Private-Label-Konfigurator: die eigene Getränkemarke, mit einem KI-Rezeptur-Agenten, der sich nichts ausdenkt.
Wer eine eigene Getränkemarke aufbauen will, hat meist eine Geschmacksidee und viele offene Fragen: Welche Flasche? Welche Mindestmenge? Passt das Rezept überhaupt zusammen? Der Konfigurator beantwortet sie in einem Ablauf, und der Hersteller bekommt statt einer vagen Mail eine vollständige Anfrage.
Zieh die Regler, bis eine Warnung erscheint, lass Auto-Balance sie lösen und bitte dann Shotty um einen Shot aus „Mango, Ingwer, Sanddorn“. Beobachte, wie er die unbekannte Zutat weglässt.
Ausgangslage und Ziel
Ein Bio-Getränkehersteller bietet Private Label und Creator Brands an: Strategie, Rezeptur, Verpackung und Produktionsplanung aus einer Hand. Bisher bedeutete das Medienbrüche, Rückfragen und Anfragen, die erst nach mehreren Runden belastbar waren.
Der Konfigurator ist deshalb ein Qualifizierungs-Werkzeug, nicht nur ein Formular. Erfolgskriterium ist eine qualifizierte Anfrage, die Geschmack, Rezeptur, Gebinde, Etikett und Menge schon zusammen denkt. Der Käufer bekommt dabei sofort Rückmeldung, statt auf eine Antwort zu warten.
Der Konfigurator
Produktkategorie
Acht Kategorien als Kacheln, von Fruchtsäften über Schorle, Shots und Kombucha bis zu Essigen. Das Team kann sie umbenennen, ausblenden, sortieren und ergänzen.
Geschmacksprofil
Sechs Regler, Kernzutaten, der Rezeptur-Agent Shotty und passende Produkte aus dem Sortiment. Der Schritt lässt sich überspringen.
Gebinde, Verschluss, Qualität
Einweg-Glas, Mehrweg-Glas, Dose oder Karton, Füllgröße, Verschluss, Kohlensäure und Bio-Qualitätsstufe. Gezeigt werden nur Vorlagen, die das Team für die gewählte Kategorie freigegeben hat.
Etikett und Design
Etikett-Typ je nach Gebinde, Logo, Text, Hauptfarbe und Live-Vorschau. Die Mindestmenge des Etiketts schiebt die Mindestfüllmenge nach oben, der Regler kann nie darunter fallen.
Kontakt und Anfrage
Firma, Ansprechpartner, Menge in Liter, Stück oder Paletten (gekoppelt), Wunsch-Liefertermin. Die Anfrage geht mit Geschmacksprofil, Zutaten und Top-Matches ans Team, optional als Kopie an den Kunden.
Live-Kalkulation
Mindestfüllmenge in Litern, daraus Stückzahl abzüglich Füllverlust und Paletten. Die Verhältnisse stammen aus den Gebinde-Vorlagen.
Inland und Export
Dieselbe physische Flasche kann im Inland als Mehrweg und im Export als Einweg geführt werden. Ein Schalter erscheint nur, wenn die Kategorie mindestens eine Vorlage mit Auslands-Eintrag hat; der gewählte Markt geht in die Anfrage ein. Auch die Kohlensäure ist datengetrieben: erlaubt, wenn die gewählte Vorlage sie vorsieht.
Shotty: KI ohne Halluzination
Shotty besteht aus zwei zusammenspielenden Agenten, beide ausschließlich auf dem zertifizierten Rohstoffraster mit 138 Bio-Zutaten. Die Regel „kein Halluzinieren, kein Raten“ ist kein Wunsch im Prompt, sondern wird technisch erzwungen.
Rezeptur-Agent (überall auf der Seite)
Ein Widget mit vier Formaten (Shot, Smoothie, Schorle, Sprudelnd) und vier geführten Schritten, oder Freitext. Ein Synonym-Parser mappt Alltagsbegriffe wie Mango, Ingwer oder Holunderblüte auf exakte Katalognamen; Unbekanntes wird transparent gemeldet und weggelassen.
Ergebnis-Karte
Name (höchstens fünf Wörter, keine Floskeln), Kategorie, Tagline, Zutaten mit Menge und Einheit, sensorisches Profil aus Primärgeschmack, Note, Textur und Abgang, und eine kurze Begründung, warum es funktioniert.
Assistent im Geschmacks-Schritt
Kennt Kategorie, Profil, Balance-Score, aktive Warnungen und gewählte Zutaten. Antwortet mit Fachberatung, bis zu drei Zutaten, absoluten Reglerwerten und, wenn sinnvoll, einem Gebindevorschlag. Alles ist per Klick übernehmbar.
Harte Prüfung auf dem Server
Der Prompt wird aus Persona, Constraints, geschlossenem Katalog und dem Briefing des Nutzers gebaut, Claude liefert ausschließlich JSON. Danach muss jede Zutat wörtlich im Katalog stehen, sonst weist der Server die Antwort ab. Das ist der eigentliche Beweis, nicht der Prompt.
Leitplanken
Begrüßungen werden freundlich beantwortet, Themenfremdes höflich auf Rezepte zurückgelenkt, bereits erzeugte Namen nicht wiederholt. Wartezeit überbrückt Shotty mit Sätzen, die zum aktuellen Profil passen.
Geschmacksprofile und Balance-Engine
Sechs Dimensionen von 0 bis 100: Süße, Bitterkeit, Säure, Schärfe, Fruchtigkeit, Kohlensäure. Jede Kategorie hat ein eigenes Start-Profil, eine eigene Reihenfolge und eine eigene Zutatenliste; die Kohlensäure erscheint nur bei Erfrischungsgetränken und Kombucha, Kefir. Die benannten Startpunkte („Ingwer-Zitrone“, „Holunderblüten-Sprudel“) sind aus echten Produkten mit demselben Algorithmus berechnet wie das Matching.
Die Engine folgt der Flavor-Wheel-Theorie: Süße gleicht Bitterkeit und Säure aus, Schärfe braucht Süße als Träger, Säure hebt Fruchtigkeit, Kohlensäure schärft die Säure. Dazu gibt es harte Regeln, die der zuletzt bewegte Regler gewinnt, damit nichts unter dem Finger springt.
- Harte Regeln: Süße plus Bitterkeit höchstens 100, Süße plus Säure höchstens 110, Schärfe höchstens doppelt so hoch wie die Süße, Fruchtigkeits-Deckel sinkt mit der Bitterkeit.
- Sechs Warnungen, etwa „Schärfe braucht Süße“ oder „flaches Profil“, und ein Balance-Score von 0 bis 100.
- Auto-Balance: iterativ, höchstens sechs Durchgänge, abwechselnd Balancierer anheben und Aggressoren senken.
- Kernzutaten: eine bis sechs aus 57 kanonischen Rohstoffen mit Geschmacksvektor; das Profil wird aus ihnen vorhergesagt, Empfehlungen kommen aus der Nähe zum Zielprofil.
Produkt-Matching als Lead-Signal
Jedes echte Produkt des Herstellers wird über seine Zutatenliste auf kanonische Zutaten gemappt und bekommt ein abgeleitetes Geschmacksprofil. Die Übereinstimmung setzt sich aus 40 Prozent Geschmacksähnlichkeit, 35 Prozent gemeinsamen Zutaten und 25 Prozent Balance-Kompatibilität zusammen; die Top fünf werden nach Produktname dedupliziert.
Das Ergebnis geht in die Anfrage ein: „Die Wunschrezeptur liegt zu 87 Prozent bei Produkt X.“ Für den Vertrieb ist das ein belastbares Signal, wie nah der Wunsch am bestehenden Sortiment liegt.
Admin-Konsole
Gebinde-Vorlagen
Rund 40 Vorlagen mit Größe, Art (Einweg, Mehrweg, Inland, Ausland), Verschlüssen, Kohlensäure, Mindestfüllmenge, Stück, Paletten, Etikett-Optionen je Kategorie und Mindestbestellmenge. Ein „Berechnen“-Helfer schätzt Stück und Paletten aus gleich großen Vorlagen, eine Live-Vorschau zeigt, was der Kunde sieht.
Bilder und Kategorien
PNG-Upload in eine private Ablage, Ersetzen unter gleichem Namen, Löschen als Verschieben (kein Datenverlust) und eine Übersicht, welche Vorlage welches Bild nutzt. Kategorien lassen sich in Reihenfolge, Name und Beschreibung (zweisprachig), Icon und Sichtbarkeit pflegen.
Anfragen
Eingehende Anfragen, neueste zuerst, mit Kontakt, kompletter Konfiguration, Geschmacksblock samt Shotty-Verlauf und Logo-Download. Archivieren, Wiederherstellen und endgültiges Löschen nur bei archivierten Einträgen.
Zugang
Geschützt per Middleware und Rolle, Anmeldung mit E-Mail und Passwort oder über Azure AD, Passwort-Reset, Hell und Dunkel.
Zweisprachigkeit
Die Oberfläche läuft auf Deutsch und Englisch, mit Umschalter im Header und einem zentralen Wörterbuch. Zweisprachig sind auch die Daten: Zutaten-Labels, Startpunkte, Kategorie-Namen und -Beschreibungen, der Produktkatalog, der Shotty-Chat samt Synonym-Parser und die KI-Antworten. Mails an Team und Kunde erscheinen in der Sprache der Anfrage.
Technik und Betrieb
- Next.js 16 (App Router), React und TypeScript, Tailwind mit shadcn und Radix, Framer Motion und Lenis.
- Claude über das Anthropic SDK, strukturierte JSON-Antworten, serverseitig validiert; Modell und Prompts liegen im Code.
- Anfragen und Logos in privatem Vercel Blob, Auslieferung der Bilder über einen Proxy.
- Supabase Auth mit Azure-AD-OAuth für den Admin-Bereich.
- Resend für zweisprachige HTML-Mails an Team und, optional, Kunden.
- Hosting und Analytics auf Vercel; SEO mit Sitemap, JSON-LD und llms.txt.
Zur Demo
Die Demo oben läuft mit dem echten Code der Balance-Engine und des Produkt-Matchings, deshalb reagieren Regler, Warnungen, Score und Treffer live. Shotty antwortet hier aus den Regeln der Engine statt aus einem Modell; Startseite, Gebinde-Vorlagen und der Etikett-Schritt entsprechen dem Produkt; Rohstoff-Katalog, Produkte und Anfragen sind erfunden, und es wird nichts gespeichert.
Kundenplaner
Kundenplaner: Umsatz und Konditionen fürs nächste Jahr, geplant von denen, die die Kunden kennen.
Jahresplanung im Vertrieb scheitert selten an Mathe, sondern an Wegen: Zahlen liegen im internen System, die Leute sind unterwegs, und was sie wissen, steht in keiner Tabelle. Der Kundenplaner bringt beides zusammen: ein Modell, das für jeden Kunden einen Wert vorschlägt, und ein Team, das ihn mit seinem Wissen korrigiert.
Wechsle den Kanal, öffne einen Kunden, ändere die Prognose-Rate und speichere. Schau dann ins Team-Dashboard und in die Manager-Ansicht: Dein Eintrag ist da.
Ausgangslage und Ziel
Ein Getränkehersteller plant seinen Umsatz pro Vertriebskanal und pro Kunde. Die Daten stammen aus einem internen SQL-Server-System, die Außendienst-Mitarbeiter arbeiten unterwegs auf Tablets ohne VPN. Bisher hieß das: Tabellen per Mail, Rückfragen und ein Stand, der beim Zusammenführen schon wieder alt war.
Ziel war ein einziger Ort, an dem Prognosen und Konditionen entstehen, nachvollziehbar versioniert, mit dem Management-Blick gegen die Kanalziele und einer Freigabe, wo Konditionen vom Standard abweichen.
Was das Werkzeug kann
Kundenplanung mit Kanal-Switch
Drei Vertriebskanäle, jeder mit eigener Farbe und eigenem Kanalziel. Die Kundenliste zeigt Vorjahresumsatz, historisches Wachstum, Konditionen und den Stand der Prognose; filtern nach Kritikalität (Kernkunde mit Klumpenrisiko, Wachstum, rückläufig, stabil) und Suche.
Modell-Default und Überschreiben
Für jeden Kunden schlägt ein Wachstumsmodell die Umsatzrate vor, kalibriert auf die Zielrate des Kanals. Der Außendienst überschreibt sie mit Rate und Freitext. Offene Kunden zählen mit dem Modell, eingereichte mit der Prognose, und das ist überall gekennzeichnet.
Konditionen mit Freigabe
Standard-Werbekostenzuschuss, abweichender Wert mit Begründung, für Großkunden Rechnungsrabatt, Skonto und sonstige Rabatte. Liegt ein Wert über dem Standard, entsteht automatisch eine Freigabe-Anfrage.
Team-Dashboard
Fortschritt der Einreichungen, Gesamtumsatz und Konditionen, Deckung je Kanalziel und ein Pareto-Diagramm: Wie viele Kunden tragen 80 % des Umsatzes, und welche davon sind schon geplant?
Manager-Ansicht
Alle Einreichungen mit Mitarbeiter, Rate, Umsatz, Freitext und Zeitstempel, filterbar je Mitarbeiter. Dazu das Umsatz- und Konditionen-Dashboard mit Netto je Kanal und je Kunde.
Innendienst-Werkzeuge
Rechnungsprüfung gegen die am Rechnungsdatum gültige Kondition, Freigabe-Warteschlange, Gutschriften, ablaufende Konditionen, Ampel-Übersicht und Prognose-Ist-Abgleich.
Kundenreport
Pro Kunde ein PDF mit Verlauf, Top-Produkten, Prognose und Konditionen, direkt im Browser erzeugt.
Wie es zusammenhängt
Die Außendienst-Geräte erreichen das interne System nicht. Deshalb schreibt ein nächtlicher Abgleich Kunden, Jahres-, Monats- und Produktumsätze in eine Cloud-Datenbank. Der Abgleich läuft in einer Transaktion: ein abgebrochener Lauf hinterlässt keinen halben Stand.
Die App liest nur diesen Cache und schreibt ihre eigenen Daten daneben: die aktuelle Prognose je Kunde und, bei jeder Speicherung, eine Zeile in den Verlauf. Daraus lässt sich beantworten, welche Kondition an einem bestimmten Rechnungsdatum galt.
Technik
- Next.js 16 (App Router, Route Handlers), React 19, TypeScript, Tailwind CSS 4
- Neon (serverless PostgreSQL) mit Drizzle ORM; Cache-Tabellen read-only, Eingaben und Verlauf separat
- NextAuth mit Rollen (Außendienst, Innendienst, Manager), Route-Schutz per Proxy, Rollenprüfung in jeder API-Route
- Nächtlicher Node-Sync vom SQL Server nach Postgres, atomar per WebSocket-Transaktion
- Recharts für Pareto und Verläufe, pdfmake für den Kundenreport
- Vercel-Hosting mit Preview je Branch; für Tablets ohne VPN erreichbar
Was die Demo zeigt
Die Demo nutzt das echte Prognosemodell und die Ansichten, mit erfundenen Kunden, Mitarbeitern und Zahlen aus einer JSON-Datei, die die Struktur der echten Datenbank nachbildet. Eine Prognose, die du speicherst, erscheint im Team-Dashboard und in der Manager-Ansicht; nichts verlässt den Browser.
Produktionsplanung
Produktionsplanung: Wie viele Monate reicht der Bestand, Artikel für Artikel, bevor die Abfüllung laufen muss.
Produktionsplanung ist die Frage, welcher Artikel als Nächstes gefüllt werden muss, bevor er ausgeht. Die Antwort stand in einer Excel-Arbeitsmappe, die aus mehreren Abfragen zusammengesetzt war. Das Dashboard rechnet dieselbe Logik und macht sie filterbar, schnell und für alle Planer gleich.
Sortiere nach Reichweite, filtere auf eine Flaschengröße, klicke dann auf eine Füllplanmenge und ändere sie. Beobachte, wie Reichweite und Gebinde-Ansicht reagieren.
Ausgangslage und Ziel
Ein Getränkehersteller füllt mehrere hundert Artikel in vielen Gebinden und Größen, für die eigene Marke und für Handelsmarken. Die Planer schauten bisher in eine Arbeitsmappe, die offene Aufträge, Absatzprognose und aktuellen Bestand zusammenführte, mit Pivot-Slicern und bedingter Formatierung. Sie war mächtig, aber an eine Person und einen Rechner gebunden.
Ziel war, die Logik der Mappe 1:1 zu übernehmen, die Ergebnisse gegen die Excel-Werte zu prüfen und daraus eine Web-Anwendung zu machen, die nachts frische Daten bekommt und im Browser jeder Planerin dasselbe zeigt.
Was das Werkzeug kann
Reichweite in Monaten, zwei Sichten
Aus Bestand plus bereits geplanter Füllung und dem Bedarf entsteht die Reichweite, einmal aus der Vertriebsplanung und einmal aus dem Absatz der Vormonate. Fünf Stufen von kritisch (unter einem Monat) bis Überbestand (über vier), in den Farben, die die Planer aus Excel kennen.
Slicer und Suche
Gebindegröße, Einweg/Mehrweg und Marke als mehrfach wählbare Slicer, dazu eine Suche über Artikel und Rezeptur. Die KPI-Kacheln (kritisch, Warnung, Ø Reichweite, Überbestand) folgen dem Filter.
Füllplanmenge direkt ändern
Die geplante Füllmenge ist in der Tabelle editierbar. Bereits Eingeplantes zählt als Bestand, also verschieben sich Reichweite, Restbedarf und die Summen der Gebinde-Ansicht sofort.
Gebinde-Ansicht
Bestand, Prognose, Restbedarf, Füllplan und Reichweite je Gebindeart, dazu zwei Diagramme: Reichweite je Gebinde und Füllplanmenge je Gebinde. Wo liegt der Engpass, in der Flasche oder im Karton?
IST-Planung
Die tatsächlich geplanten und abgefüllten Aufträge der Linien: je Kalenderwoche, je Linie, nach Status und Qualität, mit Auftragsliste. So sieht die Planung neben dem Vorschlag, was wirklich läuft.
Leicht
Die Abfragen sind teuer. Deshalb baut ein nächtlicher Lauf einen JSON-Cache, und die Oberfläche liest nur diese Datei. Schlägt ein Lauf fehl, bleibt der letzte gute Stand stehen.
Wie es zusammenhängt
Die Datengrundlage sind zwei Sichten des Warenwirtschaftssystems auf einem SQL Server: die Produktionsvorschläge und die IST-Produktionsplanung. Ein Skript fragt sie nachts ab und schreibt sie in eine JSON-Datei; die API-Routen der App liefern diese Datei aus und fallen nur ohne Cache auf die Live-Abfrage zurück.
Dieselben Routen füttern ein getrenntes Management-Dashboard, deshalb ist die Planungs-App der Besitzer dieser Schnittstelle. Die Formeln stehen an einer Stelle und sind gegen die Excel-Werte verprobt.
Technik
- Next.js 16 (App Router, Route Handlers), React 19, TypeScript, Tailwind CSS 4, shadcn/ui
- Recharts für die Diagramme, Hell/Dunkel-Modus, Slicer und editierbare Tabelle ohne Tabellenbibliothek
- SQL Server über mssql mit einem gemeinsamen Verbindungspool; nächtlicher JSON-Cache per Cron, atomar geschrieben
- Berechnungslogik an einer Stelle, gegen die Excel-Testwerte geprüft
- Eigener Betrieb hinter einem Reverse Proxy; getrennte Apps teilen sich eine Domain
Was die Demo zeigt
Die Demo nutzt die echten Formeln und Ansichten, mit erfundenen Artikeln, Marken und Mengen aus einer JSON-Datei, die Struktur und Streuung der echten Daten nachbildet. Eine Füllplanmenge, die du änderst, schlägt auf Reichweite und Gebinde-Ansicht durch; nichts verlässt den Browser.
Vertriebs-Dashboard
Vertriebs-Dashboard: Absatz und Umsatz live gefiltert, mit einem Agenten, der die Daten selbst abfragt.
Vertriebssteuerung scheitert selten an fehlenden Daten, sondern daran, dass sie nur über Exporte und Berichte ankommen: einen Monat alt, nicht filterbar, ohne Rückfrage. Das Dashboard legt eine interaktive Schicht über das Berichtssystem, und ein Agent beantwortet die Fragen, für die sonst jemand eine Auswertung bauen müsste.
Wechsle zwischen Umsatz und Absatz, wähle ein Jahr und eine Marke, öffne einen Kunden. Frag dann den Agenten nach den zehn größten Kunden und folge seinem Link.
Ausgangslage und Ziel
Ein Getränkehersteller wertet Absatz und Umsatz nach Kunde, Artikel, Marke und Vertriebsweg aus. Bisher hieß das: Excel-Exporte und Power-BI-Berichte ohne Echtzeit-Interaktivität, und auf Artikelebene blieben Auffälligkeiten oft bis zum Monatsabschluss unentdeckt.
Ziel war ein Werkzeug für die operativen Nutzer im Vertrieb: aktuelle Zahlen, frei filterbar, mit Vorjahresvergleich und Prognose, im Browser und ohne Installation.
Was das Werkzeug kann
Dashboard
Vier Kennzahlen, Umsatzverlauf, Jahresvergleich, Saisonalität als Heatmap, Wachstum zum Vorjahr, Anteile der Artikelgruppen, Kanäle und Marken. Ein Schalter wechselt alle Ansichten zwischen Umsatz und Absatz.
Filter und Verlinkung
Sieben Filterdimensionen von Jahr bis Kunde. Jede Ansicht samt Filterstand steht in der URL und lässt sich als Link teilen.
Rankings mit Vorjahr
Kunden, Artikel und Vertriebsgruppen im Vergleich zum Vorjahr mit Entwicklung und Umsatzanteil, dazu Detailfenster je Kunde, Artikel, Marke oder Kanal.
Prognose
Hochrechnung aus den bisherigen Monaten mit Saisonindex, dazu Schieberegler für Wachstum und Abwanderung, Mehrjahressicht bis 2030 und eine KI-gestützte Szenarioanalyse.
Umsatz- und Personalplaner
Trend- gegen Strategiepfad je Vertriebsgruppe, Außendienst-Kapazität und Personalkosten, Budgetverteilung auf Jahre und Kanäle, alles zum Durchspielen.
KI-Agent
Beantwortet Fragen auf Deutsch, ruft dafür die Datenquellen live auf, verkettet mehrere Abfragen und liefert Tabellen mit Link in die passende Ansicht. Antworten lassen sich bewerten.
Wie es zusammenhängt
Die Zahlen stammen aus einem SQL-Server-Berichtssystem mit weit über einer Million Zeilen. Deshalb aggregiert der Server per SQL, statt eine Stichprobe an den Browser zu schicken: Summen und Rankings stimmen auch bei seltenen Filterkombinationen. Teure Abfragen liegen in einem Cache mit abgestuften Laufzeiten, und nach jedem Deployment wird er vorgewärmt.
Der Agent ist kein Chatbot mit Wissen im Prompt. Er bekommt die Endpunkte der App als Werkzeuge und fragt bei jeder Frage die aktuellen Daten ab; das Ergebnis ist so aktuell und so gefiltert wie das Dashboard selbst.
Technik
- Next.js 16 (App Router, Route Handlers), React 19, TypeScript, Tailwind CSS 4
- SQL Server über mssql mit Verbindungspool, serverseitige Aggregation, TTL-Cache und Warm-up
- Claude mit Tool Use: eigene Endpunkte als Werkzeuge, bis zu sechs Runden, gestreamte Markdown-Antworten
- PDF-Export im Browser (pdfmake), Bewertung der Antworten mit Ablage außerhalb des Release-Verzeichnisses
- Standalone-Build hinter nginx als systemd-Dienst, atomarer Verzeichniswechsel mit Health-Check und Rollback
- Tests für den Verkaufsumfang und die Filterbildung gegen eine In-Memory-Datenbank
Was die Demo zeigt
Die Demo nutzt die echte Aggregations-, Prognose- und Planerlogik mit erfundenen Kunden, Marken, Artikeln und Zahlen aus einer JSON-Datei. Auch die internen Ansichten (Tabellenkatalog, Schema, Aktualisierungsstatus) stammen aus dieser Datei, mit erfundenen Namen. Der Agent antwortet mit hinterlegten Antworten und zeigt den Ablauf, das Modell ist nicht angebunden. Nichts verlässt den Browser.
Reklamations-Management
Reklamations-Management: jeder Fall auf einen Blick, mit einem Assistenten, der den Präzedenzfall findet.
Qualitätsarbeit scheitert selten an fehlenden Daten, sondern daran, dass der Export in einer Tabelle liegt: Wer wissen will, ob eine Charge schon einmal auffiel, muss suchen, filtern und lesen. Die Engine legt eine Auswertungs- und Assistenzschicht darüber, damit die Antwort in Sekunden da ist und nicht am nächsten Tag.
Öffne das Dashboard und klicke im Phasendiagramm ein Jahr an. Frag dann die Abfrage-Ansicht nach den Top-Lieferanten und suche die neueste Reklamation im Präzedenz-Agenten.
Ausgangslage und Ziel
Das Qualitätsteam eines Getränkeherstellers pflegt Reklamationen in einem Qualitätsmanagementsystem. Für Auswertungen blieb ein Export, der in Tabellenkalkulationen zu Pivots wurde: pro Frage ein neuer Arbeitsschritt, und Muster über Jahre waren kaum zu sehen.
Ziel war ein Werkzeug für das Qualitätsteam: Zahlen und Verläufe sofort, jeder Fall mit allen Feldern lesbar, Fragen in natürlicher Sprache, und bei jeder neuen Reklamation ein Hinweis, ob es dafür einen Präzedenzfall gibt.
Was das Werkzeug kann
Dashboard
Vier Kennzahlen, Verlauf der häufigsten Gründe, Jahrestrend intern gegen extern, offene Fälle mit Filter nach Alter und Art, Top-Lieferanten, Phasenverteilung je Jahr. Jedes Element führt gefiltert in die Liste.
Liste und Falldetail
Volltextsuche über Charge, Artikel, Lieferant und Beschreibung, Filter nach Art, Phase, Grund und Zeitraum, Lieferantenprofil mit Aufschlüsselung, Falldetail mit allen Feldern. Jeder Stand ist verlinkbar.
Text-to-SQL
Eine Frage auf Deutsch wird in einen strukturierten Filter übersetzt und gegen die Daten ausgeführt, mit erklärtem SQL-Äquivalent, Anteilen und Sprung in den Fall. Spracheingabe inklusive.
KI-Assistent
Ein Chat, der Muster erkennt und Maßnahmen empfiehlt, gestützt auf Kennzahlen und Beispiele der Bewertungen der Rückstellmuster; die Antwort kommt gestreamt als formatierter Text.
Fallanalyse
Zu jedem Fall sucht das System ähnliche abgeschlossene Fälle, bewertet die getroffene Entscheidung und liefert einen Leitfaden. Fallnummern in der Antwort sind klickbar.
Präzedenz-Agent
Zerlegt eine Reklamation in einen Fingerprint und sucht in drei Stufen (Charge, Muster, Textähnlichkeit) nach Vorgängern, mit Zeitgewichtung und typisierter Empfehlung. Abweichungen von der Empfehlung werden begründet erfasst.
Wie es zusammenhängt
Die Daten kommen live aus dem Berichtssystem, mit einem statischen Export als Rückfallebene, falls die Datenbank nicht erreichbar ist. Die Auswertung läuft im Browser über den geladenen Bestand, sodass Filter ohne Wartezeit reagieren.
Das Sprachmodell bekommt nie den ganzen Bestand. Die Abfrage-Ansicht lässt es nur einen Filter bauen, den der Browser ausführt; der Assistent erhält Kennzahlen und eine Stichprobe; die Fallanalyse bekommt die ähnlichsten Fälle. Der Präzedenz-Agent kommt ganz ohne Modell aus: Er rechnet regelbasiert und ist deshalb nachvollziehbar.
Technik
- Next.js 16 (App Router, Route Handlers), React 19, TypeScript, Tailwind CSS 4, Recharts
- SQL Server über mssql mit Verbindungspool, statischer Export als Fallback bei Ausfall
- Claude für Abfrage-Übersetzung, Assistent und Fallanalyse, gestreamte Markdown-Antworten
- Präzedenz-Matching regelbasiert: Chargenvergleich, Archetyp, Jaccard-Textähnlichkeit, Zeitgewichtung
- Spracheingabe über die Web Speech API, Deeplinks für jeden Filterstand
- Standalone-Build hinter nginx im Firmennetz
Was die Demo zeigt
Die Demo nutzt die echte Filter-, Aggregations- und Matching-Logik mit erfundenen Reklamationen, Lieferanten, Artikeln und Chargen aus einer JSON-Datei. Die Abfrage-Ansicht und der Assistent antworten mit hinterlegten Ergebnissen und zeigen den Ablauf, das Modell ist nicht angebunden. Der Präzedenz-Agent rechnet tatsächlich im Browser. Nichts verlässt den Browser.
Die 3D-Biene
Die 3D-Biene: eine kleine Figur, die einen Pfad entlang fliegt, Flügel inklusive.
Eine Spielerei mit ernstem Kern: Wie bringt man eine kleine 3D-Figur auf eine Webseite, ohne dass sie die Seite beschwert? Die Biene ist die Antwort, ein 1,4 MB großes Modell mit animierten Flügeln und einem Flug, der sich anfühlt wie gemacht.
Zieh den Flug-Regler, wechsle zu „Pfad zeichnen“, zieh eine Linie über die Fläche und lass los. Dann klick ein paar Blumen an und schau, wie sie sie einsammelt. Zum Schluss dreh die Biene in „3D ansehen“.
Worum es geht
Die Biene ist im glTF 3D-Dateiformat, welche ich in drei Dimensionen modelliert habe. Sie ist der kleine Helfer meines nomonkey Maskottchen der neuen nomonkey.work (Version 2.0, in Vorbereitung) und zugleich ein Beweis, dass 3D im Web leicht und trotzdem schön sein kann.
Wie sie fliegt
- Eine Catmull-Rom-Kurve mit fünf Punkten gibt den Weg vor; die Biene neigt sich in die Kurve und landet weich auf einer Blume.
- Die Flügel sind ein eigener Animationsclip, dessen Tempo beim Landen gegen null läuft.
- Ein weicher Kontaktschatten wird lokal gezeichnet und nie ins Modell eingebettet.
- Beleuchtung über eine Raum-Umgebung statt schwerer Texturen; Reduced Motion pausiert die Flügel.
Die Studie
Die Originalstudie kann mehr: Der Flug folgt dem Scrollen der Seite, man kann einen eigenen Pfad zeichnen, Blumen abwerfen, denen die Biene folgt, und das Modell von allen Seiten ansehen. Hier läuft eine kompakte Fassung mit Flug, Pfad zeichnen, Blumen und 3D-Ansicht; nur der Scroll-Flug bleibt in der Studie.