Das Vercel AI SDK unterstützt nicht nur Text — sondern auch Bilder, Audio und Multi-Step Agent Loops. Diese Lektion zeigt, wie Sie multimodale Anwendungen und autonome AI-Agenten bauen.
Vision-fähige Modelle (GPT-4.1, Claude Sonnet 4, Gemini 2.5) analysieren Bilder:
import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'
const { text } = await generateText({
model: openai('gpt-4.1'),
messages: [
{
role: 'user',
content: [
{ type: 'text', text: 'Was siehst du auf diesem Bild?' },
{ type: 'image', image: new URL('https://example.com/photo.jpg') },
],
},
],
})
Mit Modellen, die Audio unterstützen (z. B. Gemini 2.5):
const { text } = await generateText({
model: google('gemini-2.5-pro'),
messages: [
{
role: 'user',
content: [
{ type: 'text', text: 'Transkribiere und fasse diese Aufnahme zusammen.' },
{ type: 'file', data: audioBuffer, mimeType: 'audio/mp3' },
],
},
],
})
Ein Agent ist ein LLM, das autonom Entscheidungen trifft, Tools aufruft und iteriert, bis eine Aufgabe erledigt ist. Im Vercel AI SDK aktivieren Sie Agents über maxSteps:
const result = streamText({
model: anthropic('claude-sonnet-4-20250514'),
system: 'Du bist ein Research Agent. Nutze die verfügbaren Tools, um Fragen gründlich zu recherchieren.',
messages,
tools: {
webSearch: webSearchTool,
readPage: readPageTool,
saveNote: saveNoteTool,
},
maxSteps: 10,
})
Beispiel: Research Agent
User: "Erstelle einen Vergleich der Top-3 Vector-Datenbanken für unseren Use Case (E-Commerce, 10M Produkte, Hybrid Search)"
Agent-Schritte:
webSearch("vector database comparison 2026") → ÜbersichtsartikelreadPage("pinecone.io/pricing") → Pinecone-Preise und FeaturesreadPage("qdrant.tech/documentation") → Qdrant-CapabilitiesreadPage("weaviate.io/developers") → Weaviate Hybrid SearchsaveNote({ title: "DB Comparison", content: ... }) → Notiz speichernuseChat verwaltet die Konversationshistorie automatisch, aber für Langzeit-Gedächtnis brauchen Sie Persistenz:
export async function POST(req: Request) {
const { messages, sessionId } = await req.json()
// Vorherige Konversation laden
const history = await loadConversation(sessionId)
const result = streamText({
model: openai('gpt-4.1'),
messages: [...history, ...messages],
onFinish: async ({ text }) => {
// Konversation speichern
await saveConversation(sessionId, [...history, ...messages, { role: 'assistant', content: text }])
},
})
return result.toDataStreamResponse()
}
| Strategie | Beschreibung | Context-Verbrauch |
|---|---|---|
| Full History | Alle Nachrichten behalten | Hoch — Context-Limit schnell erreicht |
| Sliding Window | Nur die letzten N Nachrichten | Mittel — älterer Kontext geht verloren |
| Summary | Ältere Nachrichten zusammenfassen | Niedrig — Kompression mit Informationsverlust |
| Hybrid | Zusammenfassung + letzte N Nachrichten | Optimal — Balance aus Kontext und Effizienz |
Middleware ermöglicht Cross-Cutting Concerns wie Logging, Caching und Guardrails:
Agent-Realität: Autonome Agents sind mächtig, aber unvorhersehbar. Setzen Sie
maxStepskonservativ (5–10), implementieren Sie Abbruchbedingungen und überwachen Sie Token-Verbrauch. Ein endlos laufender Agent kann in Minuten hunderte Dollar kosten.