Przejdź do treści
KI & ML

ChatGPT API - KI-Integration in Webanwendungen

Veröffentlicht am:
·5 Min. Lesezeit·Autor: MDS Software Solutions Group
openaichatgptapiaiintegration
ChatGPT API - KI-Integration in Webanwendungen

ChatGPT API - KI-Integration in Webanwendungen

Die OpenAI API ist eines der leistungsfaehigsten Werkzeuge fuer Entwickler, die ihre Anwendungen mit kuenstlicher Intelligenz erweitern moechten. Von der Textgenerierung ueber die Dokumentenanalyse bis hin zum Aufbau fortschrittlicher Chatbots - die ChatGPT API oeffnet die Tuer zu einer neuen Generation von Webanwendungen. In diesem Leitfaden behandeln wir alle wichtigen Aspekte der Integration, von den Grundlagen bis zu fortgeschrittenen Optimierungstechniken.

OpenAI API im Ueberblick#

OpenAI stellt eine RESTful API bereit, die die Interaktion mit Sprachmodellen aus jeder Programmiersprache ermoeglicht. Die wichtigsten Komponenten des Oekosystems sind:

  • Chat Completions API - der Haupt-Endpoint fuer Konversation und Textgenerierung
  • Embeddings API - Generierung von Vektordarstellungen von Text
  • Moderation API - Inhaltsfilterung fuer Sicherheit
  • Assistants API - fortgeschrittene Assistenten mit Gedaechtnis und Werkzeugen
  • Images API (DALL-E) - Bildgenerierung und -bearbeitung
  • Audio API (Whisper, TTS) - Sprachtranskription und Sprachsynthese

Installation und Konfiguration#

Beginnen wir mit der Installation des offiziellen Node.js SDK:

npm install openai

Client-Konfiguration:

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

Den API-Schluessel erhalten Sie im Dashboard von platform.openai.com. Betten Sie den Schluessel niemals direkt in den Code ein - verwenden Sie immer Umgebungsvariablen.

GPT-4- und GPT-3.5-Modelle#

OpenAI bietet mehrere Modelle an, die sich in Faehigkeiten, Geschwindigkeit und Kosten unterscheiden:

GPT-4 Turbo (gpt-4-turbo)#

  • Neueste Version von GPT-4 mit einem Kontextfenster von 128K Token
  • Wissen bis April 2024
  • Hervorragend fuer komplexe Aufgaben: Codeanalyse, mehrstufiges Reasoning, lange Textgenerierung
  • Kosten: ~$10/1M Eingabe-Token, ~$30/1M Ausgabe-Token

GPT-4o (gpt-4o)#

  • Optimierte Version von GPT-4 - schneller und guenstiger
  • Multimodal - unterstuetzt Text, Bilder und Audio
  • Kontextfenster von 128K Token
  • Kosten: ~$2,50/1M Eingabe-Token, ~$10/1M Ausgabe-Token

GPT-3.5 Turbo (gpt-3.5-turbo)#

  • Schnelles und wirtschaftliches Modell fuer einfachere Aufgaben
  • Kontextfenster von 16K Token
  • Ideal fuer: Klassifizierung, Zusammenfassungen, einfache Chatbots
  • Kosten: ~$0,50/1M Eingabe-Token, ~$1,50/1M Ausgabe-Token
// Modellauswahl basierend auf Aufgabenkomplexitaet
const model = taskComplexity === "high"
  ? "gpt-4-turbo"
  : taskComplexity === "medium"
    ? "gpt-4o"
    : "gpt-3.5-turbo";

Chat Completions API - Grundlagen#

Die Chat Completions API ist der Haupt-Endpoint fuer die Interaktion mit GPT-Modellen. Die Kommunikation erfolgt ueber ein Array von Nachrichten mit Rollen:

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

