diff --git a/developer-portal/.dockerignore b/developer-portal/.dockerignore
new file mode 100644
index 0000000..e421be9
--- /dev/null
+++ b/developer-portal/.dockerignore
@@ -0,0 +1,8 @@
+node_modules
+.next
+.git
+.gitignore
+README.md
+*.log
+.env.local
+.env.*.local
diff --git a/developer-portal/Dockerfile b/developer-portal/Dockerfile
new file mode 100644
index 0000000..20267ee
--- /dev/null
+++ b/developer-portal/Dockerfile
@@ -0,0 +1,45 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json* ./
+
+# Install dependencies
+RUN npm install
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+# Set to production
+ENV NODE_ENV=production
+
+# Create non-root user
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy built assets
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Switch to non-root user
+USER nextjs
+
+# Expose port
+EXPOSE 3000
+
+# Set hostname
+ENV HOSTNAME="0.0.0.0"
+
+# Start the application
+CMD ["node", "server.js"]
diff --git a/developer-portal/app/api/export/page.tsx b/developer-portal/app/api/export/page.tsx
new file mode 100644
index 0000000..368768d
--- /dev/null
+++ b/developer-portal/app/api/export/page.tsx
@@ -0,0 +1,271 @@
+import { DevPortalLayout, ApiEndpoint, CodeBlock, ParameterTable, InfoBox } from '@/components/DevPortalLayout'
+
+export default function ExportApiPage() {
+ return (
+
+ Uebersicht
+
+ Die Export API ermoeglicht den Download aller Compliance-Daten in
+ verschiedenen Formaten fuer Audits, Dokumentation und Archivierung.
+
+
+ Unterstuetzte Formate
+
+
+
+
+ Format
+ Beschreibung
+ Use Case
+
+
+
+
+ json
+ Kompletter State als JSON
+ Backup, Migration, API-Integration
+
+
+ pdf
+ Formatierter PDF-Report
+ Audits, Management-Reports
+
+
+ zip
+ Alle Dokumente als ZIP-Archiv
+ Vollstaendige Dokumentation
+
+
+
+
GET /export
+ Exportiert den aktuellen State im gewuenschten Format.
+
+ Query-Parameter
+ JSON Export
+
+ Request
+
+{`curl -X GET "https://api.breakpilot.io/sdk/v1/export?format=json&tenantId=your-tenant-id" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -o compliance-export.json`}
+
+
+ Response
+
+{`{
+ "exportedAt": "2026-02-04T12:00:00Z",
+ "version": "1.0.0",
+ "tenantId": "your-tenant-id",
+ "state": {
+ "currentPhase": 2,
+ "currentStep": "dsfa",
+ "completedSteps": [...],
+ "useCases": [...],
+ "risks": [...],
+ "controls": [...],
+ "dsfa": {...},
+ "toms": [...],
+ "vvt": [...]
+ },
+ "meta": {
+ "completionPercentage": 75,
+ "lastModified": "2026-02-04T11:55:00Z"
+ }
+}`}
+
+
+ PDF Export
+
+ Request
+
+{`curl -X GET "https://api.breakpilot.io/sdk/v1/export?format=pdf&tenantId=your-tenant-id§ions=dsfa,toms" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -o compliance-report.pdf`}
+
+
+ PDF Inhalt
+ Das generierte PDF enthaelt:
+
+ Deckblatt mit Tenant-Info und Exportdatum
+ Inhaltsverzeichnis
+ Executive Summary mit Fortschritt
+ Use Case Uebersicht
+ Risikoanalyse mit Matrix-Visualisierung
+ DSFA (falls generiert)
+ TOM-Katalog
+ VVT-Auszug
+ Checkpoint-Status
+
+
+
+ Das PDF folgt einem professionellen Audit-Layout mit Corporate Design.
+ Enterprise-Kunden koennen ein Custom-Logo und Farbschema konfigurieren.
+
+
+ ZIP Export
+
+ Request
+
+{`curl -X GET "https://api.breakpilot.io/sdk/v1/export?format=zip&tenantId=your-tenant-id" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -o compliance-export.zip`}
+
+
+ ZIP Struktur
+
+{`compliance-export/
+├── README.md
+├── state.json # Kompletter State
+├── summary.pdf # Executive Summary
+├── use-cases/
+│ ├── uc-1-ki-analyse.json
+│ └── uc-2-chatbot.json
+├── risks/
+│ ├── risk-matrix.pdf
+│ └── risks.json
+├── documents/
+│ ├── dsfa.pdf
+│ ├── dsfa.json
+│ ├── toms.pdf
+│ ├── toms.json
+│ ├── vvt.pdf
+│ └── vvt.json
+├── checkpoints/
+│ └── checkpoint-status.json
+└── audit-trail/
+ └── changes.json`}
+
+
+ SDK Integration
+
+{`import { useSDK, exportToPDF, exportToZIP, downloadExport } from '@breakpilot/compliance-sdk'
+
+// Option 1: Ueber den Hook
+function ExportButton() {
+ const { exportState } = useSDK()
+
+ const handlePDFExport = async () => {
+ const blob = await exportState('pdf')
+ downloadExport(blob, 'compliance-report.pdf')
+ }
+
+ const handleZIPExport = async () => {
+ const blob = await exportState('zip')
+ downloadExport(blob, 'compliance-export.zip')
+ }
+
+ const handleJSONExport = async () => {
+ const blob = await exportState('json')
+ downloadExport(blob, 'compliance-state.json')
+ }
+
+ return (
+
+ PDF Export
+ ZIP Export
+ JSON Export
+
+ )
+}
+
+// Option 2: Direkte Funktionen
+async function exportManually(state: SDKState) {
+ // PDF generieren
+ const pdfBlob = await exportToPDF(state)
+ downloadExport(pdfBlob, \`compliance-\${Date.now()}.pdf\`)
+
+ // ZIP generieren
+ const zipBlob = await exportToZIP(state)
+ downloadExport(zipBlob, \`compliance-\${Date.now()}.zip\`)
+}`}
+
+
+ Command Bar Integration
+
+ Exporte sind auch ueber die Command Bar verfuegbar:
+
+
+{`Cmd+K → "pdf" → "Als PDF exportieren"
+Cmd+K → "zip" → "Als ZIP exportieren"
+Cmd+K → "json" → "Als JSON exportieren"`}
+
+
+ Automatisierte Exports
+
+ Fuer regelmaessige Backups oder CI/CD-Integration:
+
+
+{`# Taeglicher Backup-Export um 02:00 Uhr
+0 2 * * * curl -X GET "https://api.breakpilot.io/sdk/v1/export?format=zip&tenantId=my-tenant" \\
+ -H "Authorization: Bearer $API_KEY" \\
+ -o "/backups/compliance-$(date +%Y%m%d).zip"`}
+
+
+
+ ZIP-Exporte koennen bei umfangreichen States mehrere MB gross werden.
+ Die API hat ein Timeout von 60 Sekunden. Bei sehr grossen States
+ verwenden Sie den asynchronen Export-Endpoint (Enterprise).
+
+
+ Fehlerbehandlung
+
+{`import { exportState } from '@breakpilot/compliance-sdk'
+
+try {
+ const blob = await exportState('pdf')
+ downloadExport(blob, 'report.pdf')
+} catch (error) {
+ if (error.code === 'EMPTY_STATE') {
+ console.error('Keine Daten zum Exportieren vorhanden')
+ } else if (error.code === 'GENERATION_FAILED') {
+ console.error('PDF-Generierung fehlgeschlagen:', error.message)
+ } else if (error.code === 'TIMEOUT') {
+ console.error('Export-Timeout - versuchen Sie ZIP fuer grosse States')
+ } else {
+ console.error('Unbekannter Fehler:', error)
+ }
+}`}
+
+
+ )
+}
diff --git a/developer-portal/app/api/generate/page.tsx b/developer-portal/app/api/generate/page.tsx
new file mode 100644
index 0000000..7c82bd5
--- /dev/null
+++ b/developer-portal/app/api/generate/page.tsx
@@ -0,0 +1,381 @@
+import { DevPortalLayout, ApiEndpoint, CodeBlock, ParameterTable, InfoBox } from '@/components/DevPortalLayout'
+
+export default function GenerateApiPage() {
+ return (
+
+ Uebersicht
+
+ Die Generation API nutzt LLM-Technologie (Claude) zur automatischen Erstellung
+ von Compliance-Dokumenten basierend auf Ihrem SDK-State:
+
+
+ DSFA - Datenschutz-FolgenabschaetzungTOM - Technische und Organisatorische MassnahmenVVT - Verarbeitungsverzeichnis nach Art. 30 DSGVO
+
+
+ Die Generierung verwendet Claude 3.5 Sonnet fuer optimale Qualitaet
+ bei deutschen Rechtstexten. RAG-Context wird automatisch einbezogen.
+
+
+ POST /generate/dsfa
+ Generiert eine Datenschutz-Folgenabschaetzung basierend auf dem aktuellen State.
+
+ Request Body
+ Request
+
+{`curl -X POST "https://api.breakpilot.io/sdk/v1/generate/dsfa" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -H "Content-Type: application/json" \\
+ -d '{
+ "tenantId": "your-tenant-id",
+ "useCaseId": "uc-ki-kundenanalyse",
+ "includeRisks": true,
+ "includeControls": true,
+ "language": "de"
+ }'`}
+
+
+ Response (200 OK)
+
+{`{
+ "success": true,
+ "data": {
+ "dsfa": {
+ "id": "dsfa-2026-02-04-abc123",
+ "version": "1.0",
+ "status": "DRAFT",
+ "createdAt": "2026-02-04T12:00:00Z",
+ "useCase": {
+ "id": "uc-ki-kundenanalyse",
+ "name": "KI-gestuetzte Kundenanalyse",
+ "description": "Analyse von Kundenverhalten mittels ML..."
+ },
+ "sections": {
+ "systematicDescription": {
+ "title": "1. Systematische Beschreibung",
+ "content": "Die geplante Verarbeitungstaetigkeit umfasst..."
+ },
+ "necessityAssessment": {
+ "title": "2. Bewertung der Notwendigkeit",
+ "content": "Die Verarbeitung ist notwendig fuer..."
+ },
+ "riskAssessment": {
+ "title": "3. Risikobewertung",
+ "risks": [
+ {
+ "id": "risk-1",
+ "title": "Unbefugter Datenzugriff",
+ "severity": "HIGH",
+ "likelihood": 3,
+ "impact": 4,
+ "description": "...",
+ "mitigations": ["Verschluesselung", "Zugriffskontrolle"]
+ }
+ ]
+ },
+ "mitigationMeasures": {
+ "title": "4. Abhilfemassnahmen",
+ "controls": [...]
+ },
+ "stakeholderConsultation": {
+ "title": "5. Einbeziehung Betroffener",
+ "content": "..."
+ },
+ "dpoOpinion": {
+ "title": "6. Stellungnahme des DSB",
+ "content": "Ausstehend - Freigabe erforderlich"
+ }
+ },
+ "conclusion": {
+ "overallRisk": "MEDIUM",
+ "recommendation": "PROCEED_WITH_CONDITIONS",
+ "conditions": [
+ "Implementierung der TOM-Empfehlungen",
+ "Regelmaessige Ueberpruefung"
+ ]
+ }
+ },
+ "generationMeta": {
+ "model": "claude-3.5-sonnet",
+ "ragContextUsed": true,
+ "tokensUsed": 4250,
+ "durationMs": 8500
+ }
+ }
+}`}
+
+
+ POST /generate/tom
+ Generiert technische und organisatorische Massnahmen.
+
+ Request Body
+ Request
+
+{`curl -X POST "https://api.breakpilot.io/sdk/v1/generate/tom" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -H "Content-Type: application/json" \\
+ -d '{
+ "tenantId": "your-tenant-id",
+ "categories": ["access_control", "encryption", "backup"],
+ "basedOnRisks": true
+ }'`}
+
+
+ Response (200 OK)
+
+{`{
+ "success": true,
+ "data": {
+ "toms": [
+ {
+ "id": "tom-1",
+ "category": "access_control",
+ "categoryLabel": "Zugangskontrolle",
+ "title": "Multi-Faktor-Authentifizierung",
+ "description": "Implementierung von MFA fuer alle Systemzugaenge",
+ "technicalMeasures": [
+ "TOTP-basierte 2FA",
+ "Hardware Security Keys (FIDO2)"
+ ],
+ "organizationalMeasures": [
+ "Schulung der Mitarbeiter",
+ "Dokumentation der Zugaenge"
+ ],
+ "article32Reference": "Art. 32 Abs. 1 lit. b DSGVO",
+ "priority": "HIGH",
+ "implementationStatus": "PLANNED"
+ },
+ {
+ "id": "tom-2",
+ "category": "encryption",
+ "categoryLabel": "Verschluesselung",
+ "title": "Transportverschluesselung",
+ "description": "TLS 1.3 fuer alle Datenuebert\\\\ragungen",
+ "technicalMeasures": [
+ "TLS 1.3 mit PFS",
+ "HSTS Header"
+ ],
+ "organizationalMeasures": [
+ "Zertifikatsmanagement",
+ "Regelmaessige Audits"
+ ],
+ "article32Reference": "Art. 32 Abs. 1 lit. a DSGVO",
+ "priority": "CRITICAL",
+ "implementationStatus": "IMPLEMENTED"
+ }
+ ],
+ "summary": {
+ "totalMeasures": 20,
+ "byCategory": {
+ "access_control": 5,
+ "encryption": 4,
+ "backup": 3,
+ "monitoring": 4,
+ "incident_response": 4
+ },
+ "implementationProgress": {
+ "implemented": 12,
+ "in_progress": 5,
+ "planned": 3
+ }
+ }
+ }
+}`}
+
+
+ POST /generate/vvt
+ Generiert ein Verarbeitungsverzeichnis nach Art. 30 DSGVO.
+
+ Request Body
+ Request
+
+{`curl -X POST "https://api.breakpilot.io/sdk/v1/generate/vvt" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -H "Content-Type: application/json" \\
+ -d '{
+ "tenantId": "your-tenant-id",
+ "organizationInfo": {
+ "name": "Beispiel GmbH",
+ "address": "Musterstrasse 1, 10115 Berlin",
+ "dpoContact": "datenschutz@beispiel.de"
+ },
+ "includeRetentionPolicies": true
+ }'`}
+
+
+ Response (200 OK)
+
+{`{
+ "success": true,
+ "data": {
+ "vvt": {
+ "id": "vvt-2026-02-04",
+ "version": "1.0",
+ "organization": {
+ "name": "Beispiel GmbH",
+ "address": "Musterstrasse 1, 10115 Berlin",
+ "dpoContact": "datenschutz@beispiel.de"
+ },
+ "processingActivities": [
+ {
+ "id": "pa-1",
+ "name": "Kundendatenverarbeitung",
+ "purpose": "Vertragserfuellung und Kundenservice",
+ "legalBasis": "Art. 6 Abs. 1 lit. b DSGVO",
+ "dataCategories": ["Kontaktdaten", "Vertragsdaten", "Zahlungsdaten"],
+ "dataSubjects": ["Kunden", "Interessenten"],
+ "recipients": ["Zahlungsdienstleister", "Versanddienstleister"],
+ "thirdCountryTransfers": {
+ "exists": false,
+ "countries": [],
+ "safeguards": null
+ },
+ "retentionPeriod": "10 Jahre nach Vertragsende (HGB)",
+ "technicalMeasures": ["Verschluesselung", "Zugriffskontrolle"]
+ }
+ ],
+ "lastUpdated": "2026-02-04T12:00:00Z"
+ }
+ }
+}`}
+
+
+ SDK Integration
+
+{`import { getSDKBackendClient } from '@breakpilot/compliance-sdk'
+
+const client = getSDKBackendClient()
+
+// DSFA generieren
+async function generateDSFA(useCaseId: string) {
+ const dsfa = await client.generateDSFA({
+ useCaseId,
+ includeRisks: true,
+ includeControls: true,
+ })
+
+ console.log('DSFA generiert:', dsfa.id)
+ console.log('Gesamtrisiko:', dsfa.conclusion.overallRisk)
+ return dsfa
+}
+
+// TOMs generieren
+async function generateTOMs() {
+ const toms = await client.generateTOM({
+ categories: ['access_control', 'encryption'],
+ basedOnRisks: true,
+ })
+
+ console.log(\`\${toms.length} TOMs generiert\`)
+ return toms
+}
+
+// VVT generieren
+async function generateVVT() {
+ const vvt = await client.generateVVT({
+ organizationInfo: {
+ name: 'Beispiel GmbH',
+ address: 'Musterstrasse 1',
+ dpoContact: 'dpo@beispiel.de',
+ },
+ })
+
+ console.log(\`VVT mit \${vvt.processingActivities.length} Verarbeitungen\`)
+ return vvt
+}`}
+
+
+
+ Die Dokumentengenerierung verbraucht LLM-Tokens. Durchschnittliche Kosten:
+ DSFA ~5.000 Tokens, TOMs ~3.000 Tokens, VVT ~4.000 Tokens.
+ Enterprise-Kunden haben unbegrenzte Generierungen.
+
+
+ )
+}
diff --git a/developer-portal/app/api/page.tsx b/developer-portal/app/api/page.tsx
new file mode 100644
index 0000000..2b660bf
--- /dev/null
+++ b/developer-portal/app/api/page.tsx
@@ -0,0 +1,239 @@
+import Link from 'next/link'
+import { DevPortalLayout, ApiEndpoint, InfoBox } from '@/components/DevPortalLayout'
+
+export default function ApiReferencePage() {
+ return (
+
+ Base URL
+
+ Alle API-Endpunkte sind unter folgender Basis-URL erreichbar:
+
+
+ https://api.breakpilot.io/sdk/v1
+
+
+ Für Self-Hosted-Installationen verwenden Sie Ihre eigene Domain.
+
+
+ Authentifizierung
+
+ Alle API-Anfragen erfordern einen gültigen API Key im Header:
+
+
+ Authorization: Bearer YOUR_API_KEY
+
+
+
+ Die Tenant-ID wird aus dem API Key abgeleitet oder kann explizit
+ als Query-Parameter oder im Request-Body mitgegeben werden.
+
+
+ API Endpoints
+
+ State Management
+
+ Verwalten Sie den SDK-State für Ihren Tenant.
+
+
+
+
+
+ RAG Search
+
+ Durchsuchen Sie den Compliance-Korpus (DSGVO, AI Act, NIS2).
+
+
+
+
+
+ Document Generation
+
+ Generieren Sie Compliance-Dokumente automatisch.
+
+
+
+
+
+ Export
+
+ Exportieren Sie den Compliance-Stand in verschiedenen Formaten.
+
+
+
+
+
+ Response Format
+
+ Alle Responses folgen einem einheitlichen Format:
+
+
+ Erfolgreiche Response
+
+{`{
+ "success": true,
+ "data": { ... },
+ "meta": {
+ "version": 1,
+ "timestamp": "2026-02-04T12:00:00Z"
+ }
+}`}
+
+
+ Fehler Response
+
+{`{
+ "success": false,
+ "error": {
+ "code": "VALIDATION_ERROR",
+ "message": "Tenant ID is required",
+ "details": { ... }
+ }
+}`}
+
+
+ Error Codes
+
+
+
+
+ HTTP Status
+ Code
+ Beschreibung
+
+
+
+
+ 400
+ VALIDATION_ERROR
+ Ungültige Request-Daten
+
+
+ 401
+ UNAUTHORIZED
+ Fehlender oder ungültiger API Key
+
+
+ 403
+ FORBIDDEN
+ Keine Berechtigung für diese Ressource
+
+
+ 404
+ NOT_FOUND
+ Ressource nicht gefunden
+
+
+ 409
+ CONFLICT
+ Versions-Konflikt (Optimistic Locking)
+
+
+ 429
+ RATE_LIMITED
+ Zu viele Anfragen
+
+
+ 500
+ INTERNAL_ERROR
+ Interner Server-Fehler
+
+
+
+
Rate Limits
+
+
+
+
+ Plan
+ Requests/Minute
+ Requests/Tag
+
+
+
+
+ Starter
+ 60
+ 10.000
+
+
+ Professional
+ 300
+ 100.000
+
+
+ Enterprise
+ Unbegrenzt
+ Unbegrenzt
+
+
+
+
+ )
+}
diff --git a/developer-portal/app/api/rag/page.tsx b/developer-portal/app/api/rag/page.tsx
new file mode 100644
index 0000000..2847e6c
--- /dev/null
+++ b/developer-portal/app/api/rag/page.tsx
@@ -0,0 +1,248 @@
+import { DevPortalLayout, ApiEndpoint, CodeBlock, ParameterTable, InfoBox } from '@/components/DevPortalLayout'
+
+export default function RAGApiPage() {
+ return (
+
+ Uebersicht
+
+ Die RAG (Retrieval-Augmented Generation) API ermoeglicht semantische Suche
+ im Compliance-Korpus. Der Korpus enthaelt:
+
+
+ DSGVO (Datenschutz-Grundverordnung)
+ AI Act (EU KI-Verordnung)
+ NIS2 (Netzwerk- und Informationssicherheit)
+ ePrivacy-Verordnung
+ Bundesdatenschutzgesetz (BDSG)
+
+
+
+ Die Suche verwendet BGE-M3 Embeddings fuer praezise semantische Aehnlichkeit.
+ Die Vektoren werden in Qdrant gespeichert.
+
+
+ GET /rag/search
+ Durchsucht den Legal Corpus semantisch.
+
+ Query-Parameter
+ Request
+
+{`curl -X GET "https://api.breakpilot.io/sdk/v1/rag/search?q=Einwilligung%20DSGVO&top_k=5" \\
+ -H "Authorization: Bearer YOUR_API_KEY"`}
+
+
+ Response (200 OK)
+
+{`{
+ "success": true,
+ "data": {
+ "query": "Einwilligung DSGVO",
+ "results": [
+ {
+ "id": "dsgvo-art-7",
+ "title": "Art. 7 DSGVO - Bedingungen fuer die Einwilligung",
+ "content": "Beruht die Verarbeitung auf einer Einwilligung, muss der Verantwortliche nachweisen koennen, dass die betroffene Person in die Verarbeitung ihrer personenbezogenen Daten eingewilligt hat...",
+ "corpus": "dsgvo",
+ "article": "Art. 7",
+ "score": 0.92,
+ "metadata": {
+ "chapter": "II",
+ "section": "Einwilligung",
+ "url": "https://dsgvo-gesetz.de/art-7-dsgvo/"
+ }
+ },
+ {
+ "id": "dsgvo-art-6-1-a",
+ "title": "Art. 6 Abs. 1 lit. a DSGVO - Einwilligung als Rechtsgrundlage",
+ "content": "Die Verarbeitung ist nur rechtmaessig, wenn mindestens eine der nachstehenden Bedingungen erfuellt ist: a) Die betroffene Person hat ihre Einwilligung...",
+ "corpus": "dsgvo",
+ "article": "Art. 6",
+ "score": 0.88,
+ "metadata": {
+ "chapter": "II",
+ "section": "Rechtmaessigkeit",
+ "url": "https://dsgvo-gesetz.de/art-6-dsgvo/"
+ }
+ }
+ ],
+ "total_results": 2,
+ "search_time_ms": 45
+ },
+ "meta": {
+ "corpus_version": "2026-01",
+ "embedding_model": "bge-m3"
+ }
+}`}
+
+
+ GET /rag/status
+ Gibt Status-Informationen ueber das RAG-System zurueck.
+
+ Request
+
+{`curl -X GET "https://api.breakpilot.io/sdk/v1/rag/status" \\
+ -H "Authorization: Bearer YOUR_API_KEY"`}
+
+
+ Response (200 OK)
+
+{`{
+ "success": true,
+ "data": {
+ "status": "healthy",
+ "corpus": {
+ "dsgvo": {
+ "documents": 99,
+ "chunks": 1250,
+ "last_updated": "2026-01-15T00:00:00Z"
+ },
+ "ai_act": {
+ "documents": 89,
+ "chunks": 980,
+ "last_updated": "2026-01-20T00:00:00Z"
+ },
+ "nis2": {
+ "documents": 46,
+ "chunks": 520,
+ "last_updated": "2026-01-10T00:00:00Z"
+ }
+ },
+ "embedding_service": {
+ "status": "online",
+ "model": "bge-m3",
+ "dimension": 1024
+ },
+ "vector_db": {
+ "type": "qdrant",
+ "collections": 3,
+ "total_vectors": 2750
+ }
+ }
+}`}
+
+
+ SDK Integration
+
+ Verwenden Sie den SDK-Client fuer einfache RAG-Suche:
+
+
+{`import { getSDKBackendClient, isLegalQuery } from '@breakpilot/compliance-sdk'
+
+const client = getSDKBackendClient()
+
+// Pruefen ob die Query rechtliche Inhalte betrifft
+if (isLegalQuery('Was ist eine Einwilligung?')) {
+ // RAG-Suche durchfuehren
+ const results = await client.search('Einwilligung DSGVO', 5)
+
+ results.forEach(result => {
+ console.log(\`[\${result.corpus}] \${result.title}\`)
+ console.log(\`Score: \${result.score}\`)
+ console.log(\`URL: \${result.metadata.url}\`)
+ console.log('---')
+ })
+}`}
+
+
+ Keyword-Erkennung
+
+ Die Funktion isLegalQuery erkennt automatisch rechtliche Anfragen:
+
+
+{`import { isLegalQuery } from '@breakpilot/compliance-sdk'
+
+// Gibt true zurueck fuer:
+isLegalQuery('DSGVO Art. 5') // true - Artikel-Referenz
+isLegalQuery('Einwilligung') // true - DSGVO-Begriff
+isLegalQuery('AI Act Hochrisiko') // true - AI Act Begriff
+isLegalQuery('NIS2 Richtlinie') // true - NIS2 Referenz
+isLegalQuery('personenbezogene Daten') // true - Datenschutz-Begriff
+
+// Gibt false zurueck fuer:
+isLegalQuery('Wie ist das Wetter?') // false - Keine rechtliche Anfrage
+isLegalQuery('Programmiere mir X') // false - Technische Anfrage`}
+
+
+ Beispiel: Command Bar Integration
+
+{`import { useState } from 'react'
+import { getSDKBackendClient, isLegalQuery } from '@breakpilot/compliance-sdk'
+
+function CommandBarSearch({ query }: { query: string }) {
+ const [results, setResults] = useState([])
+ const [loading, setLoading] = useState(false)
+
+ useEffect(() => {
+ if (query.length > 3 && isLegalQuery(query)) {
+ setLoading(true)
+ const client = getSDKBackendClient()
+
+ client.search(query, 3).then(data => {
+ setResults(data)
+ setLoading(false)
+ })
+ }
+ }, [query])
+
+ if (!isLegalQuery(query)) return null
+
+ return (
+
+ {loading ? (
+
Suche im Legal Corpus...
+ ) : (
+ results.map(result => (
+
+ ))
+ )}
+
+
+
+ Die RAG-Suche ist auf 100 Anfragen/Minute (Professional) bzw.
+ unbegrenzt (Enterprise) limitiert. Implementieren Sie Client-Side
+ Debouncing fuer Echtzeit-Suche.
+
+
+ )
+}
diff --git a/developer-portal/app/api/state/page.tsx b/developer-portal/app/api/state/page.tsx
new file mode 100644
index 0000000..f7f3188
--- /dev/null
+++ b/developer-portal/app/api/state/page.tsx
@@ -0,0 +1,266 @@
+import { DevPortalLayout, ApiEndpoint, CodeBlock, ParameterTable, InfoBox } from '@/components/DevPortalLayout'
+
+export default function StateApiPage() {
+ return (
+
+ Übersicht
+
+ Die State API ermöglicht das Speichern und Abrufen des kompletten SDK-States.
+ Der State enthält alle Compliance-Daten: Use Cases, Risiken, Controls,
+ Checkpoints und mehr.
+
+
+
+ Der State wird mit optimistischem Locking gespeichert. Bei jedem Speichern
+ wird die Version erhöht. Bei Konflikten erhalten Sie einen 409-Fehler.
+
+
+ GET /state/{'{tenantId}'}
+ Lädt den aktuellen SDK-State für einen Tenant.
+
+ Request
+
+{`curl -X GET "https://api.breakpilot.io/sdk/v1/state/your-tenant-id" \\
+ -H "Authorization: Bearer YOUR_API_KEY"`}
+
+
+ Response (200 OK)
+
+{`{
+ "success": true,
+ "data": {
+ "version": "1.0.0",
+ "lastModified": "2026-02-04T12:00:00Z",
+ "tenantId": "your-tenant-id",
+ "userId": "user-123",
+ "subscription": "PROFESSIONAL",
+ "currentPhase": 1,
+ "currentStep": "use-case-workshop",
+ "completedSteps": ["use-case-workshop", "screening"],
+ "checkpoints": {
+ "CP-UC": {
+ "checkpointId": "CP-UC",
+ "passed": true,
+ "validatedAt": "2026-02-01T10:00:00Z",
+ "validatedBy": "user-123",
+ "errors": [],
+ "warnings": []
+ }
+ },
+ "useCases": [
+ {
+ "id": "uc-1",
+ "name": "KI-Kundenanalyse",
+ "description": "...",
+ "category": "Marketing",
+ "stepsCompleted": 5,
+ "assessmentResult": {
+ "riskLevel": "HIGH",
+ "dsfaRequired": true,
+ "aiActClassification": "LIMITED"
+ }
+ }
+ ],
+ "risks": [...],
+ "controls": [...],
+ "dsfa": {...},
+ "toms": [...],
+ "vvt": [...]
+ },
+ "meta": {
+ "version": 5,
+ "etag": "W/\\"abc123\\""
+ }
+}`}
+
+
+ Response (404 Not Found)
+
+{`{
+ "success": false,
+ "error": {
+ "code": "NOT_FOUND",
+ "message": "No state found for tenant your-tenant-id"
+ }
+}`}
+
+
+ POST /state
+ Speichert den SDK-State. Unterstützt Versionierung und optimistisches Locking.
+
+ Request Body
+ Request
+
+{`curl -X POST "https://api.breakpilot.io/sdk/v1/state" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -H "Content-Type: application/json" \\
+ -H "If-Match: W/\\"abc123\\"" \\
+ -d '{
+ "tenantId": "your-tenant-id",
+ "userId": "user-123",
+ "state": {
+ "currentPhase": 1,
+ "currentStep": "risks",
+ "useCases": [...],
+ "risks": [...]
+ }
+ }'`}
+
+
+ Response (200 OK)
+
+{`{
+ "success": true,
+ "data": {
+ "tenantId": "your-tenant-id",
+ "version": 6,
+ "updatedAt": "2026-02-04T12:05:00Z"
+ },
+ "meta": {
+ "etag": "W/\\"def456\\""
+ }
+}`}
+
+
+ Response (409 Conflict)
+
+{`{
+ "success": false,
+ "error": {
+ "code": "CONFLICT",
+ "message": "Version conflict: expected 5, but current is 6",
+ "details": {
+ "expectedVersion": 5,
+ "currentVersion": 6
+ }
+ }
+}`}
+
+
+
+ Bei einem 409-Fehler sollten Sie den State erneut laden, Ihre Änderungen
+ mergen und erneut speichern.
+
+
+ DELETE /state/{'{tenantId}'}
+ Löscht den kompletten State für einen Tenant.
+
+ Request
+
+{`curl -X DELETE "https://api.breakpilot.io/sdk/v1/state/your-tenant-id" \\
+ -H "Authorization: Bearer YOUR_API_KEY"`}
+
+
+ Response (200 OK)
+
+{`{
+ "success": true,
+ "data": {
+ "tenantId": "your-tenant-id",
+ "deleted": true
+ }
+}`}
+
+
+ State-Struktur
+ Der SDKState enthält alle Compliance-Daten:
+
+
+{`interface SDKState {
+ // Metadata
+ version: string
+ lastModified: Date
+
+ // Tenant & User
+ tenantId: string
+ userId: string
+ subscription: 'FREE' | 'STARTER' | 'PROFESSIONAL' | 'ENTERPRISE'
+
+ // Progress
+ currentPhase: 1 | 2
+ currentStep: string
+ completedSteps: string[]
+ checkpoints: Record
+
+ // Phase 1 Data
+ useCases: UseCaseAssessment[]
+ activeUseCase: string | null
+ screening: ScreeningResult | null
+ modules: ServiceModule[]
+ requirements: Requirement[]
+ controls: Control[]
+ evidence: Evidence[]
+ checklist: ChecklistItem[]
+ risks: Risk[]
+
+ // Phase 2 Data
+ aiActClassification: AIActResult | null
+ obligations: Obligation[]
+ dsfa: DSFA | null
+ toms: TOM[]
+ retentionPolicies: RetentionPolicy[]
+ vvt: ProcessingActivity[]
+ documents: LegalDocument[]
+ cookieBanner: CookieBannerConfig | null
+ consents: ConsentRecord[]
+ dsrConfig: DSRConfig | null
+ escalationWorkflows: EscalationWorkflow[]
+
+ // UI State
+ preferences: UserPreferences
+}`}
+
+
+ Beispiel: SDK Integration
+
+{`import { getSDKApiClient } from '@breakpilot/compliance-sdk'
+
+const client = getSDKApiClient('your-tenant-id')
+
+// State laden
+const state = await client.getState()
+console.log('Current step:', state.currentStep)
+console.log('Use cases:', state.useCases.length)
+
+// State speichern
+await client.saveState({
+ ...state,
+ currentStep: 'risks',
+ risks: [...state.risks, newRisk],
+})`}
+
+
+ )
+}
diff --git a/developer-portal/app/changelog/page.tsx b/developer-portal/app/changelog/page.tsx
new file mode 100644
index 0000000..7a1bb7e
--- /dev/null
+++ b/developer-portal/app/changelog/page.tsx
@@ -0,0 +1,164 @@
+import { DevPortalLayout, InfoBox } from '@/components/DevPortalLayout'
+
+export default function ChangelogPage() {
+ return (
+
+ Versionierung
+
+ Das SDK folgt Semantic Versioning (SemVer):
+ MAJOR.MINOR.PATCH
+
+
+ MAJOR: Breaking ChangesMINOR: Neue Features, abwaertskompatibelPATCH: Bugfixes
+
+ {/* Version 1.2.0 */}
+
+
+
+ v1.2.0
+
+ 2026-02-04
+ Latest
+
+
+
Neue Features
+
+ Demo-Daten Seeding ueber API (nicht mehr hardcodiert)
+ Playwright E2E Tests fuer alle 19 SDK-Schritte
+ Command Bar RAG-Integration mit Live-Suche
+ Developer Portal mit API-Dokumentation
+ TOM-Katalog mit 20 vorkonfigurierten Massnahmen
+ VVT-Templates fuer gaengige Verarbeitungstaetigkeiten
+
+
+
Verbesserungen
+
+ Performance-Optimierung beim State-Loading
+ Bessere TypeScript-Typen fuer alle Exports
+ Verbesserte Fehlerbehandlung bei API-Calls
+
+
+
Bugfixes
+
+ Fix: Checkpoint-Validierung bei leeren Arrays
+ Fix: Multi-Tab-Sync bei Safari
+ Fix: Export-Dateiname mit Sonderzeichen
+
+
+
+
+ v1.1.0
+
+ 2026-01-20
+
+
+
Neue Features
+
+ Backend-Sync mit PostgreSQL-Persistierung
+ SDK Backend (Go) mit RAG + LLM-Integration
+ Automatische DSFA-Generierung via Claude API
+ Export nach PDF, ZIP, JSON
+
+
+
Verbesserungen
+
+ Offline-Support mit localStorage Fallback
+ Optimistic Locking fuer Konfliktbehandlung
+ BroadcastChannel fuer Multi-Tab-Sync
+
+
+
+
+ v1.0.0
+
+ 2026-01-01
+
+
+
Initial Release
+
+ SDKProvider mit React Context
+ useSDK Hook mit vollstaendigem State-Zugriff
+ 19-Schritte Compliance-Workflow (Phase 1 + 2)
+ Checkpoint-Validierung
+ Risk Matrix mit Score-Berechnung
+ TypeScript-Support mit allen Types
+ Utility Functions fuer Navigation und Berechnung
+
+
+
+ Bei Major-Version-Updates (z.B. 1.x → 2.x) koennen Breaking Changes auftreten.
+ Pruefen Sie die Migration Guides vor dem Upgrade.
+
+
+ Das SDK speichert die State-Version im localStorage. Bei inkompatiblen
+ Aenderungen wird automatisch eine Migration durchgefuehrt.
+
+
+
+ Geplante Features
+
+
+
+
+ Feature
+ Version
+ Status
+
+
+
+
+ Multi-Tenant-Support
+ v1.3.0
+ In Entwicklung
+
+ Workflow-Customization
+ v1.3.0
+ Geplant
+
+ Audit-Trail Export
+ v1.4.0
+ Geplant
+
+ White-Label Branding
+ v2.0.0
+ Roadmap
+
+
+
Feedback & Issues
+
+ Fuer Bug-Reports und Feature-Requests nutzen Sie bitte:
+
+
+
+ GitHub Issues: {' '}
+ github.com/breakpilot/compliance-sdk/issues
+
+
+ Support: {' '}
+ support@breakpilot.io
+
+
+
+ )
+}
diff --git a/developer-portal/app/getting-started/page.tsx b/developer-portal/app/getting-started/page.tsx
new file mode 100644
index 0000000..2be74c7
--- /dev/null
+++ b/developer-portal/app/getting-started/page.tsx
@@ -0,0 +1,203 @@
+import Link from 'next/link'
+import { DevPortalLayout, CodeBlock, InfoBox, ParameterTable } from '@/components/DevPortalLayout'
+
+export default function GettingStartedPage() {
+ return (
+
+ 1. Installation
+
+ Installieren Sie das SDK über Ihren bevorzugten Paketmanager:
+
+
+{`npm install @breakpilot/compliance-sdk
+# oder
+yarn add @breakpilot/compliance-sdk
+# oder
+pnpm add @breakpilot/compliance-sdk`}
+
+
+ 2. API Key erhalten
+
+ Nach dem Abo-Abschluss erhalten Sie Ihren API Key im{' '}
+
+
+
+ Speichern Sie den API Key niemals im Frontend-Code. Verwenden Sie
+ Umgebungsvariablen auf dem Server.
+
+
+ 3. Provider einrichten
+
+ Wrappen Sie Ihre App mit dem SDKProvider:
+
+
+{`import { SDKProvider } from '@breakpilot/compliance-sdk'
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+
+ {children}
+
+
+
+ )
+}`}
+
+
+ Provider Props
+ 4. SDK verwenden
+
+ Nutzen Sie den useSDK Hook in Ihren Komponenten:
+
+
+{`'use client'
+
+import { useSDK } from '@breakpilot/compliance-sdk'
+
+export function ComplianceDashboard() {
+ const {
+ state,
+ completionPercentage,
+ goToStep,
+ currentStep,
+ } = useSDK()
+
+ return (
+
+
+ Compliance Fortschritt: {completionPercentage}%
+
+
+
+
Aktueller Schritt: {currentStep?.name}
+
Phase: {state.currentPhase}
+
Use Cases: {state.useCases.length}
+
+
+
+ goToStep('use-case-workshop')}
+ className="px-4 py-2 bg-blue-600 text-white rounded"
+ >
+ Use Case Workshop
+
+ goToStep('risks')}
+ className="px-4 py-2 bg-blue-600 text-white rounded"
+ >
+ Risikoanalyse
+
+
+
+
+ 5. Erste Schritte im Workflow
+
+ Das SDK führt Sie durch einen 19-Schritte-Workflow in 2 Phasen:
+
+
+
+
+
+
Phase 1: Assessment
+
+ Use Case Workshop
+ System Screening
+ Compliance Modules
+ Requirements
+ Controls
+ Evidence
+ Audit Checklist
+ Risk Matrix
+
+
+
+
Phase 2: Dokumentation
+
+ AI Act Klassifizierung
+ Pflichtenübersicht
+ DSFA
+ TOMs
+ Löschfristen
+ VVT
+ Rechtliche Vorlagen
+ Cookie Banner
+ Einwilligungen
+ DSR Portal
+ Escalations
+
+
+
+
6. Nächste Schritte
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/developer-portal/app/globals.css b/developer-portal/app/globals.css
new file mode 100644
index 0000000..0857e21
--- /dev/null
+++ b/developer-portal/app/globals.css
@@ -0,0 +1,35 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: #f1f5f9;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #cbd5e1;
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #94a3b8;
+}
+
+/* Smooth transitions */
+* {
+ transition-property: background-color, border-color, color, fill, stroke;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+
+/* Focus styles */
+*:focus-visible {
+ outline: 2px solid #0ea5e9;
+ outline-offset: 2px;
+}
diff --git a/developer-portal/app/guides/page.tsx b/developer-portal/app/guides/page.tsx
new file mode 100644
index 0000000..be27d41
--- /dev/null
+++ b/developer-portal/app/guides/page.tsx
@@ -0,0 +1,227 @@
+import Link from 'next/link'
+import { DevPortalLayout, InfoBox } from '@/components/DevPortalLayout'
+
+export default function GuidesPage() {
+ return (
+
+ Workflow-Guides
+
+ Das AI Compliance SDK fuehrt durch einen strukturierten 19-Schritte-Workflow
+ in zwei Phasen. Diese Guides erklaeren jeden Schritt im Detail.
+
+
+
+
+
+
+ 1
+
+
+
Phase 1: Assessment
+
8 Schritte
+
+
+
+ Use Case Workshop, System Screening, Module-Auswahl, Requirements,
+ Controls, Evidence, Checkliste, Risk Matrix.
+
+
+
+
+
+
+ 2
+
+
+
Phase 2: Dokumentation
+
11 Schritte
+
+
+
+ AI Act Klassifizierung, Pflichten, DSFA, TOMs, Loeschfristen,
+ VVT, Rechtliche Vorlagen, Cookie Banner, DSR Portal.
+
+
+
Workflow-Uebersicht
+
+
+
Phase 1: Assessment (8 Schritte)
+
+
+ 01
+ Use Case Workshop
+
+
+ 02
+ System Screening
+
+
+ 03
+ Compliance Modules
+
+
+ 04
+ Requirements
+
+
+ 05
+ Controls
+
+
+ 06
+ Evidence
+
+
+ 07
+ Audit Checklist
+
+
+ 08
+ Risk Matrix
+
+
+
+
+
+
Phase 2: Dokumentation (11 Schritte)
+
+
+ 09
+ AI Act Klassifizierung
+
+
+ 10
+ Pflichtenuebersicht
+
+
+ 11
+ DSFA
+
+
+ 12
+ TOMs
+
+
+ 13
+ Loeschfristen
+
+
+ 14
+ VVT
+
+
+ 15
+ Rechtliche Vorlagen
+
+
+ 16
+ Cookie Banner
+
+
+ 17
+ Einwilligungen
+
+
+ 18
+ DSR Portal
+
+
+ 19
+ Escalations
+
+
+
+
Checkpoints
+
+ Das SDK validiert den Fortschritt an definierten Checkpoints:
+
+
+
+
+
+ Checkpoint
+ Nach Schritt
+ Validierung
+
+
+
+
+ CP-UC
+ Use Case Workshop
+ Mind. 1 Use Case angelegt
+
+
+ CP-SCREEN
+ System Screening
+ Screening abgeschlossen
+
+
+ CP-CTRL
+ Controls
+ Alle Requirements haben Controls
+
+
+ CP-RISK
+ Risk Matrix
+ Alle Risiken bewertet
+
+
+ CP-DSFA
+ DSFA
+ DSFA generiert (falls erforderlich)
+
+
+ CP-TOM
+ TOMs
+ Mind. 10 TOMs definiert
+
+
+ CP-VVT
+ VVT
+ VVT vollstaendig
+
+
+
+
+ Nicht bestandene Checkpoints blockieren den Fortschritt zu spaetere Schritte.
+ Verwenden Sie validateCheckpoint() um den Status zu pruefen.
+
+
+ Best Practices
+
+
+ Speichern Sie regelmaessig: Der State wird automatisch
+ im localStorage gespeichert, aber aktivieren Sie Backend-Sync fuer
+ persistente Speicherung.
+
+
+ Nutzen Sie die Command Bar: Cmd+K oeffnet schnelle
+ Navigation, Export und RAG-Suche.
+
+
+ Arbeiten Sie Use-Case-zentriert: Bearbeiten Sie
+ einen Use Case vollstaendig, bevor Sie zum naechsten wechseln.
+
+
+ Validieren Sie Checkpoints: Pruefen Sie vor dem
+ Phasenwechsel, ob alle Checkpoints bestanden sind.
+
+
+
+ )
+}
diff --git a/developer-portal/app/guides/phase1/page.tsx b/developer-portal/app/guides/phase1/page.tsx
new file mode 100644
index 0000000..653b9d8
--- /dev/null
+++ b/developer-portal/app/guides/phase1/page.tsx
@@ -0,0 +1,391 @@
+import { DevPortalLayout, CodeBlock, InfoBox } from '@/components/DevPortalLayout'
+
+export default function Phase1GuidePage() {
+ return (
+
+ Uebersicht Phase 1
+
+ Phase 1 umfasst die Erfassung und Bewertung Ihrer KI-Anwendungsfaelle.
+ Am Ende haben Sie eine vollstaendige Risikoanalyse und wissen, welche
+ Compliance-Dokumente Sie benoetigen.
+
+
+
+
Phase 1 Schritte
+
+ Use Case Workshop
+ System Screening
+ Compliance Modules
+ Requirements
+ Controls
+ Evidence
+ Audit Checklist
+ Risk Matrix
+
+
Schritt 1: Use Case Workshop
+
+ Erfassen Sie alle KI-Anwendungsfaelle in Ihrem Unternehmen.
+
+
+ Code-Beispiel
+
+{`import { useSDK } from '@breakpilot/compliance-sdk'
+
+function UseCaseForm() {
+ const { updateUseCase, state } = useSDK()
+
+ const handleCreateUseCase = async () => {
+ await updateUseCase({
+ id: \`uc-\${Date.now()}\`,
+ name: 'KI-gestuetzte Kundenanalyse',
+ description: 'Analyse von Kundenverhalten mittels ML',
+ category: 'Marketing',
+ department: 'Marketing & Sales',
+ dataTypes: ['Kundendaten', 'Verhaltensdaten', 'Transaktionen'],
+ aiCapabilities: ['Profiling', 'Vorhersage'],
+ stepsCompleted: 0,
+ })
+ }
+
+ return (
+
+
Use Cases: {state.useCases.length}
+
+ Use Case hinzufuegen
+
+
+ {state.useCases.map(uc => (
+
+
{uc.name}
+
{uc.description}
+
+ ))}
+
+
+
+ Nach dem Use Case Workshop muss mindestens ein Use Case angelegt sein,
+ um zum naechsten Schritt zu gelangen.
+
+
+ Schritt 2: System Screening
+
+ Das Screening bewertet jeden Use Case hinsichtlich Datenschutz und AI Act.
+
+
+ Code-Beispiel
+
+{`import { useSDK } from '@breakpilot/compliance-sdk'
+
+function ScreeningView() {
+ const { state, dispatch } = useSDK()
+
+ const completeScreening = (useCaseId: string, result: ScreeningResult) => {
+ dispatch({
+ type: 'UPDATE_USE_CASE',
+ payload: {
+ id: useCaseId,
+ screeningResult: result,
+ // Ergebnis bestimmt weitere Pflichten
+ assessmentResult: {
+ riskLevel: result.aiActRisk,
+ dsfaRequired: result.dsfaRequired,
+ aiActClassification: result.aiActClassification,
+ },
+ },
+ })
+ }
+
+ // Screening-Fragen beantworten
+ const screeningQuestions = [
+ 'Werden personenbezogene Daten verarbeitet?',
+ 'Erfolgt automatisierte Entscheidungsfindung?',
+ 'Werden besondere Datenkategorien verarbeitet?',
+ 'Erfolgt Profiling?',
+ 'Werden Daten in Drittlaender uebermittelt?',
+ ]
+
+ return (
+
+ {screeningQuestions.map((question, i) => (
+
+
+ ))}
+
+ )
+}`}
+
+
+ Schritt 3: Compliance Modules
+
+ Basierend auf dem Screening werden relevante Compliance-Module aktiviert.
+
+
+
+
+
+
+ Modul
+ Aktiviert wenn
+
+
+
+
+ DSGVO Basis
+ Immer (personenbezogene Daten)
+
+
+ DSFA
+ Hohes Risiko, Profiling, Art. 9 Daten
+
+
+ AI Act
+ KI-basierte Entscheidungen
+
+
+ NIS2
+ Kritische Infrastruktur
+
+
+
+
Schritt 4: Requirements
+
+ Fuer jedes aktivierte Modul werden spezifische Anforderungen generiert.
+
+
+
+{`import { useSDK } from '@breakpilot/compliance-sdk'
+
+function RequirementsView() {
+ const { state } = useSDK()
+
+ // Requirements nach Modul gruppieren
+ const byModule = state.requirements.reduce((acc, req) => {
+ const module = req.module || 'general'
+ if (!acc[module]) acc[module] = []
+ acc[module].push(req)
+ return acc
+ }, {})
+
+ return (
+
+ {Object.entries(byModule).map(([module, reqs]) => (
+
+
{module}
+
+ {reqs.map(req => (
+
+ {req.title}
+ {req.description}
+ Status: {req.status}
+
+ ))}
+
+
+ ))}
+
+
+ Schritt 5: Controls
+
+ Definieren Sie Kontrollen fuer jede Anforderung.
+
+
+
+{`import { useSDK } from '@breakpilot/compliance-sdk'
+
+function ControlsView() {
+ const { updateControl, state } = useSDK()
+
+ const addControl = (requirementId: string) => {
+ updateControl({
+ id: \`ctrl-\${Date.now()}\`,
+ requirementId,
+ title: 'Zugriffskontrolle implementieren',
+ description: 'Role-based access control fuer alle Datenzugaenge',
+ type: 'TECHNICAL',
+ status: 'PLANNED',
+ implementationDate: null,
+ owner: 'IT-Abteilung',
+ })
+ }
+
+ return (
+
+
Controls: {state.controls.length}
+
+ {state.requirements.map(req => (
+
+
{req.title}
+
Controls: {state.controls.filter(c => c.requirementId === req.id).length}
+
addControl(req.id)}>
+ Control hinzufuegen
+
+
+ ))}
+
+
+
+ Jede Requirement muss mindestens ein Control haben, bevor Sie
+ zur Evidence-Phase uebergehen koennen.
+
+
+ Schritt 6: Evidence
+
+ Dokumentieren Sie Nachweise fuer implementierte Controls.
+
+
+
+{`import { useSDK } from '@breakpilot/compliance-sdk'
+
+function EvidenceUpload({ controlId }: { controlId: string }) {
+ const { dispatch } = useSDK()
+
+ const addEvidence = (file: File) => {
+ dispatch({
+ type: 'ADD_EVIDENCE',
+ payload: {
+ id: \`ev-\${Date.now()}\`,
+ controlId,
+ title: file.name,
+ type: 'DOCUMENT',
+ uploadedAt: new Date().toISOString(),
+ fileType: file.type,
+ // In Produktion: Upload zu Storage
+ },
+ })
+ }
+
+ return (
+
+
+ Schritt 7: Audit Checklist
+
+ Die Checkliste fasst alle Compliance-Punkte zusammen.
+
+
+ Schritt 8: Risk Matrix
+
+ Bewerten Sie alle identifizierten Risiken nach Likelihood und Impact.
+
+
+
+{`import { useSDK, calculateRiskScore, getRiskSeverityFromScore } from '@breakpilot/compliance-sdk'
+
+function RiskMatrix() {
+ const { addRisk, state } = useSDK()
+
+ const createRisk = () => {
+ const likelihood = 3 // 1-5
+ const impact = 4 // 1-5
+ const score = calculateRiskScore(likelihood, impact) // 12
+ const severity = getRiskSeverityFromScore(score) // 'HIGH'
+
+ addRisk({
+ id: \`risk-\${Date.now()}\`,
+ title: 'Unbefugter Datenzugriff',
+ description: 'Risiko durch unzureichende Zugriffskontrolle',
+ likelihood,
+ impact,
+ inherentScore: score,
+ severity,
+ category: 'Security',
+ mitigations: [],
+ residualScore: null,
+ })
+ }
+
+ return (
+
+
Risiken: {state.risks.length}
+
+ {/* 5x5 Matrix Visualisierung */}
+
+ {[5,4,3,2,1].map(likelihood => (
+ [1,2,3,4,5].map(impact => {
+ const score = likelihood * impact
+ const risksHere = state.risks.filter(
+ r => r.likelihood === likelihood && r.impact === impact
+ )
+ return (
+
= 15 ? 'bg-red-500' : score >= 8 ? 'bg-yellow-500' : 'bg-green-500'}\`}
+ >
+ {risksHere.length > 0 && (
+ {risksHere.length}
+ )}
+
+ )
+ })
+ ))}
+
+
+
Risiko hinzufuegen
+
+
+
+ Nach erfolgreicher Bewertung aller Risiken koennen Sie zu Phase 2
+ uebergehen. Der Checkpoint CP-RISK validiert, dass alle Risiken
+ eine Severity-Bewertung haben.
+
+
+ Navigation nach Phase 2
+
+{`import { useSDK } from '@breakpilot/compliance-sdk'
+
+function PhaseTransition() {
+ const { validateCheckpoint, goToStep, phase1Completion } = useSDK()
+
+ const handleContinueToPhase2 = async () => {
+ // Alle Phase-1-Checkpoints pruefen
+ const cpRisk = await validateCheckpoint('CP-RISK')
+
+ if (cpRisk.passed) {
+ goToStep('ai-act-classification') // Erster Schritt Phase 2
+ } else {
+ console.error('Checkpoint nicht bestanden:', cpRisk.errors)
+ }
+ }
+
+ return (
+
+
Phase 1 Fortschritt: {phase1Completion}%
+
+ {phase1Completion === 100 && (
+
+ Weiter zu Phase 2
+
+ )}
+
+
+ )
+}
diff --git a/developer-portal/app/guides/phase2/page.tsx b/developer-portal/app/guides/phase2/page.tsx
new file mode 100644
index 0000000..8f3c3fd
--- /dev/null
+++ b/developer-portal/app/guides/phase2/page.tsx
@@ -0,0 +1,377 @@
+import { DevPortalLayout, CodeBlock, InfoBox } from '@/components/DevPortalLayout'
+
+export default function Phase2GuidePage() {
+ return (
+
+ Uebersicht Phase 2
+
+ Phase 2 generiert alle erforderlichen Compliance-Dokumente basierend
+ auf dem Assessment aus Phase 1. Die Dokumente koennen exportiert und
+ fuer Audits verwendet werden.
+
+
+
+
Phase 2 Schritte
+
+ AI Act Klassifizierung
+ Pflichtenuebersicht
+ DSFA (Datenschutz-Folgenabschaetzung)
+ TOMs (Technische/Organisatorische Massnahmen)
+ Loeschfristen
+ VVT (Verarbeitungsverzeichnis)
+ Rechtliche Vorlagen
+ Cookie Banner
+ Einwilligungen
+ DSR Portal
+ Escalations
+
+
Schritt 9: AI Act Klassifizierung
+
+ Klassifizieren Sie jeden Use Case nach dem EU AI Act Risikosystem.
+
+
+
+
+
+
+ Risikostufe
+ Beschreibung
+ Pflichten
+
+
+
+
+ Verboten
+ Social Scoring, Manipulative KI
+ Nicht zulaessig
+
+
+ Hochrisiko
+ Biometrie, Medizin, kritische Infrastruktur
+ Umfangreiche Dokumentation, Konformitaetsbewertung
+
+
+ Begrenzt
+ Chatbots, Empfehlungssysteme
+ Transparenzpflichten
+
+
+ Minimal
+ Spam-Filter, Spiele
+ Freiwillige Verhaltenskodizes
+
+
+
+
+{`import { useSDK } from '@breakpilot/compliance-sdk'
+import type { AIActRiskCategory } from '@breakpilot/compliance-sdk'
+
+function AIActClassification() {
+ const { state, dispatch } = useSDK()
+
+ const classifyUseCase = (useCaseId: string, classification: AIActRiskCategory) => {
+ dispatch({
+ type: 'UPDATE_USE_CASE',
+ payload: {
+ id: useCaseId,
+ assessmentResult: {
+ ...state.useCases.find(uc => uc.id === useCaseId)?.assessmentResult,
+ aiActClassification: classification,
+ },
+ },
+ })
+
+ // Wenn Hochrisiko, zusaetzliche Pflichten aktivieren
+ if (classification === 'HIGH_RISK') {
+ dispatch({
+ type: 'SET_AI_ACT_RESULT',
+ payload: {
+ classification,
+ conformityRequired: true,
+ documentationRequired: true,
+ humanOversightRequired: true,
+ },
+ })
+ }
+ }
+
+ return (
+
+ {state.useCases.map(uc => (
+
+
{uc.name}
+ classifyUseCase(uc.id, e.target.value as AIActRiskCategory)}
+ >
+ Bitte waehlen...
+ Verboten
+ Hochrisiko
+ Begrenzt
+ Minimal
+
+
+ ))}
+
+
+ Schritt 10: Pflichtenuebersicht
+
+ Basierend auf der Klassifizierung werden alle anwendbaren Pflichten angezeigt.
+
+
+ Schritt 11: DSFA
+
+ Die Datenschutz-Folgenabschaetzung wird automatisch generiert.
+
+
+
+{`import { useSDK, getSDKBackendClient } from '@breakpilot/compliance-sdk'
+
+function DSFAGeneration() {
+ const { state, dispatch } = useSDK()
+ const [generating, setGenerating] = useState(false)
+
+ const generateDSFA = async () => {
+ setGenerating(true)
+
+ const client = getSDKBackendClient()
+ const dsfa = await client.generateDSFA({
+ useCases: state.useCases,
+ risks: state.risks,
+ controls: state.controls,
+ })
+
+ dispatch({
+ type: 'SET_DSFA',
+ payload: dsfa,
+ })
+
+ setGenerating(false)
+ }
+
+ // DSFA nur anzeigen wenn erforderlich
+ const dsfaRequired = state.useCases.some(
+ uc => uc.assessmentResult?.dsfaRequired
+ )
+
+ if (!dsfaRequired) {
+ return Keine DSFA erforderlich fuer die aktuellen Use Cases.
+ }
+
+ return (
+
+ {state.dsfa ? (
+
+
DSFA generiert
+
Status: {state.dsfa.status}
+
Gesamtrisiko: {state.dsfa.conclusion?.overallRisk}
+
+ {/* DSFA-Sektionen anzeigen */}
+ {Object.entries(state.dsfa.sections || {}).map(([key, section]) => (
+
+
{section.title}
+
{section.content}
+
+ ))}
+
+ ) : (
+
+ {generating ? 'Generiere DSFA...' : 'DSFA generieren'}
+
+ )}
+
+
+
+ Wenn eine DSFA erforderlich ist (basierend auf Screening), muss diese
+ generiert werden, bevor Sie fortfahren koennen.
+
+
+ Schritt 12: TOMs
+
+ Technische und Organisatorische Massnahmen nach Art. 32 DSGVO.
+
+
+
+{`import { useSDK, getSDKBackendClient } from '@breakpilot/compliance-sdk'
+
+function TOMsView() {
+ const { state, dispatch } = useSDK()
+
+ const generateTOMs = async () => {
+ const client = getSDKBackendClient()
+ const toms = await client.generateTOM({
+ risks: state.risks,
+ controls: state.controls,
+ })
+
+ dispatch({
+ type: 'SET_TOMS',
+ payload: toms,
+ })
+ }
+
+ const tomCategories = [
+ { id: 'access_control', label: 'Zugangskontrolle' },
+ { id: 'access_rights', label: 'Zugriffskontrolle' },
+ { id: 'transfer_control', label: 'Weitergabekontrolle' },
+ { id: 'input_control', label: 'Eingabekontrolle' },
+ { id: 'availability', label: 'Verfuegbarkeitskontrolle' },
+ { id: 'separation', label: 'Trennungsgebot' },
+ ]
+
+ return (
+
+
TOMs: {state.toms.length}
+
+ {tomCategories.map(cat => {
+ const tomsInCategory = state.toms.filter(t => t.category === cat.id)
+ return (
+
+
{cat.label} ({tomsInCategory.length})
+
+ {tomsInCategory.map(tom => (
+
+ {tom.title}
+ {tom.description}
+ Status: {tom.implementationStatus}
+
+ ))}
+
+
+ )
+ })}
+
+
TOMs generieren
+
+
+ Schritt 13: Loeschfristen
+
+ Definieren Sie Aufbewahrungsfristen fuer verschiedene Datenkategorien.
+
+
+ Schritt 14: VVT
+
+ Das Verarbeitungsverzeichnis nach Art. 30 DSGVO.
+
+
+
+{`import { useSDK } from '@breakpilot/compliance-sdk'
+
+function VVTView() {
+ const { state, dispatch } = useSDK()
+
+ const addProcessingActivity = () => {
+ dispatch({
+ type: 'ADD_PROCESSING_ACTIVITY',
+ payload: {
+ id: \`pa-\${Date.now()}\`,
+ name: 'Kundendatenverarbeitung',
+ purpose: 'Vertragserfuellung',
+ legalBasis: 'Art. 6 Abs. 1 lit. b DSGVO',
+ dataCategories: ['Kontaktdaten', 'Vertragsdaten'],
+ dataSubjects: ['Kunden'],
+ recipients: [],
+ retentionPeriod: '10 Jahre',
+ technicalMeasures: ['Verschluesselung', 'Zugriffskontrolle'],
+ },
+ })
+ }
+
+ return (
+
+
Verarbeitungstaetigkeiten: {state.vvt.length}
+
+ {state.vvt.map(activity => (
+
+
{activity.name}
+
Zweck: {activity.purpose}
+
Rechtsgrundlage: {activity.legalBasis}
+
Datenkategorien: {activity.dataCategories.join(', ')}
+
Betroffene: {activity.dataSubjects.join(', ')}
+
Loeschfrist: {activity.retentionPeriod}
+
+ ))}
+
+
+ Verarbeitungstaetigkeit hinzufuegen
+
+
+
+ Schritt 15-19: Weitere Dokumentation
+
+ Die verbleibenden Schritte umfassen:
+
+
+ Rechtliche Vorlagen: AGB, Datenschutzerklaerung, etc.Cookie Banner: Konfiguration fuer Cookie-ConsentEinwilligungen: Consent-Management fuer BetroffeneDSR Portal: Data Subject Request HandlingEscalations: Eskalationspfade fuer Datenschutzvorfaelle
+
+ Export der Dokumentation
+
+{`import { useSDK } from '@breakpilot/compliance-sdk'
+
+function ExportAll() {
+ const { exportState, completionPercentage } = useSDK()
+
+ const handleExport = async (format: 'pdf' | 'zip' | 'json') => {
+ const blob = await exportState(format)
+
+ // Download ausloesen
+ const url = URL.createObjectURL(blob)
+ const a = document.createElement('a')
+ a.href = url
+ a.download = \`compliance-export.\${format === 'json' ? 'json' : format}\`
+ a.click()
+ URL.revokeObjectURL(url)
+ }
+
+ return (
+
+
Compliance Fortschritt: {completionPercentage}%
+
+
+ handleExport('pdf')}>
+ PDF Export
+
+ handleExport('zip')}>
+ ZIP Export (alle Dokumente)
+
+ handleExport('json')}>
+ JSON Backup
+
+
+
+
+
+ Nach Abschluss aller 19 Schritte haben Sie eine vollstaendige
+ Compliance-Dokumentation, die Sie fuer Audits und regulatorische
+ Anforderungen verwenden koennen.
+
+
+ )
+}
diff --git a/developer-portal/app/layout.tsx b/developer-portal/app/layout.tsx
new file mode 100644
index 0000000..57f1735
--- /dev/null
+++ b/developer-portal/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+ title: 'BreakPilot Developer Portal',
+ description: 'SDK-Dokumentation und API-Referenz fuer BreakPilot AI Compliance SDK',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/developer-portal/app/page.tsx b/developer-portal/app/page.tsx
new file mode 100644
index 0000000..0e98f81
--- /dev/null
+++ b/developer-portal/app/page.tsx
@@ -0,0 +1,188 @@
+import Link from 'next/link'
+import { DevPortalLayout, CodeBlock, InfoBox } from '@/components/DevPortalLayout'
+import { Zap, Code, Terminal, Book, ArrowRight } from 'lucide-react'
+
+export default function DevelopersPage() {
+ return (
+
+ {/* Quick Links */}
+
+
+
+
+ Starten Sie in 5 Minuten mit dem AI Compliance SDK
+
+
+ Jetzt starten
+
+
+
+
+
+ Vollständige API-Dokumentation aller Endpoints
+
+
+ API erkunden
+
+
+
+
+
+
+
SDK Documentation
+
+
+ TypeScript SDK für React und Next.js
+
+
+ Dokumentation lesen
+
+
+
+
+
+ Schritt-für-Schritt-Anleitungen und Best Practices
+
+
+ Guides ansehen
+
+
Installation
+
+{`npm install @breakpilot/compliance-sdk
+# oder
+yarn add @breakpilot/compliance-sdk
+# oder
+pnpm add @breakpilot/compliance-sdk`}
+
+
+ {/* Quick Example */}
+ Schnellstart-Beispiel
+
+{`import { SDKProvider, useSDK } from '@breakpilot/compliance-sdk'
+
+function App() {
+ return (
+
+
+ )
+}
+
+function ComplianceDashboard() {
+ const { state, goToStep, completionPercentage } = useSDK()
+
+ return (
+
+
Compliance Status: {completionPercentage}%
+
Aktueller Schritt: {state.currentStep}
+
goToStep('risks')}>
+ Zur Risikoanalyse
+
+
+
+
+
+ Node.js 18 oder höher
+ React 18 oder höher
+ Breakpilot API Key (erhältlich nach Abo-Abschluss)
+
+
+
+ {/* Features */}
+ Hauptfunktionen
+
+
+
19-Schritt-Workflow
+
+ Geführter Compliance-Prozess von Use Case bis DSR-Portal
+
+
+
+
RAG-basierte Suche
+
+ Durchsuchen Sie DSGVO, AI Act, NIS2 mit semantischer Suche
+
+
+
+
Dokumentengenerierung
+
+ Automatische Erstellung von DSFA, TOMs, VVT
+
+
+
+
Export
+
+ PDF, JSON, ZIP-Export für Audits und Dokumentation
+
+
+
Nächste Schritte
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/developer-portal/app/sdk/configuration/page.tsx b/developer-portal/app/sdk/configuration/page.tsx
new file mode 100644
index 0000000..47d392d
--- /dev/null
+++ b/developer-portal/app/sdk/configuration/page.tsx
@@ -0,0 +1,256 @@
+import { DevPortalLayout, CodeBlock, InfoBox, ParameterTable } from '@/components/DevPortalLayout'
+
+export default function SDKConfigurationPage() {
+ return (
+
+ SDKProvider Props
+
+ Der SDKProvider akzeptiert folgende Konfigurationsoptionen:
+
+ void',
+ required: false,
+ description: 'Callback fuer Fehlerbehandlung',
+ },
+ {
+ name: 'onStateChange',
+ type: '(state: SDKState) => void',
+ required: false,
+ description: 'Callback bei State-Aenderungen',
+ },
+ ]}
+ />
+
+ Vollstaendiges Beispiel
+
+{`'use client'
+
+import { SDKProvider } from '@breakpilot/compliance-sdk'
+import { useRouter } from 'next/navigation'
+
+export default function SDKLayout({ children }: { children: React.ReactNode }) {
+ const router = useRouter()
+
+ return (
+ {
+ console.error('SDK Error:', error)
+ // Optional: Sentry oder anderes Error-Tracking
+ }}
+ onStateChange={(state) => {
+ console.log('State changed:', state.currentStep)
+ // Optional: Analytics-Events
+ }}
+ >
+ {children}
+
+ )
+}`}
+
+
+ Synchronisations-Strategien
+
+ 1. Nur localStorage (Offline-Only)
+
+{`
+ {children}
+ `}
+
+
+ Ideal fuer: Lokale Entwicklung, Demos, Privacy-fokussierte Installationen.
+ Daten werden nur im Browser gespeichert.
+
+
+ 2. Backend-Sync mit Fallback
+
+{`
+ {children}
+ `}
+
+
+ Empfohlen fuer: Produktionsumgebungen. Daten werden mit dem Backend
+ synchronisiert, localStorage dient als Fallback bei Netzwerkproblemen.
+
+
+ 3. Nur Backend (kein lokaler Cache)
+
+{`
+ {children}
+ `}
+
+
+ Ideal fuer: Strenge Compliance-Anforderungen, Multi-User-Szenarien.
+ Daten werden nur im Backend gespeichert.
+
+
+
+ Im Backend-Only Modus ist eine aktive Internetverbindung erforderlich.
+ Bei Netzwerkproblemen koennen Daten verloren gehen.
+
+
+ API URL Konfiguration
+
+ Cloud-Version (Standard)
+ Keine zusaetzliche Konfiguration erforderlich:
+
+{`
+ {/* Nutzt automatisch https://api.breakpilot.io/sdk/v1 */}
+ `}
+
+
+ Self-Hosted
+
+{`
+ {children}
+ `}
+
+
+ Lokale Entwicklung
+
+{`
+ {children}
+ `}
+
+
+ Feature Flags
+
+ Das SDK unterstuetzt Feature Flags ueber Subscription-Levels:
+
+
+{`import { useSDK } from '@breakpilot/compliance-sdk'
+
+function MyComponent() {
+ const { state } = useSDK()
+
+ // Subscription-basierte Features
+ const isEnterprise = state.subscription === 'ENTERPRISE'
+ const isProfessional = ['PROFESSIONAL', 'ENTERPRISE'].includes(state.subscription)
+
+ // Feature-Gates
+ const canExportPDF = isProfessional
+ const canUseRAG = isProfessional
+ const canCustomizeDSFA = isEnterprise
+ const canUseAPI = isProfessional
+
+ return (
+
+ {canExportPDF && PDF Export }
+ {canUseRAG &&
+ )
+}`}
+
+
+ Logging & Debugging
+
+ Aktivieren Sie detailliertes Logging fuer die Entwicklung:
+
+
+{`// In Ihrer .env.local
+NEXT_PUBLIC_SDK_DEBUG=true
+
+// Oder programmatisch
+ {
+ if (process.env.NODE_ENV === 'development') {
+ console.log('[SDK] State Update:', {
+ phase: state.currentPhase,
+ step: state.currentStep,
+ useCases: state.useCases.length,
+ risks: state.risks.length,
+ })
+ }
+ }}
+>
+ {children}
+ `}
+
+
+
+ Der SDK-State ist im React DevTools unter dem SDKProvider-Context sichtbar.
+ Installieren Sie die React Developer Tools Browser-Extension fuer einfaches Debugging.
+
+
+ )
+}
diff --git a/developer-portal/app/sdk/consent/api-reference/page.tsx b/developer-portal/app/sdk/consent/api-reference/page.tsx
new file mode 100644
index 0000000..89599c0
--- /dev/null
+++ b/developer-portal/app/sdk/consent/api-reference/page.tsx
@@ -0,0 +1,482 @@
+'use client'
+
+import React, { useState } from 'react'
+import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
+import { Copy, Check } from 'lucide-react'
+
+function CopyButton({ text }: { text: string }) {
+ const [copied, setCopied] = useState(false)
+
+ const handleCopy = async () => {
+ await navigator.clipboard.writeText(text)
+ setCopied(true)
+ setTimeout(() => setCopied(false), 2000)
+ }
+
+ return (
+
+ {copied ? (
+
+ )
+}
+
+function CodeBlock({ code }: { code: string }) {
+ return (
+
+ )
+}
+
+function MethodCard({
+ name,
+ signature,
+ description,
+ params,
+ returns,
+ example,
+}: {
+ name: string
+ signature: string
+ description: string
+ params?: { name: string; type: string; description: string }[]
+ returns?: string
+ example?: string
+}) {
+ return (
+
+
+ {name}
+
+
+
+ {signature}
+
+
{description}
+
+ {params && params.length > 0 && (
+
+
Parameter
+
+
+ {params.map((param) => (
+
+
+ {param.name}
+
+
+ {param.type}
+
+ {param.description}
+
+ ))}
+
+
+
+ )}
+
+ {returns && (
+
+
Rueckgabe
+ {returns}
+
+ )}
+
+ {example && (
+
+
Beispiel
+
+ )}
+
+
+
+
+
+
+
API Referenz
+
+ Vollstaendige Dokumentation aller Methoden und Konfigurationsoptionen des Consent SDK.
+
+
+ {/* ConsentManager */}
+
+ ConsentManager
+
+ Die zentrale Klasse fuer das Consent Management. Verwaltet Einwilligungen, Script-Blocking und Events.
+
+
+ {/* Constructor */}
+
+ {
+ await consent.acceptAll();
+});`}
+ />
+
+ {
+ await consent.rejectAll();
+});`}
+ />
+
+ {
+ await consent.revokeAll();
+ location.reload();
+});`}
+ />
+
+ {
+ console.log('Consent geaendert:', state);
+});
+
+// Spaeter: Listener entfernen
+unsubscribe();`}
+ />
+
+
+
+
+ {/* Configuration */}
+
+ Konfiguration
+
+
+
+
+
+
+ Option
+
+
+ Typ
+
+
+ Default
+
+
+ Beschreibung
+
+
+
+
+
+
+ apiEndpoint
+
+
+ string
+
+ erforderlich
+ URL des Consent-Backends
+
+
+
+ siteId
+
+
+ string
+
+ erforderlich
+ Eindeutige Site-ID
+
+
+
+ debug
+
+
+ boolean
+
+ false
+ Aktiviert Debug-Logging
+
+
+
+ language
+
+
+ string
+
+ 'de'
+ Sprache fuer UI-Texte
+
+
+
+ consent.rememberDays
+
+
+ number
+
+ 365
+ Gueltigkeitsdauer in Tagen
+
+
+
+ consent.recheckAfterDays
+
+
+ number
+
+ 180
+ Erneute Abfrage nach X Tagen
+
+
+
+
+
+ {/* Events */}
+
+ Events
+
+
+
+
+
+
+ Event
+
+
+ Daten
+
+
+ Beschreibung
+
+
+
+
+
+
+ init
+
+
+ ConsentState | null
+
+ SDK initialisiert
+
+
+
+ change
+
+
+ ConsentState
+
+ Consent geaendert
+
+
+
+ accept_all
+
+
+ ConsentState
+
+ Alle akzeptiert
+
+
+
+ reject_all
+
+
+ ConsentState
+
+ Alle abgelehnt
+
+
+
+ banner_show
+
+
+ undefined
+
+ Banner angezeigt
+
+
+
+ banner_hide
+
+
+ undefined
+
+ Banner versteckt
+
+
+
+ error
+
+
+ Error
+
+ Fehler aufgetreten
+
+
+
+
+
+ {/* Types */}
+
+ TypeScript Types
+ ;
+ vendors: Record;
+ timestamp: string;
+ version: string;
+ consentId?: string;
+ expiresAt?: string;
+}
+
+// Konfiguration
+interface ConsentConfig {
+ apiEndpoint: string;
+ siteId: string;
+ debug?: boolean;
+ language?: string;
+ fallbackLanguage?: string;
+ ui?: ConsentUIConfig;
+ consent?: ConsentBehaviorConfig;
+ onConsentChange?: (state: ConsentState) => void;
+ onBannerShow?: () => void;
+ onBannerHide?: () => void;
+ onError?: (error: Error) => void;
+}`}
+ />
+
+
+
+ {copied ?
+ )
+}
+
+function CodeBlock({ code, filename }: { code: string; filename?: string }) {
+ return (
+
+ {filename && (
+
+ {filename}
+
+ )}
+
+
+
+
+
+
+
+
+ A
+
+
Angular Integration
+
+
+ Service und Module fuer Angular 14+ Projekte.
+
+
+ {/* Installation */}
+
+
+ {/* Module Setup */}
+
+
+ {/* Standalone Setup */}
+
+ Standalone Setup (Angular 15+)
+
+
+ {/* Service Usage */}
+
+ Cookie Banner Component
+
+
+
+ Wir verwenden Cookies um Ihr Erlebnis zu verbessern.
+
+
+
+ Ablehnen
+
+
+ Einstellungen
+
+
+ Alle akzeptieren
+
+
+
+ ConsentGate Directive
+
+VIDEO
+
+
+
+
+
+
Bitte stimmen Sie Statistik-Cookies zu.
+
Einstellungen
+
`}
+ />
+
+
+ {/* Service API */}
+
+ Service API
+
+
+
+
+
+ Property/Method
+
+
+ Typ
+
+
+ Beschreibung
+
+
+
+
+
+ consent$Observable<ConsentState>Observable des aktuellen Consent
+
+
+ hasConsent$()Observable<boolean>Reaktive Consent-Pruefung
+
+
+ hasConsent()Promise<boolean>Async Consent-Pruefung
+
+
+ isBannerVisible$Observable<boolean>Banner-Sichtbarkeit
+
+
+ acceptAll()Promise<void>Akzeptiert alle
+
+
+ rejectAll()Promise<void>Lehnt alle ab
+
+
+ setConsent()Promise<void>Setzt spezifische Kategorien
+
+
+
+
+
+
+
+ )
+}
diff --git a/developer-portal/app/sdk/consent/frameworks/page.tsx b/developer-portal/app/sdk/consent/frameworks/page.tsx
new file mode 100644
index 0000000..f2df7a7
--- /dev/null
+++ b/developer-portal/app/sdk/consent/frameworks/page.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
+import { ChevronRight } from 'lucide-react'
+
+const frameworks = [
+ {
+ name: 'React',
+ href: '/sdk/consent/frameworks/react',
+ logo: '/logos/react.svg',
+ description: 'Hooks und Provider fuer React 17+ und Next.js',
+ features: ['ConsentProvider', 'useConsent Hook', 'ConsentGate Component'],
+ color: 'bg-cyan-500',
+ },
+ {
+ name: 'Vue 3',
+ href: '/sdk/consent/frameworks/vue',
+ logo: '/logos/vue.svg',
+ description: 'Composables und Plugin fuer Vue 3 und Nuxt',
+ features: ['Vue Plugin', 'useConsent Composable', 'ConsentGate Component'],
+ color: 'bg-emerald-500',
+ },
+ {
+ name: 'Angular',
+ href: '/sdk/consent/frameworks/angular',
+ logo: '/logos/angular.svg',
+ description: 'Service und Module fuer Angular 14+',
+ features: ['ConsentService', 'ConsentModule', 'Dependency Injection'],
+ color: 'bg-red-500',
+ },
+]
+
+export default function FrameworksPage() {
+ return (
+
+
+
+
+
+
Framework Integration
+
+ Das Consent SDK bietet native Integrationen fuer alle gaengigen Frontend-Frameworks.
+
+
+
+ {frameworks.map((framework) => (
+
+
+
+ {framework.name[0]}
+
+
+
+
+ {framework.name}
+
+
+
{framework.description}
+
+ {framework.features.map((feature) => (
+
+ {feature}
+
+ ))}
+
+
+
+
+ ))}
+
+
+ {/* Vanilla JS Note */}
+
+
Vanilla JavaScript
+
+ Sie koennen das SDK auch ohne Framework verwenden. Importieren Sie einfach den ConsentManager direkt
+ aus dem Hauptpaket. Siehe{' '}
+
+
+
+
+ {copied ?
+ )
+}
+
+function CodeBlock({ code, filename }: { code: string; filename?: string }) {
+ return (
+
+ {filename && (
+
+ {filename}
+
+ )}
+
+
+
+
+
+
+
+
+ R
+
+
React Integration
+
+
+ Hooks und Provider fuer React 17+ und Next.js Projekte.
+
+
+ {/* Installation */}
+
+
+ {/* Provider Setup */}
+
+ Provider Setup
+
+ Umschliessen Sie Ihre App mit dem ConsentProvider:
+
+
+
+
+ {children}
+
+
+