import { DevPortalLayout, CodeBlock, InfoBox, ParameterTable } from '@/components/DevPortalLayout' export default function SDKInstallationPage() { return (

Voraussetzungen

Installation

Installieren Sie das SDK ueber Ihren bevorzugten Paketmanager:

{`npm install @breakpilot/compliance-sdk`} {`yarn add @breakpilot/compliance-sdk`} {`pnpm add @breakpilot/compliance-sdk`}

Peer Dependencies

Das SDK hat folgende Peer Dependencies, die automatisch installiert werden sollten:

{`{ "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }`}

Zusaetzliche Pakete (optional)

Fuer erweiterte Funktionen koennen Sie folgende Pakete installieren:

TypeScript Konfiguration

Das SDK ist vollstaendig in TypeScript geschrieben. Stellen Sie sicher, dass Ihre tsconfig.json folgende Optionen enthaelt:

{`{ "compilerOptions": { "target": "ES2020", "lib": ["dom", "dom.iterable", "esnext"], "module": "esnext", "moduleResolution": "bundler", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true } }`}

Next.js Integration

Fuer Next.js 14+ mit App Router, fuegen Sie den Provider in Ihr Root-Layout ein:

{`import { SDKProvider } from '@breakpilot/compliance-sdk' export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }`} Der SDKProvider ist ein Client-Component. Wenn Sie Server Components verwenden, wrappen Sie nur die Teile der App, die das SDK benoetigen.

Umgebungsvariablen

Erstellen Sie eine .env.local Datei mit folgenden Variablen:

{`# Pflicht NEXT_PUBLIC_TENANT_ID=your-tenant-id # Optional (fuer Backend-Sync) BREAKPILOT_API_KEY=sk_live_... # Optional (fuer Self-Hosted) NEXT_PUBLIC_SDK_API_URL=https://your-server.com/sdk/v1`} Der API Key sollte niemals im Frontend-Code oder in NEXT_PUBLIC_ Variablen erscheinen. Verwenden Sie Server-Side API Routes fuer authentifizierte Anfragen.

Verifizierung

Testen Sie die Installation mit einer einfachen Komponente:

{`'use client' import { useSDK } from '@breakpilot/compliance-sdk' export default function TestPage() { const { state, completionPercentage } = useSDK() return (

SDK Test

Fortschritt: {completionPercentage}%

Aktuelle Phase: {state.currentPhase}

Use Cases: {state.useCases.length}

) }`}

Fehlerbehebung

Error: useSDK must be used within SDKProvider

Stellen Sie sicher, dass der SDKProvider das gesamte Layout umschliesst und dass Sie {'\'use client\''} in Client-Komponenten verwenden.

Error: Module not found

Loeschen Sie node_modules und package-lock.json, dann reinstallieren:

{`rm -rf node_modules package-lock.json npm install`}

TypeScript Errors

Stellen Sie sicher, dass TypeScript 5.0+ installiert ist:

{`npm install typescript@latest`} ) }