async function chatCompletion() {
  const response = await openai.chat.completions.create({
    model: "gpt-4-turbo",
    messages: [
      {
        role: "system",
        content:
          "Du bist ein Experte fuer Webentwicklung. " +
          "Du antwortest praegnant und gibst Codebeispiele.",
      },
      {
        role: "user",
        content: "Wie implementiere ich Middleware in Next.js?",
      },
    ],
    temperature: 0.7,
    max_tokens: 1000,
  });

  return response.choices[0].message.content;
}

Rollen in der Konversation#

  • system - Anweisungen, die das Verhalten des Modells definieren (Persona, Stil, Einschraenkungen)
  • user - Nachrichten vom Benutzer
  • assistant - Modellantworten (verwendet fuer die Fortsetzung der Konversation)

Wichtige Parameter#

| Parameter | Beschreibung | Bereich | |-----------|-------------|---------| | temperature | Kreativitaet der Antworten | 0.0 - 2.0 | | max_tokens | Maximale Antwortlaenge | 1 - Modelllimit | | top_p | Nucleus Sampling | 0.0 - 1.0 | | frequency_penalty | Strafe fuer Wortwiederholungen | -2.0 - 2.0 | | presence_penalty | Strafe fuer Themenwiederholungen | -2.0 - 2.0 | | stop | Stoppsequenzen | string[] |

Streaming - Echtzeit-Antworten#

Streaming ermoeglicht die Anzeige von Antworten Token fuer Token, was die Benutzererfahrung erheblich verbessert:

async function streamChat(userMessage: string) {
  const stream = await openai.chat.completions.create({
    model: "gpt-4-turbo",
    messages: [
      { role: "system", content: "Du bist ein hilfreicher Assistent." },
      { role: "user", content: userMessage },
    ],
    stream: true,
  });

  let fullResponse = "";

  for await (const chunk of stream) {
    const content = chunk.choices[0]?.delta?.content || "";
    fullResponse += content;
    process.stdout.write(content); // Echtzeit-Anzeige
  }

  return fullResponse;
}

Streaming in Next.js mit Server-Sent Events#

// app/api/chat/route.ts
import { NextRequest } from "next/server";
import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export async function POST(req: NextRequest) {
  const { messages } = await req.json();

  const stream = await openai.chat.completions.create({
    model: "gpt-4-turbo",
    messages,
    stream: true,
  });

  const encoder = new TextEncoder();
  const readable = new ReadableStream({
    async start(controller) {
      for await (const chunk of stream) {
        const content = chunk.choices[0]?.delta?.content || "";
        if (content) {
          controller.enqueue(
            encoder.encode(`data: ${JSON.stringify({ content })}\n\n`)
          );
        }
      }
      controller.enqueue(encoder.encode("data: [DONE]\n\n"));
      controller.close();
    },
  });

  return new Response(readable, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      Connection: "keep-alive",
    },
  });
}

Function Calling und Tool Use#

Function Calling ermoeglicht es dem Modell, vom Entwickler definierte Funktionen aufzurufen, was die Integration mit externen APIs und Datenbanken ermoeglicht:

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

// Tool-Definitionen
const tools: OpenAI.Chat.Completions.ChatCompletionTool[] = [
  {
    type: "function",
    function: {
      name: "get_weather",
      description: "Ruft das aktuelle Wetter fuer eine Stadt ab",
      parameters: {
        type: "object",
        properties: {
          city: {
            type: "string",
            description: "Stadtname, z.B. Berlin",
          },
          unit: {
            type: "string",
            enum: ["celsius", "fahrenheit"],
            description: "Temperatureinheit",
          },
        },
        required: ["city"],
      },
    },
  },
  {
    type: "function",
    function: {
      name: "search_products",
      description:
        "Durchsucht Produkte in der Datenbank basierend auf einer Abfrage",
      parameters: {
        type: "object",
        properties: {
          query: { type: "string", description: "Suchbegriff" },
          category: { type: "string", description: "Produktkategorie" },
          maxPrice: { type: "number", description: "Hoechstpreis" },
        },
        required: ["query"],
      },
    },
  },
];

// Funktionsimplementierungen
async function getWeather(city: string, unit = "celsius") {
  const response = await fetch(
    `https://api.weather.example/current?city=${city}&unit=${unit}`
  );
  return response.json();
}

