AI Content Editing System - Architektur
Executive Overview — all summaries for decision-makers.
🎯 Ziel
Ein AI-gestütztes Content-Editing-System, das:
- ✅ Inhalte auf Basis von User-Anweisungen überarbeitet
- ✅ Automatisch Abhängigkeiten und Auswirkungen erkennt
- ✅ Folgeänderungen vorschlägt und durchführt
- ✅ Vollständige Rollback-Funktion bietet
- ✅ Super einfach zu bedienen ist
🏗️ Architektur-Prinzipien
1. Modularität
- Kleine, wartbare Dateien (max. 200 Zeilen)
- Klare Verantwortlichkeiten
- Wiederverwendbare Komponenten
2. Versionierung
- Jede Änderung wird versioniert
- Vollständige Change History
- Rollback auf jede Version möglich
3. User Experience
- Ein-Klick AI-Bearbeitung
- Klare Vorschau vor Änderungen
- Transparente Impact-Analyse
- Einfacher Rollback
📦 Backend-Architektur
Datenbank-Schema: Change History
prisma
// backend/prisma/schema/change-history.prisma
model ChangeHistory {
id String @id @default(cuid())
// What was changed
entityType String // "Policy", "Risk", "Control", "SOP", etc.
entityId String // ID of the changed entity
// Change details
changeType String // "AI_EDIT", "MANUAL_EDIT", "AI_CASCADE"
fieldName String? // Which field was changed (optional)
// Versions
previousValue Json // Old value (full object or field)
newValue Json // New value (full object or field)
// AI Context
aiInstruction String? @db.Text // User's instruction to AI
aiReasoning String? @db.Text // AI's reasoning for the change
// Impact tracking
relatedChanges String[] // IDs of related ChangeHistory entries
// Metadata
userId String
user User @relation(fields: [userId], references: [id])
createdAt DateTime @default(now())
// Rollback tracking
rolledBackAt DateTime?
rolledBackBy String?
@@index([entityType, entityId])
@@index([userId])
@@index([createdAt])
}Service-Layer (Backend)
backend/src/services/ai-editing/
├── ai-content-editor.ts # Core AI editing logic
├── ai-impact-analyzer.ts # Dependency & impact analysis
├── change-history-manager.ts # Version management
├── rollback-service.ts # Rollback orchestration
└── types.ts # Shared types🎨 Frontend-Architektur
Component-Struktur
src/components/ai-editing/
├── ai-edit-button.tsx # Button für AI-Bearbeitung
├── ai-edit-dialog.tsx # Dialog für Anweisungen
├── ai-preview-panel.tsx # Vorschau der Änderungen
├── impact-analysis-panel.tsx # Zeigt betroffene Bereiche
├── change-history-panel.tsx # Änderungshistorie
├── rollback-dialog.tsx # Rollback-Bestätigung
└── types.ts # Shared typesAPI-Layer
src/api/ai-editing.ts # API calls für AI-Editing🔄 User Flow
1. AI-Bearbeitung starten
User auf Policy-Detail-Seite
→ Klickt "Mit AI bearbeiten" Button
→ Dialog öffnet sich
→ User gibt Anweisung ein: "Füge Abschnitt über DSGVO hinzu"2. AI verarbeitet Anweisung
Frontend sendet Request
→ Backend: AI Content Editor analysiert Inhalt
→ AI generiert neue Version
→ Impact Analyzer prüft Abhängigkeiten
→ Findet: Control XYZ, Risk ABC betroffen3. Vorschau & Bestätigung
User sieht:
✓ Vorschau der geänderten Policy
✓ Liste betroffener Bereiche
✓ Vorgeschlagene Folgeänderungen
User kann:
→ Änderungen akzeptieren
→ Folgeänderungen auswählen
→ Abbrechen4. Änderungen durchführen
User bestätigt
→ Change History Entry erstellt
→ Policy wird aktualisiert
→ Optional: Folgeänderungen durchgeführt
→ Success-Nachricht5. Rollback (falls nötig)
User öffnet Change History
→ Sieht alle Änderungen
→ Klickt "Rückgängig machen"
→ Bestätigt Rollback
→ Alte Version wird wiederhergestellt📋 Nächste Schritte
- ✅ Prisma Schema erweitern (ChangeHistory)
- ✅ Backend Services implementieren
- ✅ Frontend Components erstellen
- ✅ Integration in bestehende Seiten
- ✅ Testing & Dokumentation