Vercel AI SDK

Das Vercel AI SDK ist die beliebteste Möglichkeit, KI-Features in Next.js-, React-, Svelte- und Vue-Apps zu bauen. Venice funktioniert direkt als OpenAI-kompatibler Provider.

Einrichtung

Die Beispiele verwenden AI SDK 7. Installiere es zusammen mit dem OpenAI-Provider, den React-Hooks und Zod:

npm install ai@7 @ai-sdk/openai@4 @ai-sdk/react@4 zod

Provider-Konfiguration

Erstelle einen Venice-Provider mit dem OpenAI-kompatiblen Adapter:

// lib/venice.ts
import { createOpenAI } from '@ai-sdk/openai';

const openai = createOpenAI({
  apiKey: process.env.VENICE_API_KEY!,
  baseURL: 'https://api.venice.ai/api/v1',
});

// Verwende .chat(), um Kompatibilität mit Venices Chat-Completions-Endpoint sicherzustellen
export const venice = (modelId: string) => openai.chat(modelId);

Das .chat() stellt sicher, dass Anfragen an Venices /chat/completions-Endpoint gehen. In neueren AI-SDK-Versionen verwendet die Standard-Syntax openai('model') stattdessen die Responses API, die Venice unter /responses mit einigen Einschränkungen bereitstellt. Lies vor der Nutzung den Responses-API-Guide.

Streaming-Chat (Next.js App Router)

API-Route

// app/api/chat/route.ts
import {
  convertToModelMessages,
  createUIMessageStreamResponse,
  streamText,
  toUIMessageStream,
  type UIMessage,
} from 'ai';
import { venice } from '@/lib/venice';

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

  const result = streamText({
    model: venice('venice-uncensored-1-2'),
    instructions: 'You are a helpful, privacy-respecting AI assistant.',
    messages: await convertToModelMessages(messages),
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

React-Komponente

// app/page.tsx
'use client';

import { useChat } from '@ai-sdk/react';
import { useState } from 'react';

export default function Chat() {
  const [input, setInput] = useState('');
  const { messages, sendMessage, status } = useChat();
  const isLoading = status === 'submitted' || status === 'streaming';

  return (
    <div className="max-w-2xl mx-auto p-4">
      <div className="space-y-4 mb-4">
        {messages.map((m) => (
          <div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}>
            <span className="font-bold">{m.role === 'user' ? 'You' : 'Venice'}:</span>
            {m.parts.map((part, i) =>
              part.type === 'text' ? (
                <p key={i} className="whitespace-pre-wrap">{part.text}</p>
              ) : null,
            )}
          </div>
        ))}
      </div>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (!input.trim()) return;
          sendMessage({ text: input });
          setInput('');
        }}
        className="flex gap-2"
      >
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask anything..."
          className="flex-1 border rounded px-3 py-2"
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading} className="bg-red-600 text-white px-4 py-2 rounded">
          Send
        </button>
      </form>
    </div>
  );
}

Text generieren (ohne Streaming)

import { generateText } from 'ai';
import { venice } from '@/lib/venice';

const { text } = await generateText({
  model: venice('z-ai-glm-5-3-flash'),
  prompt: 'Explain zero-knowledge proofs in simple terms.',
});

console.log(text);

Structured Output

import { generateText, Output } from 'ai';
import { venice } from '@/lib/venice';
import { z } from 'zod';

const { output } = await generateText({
  model: venice('venice-uncensored-1-2'),
  output: Output.object({
    schema: z.object({
      recipe: z.object({
        name: z.string(),
        ingredients: z.array(z.string()),
        steps: z.array(z.string()),
        prepTimeMinutes: z.number(),
      }),
    }),
  }),
  prompt: 'Generate a recipe for chocolate chip cookies.',
});

console.log(output.recipe.name);
console.log(`Prep time: ${output.recipe.prepTimeMinutes} minutes`);