async function searchProducts(
  query: string,
  category?: string,
  maxPrice?: number
) {
  return db.products.findMany({
    where: {
      name: { contains: query },
      ...(category && { category }),
      ...(maxPrice && { price: { lte: maxPrice } }),
    },
  });
}

// Verarbeitung von Function Calls
async function handleToolCalls(userMessage: string) {
  const response = await openai.chat.completions.create({
    model: "gpt-4-turbo",
    messages: [{ role: "user", content: userMessage }],
    tools,
    tool_choice: "auto",
  });

  const message = response.choices[0].message;

  if (message.tool_calls) {
    const toolResults = await Promise.all(
      message.tool_calls.map(async (toolCall) => {
        const args = JSON.parse(toolCall.function.arguments);

        let result;
        switch (toolCall.function.name) {
          case "get_weather":
            result = await getWeather(args.city, args.unit);
            break;
          case "search_products":
            result = await searchProducts(
              args.query,
              args.category,
              args.maxPrice
            );
            break;
          default:
            result = { error: "Unbekannte Funktion" };
        }

        return {
          role: "tool" as const,
          tool_call_id: toolCall.id,
          content: JSON.stringify(result),
        };
      })
    );

    // Zweiter Aufruf mit Tool-Ergebnissen
    const finalResponse = await openai.chat.completions.create({
      model: "gpt-4-turbo",
      messages: [
        { role: "user", content: userMessage },
        message,
        ...toolResults,
      ],
    });

    return finalResponse.choices[0].message.content;
  }

  return message.content;
}

Embeddings - Vektordarstellungen von Text#

Embeddings sind numerische Darstellungen von Text im Vektorraum. Sie ermoeglichen semantische Suche, Clustering und Inhaltsvergleiche:

// Embedding generieren
async function generateEmbedding(text: string): Promise<number[]> {
  const response = await openai.embeddings.create({
    model: "text-embedding-3-small",
    input: text,
    dimensions: 1536,
  });

  return response.data[0].embedding;
}

// Kosinusaehnlichkeit berechnen
function cosineSimilarity(a: number[], b: number[]): 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);
}

// Semantische Suche
async function semanticSearch(
  query: string,
  documents: { id: string; text: string; embedding: number[] }[]
) {
  const queryEmbedding = await generateEmbedding(query);

  const results = documents
    .map((doc) => ({
      ...doc,
      similarity: cosineSimilarity(queryEmbedding, doc.embedding),
    }))
    .sort((a, b) => b.similarity - a.similarity)
    .slice(0, 5);

  return results;
}

Embedding-Modelle#

| Modell | Dimensionen | Kosten/1M Token | |--------|-------------|-----------------| | text-embedding-3-small | 512-1536 | ~$0,02 | | text-embedding-3-large | 256-3072 | ~$0,13 | | text-embedding-ada-002 | 1536 | ~$0,10 |

Token-Verwaltung#

Token sind die grundlegende Abrechnungseinheit in der OpenAI API. Effektives Token-Management ist entscheidend fuer die Kostenkontrolle:

import { encoding_for_model } from "tiktoken";

// Token zaehlen
function countTokens(text: string, model = "gpt-4-turbo"): number {
  const enc = encoding_for_model(model as any);
  const tokens = enc.encode(text);
  enc.free();
  return tokens.length;
}

// Kontext auf Token-Limit kuerzen
function trimMessages(
  messages: OpenAI.Chat.Completions.ChatCompletionMessageParam[],
  maxTokens: number
): OpenAI.Chat.Completions.ChatCompletionMessageParam[] {
  const systemMessage = messages.find((m) => m.role === "system");
  const conversationMessages = messages.filter((m) => m.role !== "system");

  let totalTokens = systemMessage
    ? countTokens(systemMessage.content as string)
    : 0;
  const trimmed: OpenAI.Chat.Completions.ChatCompletionMessageParam[] = [];

  // Von den neuesten Nachrichten iterieren
  for (let i = conversationMessages.length - 1; i >= 0; i--) {
    const msgTokens = countTokens(
      conversationMessages[i].content as string
    );
    if (totalTokens + msgTokens > maxTokens) break;
    totalTokens += msgTokens;
    trimmed.unshift(conversationMessages[i]);
  }

  if (systemMessage) trimmed.unshift(systemMessage);
  return trimmed;
}

