4435e7ea0a
Services: Admin-Compliance, Backend-Compliance, AI-Compliance-SDK, Consent-SDK, Developer-Portal, PCA-Platform, DSMS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
204 lines
5.7 KiB
TypeScript
204 lines
5.7 KiB
TypeScript
import Link from 'next/link'
|
|
import { DevPortalLayout, CodeBlock, InfoBox, ParameterTable } from '@/components/DevPortalLayout'
|
|
|
|
export default function GettingStartedPage() {
|
|
return (
|
|
<DevPortalLayout
|
|
title="Quick Start"
|
|
description="Starten Sie in 5 Minuten mit dem AI Compliance SDK"
|
|
>
|
|
<h2>1. Installation</h2>
|
|
<p>
|
|
Installieren Sie das SDK über Ihren bevorzugten Paketmanager:
|
|
</p>
|
|
<CodeBlock language="bash" filename="Terminal">
|
|
{`npm install @breakpilot/compliance-sdk
|
|
# oder
|
|
yarn add @breakpilot/compliance-sdk
|
|
# oder
|
|
pnpm add @breakpilot/compliance-sdk`}
|
|
</CodeBlock>
|
|
|
|
<h2>2. API Key erhalten</h2>
|
|
<p>
|
|
Nach dem Abo-Abschluss erhalten Sie Ihren API Key im{' '}
|
|
<Link href="/settings" className="text-blue-600 hover:underline">
|
|
Einstellungsbereich
|
|
</Link>.
|
|
</p>
|
|
|
|
<InfoBox type="warning" title="Sicherheitshinweis">
|
|
Speichern Sie den API Key niemals im Frontend-Code. Verwenden Sie
|
|
Umgebungsvariablen auf dem Server.
|
|
</InfoBox>
|
|
|
|
<h2>3. Provider einrichten</h2>
|
|
<p>
|
|
Wrappen Sie Ihre App mit dem SDKProvider:
|
|
</p>
|
|
<CodeBlock language="typescript" filename="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>
|
|
)
|
|
}`}
|
|
</CodeBlock>
|
|
|
|
<h3>Provider Props</h3>
|
|
<ParameterTable
|
|
parameters={[
|
|
{
|
|
name: 'tenantId',
|
|
type: 'string',
|
|
required: true,
|
|
description: 'Ihre eindeutige Tenant-ID',
|
|
},
|
|
{
|
|
name: 'apiKey',
|
|
type: 'string',
|
|
required: false,
|
|
description: 'API Key für Backend-Sync (serverseitig)',
|
|
},
|
|
{
|
|
name: 'userId',
|
|
type: 'string',
|
|
required: false,
|
|
description: 'Optional: Benutzer-ID für Audit-Trail',
|
|
},
|
|
{
|
|
name: 'enableBackendSync',
|
|
type: 'boolean',
|
|
required: false,
|
|
description: 'Aktiviert Synchronisation mit dem Backend (default: false)',
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<h2>4. SDK verwenden</h2>
|
|
<p>
|
|
Nutzen Sie den useSDK Hook in Ihren Komponenten:
|
|
</p>
|
|
<CodeBlock language="typescript" filename="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>
|
|
)
|
|
}`}
|
|
</CodeBlock>
|
|
|
|
<h2>5. Erste Schritte im Workflow</h2>
|
|
<p>
|
|
Das SDK führt Sie durch einen 19-Schritte-Workflow in 2 Phasen:
|
|
</p>
|
|
|
|
<div className="my-6 not-prose">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="p-4 border border-gray-200 rounded-lg">
|
|
<h4 className="font-semibold mb-2">Phase 1: Assessment</h4>
|
|
<ol className="text-sm text-gray-600 space-y-1 list-decimal list-inside">
|
|
<li>Use Case Workshop</li>
|
|
<li>System Screening</li>
|
|
<li>Compliance Modules</li>
|
|
<li>Requirements</li>
|
|
<li>Controls</li>
|
|
<li>Evidence</li>
|
|
<li>Audit Checklist</li>
|
|
<li>Risk Matrix</li>
|
|
</ol>
|
|
</div>
|
|
<div className="p-4 border border-gray-200 rounded-lg">
|
|
<h4 className="font-semibold mb-2">Phase 2: Dokumentation</h4>
|
|
<ol className="text-sm text-gray-600 space-y-1 list-decimal list-inside">
|
|
<li>AI Act Klassifizierung</li>
|
|
<li>Pflichtenübersicht</li>
|
|
<li>DSFA</li>
|
|
<li>TOMs</li>
|
|
<li>Löschfristen</li>
|
|
<li>VVT</li>
|
|
<li>Rechtliche Vorlagen</li>
|
|
<li>Cookie Banner</li>
|
|
<li>Einwilligungen</li>
|
|
<li>DSR Portal</li>
|
|
<li>Escalations</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>6. Nächste Schritte</h2>
|
|
<ul>
|
|
<li>
|
|
<Link href="/sdk/configuration" className="text-blue-600 hover:underline">
|
|
SDK Konfiguration
|
|
</Link>
|
|
{' '}- Alle Konfigurationsoptionen
|
|
</li>
|
|
<li>
|
|
<Link href="/api/state" className="text-blue-600 hover:underline">
|
|
State API
|
|
</Link>
|
|
{' '}- Verstehen Sie das State Management
|
|
</li>
|
|
<li>
|
|
<Link href="/guides/phase1" className="text-blue-600 hover:underline">
|
|
Phase 1 Guide
|
|
</Link>
|
|
{' '}- Kompletter Workflow für das Assessment
|
|
</li>
|
|
</ul>
|
|
</DevPortalLayout>
|
|
)
|
|
}
|