Referenser
Projekt jag byggt och driver, vart och ett i sin helhet: vad det kan, hur det fungerar, vad det kör på och det riktiga att prova.
Das Körper-Labor
Das Körper-Labor: en kurssajt med en riktig produkt inuti.
Ett sex veckor långt Human Design-hälsoexperiment i liten grupp behöver mer än en landningssida: en väntelista, inbjudningar, ett personligt område för varje deltagare och ett verktyg så att kursledaren kan driva allt utan utvecklare. Det är det som byggts här, från första förfrågan till vecka 6.
Klicka runt: svara på en hemuppgift, dra en anteckning, byt bodygraph-vy, ladda ner readingen som PDF. Inget sparas.
Utgångsläge
Das Körper-Labor kopplar Human Design till konkreta experiment inom fyra livsområden: mat, sömn, rörelse och miljö. Varje deltagare får en personlig reading skriven för hennes chart och prövar impulserna på sin egen kropp. Gruppen är liten, starten individuell.
Webbplatsen måste förklara detta lugnt och trovärdigt, leda intresserade till en väntelista och efter inbjudan in i ett skyddat område som håller det kursen lovar.
Vad plattformen omfattar
Publik webbplats
En lugn sida i stilen ”Sunrise studio”: problemet, de fyra labben, vad man får, en bodygraph med alla 64 gates, upplägget, frågor och svar. Dessutom en sida ”Vad du får” där det riktiga deltagarområdet kan provas med en exempelperson.
Väntelista och inbjudningar
Intresserade anmäler sig, kursledaren bjuder in selektivt. Bekräftelse-, inbjudnings- och betalningsmejl, registrering med födelsedata och adress, faktura som PDF.
Deltagarområde
En översikt, readingen vecka för vecka som text och PDF, den egna bodygraphen, en 7-dagars audit av sömn och energi, hemuppgifter med svar, en anteckningsvägg, tiderna med kursledaren och den egna vägen från startdatum till vecka 6.
Adminkonsol
Kontakter och tider, en editor för veckotexterna, en översikt, bodygraph-verktyg, sömntrackern, inställningar och Brain som kunskapsförråd bakom.
Automatik
Påminnelser om öppna uppgifter och information om sömntrackern körs dagligen enligt schema, så att inget behöver startas för hand.
Egen chartberäkning
En deltagares chart beräknas utifrån hennes födelsedata, med tidszon och historisk sommartid på födelseorten. Ett eget bibliotek gör det, och levererar även Dream Rave och bodygraphens geometri. Därmed finns inget beroende av en tredjepartstjänst, och resultatet går att följa.
Samspel med Brain
Veckotexterna behöver inte skrivas om varje gång: Brain håller kursledarens texter redo för varje egenskap och gör dem tillgängliga i readingen, i agenten och via en MCP-server. Mer i referensen ”Human Design Brain”.
Teknik
- Next.js 15 (App Router), React 18 och TypeScript; Tailwind för designsystemet.
- PostgreSQL för kontakter, veckor, anteckningar, audit och Brain; Resend för alla mejl.
- Serverskapade PDF:er för reading, bodygraph och faktura; Tiptap som editor för veckotexterna.
- Vercel AI SDK för agenten i kontot, en egenbyggd MCP-server för veckotexterna.
- Eget bibliotek för chart och Dream Rave; Vercel för hosting och scheman.
- Ljust och mörkt tema och en cookiedialog.
Human Design Brain
Brain: ett kunskapsförråd som skriver readings i stället för att skriva om dem.
Att skriva varje reading för hand är en kursledares flaskhals, och en chattbot utan grund hittar på. Brain löser båda med en enkel idé: en post per Human Design-egenskap, och charten säger vilka poster som gäller.
Håll över en gate i bodygraphen, öppna posten, följ länkarna i grafen och fråga HD Agent. Exempeldata, inget äkta.
Problemet
- Samma kunskap skrivs om och om igen: en profil 4/1 eller kanal 20/34 finns hos många deltagare, och att anpassa samma text varje gång kostar timmar.
- Kunskapen är utspridd: i gamla readings, i omkring 190 transkriberade kursvideor med ungefär 440 000 ord, och en del bara i huvudet.
- En AI-assistent utan grund hittar på. Att påstå saker i kursledarens namn som hon aldrig skulle säga är en risk vid hälsoämnen.
- Deltagare behöver texten vid rätt tid: den som är i vecka 1 ska inte läsa alla gates än.
Idén: en nyckel per egenskap
En chart har en ändlig, känd mängd egenskaper: typ, auktoritet, profil, definition, centra, kretsar, kanaler, gates, kors. Varje får exakt en post med en talande nyckel som kanal-20-34 eller tor-29. Ur födelsedata blir det en lista över chartens nycklar, och varje post som matchar står redo. Det är deterministiskt, förklarbart och billigt. En vektorsökning byggdes medvetet inte.
Texten har en platshållare för förnamnet som ersätts när en post tas över: skriven en gång, ändå personlig. En post kan också gälla flera egenskaper, till exempel en hemuppgift för alla Generatorer.
Hur kunskap kommer in
Ta över en reading
Kapitlen i en vecka delas upp i poster med AI. Ordalydelsen finns kvar, namnet blir platshållaren. Bara det som kryssats sparas, och befintliga nycklar skrivs aldrig över.
Kursvideor
Videor transkriberas och sparas som transkript. Av dem blir analyser per ämne som redovisar sina källor.
För hand
En editor med Markdown, bakåtlänkar och förhandsvisning.
Via prompt
Genom en egenbyggd MCP-server kan kursledaren söka, skapa och revidera i Claude.
Hur det kommer ut igen
I readingen
Matchande poster kopieras in i en vecka som kapitel, platshållaren blir förnamnet. Kursledaren granskar och justerar innan veckan låses upp.
I agenten
Chattagenten i kontot får de poster som passar charten, läser dem och svarar först utifrån kursledarens ordalydelse.
I HD Agent (MCP)
Tio verktyg i Claude Desktop: söka, läsa, skapa, ändra, radera och arbeta med deltagare och deras veckor. Läsa före skriva, radera först efter uttryckligt OK.
I bodygraphen
En sidopanel visar texterna för deltagarens egna egenskaper och låses upp med kursen: vecka 1 centra, vecka 2 kanaler, vecka 3 gates, vecka 4 linjer.
Spårbart i stället för ”magi”
Varje ändring av en post loggas med datum, upphovsman (editor, import, AI-agent, system) och version med jämförelse mot föregående, via en databastrigger, alltså även vid direkta ändringar. Källor och hänvisningar ligger i egna kolumner, inte i texten. Översikten visar nyckeltal, täckning per egenskapsgrupp och de 64 gatesen på bodygraphen, grönt där en post finns. Grafen visar alla poster och länkar som ett nät.
Siffror
- 783 poster och 2 717 länkar
- 190 kurstranskript med omkring 442 000 ord, plus 12 analyser
- 64 gates med 384 linjer, 36 kanaler, 12 profiler, 192 inkarnationskors
- Alla egenskapsgrupper fullständigt täckta
Beslut och gränser
Ordalydelse före sammanfattning: AI:n strukturerar, den skriver inte om. Agenten är förankrad: den svarar ur Brain och säger det när det inte finns något om ämnet. Inga namn i texten, eftersom poster kopieras till andra veckor.
Ärligt om gränserna: det finns ingen semantisk sökning och ingen versionering av betydelse, bara historiken per post. Det finns en gemensam admininloggning, alltså ingen åtskillnad mellan personer i historiken. Transkriberingen kräver ffmpeg och körs lokalt. Vissa texter ska fortfarande kontrolleras mot facklitteratur. Brain ersätter ingen rådgivning, det snabbar på kursledarens arbete.
Teknik
- Next.js 15, React 18, TypeScript; PostgreSQL med tabeller för poster, historik och rubriker.
- En PL/pgSQL-trigger för historiken, med upphovsmannen som sessionsvariabel.
- Vercel AI SDK via AI Gateway för import, agent och specialister, med reservmodell.
- En egenbyggd MCP-server med tio verktyg; en andra för veckotexterna.
- En egen kraftsimulering i SVG för grafen, Mermaid för guiden i admin.
Om demon
Demon ovan körs enbart på påhittade exempeldata (208 poster, 220 länkar). Siffrorna i texten är det riktiga systemets; riktiga poster, deltagardata och transkript ingår inte på sidan.
Label-Konfigurator
Etikettkonfigurator: en mässiPad där besökare designar sin egen flaska.
I en mässmonter ska ett samtal bli något man kan ta med sig hem: en riktig flaska med den egna logotypen. Etikettkonfiguratorn gör det till en fråga om minuter, direkt på iPad, och ger försäljningen kontaktuppgifterna på köpet.
Gå igenom som en besökare: välj logotyp, skriv en slogan, skriv ut. Hitta sedan din egen post under Förfrågningar.
Utgångsläge
På mässor och toppmöten ska företag kunna designa en dryck med egen logotyp och slogan och ta med den som present. Etiketten är ingen mockup utan flaskans riktiga, tryckbara etikett: samma mått, samma layout, samma certifieringsmärken.
Besökaren står i montern, ljuset är starkt, tiden knapp. Flödet måste därför vara snabbt, lätt att trycka på och begripligt direkt. I slutänden behöver försäljningen tre saker: en färdig design, användbara kontaktuppgifter och en utskriven etikett.
Flödet på iPad
Designa
Design först, data sedan: den som redan byggt sin etikett lämnar oftare riktiga kontaktuppgifter. Sök logotyp eller välj ur listan över inbjudna kunder, slogan ur mallar eller fri text, plus position, storlek, typsnitt, färg och valfria certifieringsmärken. Flaskan till höger står kvar och växer med varje val.
Kontakt
Företag och namn räcker, e-postadressen är valfri. Inbjudna kunder föreslås medan man skriver. En ogiltig adress påpekas direkt.
Förhandsvisning
Den stora flaskan visar vad som trycks. ”Skriv ut etikett” skickar klistermärket på 51 × 120 mm till skrivaren, ”Skicka via e-post” levererar PDF:en. ”Klar, nästa besökare” nollställer allt.
Kioskbeteende
En startsida med live-klocka, ett hopp tillbaka dit efter inställbar inaktivitet (10 till 60 sekunder), en dialog för att återuppta en sparad konfiguration och en infopanel med hela produktbladet, så att inget behöver slås upp i montern.
Förhandsvisning lika med tryck
Huvudprincipen: det besökaren ser är det som trycks. Förhandsvisningen och PDF:en räknar med samma koordinater, och etiketten genereras i webbläsaren med canvas och jsPDF som en tryckklar PDF på 51 × 120 mm. Varje layoutändring kontrollerades mot båda, inte bara mot skärmen.
Hitta logotyper i stället för att ladda upp dem
Besökare har sällan sin logotyp som fil, men de kan sitt företagsnamn. Därför söker appen: utifrån ett företagsnamn eller en adress samlas kandidater från flera källor (en logotyptjänst, Wikipedia på flera språk, favicon och en serverside-läsning av webbplatsen med en headless-webbläsare). Besökaren trycker på rätt förslag. En lista över inbjudna kunder och filuppladdning kompletterar.
Adminområdet
Förfrågningar
Varje design sparas som en förfrågan, med renderad PDF och miniatyr. Flikar för öppna, pågående, avslutade och arkiverade förfrågningar, och en egen flik för mässmontern. Sök på företag, kontakt, e-post och slogan; massarkivering och radering.
Status och historik
Skickad, Pågår, Levererad. Varje ändring hamnar med tidpunkt i förfrågans historik, även ett nytt utskick av ett mejl eller flytt mellan mässa och webb.
Redigera och skriv ut igen
En förfrågan kan öppnas igen i konfiguratorn för att justera logotyp, slogan, färg och position och skriva ut på nytt. Kundens kontaktuppgifter förblir oförändrade.
E-postkvalitet
”Kontrollera e-post” flaggar nonsens- och icke-leveransbara adresser. Bekräftelsen till kunden kan skickas om från förfrågan, med ändringsbar mottagare.
Inställningar
Mässläge, klockan på startsidan, inaktivitetstid, upp till åtta sloganmallar (42 tecken vardera), texten i bekräftelsemejlet och adressen för adminavisering. Allt utan utvecklare.
Statussida för kunder
Den som får ett mejl kan följa sin förfrågans status via en skyddad länk, skrivskyddat.
Användbar för varje mässa
Första versionen gjordes för DigitalX. Nästa mässa följer i november och appen anpassas för den. Därför finns mässläget: slås det på före en mässa hamnar alla förfrågningar i en egen flik, skilda från riktiga webbförfrågningar, och kan sedan gås igenom eller raderas gemensamt. Det ändrar inget i design eller tryck. Teamet byter slogans, texter och tider själv; nytt som inbjudna kunders logotyper eller produktmotiv tillkommer per mässa.
Teknik
- React 18, TypeScript och Vite, med React Router och Framer Motion; ikoner från Lucide.
- Vercel Functions för API:et: förfrågningar, inställningar, inloggning, logotypsök, uppladdning.
- Neon Postgres för förfrågningar, historik och inställningar; Vercel Blob för logotyper, PDF:er och miniatyrer.
- Resend och React Email för kund- och adminmejl i kundens utseende; inga mejl när kundens egen personal använder appen; dubbla inskick upptäcks.
- Tryck-PDF i webbläsaren med canvas och jsPDF, överensstämmande med SVG-mallen för den riktiga flaskan.
- Admininloggning med signerade sessioner (JWT), cookiedialog, ljust och mörkt tema.
- Kantiga former, företagsfärger och kundens egna typsnitt som bindande designsystem.
Utveckling
Under utveckling sedan början av maj 2026, med omkring 195 commits. Under sommaren blev en frontend-prototyp en produktionsklar app med adminområde, databas, e-postutskick och iPad-optimering. Mässläget tillkom i september.
Demon ovan visar den riktiga designen (flaska, etikett, typsnitt, produktblad). Flödet är ett eget bygge; förfrågningarna och företagslogotyperna i valet är påhittade, och inget sparas.
Private Label Konfigurator
Private label-konfigurator: ditt eget dryckesvarumärke, med en AI-receptagent som inte hittar på något.
Den som vill bygga ett eget dryckesvarumärke har oftast en smakidé och många öppna frågor: vilken flaska, vilken minsta mängd, fungerar receptet ens? Konfiguratorn svarar i ett enda flöde, och tillverkaren får en komplett förfrågan i stället för ett vagt mejl.
Dra i reglagen tills en varning dyker upp, låt Auto-Balance lösa den och be sedan Shotty om en shot på ”Mango, Ingwer, Sanddorn”. Se hur den utelämnar ingrediensen den inte känner till.
Utgångsläge och mål
En ekologisk dryckestillverkare erbjuder private label och creator brands: strategi, recept, förpackning och produktionsplanering från ett och samma ställe. Det betydde tidigare mediebrott, följdfrågor och förfrågningar som först efter flera rundor blev tillförlitliga.
Konfiguratorn är därför ett kvalificeringsverktyg, inte bara ett formulär. Måttet på framgång är en kvalificerad förfrågan som redan tänker smak, recept, förpackning, etikett och mängd tillsammans, och köparen får återkoppling direkt i stället för att vänta på svar.
Konfiguratorn
Produktkategori
Åtta kategorier som brickor, från fruktjuicer via spritzer, shots och kombucha till ättikor. Teamet kan döpa om, dölja, sortera och lägga till.
Smakprofil
Sex reglage, kärningredienser, receptagenten Shotty och matchande produkter ur sortimentet. Steget kan hoppas över.
Förpackning, förslutning, kvalitet
Engångsglas, returglas, burk eller kartong, fyllnadsstorlek, förslutning, kolsyra och ekologisk kvalitetsnivå. Bara mallar som teamet frisläppt för vald kategori visas.
Etikett och design
Etikettyp beroende på förpackning, logotyp, text, huvudfärg och live-förhandsvisning. Etikettens minsta mängd skjuter upp minsta fyllnadsmängd; reglaget kan aldrig hamna under den.
Kontakt och förfrågan
Företag, kontaktperson, mängd i liter, st eller pallar (kopplade), önskat leveransdatum. Förfrågan når teamet med smakprofil, ingredienser och bästa träffar, på begäran som kopia till kunden.
Live-kalkyl
Minsta fyllnadsmängd i liter, och därav antal enheter efter fyllnadsförlust samt pallar. Förhållandena kommer från förpackningsmallarna.
Inrikes och export
Samma fysiska flaska kan köras som retur på hemmamarknaden och som engångs för export. En växel visas bara när kategorin har minst en mall med exportpost; vald marknad följer med i förfrågan. Även kolsyran är datadriven: tillåten när vald mall tillåter den.
Shotty: AI utan hallucinationer
Shotty består av två samverkande agenter, båda uteslutande på det certifierade råvaruraster med 138 ekologiska ingredienser. Regeln ”inga hallucinationer, ingen gissning” är inte ett önskemål i prompten utan tekniskt påtvingad.
Receptagent (överallt på sidan)
En widget med fyra format (shot, smoothie, spritzer, bubblande) och fyra guidade steg, eller fri text. En synonymtolk mappar vardagsord som mango, ingefära eller fläderblom till exakta katalognamn; allt okänt rapporteras öppet och utelämnas.
Resultatkort
Namn (högst fem ord, inga fraser), kategori, tagline, ingredienser med mängd och enhet, sensorisk profil med primär smak, ton, textur och eftersmak, samt en kort förklaring till varför det fungerar.
Assistent i smaksteget
Känner kategori, profil, balanspoäng, aktiva varningar och valda ingredienser. Svarar med expertråd, upp till tre ingredienser, absoluta reglagevärden och, när det är rimligt, ett förpackningsförslag. Allt kan tillämpas med ett klick.
Hård kontroll på servern
Prompten byggs av persona, villkor, sluten katalog och användarens brief, och Claude levererar enbart JSON. Därefter måste varje ingrediens finnas ordagrant i katalogen, annars avvisar servern svaret. Det är det egentliga beviset, inte prompten.
Skyddsräcken
Hälsningar besvaras vänligt, off-topic styrs artigt tillbaka till recept, redan skapade namn upprepas inte. Under väntetiden visar Shotty meningar som passar den aktuella profilen.
Smakprofiler och balansmotor
Sex dimensioner från 0 till 100: sötma, bitterhet, syra, hetta, fruktighet, kolsyra. Varje kategori har egen startprofil, egen ordning och egen ingredienslista; kolsyran visas bara för läskedrycker och kombucha, kefir. De namngivna startpunkterna (”Ingefära-citron”, ”Fläderblomsbubbel”) är beräknade från riktiga produkter med samma algoritm som matchningen.
Motorn följer smakhjulsteorin: sötma balanserar bitterhet och syra, hetta behöver sötma som bärare, syra lyfter fruktigheten, kolsyra skärper syran. Dessutom finns hårda regler där det senast flyttade reglaget vinner, så att inget hoppar under fingret.
- Hårda regler: sötma plus bitterhet högst 100, sötma plus syra högst 110, hetta högst dubbelt så hög som sötman, fruktighetstaket sjunker med bitterheten.
- Sex varningar, till exempel ”hetta behöver sötma” eller ”platt profil”, och en balanspoäng från 0 till 100.
- Auto-balans: iterativt, högst sex varv, växelvis höja balanserarna och sänka de aggressiva.
- Kärningredienser: en till sex av 57 kanoniska råvaror med smakvektor; profilen förutsägs ur dem, rekommendationer kommer från närheten till målprofilen.
Produktmatchning som lead-signal
Varje riktig produkt hos tillverkaren mappas via sin ingredienslista till kanoniska ingredienser och får en härledd smakprofil. Träffen består av 40 procent smaklikhet, 35 procent gemensamma ingredienser och 25 procent balanskompatibilitet; de fem bästa dedupliceras på produktnamn.
Resultatet följer med i förfrågan: ”Önskat recept ligger till 87 procent hos produkt X.” För försäljningen är det en pålitlig signal om hur nära önskemålet ligger det befintliga sortimentet.
Adminkonsol
Förpackningsmallar
Cirka 40 mallar med storlek, typ (engång, retur, inrikes, export), förslutningar, kolsyra, minsta fyllnad, enheter, pallar, etikettalternativ per kategori och minsta beställning. En ”beräkna”-hjälp uppskattar enheter och pallar från lika stora mallar, en live-förhandsvisning visar vad kunden ser.
Bilder och kategorier
PNG-uppladdning till privat lagring, ersätt under samma namn, radera som flytt (ingen dataförlust) och en översikt över vilken mall som använder vilken bild. Kategorier kan underhållas i ordning, namn och beskrivning (tvåspråkigt), ikon och synlighet.
Förfrågningar
Inkommande förfrågningar, nyast först, med kontakt, full konfiguration, smakblock inklusive Shotty-historik och logotypnedladdning. Arkivera, återställ och slutgiltig radering bara för arkiverade poster.
Åtkomst
Skyddat via middleware och roll, inloggning med e-post och lösenord eller via Azure AD, lösenordsåterställning, ljust och mörkt.
Tvåspråkigt
Gränssnittet körs på tyska och engelska, med växel i sidhuvudet och en central ordbok. Även datan är tvåspråkig: ingrediensetiketter, startpunkter, kategorinamn och -beskrivningar, produktkatalogen, Shotty-chatten med synonymtolken och AI-svaren. Mejl till team och kund kommer på förfrågans språk.
Teknik och drift
- Next.js 16 (App Router), React och TypeScript, Tailwind med shadcn och Radix, Framer Motion och Lenis.
- Claude via Anthropic SDK, strukturerade JSON-svar, validerade på servern; modell och prompter ligger i koden.
- Förfrågningar och logotyper i privat Vercel Blob, bilder levereras via en proxy.
- Supabase Auth med Azure AD OAuth för adminområdet.
- Resend för tvåspråkiga HTML-mejl till teamet och, på begäran, kunder.
- Hosting och analys på Vercel; SEO med sitemap, JSON-LD och llms.txt.
Om demon
Demon ovan kör den riktiga koden för balansmotorn och produktmatchningen, så reglage, varningar, poäng och träffar reagerar live. Shotty svarar här ur motorns regler i stället för en modell; startsidan, förpackningsmallarna och etikettsteget motsvarar produkten; råvarukatalog, produkter och förfrågningar är påhittade, och inget sparas.
Kundenplaner
Kundplaneraren: nästa års omsättning och villkor, planerade av dem som känner kunderna.
Årsplanering i försäljningen misslyckas sällan på matematiken. Den misslyckas på vägarna: siffrorna finns i ett internt system, folket är ute och det de vet står i inget kalkylblad. Kundplaneraren för ihop båda: en modell som föreslår ett värde för varje kund och ett team som rättar det med det de vet.
Byt kanal, öppna en kund, ändra prognosen och spara. Titta sedan i teamdashboarden och chefsvyn: din post finns där.
Utgångsläge och mål
En dryckestillverkare planerar omsättningen per försäljningskanal och per kund. Data finns i ett internt SQL Server-system; fältsäljarna arbetar på resande fot på surfplattor utan VPN. Det betydde kalkylblad via e-post, följdfrågor och ett underlag som redan var gammalt när det sammanfördes.
Målet var en enda plats där prognoser och villkor tas fram, versionerade, med ledningens vy mot kanalmålen och ett godkännande där villkoren avviker från standard.
Vad verktyget kan
Kundplanering med kanalväxlare
Tre försäljningskanaler, var och en med egen färg och eget mål. Kundlistan visar fjolårets omsättning, historisk tillväxt, villkor och prognosstatus; filtrera på kritikalitet (nyckelkund med klumprisk, tillväxt, vikande, stabil) och sök.
Modellvärde och överskrivning
För varje kund föreslår en tillväxtmodell omsättningstakten, kalibrerad mot kanalens målnivå. Fältsäljaren skriver över den med takt och fritext. Öppna kunder räknas med modellen, inlämnade med prognosen, och båda är markerade överallt.
Villkor med godkännande
Standardreklambidrag, avvikande värde med motivering och för nyckelkunder fakturarabatt, kassarabatt och övriga rabatter. Ett värde över standard skapar automatiskt en godkännandeförfrågan.
Teamdashboard
Inlämningsstatus, total omsättning och villkor, täckning per kanalmål och ett Pareto-diagram: hur många kunder bär 80 % av omsättningen och vilka av dem är redan planerade?
Chefsvy
Alla inlämningar med medarbetare, takt, omsättning, fritext och tidsstämpel, filtrerbara per medarbetare. Dessutom dashboarden för omsättning och villkor med netto per kanal och kund.
Verktyg för innesäljet
Fakturakontroll mot villkoret som gällde på fakturadatum, godkännandekö, kreditnotor, utgående villkor, trafikljusöversikt och avstämning mellan prognos och utfall.
Kundrapport
En PDF per kund med utveckling, toppprodukter, prognos och villkor, skapad i webbläsaren.
Hur det hänger ihop
Fältsäljarnas enheter når inte det interna systemet. Därför skriver ett nattligt jobb kunder samt års-, månads- och produktomsättning till en molndatabas. Jobbet körs i en enda transaktion: en avbruten körning lämnar inget halvt tillstånd.
Appen läser bara den cachen och skriver sina egna data bredvid: aktuell prognos per kund och, vid varje sparning, en rad i historiken. Därur går det att svara på vilket villkor som gällde ett visst fakturadatum.
Teknik
- Next.js 16 (App Router, route handlers), React 19, TypeScript, Tailwind CSS 4
- Neon (serverless PostgreSQL) med Drizzle ORM; cache-tabeller skrivskyddade, inmatning och historik separat
- NextAuth med roller (fältsälj, innesälj, chef), ruttskydd via proxy, rollkontroll i varje API-rutt
- Nattlig Node-synk från SQL Server till Postgres, atomär via en WebSocket-transaktion
- Recharts för Pareto och utveckling, pdfmake för kundrapporten
- Vercel-hosting med förhandsvisning per gren; nåbar på surfplattor utan VPN
Vad demon visar
Demon använder den riktiga prognosmodellen och vyerna, med påhittade kunder, personer och siffror från en JSON-fil som speglar den riktiga databasens struktur. En prognos du sparar dyker upp i teamdashboarden och chefsvyn; inget lämnar webbläsaren.
Produktionsplanung
Produktionsplanering: hur många månader räcker lagret, artikel för artikel, innan tappningen måste köras.
Produktionsplanering är frågan om vilken artikel som måste tappas härnäst innan den tar slut. Svaret fanns i en Excel-arbetsbok sammansatt av flera frågor. Dashboarden räknar samma logik och gör den filtrerbar, snabb och lika för alla planerare.
Sortera efter räckvidd, filtrera på en flaskstorlek, klicka sedan på en fyllplansmängd och ändra den. Se hur räckvidd och förpackningsvyn reagerar.
Utgångsläge och mål
En dryckestillverkare tappar flera hundra artiklar i många förpackningar och storlekar, för det egna varumärket och för handelsmärken. Planerarna tittade tidigare i en arbetsbok som förde samman öppna order, försäljningsprognos och aktuellt lager, med pivot-slicers och villkorsstyrd formatering. Den var kraftfull men bunden till en person och en dator.
Målet var att ta över arbetsbokens logik rakt av, kontrollera resultaten mot Excel-värdena och göra en webbapplikation som får färsk data varje natt och visar samma sak för varje planerare.
Vad verktyget kan
Räckvidd i månader, två perspektiv
Lager plus redan planerad tappning och behovet ger räckvidden, dels ur säljplanen och dels ur de senaste månadernas försäljning. Fem nivåer från kritisk (under en månad) till överlager (över fyra), i de färger planerarna känner från Excel.
Slicers och sök
Flaskstorlek, engångs/retur och varumärke som flervalsslicers, plus sök över artikel och recept. KPI-rutorna (kritisk, varning, snittäckvidd, överlager) följer filtret.
Ändra fyllplanen på plats
Planerad fyllmängd kan redigeras i tabellen. Det som redan är planerat räknas som lager, så räckvidd, nettobehov och summorna i förpackningsvyn flyttar sig direkt.
Förpackningsvy
Lager, prognos, nettobehov, fyllplan och räckvidd per förpackningstyp, med två diagram: räckvidd och fyllplan per förpackning. Var sitter flaskhalsen, i flaskan eller kartongen?
Faktiska order
De order som faktiskt planerats och tappats på linjerna: per kalendervecka, per linje, efter status och kvalitet, med orderlista. Så ser planeraren vad som verkligen körs bredvid förslaget.
Lätt
Frågorna är dyra. Därför bygger en nattlig körning en JSON-cache och gränssnittet läser bara den filen. Om en körning misslyckas ligger det senaste fungerande läget kvar.
Hur det hänger ihop
Datan kommer från två vyer i affärssystemet på en SQL Server: produktionsförslagen och det faktiska produktionsutfallet. Ett skript frågar dem på natten och skriver en JSON-fil; appens API-rutter levererar filen och faller tillbaka på liveförfrågan först utan cache.
Samma rutter matar en separat ledningsdashboard, därför äger planeringsappen det gränssnittet. Formlerna finns på ett ställe och är kontrollerade mot Excel-värdena.
Teknik
- Next.js 16 (App Router, Route Handlers), React 19, TypeScript, Tailwind CSS 4, shadcn/ui
- Recharts för diagrammen, ljust/mörkt läge, slicers och redigerbar tabell utan tabellbibliotek
- SQL Server via mssql med gemensam anslutningspool; nattlig JSON-cache via cron, skriven atomärt
- Beräkningslogik på ett ställe, kontrollerad mot Excel-testvärdena
- Egen drift bakom en reverse proxy; separata appar delar en domän
Vad demon visar
Demon använder de riktiga formlerna och vyerna, med påhittade artiklar, varumärken och mängder ur en JSON-fil som speglar den riktiga datans struktur och spridning. En fyllplansmängd du ändrar slår igenom på räckvidd och förpackningsvyn; ingenting lämnar webbläsaren.
Vertriebs-Dashboard
Försäljningsdashboard: volym och omsättning filtrerade live, med en agent som själv frågar data.
Säljstyrning misslyckas sällan på brist på data. Den misslyckas för att data bara kommer som exporter och rapporter: en månad gamla, inte filtrerbara, utan följdfrågor. Dashboarden lägger ett interaktivt lager över rapportsystemet, och en agent svarar på de frågor någon annars skulle behöva bygga en rapport för.
Växla mellan omsättning och volym, välj ett år och ett varumärke, öppna en kund. Fråga sedan agenten efter de tio största kunderna och följ dess länk.
Utgångsläge och mål
En dryckestillverkare analyserar volym och omsättning per kund, artikel, varumärke och försäljningskanal. Det betydde Excel-exporter och Power BI-rapporter utan realtidsinteraktion, och avvikelser på artikelnivå förblev ofta dolda till månadsavslutet.
Målet var ett verktyg för operativa användare i försäljningen: aktuella siffror, fritt filtrerbara, med jämförelse mot föregående år och prognos, i webbläsaren utan installation.
Vad verktyget kan
Dashboard
Fyra nyckeltal, omsättningsutveckling, årsjämförelse, säsong som värmekarta, tillväxt mot föregående år, andelar per artikelgrupp, kanal och varumärke. En omkopplare växlar alla vyer mellan omsättning och volym.
Filter och djuplänkar
Sju filterdimensioner från år till kund. Varje vy med sitt filterläge ligger i URL:en och kan delas som länk.
Rankningar med föregående år
Kunder, artiklar och säljgrupper mot föregående år med utveckling och omsättningsandel, plus detaljpaneler per kund, artikel, varumärke eller kanal.
Prognos
Framskrivning från månaderna hittills med säsongsindex, reglage för tillväxt och avgång, flerårsvy till 2030 och en AI-stödd scenarioanalys.
Omsättnings- och personalplanerare
Trend mot strategibana per säljgrupp, fältsäljkapacitet och personalkostnad, budgetfördelning över år och kanaler, allt att spela igenom.
AI-agent
Svarar på frågor på tyska, anropar datakällorna live, kedjar flera frågor och ger tabeller med länk till rätt vy. Svar kan betygsättas.
Hur det hänger ihop
Siffrorna kommer från ett SQL Server-rapportsystem med långt över en miljon rader. Därför aggregerar servern i SQL i stället för att skicka ett urval till webbläsaren: summor och rankningar stämmer även för sällsynta filterkombinationer. Dyra frågor ligger i en cache med trappade livslängder som värms upp efter varje driftsättning.
Agenten är ingen chattbot med kunskap i prompten. Den får appens ändpunkter som verktyg och frågar efter aktuella data för varje fråga; resultatet är lika aktuellt och lika filtrerat som dashboarden själv.
Teknik
- Next.js 16 (App Router, route handlers), React 19, TypeScript, Tailwind CSS 4
- SQL Server via mssql med anslutningspool, aggregering på servern, TTL-cache och uppvärmning
- Claude med verktygsanrop: egna ändpunkter som verktyg, upp till sex rundor, strömmade Markdown-svar
- PDF-export i webbläsaren (pdfmake), svarsbetyg lagrade utanför release-katalogen
- Standalone-bygge bakom nginx som systemd-tjänst, atomärt katalogbyte med hälsokontroll och rollback
- Tester för försäljningsomfånget och filterbyggaren mot en minnesdatabas
Vad demon visar
Demon använder den riktiga aggregerings-, prognos- och planerarlogiken med påhittade kunder, varumärken, artiklar och siffror från en JSON-fil. De interna vyerna (tabellkatalog, schema, uppdateringsstatus) kommer också från filen, med påhittade namn. Agenten svarar med lagrade svar och visar flödet; modellen är inte ansluten. Inget lämnar webbläsaren.
Reklamations-Management
Reklamationshantering: varje ärende i överblick, med en assistent som hittar prejudikatet.
Kvalitetsarbete misslyckas sällan på brist på data. Det misslyckas för att exporten ligger i ett kalkylblad: den som vill veta om en batch redan har uppmärksammats måste söka, filtrera och läsa. Motorn lägger ett analys- och assistanslager över så att svaret tar sekunder i stället för en dag.
Öppna dashboarden och klicka på ett år i fasdiagrammet. Be sedan frågevyn om de största leverantörerna och slå upp den senaste reklamationen i prejudikatagenten.
Utgångsläge och mål
Kvalitetsteamet hos en dryckestillverkare för reklamationer i ett kvalitetsledningssystem. För analys fanns en export som blev pivottabeller: ett nytt arbetssteg per fråga, och mönster över åren var svåra att se.
Målet var ett verktyg för kvalitetsteamet: siffror och trender direkt, varje ärende läsbart med alla fält, frågor på naturligt språk, och för varje ny reklamation en ledtråd om det finns ett prejudikat.
Vad verktyget kan
Dashboard
Fyra nyckeltal, utveckling av de vanligaste orsakerna, årstrend internt mot externt, öppna ärenden filtrerade på ålder och typ, största leverantörer, fasfördelning per år. Varje element leder filtrerat in i listan.
Lista och ärendedetalj
Fritextsökning över batch, artikel, leverantör och beskrivning, filter på typ, fas, orsak och period, leverantörsprofil med uppdelning, ärendedetalj med alla fält. Varje läge är länkbart.
Text-till-SQL
En fråga på tyska översätts till ett strukturerat filter och körs mot data, med förklarad SQL-motsvarighet, andelar och hopp till ärendet. Röstinmatning ingår.
AI-assistent
En chatt som känner igen mönster och rekommenderar åtgärder, baserad på nyckeltal och exempel ur bedömningarna av referensprover; svaret strömmar in som formaterad text.
Ärendeanalys
För varje ärende hittar systemet liknande avslutade ärenden, bedömer beslutet och ger en vägledning. Ärendenummer i svaret är klickbara.
Prejudikatagent
Bryter ner en reklamation i ett fingeravtryck och söker föregångare i tre steg (batch, mönster, textlikhet), med tidsviktning och typad rekommendation. Avvikelser från rekommendationen registreras med motivering.
Hur det hänger ihop
Data kommer live från rapportsystemet, med en statisk export som reserv om databasen inte nås. Analysen körs i webbläsaren över den inlästa mängden, så filter reagerar utan väntetid.
Språkmodellen ser aldrig hela mängden. Frågevyn låter den bygga ett filter som webbläsaren kör; assistenten får nyckeltal och ett urval; ärendeanalysen får de mest liknande ärendena. Prejudikatagenten klarar sig helt utan modell: den räknar regelbaserat och är därför spårbar.
Teknik
- Next.js 16 (App Router, route handlers), React 19, TypeScript, Tailwind CSS 4, Recharts
- SQL Server via mssql med anslutningspool, statisk export som reserv vid avbrott
- Claude för frågeöversättning, assistent och ärendeanalys, strömmade Markdown-svar
- Regelbaserad prejudikatmatchning: batchjämförelse, arketyp, Jaccard-textlikhet, tidsviktning
- Röstinmatning via Web Speech API, djuplänkar för varje filterläge
- Standalone-bygge bakom nginx i företagsnätet
Vad demon visar
Demon använder den riktiga filter-, aggregerings- och matchningslogiken med påhittade reklamationer, leverantörer, artiklar och batcher från en JSON-fil. Frågevyn och assistenten svarar med lagrade resultat och visar flödet; modellen är inte ansluten. Prejudikatagenten räknar på riktigt i webbläsaren. Inget lämnar webbläsaren.
Die 3D-Biene
3D-biet: en liten figur som flyger längs en bana, vingar och allt.
En lek med allvarlig kärna: hur får man in en liten 3D-figur på en webbsida utan att tynga ner sidan? Biet är svaret, en 1,4 MB stor modell med animerade vingar och en flygning som känns gjord för det.
Dra flygreglaget, byt till ”Rita bana”, dra en linje över ytan och släpp. Klicka sedan på några blommor och se hur det samlar dem. Vrid till sist på biet i ”Titta i 3D”.
Vad det är
Biet är en glTF-3D-fil som jag modellerat i tre dimensioner. Det är den lilla hjälparen till min nomonkey-maskot på nya nomonkey.work (version 2.0, under förberedelse) och samtidigt ett bevis på att 3D på webben kan vara lätt och ändå vackert.
Hur det flyger
- En Catmull-Rom-kurva med fem punkter anger vägen; biet lutar sig in i svängen och landar mjukt på en blomma.
- Vingarna är ett eget animationsklipp vars fart går mot noll vid landning.
- En mjuk kontaktskugga ritas lokalt och bäddas aldrig in i modellen.
- Belysning från en rumsmiljö i stället för tunga texturer; reducerad rörelse pausar vingarna.
Studien
Originalstudien kan mer: flygningen följer sidans scroll, du kan rita en egen bana, släppa blommor som biet flyger till och se modellen från alla sidor. Här körs en kompakt version med flygning, rita bana, blommor och 3D-vy; bara scroll-flygningen stannar i studien.