Vercel AI SDK verstehen

Das Vercel AI SDK ist die Standardbibliothek für AI-Anwendungen in Next.js — ein TypeScript-first Framework, das die Komplexität von LLM-Integration abstrahiert und Streaming, Tool Calling und Multi-Provider-Support out-of-the-box bietet.

Core Concepts

Warum Vercel AI SDK?

Ohne das SDK müssen Sie für jede AI-Integration:

• HTTP-Streams manuell parsen
• Provider-spezifische APIs abstrahieren
• Token-Streaming in React-State managen
• Tool Calls orchestrieren
• Error Handling und Retries implementieren

Das Vercel AI SDK löst all das mit einer einheitlichen API:

import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'

const { text } = await generateText({
  model: openai('gpt-4.1'),
  prompt: 'Erkläre Kubernetes in einem Satz.',
})

Die drei Hauptmodule

Provider Abstraction

Multi-Provider-Support

Das SDK abstrahiert Provider-Unterschiede hinter einer einheitlichen API:

import { openai } from '@ai-sdk/openai'
import { anthropic } from '@ai-sdk/anthropic'
import { google } from '@ai-sdk/google'

// Gleiches Interface — verschiedene Provider
const model1 = openai('gpt-4.1')
const model2 = anthropic('claude-sonnet-4-20250514')
const model3 = google('gemini-2.5-pro')

Unterstützte Provider (2026):

• OpenAI (GPT-4.1, GPT-4.1 mini, o3, o4-mini)
• Anthropic (Claude Opus 4, Claude Sonnet 4)
• Google (Gemini 2.5 Pro, Gemini 2.5 Flash)
• Mistral (Large, Medium, Small)
• Groq, Fireworks, Together AI, Perplexity
• Self-hosted über OpenAI-kompatible APIs (vLLM, Ollama)

Provider-Wechsel ohne Code-Änderung

Durch die Abstraktionsschicht können Sie Provider wechseln, ohne Anwendungscode zu ändern:

// config.ts
const MODEL = process.env.AI_PROVIDER === 'anthropic'
  ? anthropic('claude-sonnet-4-20250514')
  : openai('gpt-4.1')

// Überall im Code
const result = await generateText({ model: MODEL, prompt })

Streaming

Warum Streaming?

Ohne Streaming wartet der Nutzer 3–30 Sekunden auf eine vollständige Antwort. Mit Streaming sieht er Tokens in Echtzeit — die gefühlte Latenz sinkt auf unter 500 ms.

streamText — Server-seitig

import { streamText } from 'ai'
import { openai } from '@ai-sdk/openai'

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

  const result = streamText({
    model: openai('gpt-4.1'),
    messages,
  })

  return result.toDataStreamResponse()
}

useChat & useCompletion — Client-seitig

useChat Hook

Der wichtigste Hook für Chat-Interfaces:

'use client'
import { useChat } from 'ai/react'

export function ChatUI() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
  })

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>{m.role}: {m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button disabled={isLoading}>Senden</button>
      </form>
    </div>
  )
}

useCompletion Hook

Für Single-Turn-Completions (kein Chat-Verlauf):

• Textzusammenfassungen
• Übersetzungen
• Code-Generierung
• Content-Erstellung

Warum Vercel AI SDK für Next.js? Es ist das einzige SDK, das Server Components, Route Handlers, Server Actions und Client Components nahtlos verbindet. Die Integration mit dem Next.js-Ökosystem (Edge Runtime, Streaming, ISR) ist einzigartig.