Rate Limiting und Fehlerbehandlung#

OpenAI wendet Anfragelimits (RPM - Requests pro Minute) und Token-Limits (TPM - Tokens pro Minute) an. Hier ist eine robuste Behandlungsstrategie:

import OpenAI from "openai";

// Klasse mit Retry und exponentiellem Backoff
class OpenAIClient {
  private client: OpenAI;
  private maxRetries: number;

  constructor(apiKey: string, maxRetries = 3) {
    this.client = new OpenAI({ apiKey });
    this.maxRetries = maxRetries;
  }

  async chatCompletion(
    params: OpenAI.Chat.Completions.ChatCompletionCreateParamsNonStreaming
  ) {
    let lastError: Error | null = null;

    for (let attempt = 0; attempt < this.maxRetries; attempt++) {
      try {
        return await this.client.chat.completions.create(params);
      } catch (error) {
        lastError = error as Error;

        if (error instanceof OpenAI.RateLimitError) {
          const waitTime = Math.pow(2, attempt) * 1000;
          console.warn(
            `Rate Limit erreicht - warte ${waitTime}ms (Versuch ${attempt + 1})`
          );
          await new Promise((resolve) => setTimeout(resolve, waitTime));
          continue;
        }

        if (error instanceof OpenAI.APIError) {
          if (error.status && error.status >= 500) {
            const waitTime = Math.pow(2, attempt) * 1000;
            await new Promise((resolve) => setTimeout(resolve, waitTime));
            continue;
          }
        }

        throw error;
      }
    }

    throw lastError;
  }
}

Kostenoptimierung#

API-Kosten koennen schnell steigen. Hier sind bewaehrte Optimierungsstrategien:

1. Das richtige Modell waehlen#

function selectModel(task: string): string {
  const simpleTaskPatterns = [
    /klassifizierung|kategorisierung/i,
    /zusammenfassung|summary/i,
    /uebersetzung|translate/i,
    /formatierung|format/i,
  ];

  const isSimple = simpleTaskPatterns.some((p) => p.test(task));
  return isSimple ? "gpt-3.5-turbo" : "gpt-4o";
}

2. Antwort-Caching#

import { Redis } from "ioredis";

const redis = new Redis(process.env.REDIS_URL!);

async function cachedCompletion(
  messages: OpenAI.Chat.Completions.ChatCompletionMessageParam[],
  model: string
) {
  const cacheKey = `openai:${model}:${JSON.stringify(messages)}`;
  const cached = await redis.get(cacheKey);

  if (cached) {
    return JSON.parse(cached);
  }

  const response = await openai.chat.completions.create({
    model,
    messages,
  });

  await redis.setex(cacheKey, 3600, JSON.stringify(response));
  return response;
}

3. Prompt-Komprimierung#

// Statt ausfuehrlicher Anweisungen praegnante Prompts verwenden
// SCHLECHT:
const verbosePrompt =
  "Ich moechte, dass du den folgenden Text analysierst und eine " +
  "kurze Zusammenfassung erstellst, die die wichtigsten Informationen enthaelt...";

// GUT:
const concisePrompt =
  "Fasse den Text in 2-3 Saetzen zusammen, behalte die wichtigsten Fakten bei:";

4. Anfragen-Batching#

async function batchProcess(items: string[], batchSize = 5) {
  const results: string[] = [];

  for (let i = 0; i < items.length; i += batchSize) {
    const batch = items.slice(i, i + batchSize);
    const promises = batch.map((item) =>
      openai.chat.completions.create({
        model: "gpt-3.5-turbo",
        messages: [{ role: "user", content: `Verarbeite: ${item}` }],
      })
    );

    const batchResults = await Promise.all(promises);
    results.push(
      ...batchResults.map(
        (r) => r.choices[0].message.content || ""
      )
    );
  }

  return results;
}

