KI-Integration ist der nächste große Trend in Web-Apps. Von Chatbots über Content-Generierung bis zu intelligenter Suche – KI-Features werden Standard. Dieser Guide zeigt praktische Implementierungen mit OpenAI API.
1. KI Use Cases für Web-Anwendungen
Chatbots für Customer Support
Content-Generierung und Zusammenfassungen
Semantische Suche mit Embeddings
Code-Vervollständigung und -Erklärung
Bild-Generierung und -Analyse
Übersetzungen und Sprach-Features
2. OpenAI API Setup
Erste Schritte mit OpenAI API in Next.js:
// lib/openai.ts
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
// Einfache Completion
export async function generateText(prompt: string) {
const completion = await openai.chat.completions.create({
model: "gpt-4-turbo-preview",
messages: [
{ role: "system", content: "Du bist ein hilfreicher Assistent." },
{ role: "user", content: prompt }
],
temperature: 0.7,
max_tokens: 500,
});
return completion.choices[0].message.content;
}3. Streaming-Antworten für Bessere UX
Streaming ermöglicht es, Antworten progressiv anzuzeigen:
// app/api/chat/route.ts
import { OpenAIStream, StreamingTextResponse } from 'ai';
export async function POST(req: Request) {
const { messages } = await req.json();
const response = await openai.chat.completions.create({
model: 'gpt-4-turbo-preview',
stream: true,
messages,
});
const stream = OpenAIStream(response);
return new StreamingTextResponse(stream);
}
// Client Component
'use client'
import { useChat } from 'ai/react';
export function ChatInterface() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div>
{messages.map(m => (
<div key={m.id}>{m.content}</div>
))}
<form onSubmit={handleSubmit}>
<input value={input} onChange={handleInputChange} />
</form>
</div>
);
}4. RAG-System mit Embeddings Bauen
Retrieval Augmented Generation (RAG) kombiniert Ihre Daten mit KI:
// 1. Erstelle Embeddings für Dokumente
async function createEmbeddings(texts: string[]) {
const embeddings = await openai.embeddings.create({
model: "text-embedding-3-small",
input: texts,
});
return embeddings.data.map(e => e.embedding);
}
// 2. Suche ähnliche Dokumente
function cosineSimilarity(a: number[], b: number[]) {
const dotProduct = a.reduce((sum, ai, i) => sum + ai * b[i], 0);
const magnitudeA = Math.sqrt(a.reduce((sum, ai) => sum + ai * ai, 0));
const magnitudeB = Math.sqrt(b.reduce((sum, bi) => sum + bi * bi, 0));
return dotProduct / (magnitudeA * magnitudeB);
}
// 3. RAG Query
async function ragQuery(question: string, documents: Doc[]) {
const questionEmbedding = await createEmbeddings([question]);
// Finde relevante Dokumente
const relevant = documents
.map(doc => ({
doc,
similarity: cosineSimilarity(questionEmbedding[0], doc.embedding)
}))
.sort((a, b) => b.similarity - a.similarity)
.slice(0, 3);
// Generiere Antwort mit Kontext
const context = relevant.map(r => r.doc.content).join('\n\n');
const prompt = `Context: ${context}\n\nQuestion: ${question}`;
return await generateText(prompt);
}Dies funktioniert perfekt in SaaS-Architekturen mit PostgreSQL für Embedding-Storage.
5. Kosten-Optimierung
Cachen Sie häufige Anfragen
Nutzen Sie günstigere Modelle wo möglich (gpt-3.5-turbo)
Limitieren Sie max_tokens
Batch-Processing für Embeddings
Rate Limiting implementieren
// Einfaches Caching
const cache = new Map();
async function cachedGeneration(prompt: string) {
if (cache.has(prompt)) {
return cache.get(prompt);
}
const result = await generateText(prompt);
cache.set(prompt, result);
return result;
}6. Error Handling und Retry-Logic
OpenAI API kann Rate Limits haben oder zeitweise ausfallen:
async function generateWithRetry(prompt: string, maxRetries = 3) {
for (let i = 0; i < maxRetries; i++) {
try {
return await generateText(prompt);
} catch (error) {
if (i === maxRetries - 1) throw error;
// Exponential backoff
await new Promise(r => setTimeout(r, Math.pow(2, i) * 1000));
}
}
}TypeScript Integration
Nutzen Sie TypeScript für Type-Safety bei KI-Antworten. Dies hilft besonders in großen Projekten.
Fazit
KI-Integration in Web-Apps ist zugänglicher denn je. Mit OpenAI API können Sie in wenigen Stunden mächtige Features bauen. Starten Sie mit einfachen Chatbots, erweitern Sie zu RAG-Systemen, und optimieren Sie Kosten graduell. Die Zukunft ist KI-augmented.
