⚡KI-Feature

KI Chatbot in deine App einbauen

AI Chatbot mit dem Vercel AI SDK und OpenAI

Einen KI-Chatbot in deine App einbauen klingt nach einem Riesenprojekt. Mit dem Vercel AI SDK ist es eine einzige API-Route und eine React-Komponente.

Pro-Tip — Der schnelle Weg
Nutze Streaming statt auf die komplette Antwort zu warten. Der User sieht die Antwort Wort fuer Wort entstehen -- fuehlt sich viel schneller an.
Seite 1
1

AI SDK und OpenAI Provider installieren

Das Vercel AI SDK abstrahiert verschiedene KI-Anbieter hinter einer einheitlichen API.

npm install ai @ai-sdk/openai


# .env.local
OPENAI_API_KEY=sk-...
2

Chat API-Route erstellen

Eine Route die Nachrichten an OpenAI sendet und die Antwort streamt.

// app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";


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


 const result = streamText({
 model: openai("gpt-4o-mini"),
 system: "Du bist ein hilfreicher Assistent. Antworte auf Deutsch.",
 messages,
 });


 return result.toDataStreamResponse();
}
3

Chat UI bauen

Nutze den useChat Hook fuer automatisches State Management.

"use client";
import { useChat } from "ai/react";


export default function Chat() {
 const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();


 return (
 <div className="max-w-2xl mx-auto p-4">
 <div className="space-y-4 mb-4">
 {messages.map((m) => (
 <div key={m.id} className={`p-3 rounded-lg ${
 m.role === "user" ? "bg-blue-100 ml-12" : "bg-gray-100 mr-12"
 }`}>
 {m.content}
 </div>
 ))}
 {isLoading && <div className="text-gray-400">Denkt nach...</div>}
 </div>
 <form onSubmit={handleSubmit} className="flex gap-2">
 <input
 value={input}
 onChange={handleInputChange}
 placeholder="Schreib eine Nachricht..."
 className="flex-1 p-3 border rounded-lg"
 />
 <button type="submit" className="px-6 py-3 bg-blue-600 text-white rounded-lg">
 Senden
 </button>
 </form>
 </div>
 );
}
4

System Prompt anpassen

Der System Prompt bestimmt die Persoenlichkeit und den Kontext deines Chatbots.

const result = streamText({
 model: openai("gpt-4o-mini"),
 system: `Du bist der Support-Assistent fuer [Dein Produkt].
 Beantworte Fragen zu Preisen, Features und Technik.
 Sei freundlich und hilfsbereit.
 Wenn du etwas nicht weisst, sag es ehrlich.`,
 messages,
});
Seite 2
Warum das funktioniert
  • useChat handelt Message-History, Loading State und Streaming automatisch
  • Streaming-Antworten fuehlen sich 10x schneller an als auf die ganze Antwort zu warten
  • Das AI SDK funktioniert mit OpenAI, Anthropic, Google und mehr -- ein Wechsel ist trivial
Tipps
  • gpt-4o-mini ist guenstig genug fuer einen Chatbot -- etwa 0.15 USD pro 1M Input Tokens
  • Setze maxTokens im streamText Call um die Kosten pro Antwort zu begrenzen
  • Fuer andere Anbieter: @ai-sdk/anthropic, @ai-sdk/google -- gleiche API, anderes Model
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen