Vercel AI SDK: Vollständige Entwickleranleitung zum Erstellen von KI-Anwendungen

Vercel AI SDK: Vollständige Entwickleranleitung zum Erstellen von KI-Anwendungen

Das Vercel AI SDK ist ein TypeScript-Toolkit zum Erstellen von KI-Anwendungen. Es übernimmt Textgenerierung, Streaming, strukturierte Ausgaben, Tool-Aufrufe und mehrstufige Agenten-Schleifen über eine einheitliche API – und funktioniert mit jedem großen LLM-Anbieter. Wenn Sie schon einmal versucht haben, OpenAI oder Anthropic direkt in eine Next.js-App einzubinden und am Ende drei verschiedene Streaming-Implementierungen gewartet haben, dann löst dieses SDK genau dieses Problem.

Dieser Leitfaden behandelt die Kernfunktionen des SDK, wie Sie es mit der OpenAI-kompatiblen LLM-API von Novita AI verbinden und wo Agenten-Workflows für Entwickler ins Spiel kommen, die mehr als nur einen einfachen Chatbot bauen.

Was ist das Vercel AI SDK?

Das Vercel AI SDK (Paket: ai auf npm) ist eine Open-Source-Bibliothek, die die Unterschiede zwischen LLM-Anbietern abstrahiert. Anstatt separate Streaming-Protokolle für OpenAI, Anthropic und Google zu lernen, rufen Sie dieselben Funktionen generateText, streamText oder generateObject auf und wechseln den Anbieter, indem Sie einen einzigen Import ändern.

Das SDK ist in zwei Schichten aufgebaut:

  • AI SDK Core kümmert sich um Modellinteraktionen: Textgenerierung, Streaming, strukturierte Objekte, Tool-Aufrufe, Embeddings und Agenten-Schleifen.
  • AI SDK UI bietet React-Hooks (useChat, useCompletion, useObject, useAssistant) sowie Adapter für Next.js, SvelteKit und Nuxt, die den Streaming-Status im Browser verwalten.

Es gibt auch ein Paket @ai-sdk/openai-compatible für die Verbindung zu jedem Anbieter, der das OpenAI-Chat-Completions-Format implementiert – genau so integriert sich Novita AI.

Das SDK funktioniert in Node.js, Deno, Edge-Runtimes (Cloudflare Workers, Vercel Edge) und Browser-Umgebungen.

AI SDK Core: generateText, streamText und generateObject

Installieren Sie das SDK und ein Anbieterpaket:

npm install ai @ai-sdk/openai

generateText

Für nicht-streaming-Completions – Batch-Verarbeitung, Klassifizierung, einmalige Generierung:

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

const { text } = await generateText({
  model: openai('gpt-4o-mini'),
  prompt: 'Explain how LLM embeddings work in two sentences.',
});

console.log(text);

streamText

Für Chat-Schnittstellen, bei denen Latenz eine Rolle spielt:

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

const result = streamText({
  model: openai('gpt-4o-mini'),
  messages: [
    { role: 'user', content: 'Walk me through setting up a Next.js app.' },
  ],
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

generateObject

Wenn Sie strukturierte JSON-Ausgabe anstelle von Rohtext benötigen – die Schema-Validierung erfolgt automatisch mit Zod:

import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-4o-mini'),
  schema: z.object({
    name: z.string(),
    skills: z.array(z.string()),
    experienceLevel: z.enum(['junior', 'mid', 'senior']),
  }),
  prompt: 'Generate a fictional software engineer profile.',
});

console.log(object.name, object.skills);

Das SDK kümmert sich um die System-Prompt-Injektion, die erforderlich ist, um das Modell zu gültigem JSON zu zwingen, und wiederholt den Vorgang bei fehlerhafter Ausgabe.

AI SDK Tools: Funktionsaufrufe und Tool-Nutzung

Tools ermöglichen es Modellen, externe Funktionen aufzurufen – Such-APIs, Datenbankabfragen, Taschenrechner – während einer Generierung. Der tools-Parameter des SDK nimmt ein Objekt entgegen, bei dem jeder Schlüssel zu einer aufrufbaren Funktion wird:

