BreakPilot Developer Portal

1. Installation

Installieren Sie das SDK über Ihren bevorzugten Paketmanager:

Terminal

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 Einstellungsbereich.

Sicherheitshinweis

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:

app/layout.tsx

import { SDKProvider } from '@breakpilot/compliance-sdk'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="de">
      <body>
        <SDKProvider
          tenantId={process.env.TENANT_ID}
          apiKey={process.env.BREAKPILOT_API_KEY}
          enableBackendSync={true}
        >
          {children}
        </SDKProvider>
      </body>
    </html>
  )
}

Provider Props

Parameter	Type	Required	Description
`tenantId`	`string`	Yes	Ihre eindeutige Tenant-ID
`apiKey`	`string`	No	API Key für Backend-Sync (serverseitig)
`userId`	`string`	No	Optional: Benutzer-ID für Audit-Trail
`enableBackendSync`	`boolean`	No	Aktiviert Synchronisation mit dem Backend (default: false)

4. SDK verwenden

Nutzen Sie den useSDK Hook in Ihren Komponenten:

components/Dashboard.tsx

'use client'

import { useSDK } from '@breakpilot/compliance-sdk'

export function ComplianceDashboard() {
  const {
    state,
    completionPercentage,
    goToStep,
    currentStep,
  } = useSDK()

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold">
        Compliance Fortschritt: {completionPercentage}%
      </h1>

      <div className="mt-4">
        <p>Aktueller Schritt: {currentStep?.name}</p>
        <p>Phase: {state.currentPhase}</p>
        <p>Use Cases: {state.useCases.length}</p>
      </div>

      <div className="mt-6 flex gap-4">
        <button
          onClick={() => goToStep('use-case-workshop')}
          className="px-4 py-2 bg-blue-600 text-white rounded"
        >
          Use Case Workshop
        </button>
        <button
          onClick={() => goToStep('risks')}
          className="px-4 py-2 bg-blue-600 text-white rounded"
        >
          Risikoanalyse
        </button>
      </div>
    </div>
  )
}

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

SDK Konfiguration - Alle Konfigurationsoptionen
State API - Verstehen Sie das State Management
Phase 1 Guide - Kompletter Workflow für das Assessment

Quick Start