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>
187 lines
5.2 KiB
TypeScript
187 lines
5.2 KiB
TypeScript
import { DevPortalLayout, CodeBlock, InfoBox, ParameterTable } from '@/components/DevPortalLayout'
|
|
|
|
export default function SDKInstallationPage() {
|
|
return (
|
|
<DevPortalLayout
|
|
title="SDK Installation"
|
|
description="Installationsanleitung fuer das AI Compliance SDK"
|
|
>
|
|
<h2>Voraussetzungen</h2>
|
|
<ul>
|
|
<li>Node.js 18 oder hoeher</li>
|
|
<li>React 18+ / Next.js 14+</li>
|
|
<li>TypeScript 5.0+ (empfohlen)</li>
|
|
</ul>
|
|
|
|
<h2>Installation</h2>
|
|
<p>
|
|
Installieren Sie das SDK ueber Ihren bevorzugten Paketmanager:
|
|
</p>
|
|
<CodeBlock language="bash" filename="npm">
|
|
{`npm install @breakpilot/compliance-sdk`}
|
|
</CodeBlock>
|
|
<CodeBlock language="bash" filename="yarn">
|
|
{`yarn add @breakpilot/compliance-sdk`}
|
|
</CodeBlock>
|
|
<CodeBlock language="bash" filename="pnpm">
|
|
{`pnpm add @breakpilot/compliance-sdk`}
|
|
</CodeBlock>
|
|
|
|
<h2>Peer Dependencies</h2>
|
|
<p>
|
|
Das SDK hat folgende Peer Dependencies, die automatisch installiert werden sollten:
|
|
</p>
|
|
<CodeBlock language="json" filename="package.json">
|
|
{`{
|
|
"peerDependencies": {
|
|
"react": ">=18.0.0",
|
|
"react-dom": ">=18.0.0"
|
|
}
|
|
}`}
|
|
</CodeBlock>
|
|
|
|
<h2>Zusaetzliche Pakete (optional)</h2>
|
|
<p>
|
|
Fuer erweiterte Funktionen koennen Sie folgende Pakete installieren:
|
|
</p>
|
|
<ParameterTable
|
|
parameters={[
|
|
{
|
|
name: 'jspdf',
|
|
type: 'npm package',
|
|
required: false,
|
|
description: 'Fuer PDF-Export (wird automatisch geladen wenn verfuegbar)',
|
|
},
|
|
{
|
|
name: 'jszip',
|
|
type: 'npm package',
|
|
required: false,
|
|
description: 'Fuer ZIP-Export aller Dokumente',
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<h2>TypeScript Konfiguration</h2>
|
|
<p>
|
|
Das SDK ist vollstaendig in TypeScript geschrieben. Stellen Sie sicher,
|
|
dass Ihre tsconfig.json folgende Optionen enthaelt:
|
|
</p>
|
|
<CodeBlock language="json" filename="tsconfig.json">
|
|
{`{
|
|
"compilerOptions": {
|
|
"target": "ES2020",
|
|
"lib": ["dom", "dom.iterable", "esnext"],
|
|
"module": "esnext",
|
|
"moduleResolution": "bundler",
|
|
"strict": true,
|
|
"esModuleInterop": true,
|
|
"skipLibCheck": true,
|
|
"forceConsistentCasingInFileNames": true
|
|
}
|
|
}`}
|
|
</CodeBlock>
|
|
|
|
<h2>Next.js Integration</h2>
|
|
<p>
|
|
Fuer Next.js 14+ mit App Router, fuegen Sie den Provider in Ihr Root-Layout ein:
|
|
</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.NEXT_PUBLIC_TENANT_ID!}
|
|
apiKey={process.env.BREAKPILOT_API_KEY}
|
|
enableBackendSync={true}
|
|
>
|
|
{children}
|
|
</SDKProvider>
|
|
</body>
|
|
</html>
|
|
)
|
|
}`}
|
|
</CodeBlock>
|
|
|
|
<InfoBox type="warning" title="Wichtig fuer Server Components">
|
|
Der SDKProvider ist ein Client-Component. Wenn Sie Server Components
|
|
verwenden, wrappen Sie nur die Teile der App, die das SDK benoetigen.
|
|
</InfoBox>
|
|
|
|
<h2>Umgebungsvariablen</h2>
|
|
<p>
|
|
Erstellen Sie eine .env.local Datei mit folgenden Variablen:
|
|
</p>
|
|
<CodeBlock language="bash" filename=".env.local">
|
|
{`# 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`}
|
|
</CodeBlock>
|
|
|
|
<InfoBox type="info" title="API Key Sicherheit">
|
|
Der API Key sollte niemals im Frontend-Code oder in NEXT_PUBLIC_ Variablen
|
|
erscheinen. Verwenden Sie Server-Side API Routes fuer authentifizierte Anfragen.
|
|
</InfoBox>
|
|
|
|
<h2>Verifizierung</h2>
|
|
<p>
|
|
Testen Sie die Installation mit einer einfachen Komponente:
|
|
</p>
|
|
<CodeBlock language="typescript" filename="app/test/page.tsx">
|
|
{`'use client'
|
|
|
|
import { useSDK } from '@breakpilot/compliance-sdk'
|
|
|
|
export default function TestPage() {
|
|
const { state, completionPercentage } = useSDK()
|
|
|
|
return (
|
|
<div>
|
|
<h1>SDK Test</h1>
|
|
<p>Fortschritt: {completionPercentage}%</p>
|
|
<p>Aktuelle Phase: {state.currentPhase}</p>
|
|
<p>Use Cases: {state.useCases.length}</p>
|
|
</div>
|
|
)
|
|
}`}
|
|
</CodeBlock>
|
|
|
|
<h2>Fehlerbehebung</h2>
|
|
|
|
<h3>Error: useSDK must be used within SDKProvider</h3>
|
|
<p>
|
|
Stellen Sie sicher, dass der SDKProvider das gesamte Layout umschliesst
|
|
und dass Sie {'\'use client\''} in Client-Komponenten verwenden.
|
|
</p>
|
|
|
|
<h3>Error: Module not found</h3>
|
|
<p>
|
|
Loeschen Sie node_modules und package-lock.json, dann reinstallieren:
|
|
</p>
|
|
<CodeBlock language="bash" filename="Terminal">
|
|
{`rm -rf node_modules package-lock.json
|
|
npm install`}
|
|
</CodeBlock>
|
|
|
|
<h3>TypeScript Errors</h3>
|
|
<p>
|
|
Stellen Sie sicher, dass TypeScript 5.0+ installiert ist:
|
|
</p>
|
|
<CodeBlock language="bash" filename="Terminal">
|
|
{`npm install typescript@latest`}
|
|
</CodeBlock>
|
|
</DevPortalLayout>
|
|
)
|
|
}
|