import { generateText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const { text, toolCalls } = await generateText({
  model: openai('gpt-4o-mini'),
  tools: {
    getWeather: tool({
      description: 'Get current weather for a location',
      parameters: z.object({
        city: z.string().describe('City name'),
        unit: z.enum(['celsius', 'fahrenheit']).default('celsius'),
      }),
      execute: async ({ city, unit }) => {
        // Replace with a real weather API call
        return { city, temperature: 22, unit, condition: 'sunny' };
      },
    }),
  },
  prompt: 'What is the weather in Tokyo right now?',
});

console.log(text);

Der tool()-Helfer bietet Typinferenz vom Zod-Schema in die Parameter der execute-Funktion. Kein manuelles JSON-Parsing erforderlich.

Mehrstufige Tool-Aufrufe

Standardmäßig stoppt generateText nach einer Runde von Tool-Aufrufen. Setzen Sie maxSteps, damit das Modell Tool-Ergebnisse in weiteren Überlegungen verwenden kann:

const { text } = await generateText({
  model: openai('gpt-4o'),
  maxSteps: 5,
  tools: { getWeather, searchWeb, lookupCalendar },
  prompt: 'Plan my outdoor activities for this weekend in Berlin.',
});

Das SDK übernimmt die Schleife Tool-Aufruf → Ergebnis → Fortsetzung automatisch. Jeder Schritt wird über onStepFinish offengelegt, wenn Sie Einblick in die Zwischenschritte benötigen.

Erstellen von KI-Agenten-Schleifen mit dem Vercel AI SDK

Ein Agent im AI SDK ist ein Modell, das in einer Schleife mit Tools läuft, bis es entscheidet, dass es genügend Informationen für eine Antwort hat. Das Muster ist dasselbe wie bei mehrstufigen Tool-Aufrufen, jedoch mit mehr Tools und einem längeren maxSteps:

import { generateText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const result = await generateText({
  model: openai('gpt-4o'),
  maxSteps: 10,
  system: 'You are a research assistant. Use available tools to answer thoroughly.',
  prompt: 'What are the main differences between Llama 3.1 and Qwen3?',
  tools: {
    search: tool({
      description: 'Search the web for current information',
      parameters: z.object({ query: z.string() }),
      execute: async ({ query }) => searchWeb(query),
    }),
    summarize: tool({
      description: 'Summarize a URL',
      parameters: z.object({ url: z.string() }),
      execute: async ({ url }) => fetchAndSummarize(url),
    }),
  },
  onStepFinish({ stepType, toolCalls, toolResults }) {
    console.log('Step:', stepType, toolCalls?.map(t => t.toolName));
  },
});

Für produktive Agenten-Pipelines verbinden Sie Novita AI als Modell-Backend, um Kosten und Durchsatz in großem Maßstab zu kontrollieren – dies wird im nächsten Abschnitt behandelt.

AI SDK React: useChat-Hook und Next.js-Integration

Der useChat-Hook verwaltet den Streaming-Chat-Status ohne Boilerplate:

// app/chat/page.tsx
'use client';
import { useChat } from 'ai/react';

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

  return (
    <div>
      {messages.map(m => (
        <div key={m.id} className={m.role === 'user' ? 'user' : 'assistant'}>
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask something..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>Send</button>
      </form>
    </div>
  );
}

Der zugehörige Route-Handler:

// app/api/chat/route.ts
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-4o-mini'),
    messages,
  });

  return result.toDataStreamResponse();
}

toDataStreamResponse() verarbeitet das Vercel AI-Stream-Protokoll, das useChat auf dem Client nativ versteht. Für das Streamen strukturierter Objekte von einer API tauschen Sie useChat gegen useObject und streamText gegen streamObject aus.

So verwenden Sie Novita AI mit dem Vercel AI SDK

Novita AI bietet eine OpenAI-kompatible API unter https://api.novita.ai/v3/openai, was es zu einem direkten Ersatz für jedes SDK macht, das das OpenAI-Chat-Completions-Format verwendet – einschließlich des Vercel AI SDK.

Warum Novita AI mit dem AI SDK verwenden

Novita AI hostet über 70 Open-Source-Modelle – Llama 3.3 70B, Qwen3, DeepSeek V3, Mistral und Gemma 3 – über einen einzigen API-Endpunkt. Keine GPU-Infrastruktur zu verwalten. Für Agenten-Workflows skaliert die serverlose API von kleinen 7B-Instruktionsmodellen bis hin zu großen Reasoning-Modellen ohne Konfigurationsänderungen.

Einrichtung

Installieren Sie das OpenAI-kompatible Anbieterpaket:

npm install ai @ai-sdk/openai-compatible

Konfigurieren Sie den Anbieter:

import { createOpenAICompatible } from '@ai-sdk/openai-compatible';

const novita = createOpenAICompatible({
  name: 'novita',
  baseURL: 'https://api.novita.ai/v3/openai',
  apiKey: process.env.NOVITA_API_KEY,
});

Das war die gesamte Einrichtung. Jetzt können Sie es genau wie jeden anderen AI SDK-Anbieter verwenden:

import { generateText } from 'ai';

const { text } = await generateText({
  model: novita('meta-llama/llama-3.3-70b-instruct'),
  prompt: 'What are the tradeoffs between RAG and fine-tuning for a customer support bot?',
});

Streaming funktioniert auf die gleiche Weise:

import { streamText } from 'ai';

const result = streamText({
  model: novita('qwen/qwen3-235b-a22b-instruct-2507'),
  messages: [
    { role: 'system', content: 'You are a helpful coding assistant.' },
    { role: 'user', content: 'Show me how to build a REST API with FastAPI.' },
  ],
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

Tool-Aufrufe mit Novita AI

Modelle, die Funktionsaufrufe unterstützen, funktionieren mit der Tool-Schnittstelle des AI SDK ohne zusätzliche Konfiguration. Llama 3.3 70B Instruct und Qwen3 unterstützen Tool-Aufrufe über die Novita-API:

import { generateText, tool } from 'ai';
import { z } from 'zod';

const { text } = await generateText({
  model: novita('meta-llama/llama-3.3-70b-instruct'),
  maxSteps: 5,
  tools: {
    calculator: tool({
      description: 'Evaluate a mathematical expression',
      parameters: z.object({ expression: z.string() }),
      execute: async ({ expression }) => {
        return { result: eval(expression) }; // use a safe math parser in production
      },
    }),
  },
  prompt: 'What is 12% of 847, then divide by 3.14?',
});

Umgebungseinrichtung

Fügen Sie Ihren Novita-API-Schlüssel zu .env.local hinzu:

NOVITA_API_KEY=your_novita_api_key_here

Holen Sie sich einen Schlüssel auf novita.ai – neue Konten erhalten kostenlose Guthaben zum Testen der API.

Agent-Sandbox für länger laufende Workloads

Für Agenten-Aufgaben, die Code ausführen, auf Dateisysteme zugreifen oder mehrminütige Workflows durchführen, bietet Novita AIs Agent Sandbox isolierte Ausführungsumgebungen auf der LLM-API. Das AI SDK übernimmt die Modell-Reasoning-Schicht. Die Sandbox übernimmt die zustandsbehaftete Ausführung, die nicht innerhalb eines Edge-Funktion-Timeouts laufen kann.

Auswahl eines LLM-Anbieters für das Vercel AI SDK

Das AI SDK macht den Wechsel zwischen Anbietern einfach, was nützlich ist – aber es lohnt sich, die Vor- und Nachteile zu verstehen, bevor man sich für die Produktion entscheidet.

Latenz: Die Zeit bis zum ersten Token ist für Streaming-Chat wichtiger als die Gesamtgenerierungsgeschwindigkeit. Kleinere Modelle (8B–14B) liefern erste Token schneller. Die serverlosen Endpunkte von Novita AI sind für niedrige Kaltstart-Latenz bei offenen Modellen optimiert.

Kosten im Maßstab: GPT-4o ist hervorragend, aber bei hohen Abfragevolumina wird die Preislücke zwischen einem Frontier-Modell und einem gut abgestimmten offenen Modell (z. B. Llama 3.3 70B) signifikant. Das AI SDK ermöglicht es Ihnen, mit beiden zu experimentieren, ohne die Anwendungslogik umschreiben zu müssen.

Tool-Call-Unterstützung: Nicht alle Modelle unterstützen Funktionsaufrufe zuverlässig. Testen Sie Ihr spezifisches Modell mit Ihren Tool-Schemas – das Verhalten variiert zwischen Anbietern, selbst für dieselbe Modellfamilie.

Kontextfenster: Für dokumentenlastiges RAG oder lange Gesprächsverläufe überprüfen Sie die Kontextgrenzen. Viele offene Modelle unterstützen 128K Tokens, was die meisten praktischen Anwendungsfälle abdeckt.

Anbieterbindung: Die Anbieterabstraktion des AI SDK in Kombination mit dem OpenAI-kompatiblen Endpunkt von Novita AI bedeutet, dass Sie Modelle wechseln oder einen Fallback-Anbieter hinzufügen können, ohne die Anwendungslogik zu berühren.

Fazit

Das Vercel AI SDK entfernt den Boilerplate-Code beim Erstellen von KI-Anwendungen – eine API für Textgenerierung, Streaming, Tool-Aufrufe und Agenten-Schleifen über jeden LLM-Anbieter hinweg. Egal, ob Sie eine Streaming-Chat-Oberfläche mit useChat bauen, strukturierte Daten mit generateObject extrahieren oder einen mehrstufigen Agenten betreiben, der externe Tools aufruft – das SDK übernimmt die Infrastruktur, damit Sie sich auf die Anwendungslogik konzentrieren können.

Für Open-Model-Inferenz fügt sich die OpenAI-kompatible API von Novita AI direkt über @ai-sdk/openai-compatible in das SDK ein. Sie erhalten Zugriff auf über 70 Modelle – Llama, Qwen3, DeepSeek, Mistral – ohne GPU-Infrastruktur verwalten zu müssen, und Sie können Modelle wechseln oder Anbieter-Fallbacks hinzufügen, ohne Ihre Anwendungslogik zu berühren.

Starten Sie auf novita.ai – neue Konten erhalten kostenlose Guthaben.

FAQ

Was ist ai sdk react?

Die React-Integration des AI SDK befindet sich im Paket ai/react. Es bietet Hooks – useChat, useCompletion, useObject, useAssistant – die ein React-Frontend mit einer serverseitigen Streaming-Route verbinden. Die Hooks verwalten Streaming-Status, Nachrichtenverlauf, Ladeindikatoren und Fehlerbehandlung, sodass Sie ReadableStream nicht im Komponentenstatus verwalten müssen.

Was fügt ai sdk 5 hinzu?

AI SDK 5 (als Beta Mitte 2025 veröffentlicht) hat die Anbieterspezifikation für bessere Typsicherheit neu gestaltet, das UI-Statusmanagement von der Modellinteraktionslogik getrennt und ein überarbeitetes Nachrichtenformat eingeführt, das die Serialisierung des agentischen UI-Status erleichtert. Wenn Sie 2026 ein neues Projekt starten, überprüfen Sie ai-sdk.dev auf die neueste stabile Version – das SDK hat sich durch die Versionen 6 und 7 weiterentwickelt.

Gibt es ai sdk docs, die ich nachschlagen kann?

Die kanonische Dokumentation finden Sie unter ai-sdk.dev. Sie enthält Anbieter-Einrichtungsanleitungen, API-Referenzen für alle Kernfunktionen, Framework-Integrationsanleitungen (Next.js, Nuxt, SvelteKit) und Kochbuchbeispiele für gängige Muster wie RAG, Agenten-Schleifen und strukturierte Extraktion.

Kann ich die ai sdk tools mit nicht-OpenAI-Modellen verwenden?

Ja. Jeder Anbieter, der Funktionsaufrufe unterstützt, funktioniert mit der tool()-Schnittstelle des AI SDK. Novita AI hostet mehrere offene Modelle mit Unterstützung für Funktionsaufrufe. Die Qualität des Verhaltens variiert – Llama 3.3 70B und Qwen3 sind die zuverlässigsten für mehrstufige Tool-Nutzung unter den offenen Modellen, die über die Novita-API verfügbar sind.

Was ist der Unterschied zwischen den vercel ai sdk docs und der ai-sdk.dev-Dokumentation?

Es ist dasselbe Produkt. Die Dokumentation befand sich früher unter sdk.vercel.ai und leitet jetzt auf ai-sdk.dev weiter. Das SDK wird vom Vercel-Team gewartet, ist aber Open Source und nicht an die Bereitstellung auf der Vercel-Infrastruktur gebunden.

Wie schneiden künstliche Intelligenz SDKs im Vergleich zum direkten Aufruf der LLM-API ab?

Direkte API-Aufrufe sind für einfache einmalige Anfragen in Ordnung. Ein SDK wird sinnvoll, sobald Sie mehrere Dinge gleichzeitig benötigen: Streaming, das in ein UI-Framework integriert ist, mehrstufige Tool-Call-Schleifen, Validierung strukturierter Ausgaben, einheitlicher Anbieterwechsel und konsistente Wiederholungs-/Fehlerbehandlung über Anbieter hinweg. Das AI SDK übernimmt all das auf Bibliotheksebene, sodass Sie es nicht für jedes Projekt neu aufbauen müssen.

Empfohlene Artikel