Usa la API de Prompt integrada con el SDK de Vercel AI

Thomas Steiner

Publicado: 16 de julio de 2026

El SDK de IA de Vercel es un kit de herramientas de TypeScript independiente del proveedor diseñado para ayudarte a compilar aplicaciones y agentes potenciados por IA con frameworks de IU populares, como Next.js, React, Svelte, Vue, Angular, y tiempos de ejecución, como Node.js. Si bien la mayoría de los proveedores se basan en la nube, esta primera guía de una serie de dos partes se enfoca en un proveedor de la comunidad llamado Browser AI, creado por Jakob Hoeg Mørk (quien recibió financiamiento de Google). Browser AI te permite usar la API de Prompt con el SDK de IA de Vercel. En la segunda parte de la serie, se explica cómo agregar una interfaz gráfica de usuario a tu aplicación de IA.

Cómo instalar la biblioteca

El paquete @browser-ai/core es el proveedor del SDK de IA para la API de Prompt. Puedes instalarlo con npm. El paquete instala automáticamente el SDK de Vercel AI subyacente como una dependencia de igual nivel.

npm install @browser-ai/core

Uso básico

Para usar el proveedor, haz lo siguiente:

1. Importa el constructor browserAI del paquete @browser-ai/core.
2. Importa las funciones generateText() o streamText() del SDK de Vercel AI. Ambas funciones generan texto y llaman a herramientas para una instrucción determinada con un modelo de lenguaje:

• La función generateText() no es de transmisión y es ideal para resultados cortos o para resultados en los que solo puedes continuar una vez que se recibe todo el resultado.
• La función streamText() transmite generaciones de texto desde un modelo de lenguaje. Puedes usar esta función para casos de uso interactivos, como chatbots y otras aplicaciones en tiempo real.

Para crear una instancia del modelo, haz lo siguiente:

1. Llamar a browserAI() Nota: Como práctica recomendada, siempre verifica el availability() del modelo, lo que te permite usar un resguardo (consulta Uso híbrido) cuando el modelo es 'unavailable' o mostrar una actualización del progreso cuando el modelo es 'downloadable' o 'downloading'.

2. Luego, puedes llamar a generateText() o streamText(). Consulta la documentación del SDK de Vercel AI para obtener la lista completa de parámetros. Por ejemplo, en lugar de pasar un prompt directamente como en el siguiente muestra de código, también puedes pasar un objeto messages más complejo para la instrucción de varios pasos o pasar una instrucción system.

import { browserAI } from '@browser-ai/core';
import { generateText, streamText } from 'ai';

(async () => {
  const model = browserAI();
  const availability = await model.availability();

  if (availability === 'unavailable') {
    console.log('Your browser cannot run the built-in AI model.');
    return;
  }

  if (availability === 'downloadable' || availability === 'downloading') {
    await model.createSessionWithProgress((progress) => {
      console.log(`Download progress: ${Math.round(progress * 100)}%`);
    });
  }

  // Non-streaming text generation.
  const { text } = await generateText({
    model,
    prompt: 'Tell me a short joke',
  });
  console.log(text);

  // Streaming text generation.
  const result = streamText({
    model,
    prompt: 'Tell me a long joke',
  });

  for await (const chunk of result.textStream) {
    console.log(chunk);
  }
})();

Uso multimodal

El paquete @browser-ai/core admite la entrada multimodal con un objeto type: 'file' en los objetos de contenido del array messages.

content campos de objeto (type: 'file')

type

'file'

data

string | Uint8Array | Buffer | ArrayBuffer | URL

Cuando data es un string, debe ser uno de los siguientes:

Consulta el siguiente fragmento de código para ver un ejemplo:

import { streamText } from 'ai';
import { browserAI } from '@browser-ai/core';

const base64ImageData = await getBase64ImageData();
const audioData = await getAudioBuffer();

const result = streamText({
  model: browserAI(),
  messages: [
    {
      role: 'user',
      content: [
        { type: 'text', text: "What's in this image?" },
        { type: 'file', mediaType: 'image/png', data: base64ImageData },
      ],
    },
    {
      role: 'user',
      content: [
        { type: 'text', text: 'Transcribe this audio file!' },
        { type: 'file', mediaType: 'audio/mp3', data: audioData },
      ],
    },
  ],
});

for await (const chunk of result.textStream) {
  console.log(chunk);
}

Resultados estructurados

El SDK de Vercel AI admite resultados estructurados a través de zod, una validación de esquemas con TypeScript primero y con inferencia de tipos estáticos. Consulta la documentación de zod sobre cómo definir esquemas para obtener más detalles.

Para solicitar un objeto JSON que coincida con tu esquema, pasa output: Output.object({ schema }) a generateText() o streamText():

• generateText() con Output.object() devuelve el objeto JSON final en el campo output una vez que se completa la generación.
• streamText() con Output.object() proporciona un iterable asíncrono partialOutputStream en el que se garantiza que cada resultado intermedio se analizará correctamente como JSON. Por ejemplo, si tu esquema exige un array de dos números, recibirás [] como el primer resultado parcial, [123] como el segundo y [123, 456] como el resultado final.