Prompt Engineering - Best Practices#

Die Qualitaet der Modellantworten haengt stark von der Prompt-Qualitaet ab. Hier sind die wichtigsten Techniken:

Few-Shot Prompting#

const messages: OpenAI.Chat.Completions.ChatCompletionMessageParam[] = [
  {
    role: "system",
    content: "Du klassifizierst Kundenbewertungen als: positiv, negativ oder neutral.",
  },
  {
    role: "user",
    content: "Tolles Produkt, kann ich jedem empfehlen!",
  },
  {
    role: "assistant",
    content: "positiv",
  },
  {
    role: "user",
    content: "Produkt ist okay, nichts Besonderes.",
  },
  {
    role: "assistant",
    content: "neutral",
  },
  {
    role: "user",
    content: "Schreckliche Qualitaet, nie wieder.",
  },
];

Chain-of-Thought#

const systemPrompt = `Du bist ein Experte fuer Datenanalyse.
Wenn du antwortest:
1. Identifiziere die wichtigsten Eingabedaten
2. Beschreibe deine Argumentation Schritt fuer Schritt
3. Liefere Schlussfolgerungen mit Begruendung
4. Schliesse mit einer konkreten Empfehlung ab

Markiere anfaengliche Gedanken mit dem <thinking>-Tag und die finale Antwort mit dem <answer>-Tag.`;

Structured Output#

const response = await openai.chat.completions.create({
  model: "gpt-4-turbo",
  messages: [
    {
      role: "system",
      content:
        "Gib Antworten ausschliesslich im JSON-Format zurueck. " +
        "Schema: { summary: string, keywords: string[], sentiment: string, score: number }",
    },
    {
      role: "user",
      content: `Analysiere diese Bewertung: "${reviewText}"`,
    },
  ],
  response_format: { type: "json_object" },
});

Aufbau eines Konversations-Chatbots#

Eine vollstaendige Chatbot-Implementierung mit Konversationsgedaechtnis:

import OpenAI from "openai";

interface ConversationMessage {
  role: "system" | "user" | "assistant";
  content: string;
}

class Chatbot {
  private openai: OpenAI;
  private conversations: Map<string, ConversationMessage[]>;
  private systemPrompt: string;
  private maxMessages: number;

  constructor(systemPrompt: string, maxMessages = 20) {
    this.openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
    this.conversations = new Map();
    this.systemPrompt = systemPrompt;
    this.maxMessages = maxMessages;
  }

  private getConversation(sessionId: string): ConversationMessage[] {
    if (!this.conversations.has(sessionId)) {
      this.conversations.set(sessionId, [
        { role: "system", content: this.systemPrompt },
      ]);
    }
    return this.conversations.get(sessionId)!;
  }

  async sendMessage(
    sessionId: string,
    userMessage: string
  ): Promise<string> {
    const conversation = this.getConversation(sessionId);
    conversation.push({ role: "user", content: userMessage });

    // Auf Nachrichtenlimit kuerzen
    if (conversation.length > this.maxMessages + 1) {
      const system = conversation[0];
      const recent = conversation.slice(-this.maxMessages);
      conversation.length = 0;
      conversation.push(system, ...recent);
    }

    const response = await this.openai.chat.completions.create({
      model: "gpt-4o",
      messages: conversation,
      temperature: 0.7,
      max_tokens: 800,
    });

    const assistantMessage =
      response.choices[0].message.content || "";
    conversation.push({ role: "assistant", content: assistantMessage });

    return assistantMessage;
  }

  clearConversation(sessionId: string): void {
    this.conversations.delete(sessionId);
  }
}

// Verwendung
const supportBot = new Chatbot(
  "Du bist ein Kundenservice-Assistent fuer TechShop. " +
    "Du hilfst bei Bestellungen, Ruecksendungen und Produktinformationen. " +
    "Du antwortest hoeflich und praegnant auf Deutsch."
);

