Vercel AI SDK

El Vercel AI SDK es la forma más popular de construir funciones de IA en aplicaciones Next.js, React, Svelte y Vue. Venice funciona out of the box como proveedor compatible con OpenAI.

Configuración

Los ejemplos usan AI SDK 7. Instálalo junto con el proveedor de OpenAI, los hooks de React y Zod:

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

Configuración del proveedor

Crea un proveedor de Venice usando el adaptador compatible 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() para asegurar la compatibilidad con el endpoint chat completions de Venice
export const venice = (modelId: string) => openai.chat(modelId);

Usar .chat() garantiza que las solicitudes vayan al endpoint /chat/completions de Venice. En las versiones recientes del AI SDK, la sintaxis predeterminada openai('model') usa en su lugar la Responses API, que Venice ofrece en /responses con algunas limitaciones. Consulta la guía de la Responses API antes de usarla.

Chat en streaming (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 }),
  });
}

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

Generar texto (sin 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);

Salida estructurada

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 }) => {
        // Tu llamada a la API del tiempo aquí
        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) permite que el modelo responda en un segundo paso después de ejecutar la herramienta. Sin esto, el stream termina tras el resultado de la herramienta.

Generación de imágenes

La generación de imágenes de Venice se puede llamar directamente junto con el 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-modelo (selector de modelo)

Deja que los usuarios elijan entre los modelos de 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 cliente con selector de modelo
'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 envía el model seleccionado en el cuerpo de la solicitud con cada mensaje, así que el cambio de modelo se aplica al siguiente mensaje.

Integración con búsqueda web

Activa la búsqueda web de Venice con un sufijo de funciones del modelo en el ID del modelo. El sufijo pasa venice_parameters a través del ID del modelo, así que no necesitas añadir campos a la solicitud:

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

Para embeddings, usa embeddingModel() directamente en el proveedor:

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 único
const { embedding } = await embed({
  model: openai.embeddingModel('text-embedding-bge-m3'),
  value: 'Privacy-first AI infrastructure',
});

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

Variables de entorno

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

Modelos recomendados

Caso de uso	Modelo	Por qué
Apps de chat	`venice-uncensored-1-2`	Rápido, barato, sin filtrado
Tareas complejas	`z-ai-glm-5-3-flash`	Razonamiento privado rápido
Apps de visión	`qwen3-vl-235b-a22b`	Comprensión avanzada de imágenes
Alto volumen	`nvidia-nemotron-3-nano-30b-a3b`	Económico a $0.075/1M de entrada, $0.30/1M de salida
Tool calling	`z-ai-glm-5-3-flash`	Function calling fiable

Docs del Vercel AI SDK

Documentación oficial del Vercel AI SDK

Modelos de Venice

Explora todos los modelos de Venice

Documentación

Primeros pasos

Texto y chat

Imagen

Vídeo

Audio

Búsqueda y RAG

Agentes e integraciones

Herramientas de código

Herramientas para agentes

SDK y frameworks

Configuración

Configuración del proveedor

Chat en streaming (Next.js App Router)

API Route

Componente React

Generar texto (sin streaming)

Salida estructurada

Tool calling

Generación de imágenes

Chat multi-modelo (selector de modelo)

Integración con búsqueda web

Embeddings

Variables de entorno

Modelos recomendados

Docs del Vercel AI SDK

Modelos de Venice

​Configuración

​Configuración del proveedor

​Chat en streaming (Next.js App Router)

​API Route

​Componente React

​Generar texto (sin streaming)

​Salida estructurada

​Tool calling

​Generación de imágenes

​Chat multi-modelo (selector de modelo)

​Integración con búsqueda web

​Embeddings

​Variables de entorno

​Modelos recomendados

Docs del Vercel AI SDK

Modelos de Venice

Configuración

Configuración del proveedor

Chat en streaming (Next.js App Router)

API Route

Componente React

Generar texto (sin streaming)

Salida estructurada

Tool calling

Generación de imágenes

Chat multi-modelo (selector de modelo)

Integración con búsqueda web

Embeddings

Variables de entorno

Modelos recomendados