⚡KI Integration

Vercel AI SDK nutzen

KI-Features in deine App einbauen — April 2026

Das Vercel AI SDK macht es lächerlich einfach, KI-Features in deine Next.js App einzubauen. Streaming-Responses, Chat-Interfaces und Tool-Calling — alles mit wenigen Zeilen Code. Funktioniert mit OpenAI, Anthropic und vielen anderen Providern.

Pro-Tip — Der schnelle Weg
useChat() gibt dir ein komplettes Chat-Interface mit Streaming — du musst nur noch das UI drumherum bauen.
Seite 1
01

AI SDK installieren

Installiere das Vercel AI SDK und den Provider deiner Wahl.

npm install ai @ai-sdk/openai


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


# Oder fuer Anthropic:
npm install @ai-sdk/anthropic
ANTHROPIC_API_KEY=sk-ant-...
02

Streaming API Route erstellen

Erstelle eine API Route die KI-Antworten als Stream zurückgibt.

// 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"),
 system: "Du bist ein hilfreicher Assistent.",
 messages,
 });
 return result.toDataStreamResponse();
}
03

Chat-UI mit useChat Hook

Im Frontend nutzt du den useChat Hook — der handled Streaming, Message-History und Loading-State automatisch.

// components/chat.tsx
"use client";
import { useChat } from "ai/react";


export function Chat() {
 const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
 return (
 <div>
 {messages.map(m => (
 <div key={m.id}>{m.role}: {m.content}</div>
 ))}
 <form onSubmit={handleSubmit}>
 <input value={input} onChange={handleInputChange}
 placeholder="Nachricht..." />
 <button type="submit" disabled={isLoading}>Senden</button>
 </form>
 </div>
 );
}
Seite 2
Warum das funktioniert
  • Streaming out of the box — keine eigene SSE oder WebSocket Implementierung
  • Provider-agnostisch: wechsle zwischen OpenAI, Anthropic, Mistral mit einer Zeile
  • useChat abstrahiert die komplette Chat-Logik: Input, Messages, Loading, Error
  • TypeScript-First: vollständige Typen für Messages, Tools und Responses
Tipps
  • streamText() streamt Tokens live — der User sieht die Antwort Wort für Wort
  • Provider austauschen ist eine Zeile: openai('gpt-4o') → anthropic('claude-sonnet')
  • generateText() für nicht-streaming Antworten wenn du das Ergebnis komplett brauchst
  • Tool-Calling eingebaut: lass die KI Funktionen in deinem Backend aufrufen
  • useChat speichert automatisch die Message-History im Client State
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