RAG-Integration (Retrieval-Augmented Generation)#

RAG ermoeglicht es dem Modell, Fragen basierend auf eigenen Daten zu beantworten und eliminiert Halluzinationen:

import OpenAI from "openai";
import { Pool } from "pg";

const pool = new Pool({ connectionString: process.env.DATABASE_URL });

// Relevante Dokumente finden
async function findRelevantDocs(
  query: string,
  limit = 5
): Promise<{ content: string; source: string; similarity: number }[]> {
  const queryEmbedding = await generateEmbedding(query);

  const result = await pool.query(
    `SELECT content, source,
            1 - (embedding <=> $1::vector) as similarity
     FROM documents
     WHERE 1 - (embedding <=> $1::vector) > 0.7
     ORDER BY embedding <=> $1::vector
     LIMIT $2`,
    [JSON.stringify(queryEmbedding), limit]
  );

  return result.rows;
}

// RAG-Pipeline
async function ragQuery(userQuestion: string): Promise<string> {
  // 1. Relevante Dokumente finden
  const docs = await findRelevantDocs(userQuestion);

  // 2. Kontext aufbauen
  const context = docs
    .map((d) => `[Quelle: ${d.source}]\n${d.content}`)
    .join("\n\n---\n\n");

  // 3. Antwort generieren
  const response = await openai.chat.completions.create({
    model: "gpt-4-turbo",
    messages: [
      {
        role: "system",
        content:
          "Beantworte Fragen ausschliesslich basierend auf dem bereitgestellten Kontext. " +
          "Wenn der Kontext die Antwort nicht enthaelt, sage dies ausdruecklich. " +
          "Zitiere Quellen in deiner Antwort.",
      },
      {
        role: "user",
        content: `Kontext:\n${context}\n\nFrage: ${userQuestion}`,
      },
    ],
    temperature: 0.3,
  });

  return response.choices[0].message.content || "";
}

Sicherheit und Inhaltsmoderation#

OpenAI stellt eine Moderation API zur Filterung unsicherer Inhalte bereit:

// Inhaltsmoderation
async function moderateContent(
  text: string
): Promise<{ flagged: boolean; categories: string[] }> {
  const response = await openai.moderations.create({ input: text });
  const result = response.results[0];

  const flaggedCategories = Object.entries(result.categories)
    .filter(([, flagged]) => flagged)
    .map(([category]) => category);

  return {
    flagged: result.flagged,
    categories: flaggedCategories,
  };
}

// Moderations-Middleware fuer Chatbot
async function safeChatMiddleware(
  userMessage: string,
  handler: (msg: string) => Promise<string>
): Promise<string> {
  // Benutzernachricht pruefen
  const inputModeration = await moderateContent(userMessage);
  if (inputModeration.flagged) {
    console.warn("Nachricht blockiert:", inputModeration.categories);
    return "Es tut mir leid, aber ich kann diese Nachricht nicht verarbeiten.";
  }

  // Antwort generieren
  const response = await handler(userMessage);

  // Modellantwort pruefen
  const outputModeration = await moderateContent(response);
  if (outputModeration.flagged) {
    console.warn("Antwort blockiert:", outputModeration.categories);
    return "Es tut mir leid, ich kann auf diese Frage keine Antwort geben.";
  }

  return response;
}

Best Practices fuer die Sicherheit#

  1. Eingabevalidierung - Nachrichtenlaenge und Inhalt der Benutzer pruefen
  2. Rate Limiting - Anzahl der Anfragen pro Benutzer begrenzen
  3. Prompt-Injection-Schutz - Systemanweisungen von Benutzerdaten trennen
  4. Protokollierung - API-Nutzung und verdaechtige Muster ueberwachen
  5. Kostenkontrolle - Budgetlimits im OpenAI-Dashboard festlegen

Next.js-Integration - Vollstaendiges API-Route-Beispiel#

