Komponentoversigt

Dit Digitale Køkken

Surdej er en platform — ikke én enkelt applikation. Den består af flere uafhængigt deploybare komponenter, der tilsammen leverer en samlet brugeroplevelse.

Arkitektur

Platformen på ét blik

Ét visuelt udtryk, overalt. Extensions er tynde broer. Alt er en kommando.

                     ┌───────────────────────────────────────────┐
                     │           happymates.net domæne           │
                     │                                           │
     ai.happymates   │  api.happymates    │  *.tool.happymates   │
    ┌────────────┐   │  ┌──────────────┐  │  ┌───────────────┐  │
    │  Frontend   │──│─▶│   API        │  │  │  Tools        │  │
    │  (appen)    │  │  │  (hjernen)   │  │  │  (mini-apps)  │  │
    └────────────┘   │  └──────┬───────┘  │  └───────────────┘  │
                     │         │          │        ▲            │
                     │    Workers, AI,    │   (iframe bridge)   │
                     │    database, etc.  │                     │
                     └───────────────────────────────────────────┘
                                   ▲
              ┌────────────────────┼────────────────────┐
              │                    │                    │
     Browser Extension     Office Add-ins       InDesign Plugin
      (Chrome/Edge)      (Word, Excel, PPT)       (Adobe UXP)

API

Backend — al data, forretningslogik og AI-processering

Stabile releases, max ugentligt

Frontend

Webapplikationen brugerne arbejder i

Stabil release med API + løbende opdateringer

Tools

Client-only mini-apps indlejret i frontend via iframe

Uafhængige release-cyklusser

Browser Extension

Chrome/Edge sidebar til AI-adgang fra enhver webside

Meget sjældent

Office Add-ins

Task panes til Word, Excel, PowerPoint, Outlook

Meget sjældent

InDesign Plugin

Adobe InDesign panel til AI-assisteret publicering

Meget sjældent

Ét visuelt udtryk, overalt

Skin-systemet styrer branding, farver, sidebar og tema fra ét centralt sted. Ændr det én gang — det slår igennem på tværs af frontend, tools og indlejrede flader.

Frontend kan udvides med tools

Tools er selvstændige applikationer, der loades i frontend via en iframe. De har deres egen URL og kan udvikles uafhængigt. Tools er client-only — de tilgår storage, NoSQL, AI og andre services via en bridge-kommunikation.

Extensions er tynde broer

Browser extensions og Office add-ins indeholder minimal logik. De forbinder sig til API'et og genbruger samme AI, data og processering som hovedfrontend.

Alt er en kommando

Navigation, handlinger og tastaturgenveje er alle registrerede kommandoer. Sidebaren er blot en liste af kommando-ID'er — udskift listen, og hele appen skifter karakter.

API — Hjernen

api.happymates.net

API'et er en Fastify-server, der fungerer som det eneste integrationspunkt for alle klienter. Intet taler direkte med databasen eller beskedbus'en undtagen API'et og dets workers.

Runtime

Node.js 22, Fastify

Database

PostgreSQL 15 + pgvector (Prisma)

Beskedbus

NATS JetStream

Auth

Microsoft Entra ID (MSAL)

Vercel AI SDK, Azure OpenAI

Port

5001 (dev), 443 (prod)

Worker-arkitektur

Tunge beregningsopgaver (PDF-processering, AI-orkestrering, datahøsting) kører som separate worker-processer. Workers registrerer sig selv via NATS, og API'et auto-opdager og load-balancerer til dem. Hver worker ejer sit eget Prisma-skema — ingen delte tabeller.

