Vercel AI SDK

Il Vercel AI SDK è il modo più popolare per costruire funzionalità AI in app Next.js, React, Svelte e Vue. Venice funziona out-of-the-box come provider compatibile con OpenAI.

Setup

Gli esempi usano AI SDK 7. Installalo insieme al provider OpenAI, agli hook React e a Zod:

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

Configurazione del provider

Crea un provider Venice usando l’adapter compatibile con OpenAI:

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

// Usa .chat() per garantire la compatibilità con l'endpoint chat completions di Venice
export const venice = (modelId: string) => openai.chat(modelId);

Usare .chat() garantisce che le richieste vadano all’endpoint /chat/completions di Venice. Nelle versioni recenti dell’AI SDK, la sintassi predefinita openai('model') usa invece la Responses API, che Venice offre su /responses con alcune limitazioni. Consulta la guida alla Responses API prima di usarla.

Streaming chat (Next.js App Router)

Route API

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

Componente React

// 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>
  );
}

Generazione di testo (senza 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);

Output strutturato

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 }) => {
        // La tua chiamata API meteo qui
        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);
  }
}

stopWhen: isStepCount(2) consente al modello di rispondere in un secondo step dopo l’esecuzione del tool. Senza questa opzione, lo stream termina dopo il risultato del tool.

Generazione di immagini

La generazione di immagini Venice può essere chiamata direttamente insieme all’AI SDK:

// 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] });
}

Chat multi-modello (selettore di modello)

Permetti agli utenti di scegliere tra i modelli Venice:

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

// Componente client con selettore di modello
'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 invia il model selezionato nel body della richiesta con ogni messaggio, quindi il cambio di modello si applica al messaggio successivo.

Integrazione web search

Attiva la web search di Venice con un suffisso di funzionalità del modello sull’ID del modello. Il suffisso passa i venice_parameters tramite l’ID del modello, quindi non è necessario aggiungere campi alla richiesta:

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

Per gli embeddings, usa embeddingModel() direttamente sul 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',
});

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

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

Variabili d’ambiente

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

Modelli consigliati

Caso d’uso	Modello	Perché
App chat	`venice-uncensored-1-2`	Veloce, economico, nessun filtro
Compiti complessi	`z-ai-glm-5-3-flash`	Ragionamento privato veloce
App vision	`qwen3-vl-235b-a22b`	Comprensione avanzata delle immagini
Alto volume	`nvidia-nemotron-3-nano-30b-a3b`	Economico a $0,075/1M input, $0,30/1M output
Tool calling	`z-ai-glm-5-3-flash`	Function calling affidabile

Documentazione Vercel AI SDK

Documentazione ufficiale Vercel AI SDK

Modelli Venice

Sfoglia tutti i modelli Venice

Documentazione

Per iniziare

Testo e chat

Immagini

Video

Audio

Ricerca e RAG

Agenti e integrazioni

Strumenti di sviluppo

Strumenti per agenti

SDK e framework

Setup

Configurazione del provider

Streaming chat (Next.js App Router)

Route API

Componente React

Generazione di testo (senza streaming)

Output strutturato

Tool calling

Generazione di immagini

Chat multi-modello (selettore di modello)

Integrazione web search

Embeddings

Variabili d’ambiente

Modelli consigliati

Documentazione Vercel AI SDK

Modelli Venice

​Setup

​Configurazione del provider

​Streaming chat (Next.js App Router)

​Route API

​Componente React

​Generazione di testo (senza streaming)

​Output strutturato

​Tool calling

​Generazione di immagini

​Chat multi-modello (selettore di modello)

​Integrazione web search

​Embeddings

​Variabili d’ambiente

​Modelli consigliati

Documentazione Vercel AI SDK

Modelli Venice

Setup

Configurazione del provider

Streaming chat (Next.js App Router)

Route API

Componente React

Generazione di testo (senza streaming)

Output strutturato

Tool calling

Generazione di immagini

Chat multi-modello (selettore di modello)

Integrazione web search

Embeddings

Variabili d’ambiente

Modelli consigliati