Vollstaendige Implementierung eines Chat-Endpoints in Next.js App Router:

// app/api/chat/route.ts
import { NextRequest, NextResponse } from "next/server";
import OpenAI from "openai";
import { Redis } from "ioredis";

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const redis = new Redis(process.env.REDIS_URL!);

// Rate Limiting
async function checkRateLimit(ip: string): Promise<boolean> {
  const key = `ratelimit:chat:${ip}`;
  const requests = await redis.incr(key);
  if (requests === 1) await redis.expire(key, 60);
  return requests <= 10; // max 10 Anfragen/Min
}

// Eingabevalidierung
function validateInput(body: unknown): {
  valid: boolean;
  messages?: OpenAI.Chat.Completions.ChatCompletionMessageParam[];
  error?: string;
} {
  if (!body || typeof body !== "object") {
    return { valid: false, error: "Ungueltige Eingabedaten" };
  }

  const { messages } = body as { messages: unknown };
  if (!Array.isArray(messages) || messages.length === 0) {
    return { valid: false, error: "Keine Nachrichten vorhanden" };
  }

  if (messages.length > 50) {
    return { valid: false, error: "Zu viele Nachrichten" };
  }

  return { valid: true, messages };
}

export async function POST(req: NextRequest) {
  try {
    // Rate Limiting
    const ip = req.headers.get("x-forwarded-for") || "unknown";
    const allowed = await checkRateLimit(ip);
    if (!allowed) {
      return NextResponse.json(
        { error: "Zu viele Anfragen. Bitte versuchen Sie es in einer Minute erneut." },
        { status: 429 }
      );
    }

    // Validierung
    const body = await req.json();
    const validation = validateInput(body);
    if (!validation.valid) {
      return NextResponse.json(
        { error: validation.error },
        { status: 400 }
      );
    }

    // Letzte Nachricht moderieren
    const lastMessage = validation.messages![
      validation.messages!.length - 1
    ];
    if (lastMessage.role === "user") {
      const moderation = await openai.moderations.create({
        input: lastMessage.content as string,
      });
      if (moderation.results[0].flagged) {
        return NextResponse.json(
          { error: "Die Nachricht verstoesst gegen die Nutzungsrichtlinien." },
          { status: 400 }
        );
      }
    }

    // Streaming-Antwort
    const stream = await openai.chat.completions.create({
      model: "gpt-4o",
      messages: [
        {
          role: "system",
          content:
            "Du bist ein hilfreicher Assistent. " +
            "Du antwortest praegnant und sachlich auf Deutsch.",
        },
        ...validation.messages!,
      ],
      stream: true,
      temperature: 0.7,
      max_tokens: 1000,
    });

    const encoder = new TextEncoder();
    const readable = new ReadableStream({
      async start(controller) {
        try {
          for await (const chunk of stream) {
            const content = chunk.choices[0]?.delta?.content;
            if (content) {
              controller.enqueue(
                encoder.encode(`data: ${JSON.stringify({ content })}\n\n`)
              );
            }
          }
          controller.enqueue(encoder.encode("data: [DONE]\n\n"));
        } catch (err) {
          controller.error(err);
        } finally {
          controller.close();
        }
      },
    });

    return new Response(readable, {
      headers: {
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache",
        Connection: "keep-alive",
      },
    });
  } catch (error) {
    console.error("Chat API Fehler:", error);
    return NextResponse.json(
      { error: "Interner Serverfehler" },
      { status: 500 }
    );
  }
}

Vergleich mit Claude API und Gemini API#

Bei der Wahl eines KI-API-Anbieters lohnt es sich, die wichtigsten Unterschiede zu vergleichen:

| Merkmal | OpenAI (GPT-4) | Anthropic (Claude 3) | Google (Gemini Pro) | |---------|-----------------|---------------------|---------------------| | Kontextfenster | 128K | 200K | 1M+ | | Function Calling | Ja | Ja (Tool Use) | Ja | | Streaming | Ja | Ja | Ja | | Multimodal | Ja (Vision, Audio) | Ja (Vision) | Ja (Vision, Audio, Video) | | Structured Output | JSON-Modus | JSON mit XML | JSON-Modus | | Preis (Input/1M) | ab $2,50 | ab $3 | ab $1,25 | | Preis (Output/1M) | ab $10 | ab $15 | ab $5 |

