Lektion 5 von 6·10 Min Lesezeit

Multi-Modal & Agents

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.

Image & Audio Input

Bilder an LLMs senden

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') },
      ],
    },
  ],
})

Anwendungsfälle für Vision

  • Produkt-Erkennung: Foto → Produktname, Kategorie, Preis
  • Dokument-Analyse: Rechnung fotografieren → Strukturierte Daten extrahieren
  • UI-Review: Screenshot → Barrierefreiheits- und Design-Feedback
  • Chart-Analyse: Diagramm → Dateninterpretation und Zusammenfassung

Audio-Input

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' },
      ],
    },
  ],
})

Agent Loops

Was sind AI Agents?

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,
})

Agent-Ablauf

  1. Reasoning: LLM analysiert die Aufgabe
  2. Tool Selection: LLM wählt das passende Tool
  3. Execution: Tool wird ausgeführt, Ergebnis zurück ans LLM
  4. Evaluation: LLM prüft, ob die Aufgabe erledigt ist
  5. Iteration: Falls nicht erledigt → zurück zu Schritt 1
  6. Response: Finale Antwort an den Nutzer

Multi-Step Reasoning

Komplexe Aufgaben mit Agent Loops

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:

  1. webSearch("vector database comparison 2026") → Übersichtsartikel
  2. readPage("pinecone.io/pricing") → Pinecone-Preise und Features
  3. readPage("qdrant.tech/documentation") → Qdrant-Capabilities
  4. readPage("weaviate.io/developers") → Weaviate Hybrid Search
  5. saveNote({ title: "DB Comparison", content: ... }) → Notiz speichern
  6. Finale Antwort: Strukturierter Vergleich mit Empfehlung

Conversation Memory

Langzeit-Gedächtnis für Agents

useChat 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()
}

Memory-Strategien

StrategieBeschreibungContext-Verbrauch
Full HistoryAlle Nachrichten behaltenHoch — Context-Limit schnell erreicht
Sliding WindowNur die letzten N NachrichtenMittel — älterer Kontext geht verloren
SummaryÄltere Nachrichten zusammenfassenNiedrig — Kompression mit Informationsverlust
HybridZusammenfassung + letzte N NachrichtenOptimal — Balance aus Kontext und Effizienz

Middleware

AI SDK Middleware

Middleware ermöglicht Cross-Cutting Concerns wie Logging, Caching und Guardrails:

  • Logging Middleware: Jeden Request und Response loggen
  • Caching Middleware: Identische Prompts aus dem Cache beantworten
  • Rate Limiting: Token-Budget pro Nutzer durchsetzen
  • Guardrails: Output auf PII, Toxizität oder Off-Topic prüfen

Agent-Realität: Autonome Agents sind mächtig, aber unvorhersehbar. Setzen Sie maxSteps konservativ (5–10), implementieren Sie Abbruchbedingungen und überwachen Sie Token-Verbrauch. Ein endlos laufender Agent kann in Minuten hunderte Dollar kosten.