Künstliche Intelligenz in Ihr SaaS zu integrieren, ist nicht mehr großen Unternehmen vorbehalten. Mit den richtigen APIs können Sie Textgenerierung, automatisiertes SEO und Codegenerierung in wenigen Minuten integrieren. Dieses Tutorial zeigt Ihnen genau, wie es geht, mit kopierbarem Code.
Voraussetzungen
- Ein Next.js 14+ Projekt (App Router)
- Ein NeuraAPI-Schlüssel (kostenlos auf /register)
- Node.js 18+ installiert
Schritt 1 — Erstellen Sie Ihr Konto und erhalten Sie einen API-Schlüssel
Gehen Sie zu /register und erstellen Sie ein kostenloses Konto. Sie erhalten sofort einen API-Schlüssel, der mit napi_ beginnt. 100 monatliche Credits werden angeboten.
Bewahren Sie diesen Schlüssel sicher auf. Er wird in allen Ihren API-Aufrufen verwendet.
Schritt 2 — Installieren Sie das SDK
Das TypeScript SDK macht die Integration ultra-einfach. Eine einzige Abhängigkeit, keine Konfiguration.
npm install @neuraapi/sdk
Schritt 3 — Erstellen Sie einen serverseitigen KI-Dienst
Erstellen Sie eine Datei lib/ai.ts, die die API-Aufrufe kapselt. Dies ist der zentrale Punkt Ihrer Integration.
// lib/ai.ts
import { NeuraAPI } from '@neuraapi/sdk'
const ai = new NeuraAPI(process.env.NEURA_API_KEY!)
export async function generateContent(prompt: string) {
const result = await ai.generate({
prompt,
maxTokens: 1000,
})
return result.content
}
export async function generateSEO(topic: string, keywords: string[]) {
const result = await ai.seo({
topic,
keywords,
maxTokens: 2000,
})
return {
title: result.title,
metaDescription: result.metaDescription,
content: result.content,
}
}
export async function generateCode(description: string, language = 'typescript') {
const result = await ai.code({
description,
language,
})
return result.code
}Schritt 4 — Erstellen Sie eine Next.js API-Route
Stellen Sie eine API-Route in Ihrem SaaS bereit. Diese Route wird von Ihrem Frontend aufgerufen, um Inhalte zu generieren.
// app/api/generate/route.ts
import { NextResponse } from 'next/server'
import { generateContent } from '@/lib/ai'
import { auth } from '@/lib/auth'
export async function POST(req: Request) {
const session = await auth()
if (!session) {
return NextResponse.json({ error: 'Nicht autorisiert' }, { status: 401 })
}
const { prompt } = await req.json()
if (!prompt || typeof prompt !== 'string') {
return NextResponse.json({ error: 'Prompt erforderlich' }, { status: 400 })
}
try {
const content = await generateContent(prompt)
return NextResponse.json({ content })
} catch (error) {
return NextResponse.json({ error: 'Generierungsfehler' }, { status: 500 })
}
}Schritt 5 — Aufruf vom Frontend
Auf der Client-Seite rufen Sie Ihre API-Route mit einem einfachen fetch auf. Hier ist eine vollständige React-Komponente.
// components/AIGenerator.tsx
'use client'
import { useState } from 'react'
export function AIGenerator() {
const [prompt, setPrompt] = useState('')
const [result, setResult] = useState('')
const [loading, setLoading] = useState(false)
const handleGenerate = async () => {
if (!prompt.trim()) return
setLoading(true)
setResult('')
const res = await fetch('/api/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt }),
})
const data = await res.json()
setResult(data.content || data.error)
setLoading(false)
}
return (
<div className="space-y-4">
<textarea aria-label="Beschreiben Sie, was Sie generieren möchten..."
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="Beschreiben Sie, was Sie generieren möchten..."
className="w-full rounded-lg border p-3"
rows={3}
/>
<button
onClick={handleGenerate}
disabled={loading}
className="rounded-lg bg-indigo-600 px-6 py-2 text-white"
>
{loading ? 'Generierung...' : 'Generieren'}
</button>
{result && (
<div className="rounded-lg bg-gray-50 p-4">
<p>{result}</p>
</div>
)}
</div>
)
}Schritt 6 — Rate Limiting hinzufügen
Schützen Sie Ihre API vor Missbrauch. Hier ist ein einfaches Middleware, das die Aufrufe pro Benutzer begrenzt.
// lib/rate-limit.ts
const requests = new Map<string, number[]>()
export function rateLimit(key: string, limit = 10, windowMs = 60000) {
const now = Date.now()
const timestamps = requests.get(key) || []
const recent = timestamps.filter(t => now - t < windowMs)
if (recent.length >= limit) {
return false
}
recent.push(now)
requests.set(key, recent)
return true
}
// Verwendung in der API-Route:
// if (!rateLimit(session.user.id)) {
// return NextResponse.json({ error: 'Zu viele Anfragen' }, { status: 429 })
// }Best Practices
API-Schlüssel nie auf der Client-Seite offenlegen
Verwenden Sie immer einen Server-Proxy (Next.js API-Route) für KI-API-Aufrufe. Der API-Schlüssel darf niemals im JavaScript-Code erscheinen, der an den Browser gesendet wird.
Benutzereingaben validieren
Sanieren und validieren Sie immer den vom Benutzer gesendeten Prompt. Begrenzen Sie die Länge, filtern Sie gefährliche Zeichen und verwenden Sie zod oder joi für die Validierung.
Antworten zwischenspeichern
Für ähnliche Prompts zwischenspeichern Sie KI-Antworten. Ein Redis-Cache mit 24h TTL reduziert die Kosten erheblich, ohne die Qualität zu beeinträchtigen.
Kosten überwachen
Verfolgen Sie den Credit-Verbrauch pro Benutzer und pro Funktion. KI-APIs können teuer sein, wenn sie nicht optimiert sind.
Fazit
In 6 einfachen Schritten haben Sie KI in Ihr SaaS integriert. Inhaltsgenerierung, automatisiertes SEO und Codegenerierung sind jetzt für Ihre Benutzer zugänglich. Alles in unter 30 Minuten.
NeuraAPI vereinfacht diese Integration: Ein einziger API-Schlüssel, ein TypeScript-SDK, dokumentierte Endpunkte. Sie konzentrieren sich auf Ihr Produkt, wir kümmern uns um die KI-Infrastruktur.
Bereit, KI zu integrieren?
Holen Sie sich Ihren kostenlosen API-Schlüssel und beginnen Sie in Minuten mit dem Bauen.