API opstart
  ├── Core plugins (auth, skins, chat, knowledge)
  ├── Domain plugins (auto-opdaget fra domains/)
  ├── Worker registry (lytter efter NATS-registreringer)
  └── Module gateway (proxyer /api/module/<name>/* → worker)

Module gateway mønster

Selvregistrerende moduler (som DreamBuilder eller Tool Management) får automatisk deres trafik proxyet:

Frontend → GET /api/module/dreambuilder/dreams
        → API gateway proxyer → dreambuilder-worker:7010

Releasekadence

API'et er den mest stabile komponent. Det kører baggrundsworkers, sikrer dataintegritet og hoster AI-processering. Opdateringer er planlagte og deployes højst ugentligt. Breaking changes versioneres.

Frontend — Appen

ai.happymates.net

Frontend er en React 19 SPA bygget med Vite. Den er den primære brugergrænseflade og vært for indlejrede tools. Frontend tilgår aldrig databasen direkte — al data flyder gennem API'et.

Framework

React 19, Vite 7

Styling

Tailwind CSS, Shadcn UI

Ikoner

Lucide React

State

React Context + Zustand

Port

4001 (dev), 443 (prod)

Kommandosystemet

Hver side og handling er en registreret kommando med ID, titel, ikon og synlighedsbetingelse. Kommandopaletten (⌘K) giver fuzzy-søgning på tværs af alle kommandoer. Navigation sker ved at eksekvere kommandoer — ikke ved at linke til URL'er.

commandRegistry.register({
    id: 'dreambuilder.dreams.list',
    title: 'Mine Drømme',
    icon: 'Sparkles',
    when: 'isAuthenticated',
    handler: () => navigate('/dreambuilder/dreams'),
});

Skin-systemet

En skin definerer hvad brugeren ser — appnavn, logo, farver, fonte, og hvilke kommandoer der vises i sidebaren. Skins gemmes i databasen og kan klones og tilpasses pr. bruger eller tenant. Skift skin — og hele appens personlighed ændres uden kodeændringer.

Skin = {
    branding: { appName, logo, primaryColor, fontFamily }
    sidebar:  [{ commandId: 'navigate.knowledge.articles' }, ...]
    theme:    { defaultMode: 'light' | 'dark' }
}

Releasekadence

Frontend udgives i en stabil version sammen med hver API-release, men kan også opdateres løbende med UI-forbedringer, der ikke kræver API-ændringer.

Domæneudvidelse

Nye features tilføjes som domæner. Hvert domæne leverer et manifest, der deklarerer kommandoer, routes og sidebar-elementer. Frontend opdager domæner ved build-tid og kobler dem til automatisk.

Tools — Mini-applikationer

*.tool.happymates.net

Tools er client-only miniapplikationer designet til at blive loaded i frontend via en iframe. De har deres egen URL, egen release-cyklus og egen kodebase — men deler platformens visuelle identitet og autentificering.

Bridge-mønstret

Tools har ingen egen backend. De kører udelukkende i brugerens browser. Når et tool har brug for data, storage, NoSQL, AI eller andre server-side services, sker det via en bridge — en struktureret postMessage-kommunikation mellem tool-iframen og host-frontend.

┌──────────────────────────────────────────────────┐
│  Frontend (ai.happymates.net)                    │
│                                                  │
│   ┌──────────────────────────────────────────┐   │
│   │  Tool iframe (redata.tool.happymates.net)│   │
│   │                                          │   │
│   │  "Jeg har brug for data"                 │   │
│   │       │  postMessage (bridge request)    │   │
│   └───────┼──────────────────────────────────┘   │
│           ▼                                      │
│   Bridge handler → API kald (fetch)              │
│           ▼                                      │
│   api.happymates.net/api/...                     │
└──────────────────────────────────────────────────┘

Tool Management framework

Platformen inkluderer et framework til at bygge AI-drevne tools. Hvert tool kan være:

Single-prompt

Simpelt input → AI-svar med konfigureret tool-adgang

Workflow

Flertrinsproces med per-trin system prompts, dataskemaer og toolsæt

Edge-komponenter

Tynde Broer til Verden

Extensions indeholder minimal logik. Intelligensen bor server-side.

Browser Extension

En Chrome/Edge-extension (Manifest v3) der giver Surdej AI-adgang fra enhver webside via et sidebar-panel. Extension er en tynd skal — den sender forespørgsler til API'et og renderer svar.

Arkitektur

Service worker + side panel + content script

React 19

Konfiguration

Konfigurerbar API-endpoint

Side panel — hoved-UIContent script — kontekstudtrækService worker — livscyklusstyring

Office Add-ins

Task pane add-ins der bringer Surdej AI ind i Microsoft 365-applikationer. Hver app har et dedikeret XML-manifest og et sæt MCP-tools tilpasset appens objektmodel.

Worker

Fastify, port 7008, NATS

Bridge

WebSocket

API

Office.js (Word.run, Excel.run...)

Flow

Task pane → WebSocket → Worker → AI

Word

Typografier, områder, markeringer, dokumentstruktur

Excel

Celler, diagrammer, markeringer, formler

PowerPoint

Slides, figurer, markeringer, layouts

Outlook

Beskedskrivning, vedhæftninger, kalender

Adobe InDesign Plugin

Et UXP-plugin der forbinder Adobe InDesign med Surdej AI til publiceringsworkflows. UXP-plugin hoster en iframe der peger på Surdej-frontend. AI chat kalder InDesign-specifikke tools (udtræk tekst, manipulér layout). Kommandoer relayeres til InDesigns scripting-engine.

Worker

Fastify, port 7007, NATS

Bridge

postMessage (UXP iframe)

API

InDesign scripting (dokumenter, sider, tekstrammer)

URL-struktur

Alle services kører bag Cloudflare på happymates.net-domænet.

URL	Komponent	Formål
ai.happymates.net	Frontend	Hovedwebapplikationen
api.happymates.net	API	Backend-services, auth, AI, data
redata.tool.happymates.net	ReData Tool	PDF-raffineri og databehandling
*.tool.happymates.net	Kommende tools	Yderligere selvstændige tools

                    happymates.net
                        │
          ┌─────────────┼─────────────────┐
          │             │                 │
  ai.happymates   api.happymates   *.tool.happymates
    Frontend           API              Tools
          │             │           (client-only,
          │             │            iframe bridge)
          └──────────── │ ────────────────┘
                        │
                   ┌────┴────┐
                   │ Workers │ (interne, ikke offentligt routet)
                   │ NATS    │
                   │ Postgres│
                   │ Redis   │
                   └─────────┘

Release- og opdateringsmodel

Core

API + Workers

Max ugentligt, planlagte releases

Høj — dataintegritet, forretningslogik

Shell

Frontend

Stabil med core + løbende UI-rettelser

Medium — brugervendt, ingen datarisiko

Tools

Selvstændige client-only apps

Uafhængig pr. tool

Lav — isolerede, ingen core-afhængigheder

Edges

Extension, Office, InDesign

Meget sjældent

Lav — tynde broer, minimal logik

Opdelingen betyder at API'et kan låses og testes grundigt, mens frontend løbende kan modtage forbedringer. Tools udgives på egne skemaer. Edge-komponenter (extensions, add-ins) behøver kun opdateringer, når bridge-protokollen ændres.