import { browserAI } from '@browser-ai/core';
import { generateText, streamText, Output } from 'ai';
import z from 'zod';

const model = browserAI();

const schema = z.object({
  recipe: z.object({
    name: z.string(),
    ingredients: z.array(z.object({ name: z.string(), amount: z.string() })),
    steps: z.array(z.string()),
  }),
});

const prompt = 'Generate a lasagna recipe.';

// Non-streaming object generation.
const { output } = await generateText({
  model,
  output: Output.object({ schema }),
  prompt,
});

console.log(output);

// Streaming object generation.
const { partialOutputStream } = streamText({
  model,
  output: Output.object({ schema }),
  prompt,
});

for await (const partialObject of partialOutputStream) {
  console.log(partialObject);
}

Uso híbrido

Donde el SDK de IA de Vercel realmente se destaca es en el uso híbrido. Proporciona una capa de abstracción de nivel superior sobre las implementaciones de nivel inferior de los proveedores subyacentes. Cuando usas la API de Prompt como proveedor, creas un objeto model llamando al constructor browserAI.

import { browserAI } from '@browser-ai/core';

const model = browserAI();

Para usar un proveedor diferente, por ejemplo, el proveedor de IA generativa de Google, debes hacer lo siguiente:

1. Instala el proveedor seleccionado.

   npm install @ai-sdk/google
   

2. Crea una instancia de model con el constructor del proveedor que, para los proveedores de la nube como la IA generativa de Google, suele implicar pasar una clave de API. En el caso del proveedor de IA generativa de Google, también puedes pasar un identificador de modelo en la nube, por ejemplo, 'gemini-2.5-flash'. Todo el resto del código, como las llamadas a streamText(), permanece exactamente igual.

   import { createGoogleGenerativeAI } from '@ai-sdk/google';
   
   const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';
   
   const google = createGoogleGenerativeAI({ apiKey: API_KEY });
   const model = google('gemini-2.5-flash');
   

Respaldo en la nube

Un caso de uso híbrido clásico es usar la API de Prompt cuando está disponible y recurrir a un proveedor de servicios en la nube en otras circunstancias. Para verificar si la API de Prompt está disponible, el paquete @browser-ai/core proporciona la función doesBrowserSupportBuiltInAI(). Puedes usar esta función para crear instancias de model de forma dinámica como un modelo basado en la nube o un modelo integrado.

import { doesBrowserSupportBuiltInAI } from '@browser-ai/core';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

const model = await (async () => {
  if (doesBrowserSupportBuiltInAI()) {
    const { browserAI } = await import('@browser-ai/core');
    return browserAI();
  }
  const { createGoogleGenerativeAI } = await import('@ai-sdk/google');
  const google = createGoogleGenerativeAI({ apiKey: API_KEY });
  return google('gemini-2.5-flash');
})();

Respaldo integrado

Otro caso de uso híbrido es usar preferentemente un proveedor de servicios en la nube cuando se está en línea, pero volver al proveedor integrado si se admite la API de Prompt.

import { doesBrowserSupportBuiltInAI } from '@browser-ai/core';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

let model;

const switchProvider = async (forceCloud = false) => {
  model = await (async () => {
    if (navigator.onLine || forceCloud) {
      const { createGoogleGenerativeAI } = await import('@ai-sdk/google');
      const google = createGoogleGenerativeAI({ apiKey: API_KEY });
      return google('gemini-2.5-flash');
    }
    const { browserAI } = await import('@browser-ai/core');
    return browserAI();
  })();
};

if (doesBrowserSupportBuiltInAI()) {
  window.addEventListener('online', switchProvider);
  window.addEventListener('offline', switchProvider);
}
await switchProvider(true);

Demostración

La demostración en vivo te permite probar ambos proveedores uno al lado del otro. Selecciona Cloud API (Gemini 2.5 Flash) o Built-in AI en los botones de selección, presiona Ejecutar y observa cómo la página completa cuatro secciones en secuencia: un chiste corto generado de una sola vez con generateText(), un chiste largo transmitido token por token con streamText(), una receta de lasaña que se muestra como un objeto JSON completo y, luego, esa misma receta transmitida como JSON incrementalmente válido con partialOutputStream. Si seleccionas IA integrada y tu navegador aún no descargó el modelo, aparecerá un indicador de progreso antes de que comiencen las demostraciones.

Próximo paso

Ahora que sabes cómo usar la API de Prompt con el SDK de Vercel AI, el siguiente paso es usar la IU del SDK de AI y los elementos de AI para agregar una interfaz gráfica de usuario a tu app.

La IU del SDK de IA está diseñada para ayudarte a compilar con facilidad aplicaciones interactivas de chat, finalización y asistente. Es un kit de herramientas independiente del framework que optimiza la integración de funcionalidades avanzadas de IA en tus aplicaciones.

AI Elements es una biblioteca de componentes y un registro personalizado que te ayuda a compilar aplicaciones nativas para IA más rápido. Proporciona componentes prediseñados, como conversaciones, mensajes y mucho más.

Lee Usa la IU del SDK de Vercel AI y los elementos de IA con la API de Prompt para aprender a agregar una GUI a tu app.