Tool Calling

import { isStepCount, streamText, tool } from 'ai';
import { venice } from '@/lib/venice';
import { z } from 'zod';

const result = streamText({
  model: venice('z-ai-glm-5-3-flash'),
  messages: [{ role: 'user', content: 'What is the weather in Tokyo?' }],
  tools: {
    getWeather: tool({
      description: 'Get current weather for a location',
      inputSchema: z.object({
        location: z.string().describe('City name'),
      }),
      execute: async ({ location }) => {
        // Hier dein Wetter-API-Aufruf
        return { temperature: 22, condition: 'Sunny', location };
      },
    }),
  },
  stopWhen: isStepCount(2),
});

for await (const part of result.stream) {
  if (part.type === 'text-delta') {
    process.stdout.write(part.text);
  } else if (part.type === 'tool-result') {
    console.log('Tool result:', part.output);
  }
}

Mit stopWhen: isStepCount(2) kann das Modell nach der Ausführung des Tools in einem zweiten Schritt antworten. Ohne diese Option endet der Stream nach dem Tool-Ergebnis.

Image Generation

Venice Image Generation kann direkt parallel zum AI SDK aufgerufen werden:

// app/api/image/route.ts
export async function POST(req: Request) {
  const { prompt } = await req.json();

  const response = await fetch('https://api.venice.ai/api/v1/image/generate', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.VENICE_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      model: 'qwen-image',
      prompt,
      aspect_ratio: '1:1',
    }),
  });

  const data = await response.json();
  return Response.json({ image: data.images[0] });
}

Multi-Model-Chat (Modellauswahl)

Lass Nutzer zwischen Venice-Modellen wählen:

// app/api/chat/route.ts
import {
  convertToModelMessages,
  createUIMessageStreamResponse,
  streamText,
  toUIMessageStream,
  type UIMessage,
} from 'ai';
import { venice } from '@/lib/venice';

const ALLOWED_MODELS = [
  'venice-uncensored-1-2',
  'z-ai-glm-5-3-flash',
  'qwen3-vl-235b-a22b',
  'nvidia-nemotron-3-nano-30b-a3b',
];

export async function POST(req: Request) {
  const { messages, model: modelId }: { messages: UIMessage[]; model: string } =
    await req.json();

  if (!ALLOWED_MODELS.includes(modelId)) {
    return new Response('Invalid model', { status: 400 });
  }

  const result = streamText({
    model: venice(modelId),
    messages: await convertToModelMessages(messages),
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

// Client-Komponente mit Modellauswahl
'use client';

import { useChat } from '@ai-sdk/react';
import { useState } from 'react';

const MODELS = [
  { id: 'venice-uncensored-1-2', name: 'Venice Uncensored', desc: 'Fast & uncensored' },
  { id: 'z-ai-glm-5-3-flash', name: 'GLM 5.3 Flash', desc: 'Fast private reasoning' },
  { id: 'qwen3-vl-235b-a22b', name: 'Qwen Vision', desc: 'Advanced vision + text' },
  { id: 'nvidia-nemotron-3-nano-30b-a3b', name: 'Nemotron 3 Nano 30B', desc: 'Fast & low cost' },
];

export default function Chat() {
  const [model, setModel] = useState('venice-uncensored-1-2');
  const [input, setInput] = useState('');
  const { messages, sendMessage } = useChat();

  return (
    <div>
      <select value={model} onChange={(e) => setModel(e.target.value)}>
        {MODELS.map((m) => (
          <option key={m.id} value={m.id}>{m.name} — {m.desc}</option>
        ))}
      </select>
      {messages.map((m) => (
        <p key={m.id}>
          {m.role}: {m.parts.map((part) => (part.type === 'text' ? part.text : '')).join('')}
        </p>
      ))}
      <form
        onSubmit={(e) => {
          e.preventDefault();
          sendMessage({ text: input }, { body: { model } });
          setInput('');
        }}
      >
        <input value={input} onChange={(e) => setInput(e.target.value)} />
      </form>
    </div>
  );
}

sendMessage sendet das ausgewählte model mit jeder Nachricht im Request-Body, sodass ein Modellwechsel ab der nächsten Nachricht gilt.

Web-Search-Integration

Aktiviere die Venice-Websuche mit einem Model Feature Suffix an der Modell-ID. Das Suffix übergibt venice_parameters über die Modell-ID, sodass du der Anfrage keine Felder hinzufügen musst:

import { streamText } from 'ai';
import { venice } from '@/lib/venice';

const result = streamText({
  model: venice('venice-uncensored-1-2:enable_web_search=auto'),
  messages: [{ role: 'user', content: 'What happened in AI news today?' }],
});

Embeddings

Verwende für Embeddings embeddingModel() direkt auf dem Provider:

import { embed, embedMany } from 'ai';
import { createOpenAI } from '@ai-sdk/openai';

const openai = createOpenAI({
  apiKey: process.env.VENICE_API_KEY!,
  baseURL: 'https://api.venice.ai/api/v1',
});

// Einzelnes Embedding
const { embedding } = await embed({
  model: openai.embeddingModel('text-embedding-bge-m3'),
  value: 'Privacy-first AI infrastructure',
});

// Batch-Embeddings
const { embeddings } = await embedMany({
  model: openai.embeddingModel('text-embedding-bge-m3'),
  values: [
    'Venice AI provides private inference.',
    'Zero data retention guaranteed.',
    'OpenAI SDK compatible.',
  ],
});

Umgebungsvariablen

# .env.local
VENICE_API_KEY=your-venice-api-key

Empfohlene Modelle

Anwendungsfall	Modell	Warum
Chat-Apps	`venice-uncensored-1-2`	Schnell, günstig, keine Filterung
Komplexe Aufgaben	`z-ai-glm-5-3-flash`	Schnelles privates Reasoning
Vision-Apps	`qwen3-vl-235b-a22b`	Fortschrittliches Bildverständnis
Hohes Volumen	`nvidia-nemotron-3-nano-30b-a3b`	Günstig mit $0,075/1M Input, $0,30/1M Output
Tool Calling	`z-ai-glm-5-3-flash`	Zuverlässiges Function Calling

Vercel AI SDK Docs

Offizielle Vercel AI SDK-Dokumentation

Venice-Modelle

Alle Venice-Modelle durchsuchen

Dokumentation

Erste Schritte

Text & Chat

Bild

Video

Audio

Suche & RAG

Agenten & Integrationen

Coding-Tools

Agenten-Tools

SDKs & Frameworks

Einrichtung

Provider-Konfiguration

Streaming-Chat (Next.js App Router)

API-Route

React-Komponente

Text generieren (ohne Streaming)

Structured Output

Tool Calling

Image Generation

Multi-Model-Chat (Modellauswahl)

Web-Search-Integration

Embeddings

Umgebungsvariablen

Empfohlene Modelle

Vercel AI SDK Docs

Venice-Modelle

​Einrichtung

​Provider-Konfiguration

​Streaming-Chat (Next.js App Router)

​API-Route

​React-Komponente

​Text generieren (ohne Streaming)

​Structured Output

​Tool Calling

​Image Generation

​Multi-Model-Chat (Modellauswahl)

​Web-Search-Integration

​Embeddings

​Umgebungsvariablen

​Empfohlene Modelle

Vercel AI SDK Docs

Venice-Modelle

Einrichtung

Provider-Konfiguration

Streaming-Chat (Next.js App Router)

API-Route

React-Komponente

Text generieren (ohne Streaming)

Structured Output

Tool Calling

Image Generation

Multi-Model-Chat (Modellauswahl)

Web-Search-Integration

Embeddings

Umgebungsvariablen

Empfohlene Modelle