Wann OpenAI waehlen?#

  • Breitstes Oekosystem - Assistants API, Fine-Tuning, DALL-E, Whisper
  • Function Calling - ausgereifteste Implementierung
  • Community - groesste Wissensbasis und Beispielsammlung
  • Fine-Tuning - Moeglichkeit, Modelle mit eigenen Daten anzupassen

Wann Alternativen in Betracht ziehen?#

  • Claude - langer Kontext (200K), bessere Instruktionsbefolgung, Sicherheitsfokus
  • Gemini - Millionen-Token-Kontextfenster, Google Cloud Integration, guenstigere Preise
  • Lokale Modelle (Ollama/Llama) - vollstaendiger Datenschutz, keine API-Kosten

Vereinheitlichte Abstraktionsschicht#

// Gemeinsames Interface fuer verschiedene KI-Anbieter
interface AIProvider {
  chat(messages: Message[], options?: ChatOptions): Promise<string>;
  stream(
    messages: Message[],
    options?: ChatOptions
  ): AsyncIterable<string>;
  embed(text: string): Promise<number[]>;
}

class OpenAIProvider implements AIProvider {
  async chat(messages: Message[], options?: ChatOptions) {
    const response = await openai.chat.completions.create({
      model: options?.model || "gpt-4o",
      messages: messages as any,
    });
    return response.choices[0].message.content || "";
  }

  async *stream(messages: Message[], options?: ChatOptions) {
    const stream = await openai.chat.completions.create({
      model: options?.model || "gpt-4o",
      messages: messages as any,
      stream: true,
    });
    for await (const chunk of stream) {
      yield chunk.choices[0]?.delta?.content || "";
    }
  }

  async embed(text: string) {
    const response = await openai.embeddings.create({
      model: "text-embedding-3-small",
      input: text,
    });
    return response.data[0].embedding;
  }
}

Zusammenfassung#

Die ChatGPT API ist ein leistungsstarkes Werkzeug, das enorme Moeglichkeiten fuer Webanwendungsentwickler eroeffnet. Die wichtigsten Erkenntnisse:

  1. Modelle bewusst waehlen - GPT-4 fuer komplexe Aufgaben, GPT-3.5 fuer einfache Operationen
  2. Streaming implementieren - verbessert die Benutzererfahrung erheblich
  3. Function Calling nutzen - integriert KI mit der Geschaeftslogik Ihrer Anwendung
  4. RAG einsetzen - eliminiert Halluzinationen und ermoeglicht die Nutzung eigener Daten
  5. Kosten optimieren - Caching, geeignete Modellwahl, Prompt-Komprimierung
  6. Sicherheit priorisieren - Moderation, Rate Limiting, Eingabevalidierung

Brauchen Sie KI-Integration in Ihrer Anwendung?#

MDS Software Solutions Group ist spezialisiert auf die Integration von KI-Loesungen in Webanwendungen. Wir entwickeln intelligente Chatbots, RAG-Systeme, semantische Suchmaschinen und Automatisierungstools auf Basis von OpenAI API, Claude und anderen LLM-Modellen.

Kontaktieren Sie uns, um zu besprechen, wie kuenstliche Intelligenz Ihr Unternehmen optimieren und Ihnen einen Wettbewerbsvorteil verschaffen kann. Wir bieten Beratung, KI-Architekturdesign und vollstaendige Implementierung - vom Prototyp bis zur Produktion.

Autor
MDS Software Solutions Group

Team von Programmierexperten, die sich auf moderne Webtechnologien spezialisiert haben.

← Zurück zum Wissen
ChatGPT API - KI-Integration in Webanwendungen | MDS Software Solutions Group | MDS Software Solutions Group