Utilizzare l'API Prompt integrata con l'SDK Vercel AI

Thomas Steiner

Data di pubblicazione: 16 luglio 2026

L'AI SDK di Vercel è un toolkit TypeScript indipendente dal fornitore progettato per aiutarti a creare applicazioni e agenti basati sull'AI utilizzando framework UI popolari come Next.js, React, Svelte, Vue, Angular e runtime come Node.js. Sebbene la maggior parte dei fornitori sia basata sul cloud, questa prima guida di una serie in due parti si concentra su un fornitore della community chiamato Browser AI creato da Jakob Hoeg Mørk (che ha ricevuto finanziamenti da Google). Browser AI ti consente di utilizzare l'API Prompt con l'AI SDK di Vercel. La seconda parte della serie spiega come aggiungere un'interfaccia utente grafica all'applicazione AI.

Installare la libreria

Il pacchetto @browser-ai/core è il provider di SDK AI per l'API Prompt. Puoi installarlo con npm. L'SDK Vercel AI sottostante viene installato automaticamente dal pacchetto come dipendenza peer.

npm install @browser-ai/core

Utilizzo di base

Per utilizzare il fornitore:

1. Importa il costruttore browserAI dal pacchetto @browser-ai/core.
2. Importa le funzioni generateText() o streamText() dall'SDK Vercel AI. Entrambe le funzioni generano testo e chiamano strumenti per un determinato prompt utilizzando un modello linguistico:

• La funzione generateText() non è in streaming ed è ideale per output brevi o per output in cui puoi continuare solo dopo aver ricevuto l'intero output.
• La funzione streamText() trasmette in streaming le generazioni di testo da un modello linguistico. Puoi utilizzare questa funzione per casi d'uso interattivi come chatbot e altre applicazioni in tempo reale.

Per creare un'istanza del modello:

1. Chiama il numero browserAI(). Nota: come best practice, controlla sempre availability() del modello, che ti consente di utilizzare un fallback (vedi Utilizzo ibrido) quando il modello è 'unavailable' o di mostrare un aggiornamento dello stato di avanzamento quando il modello è 'downloadable' o 'downloading'.

2. A questo punto puoi chiamare il numero generateText() o streamText(). Consulta la documentazione dell'SDK Vercel AI per l'elenco completo dei parametri, ad esempio, anziché passare un prompt direttamente come nell'esempio di codice seguente, puoi anche passare un oggetto messages più complesso per il prompt multi-shot o passare un prompt 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);
  }
})();

Utilizzo multimodale

Il pacchetto @browser-ai/core supporta l'input multimodale utilizzando un oggetto type: 'file' negli oggetti di contenuti dell'array messages.

content campi oggetto (type: 'file')

type

'file'

data

string | Uint8Array | Buffer | ArrayBuffer | URL

Quando data è un string, deve essere uno dei seguenti valori:

Per un esempio, vedi il seguente snippet di codice:

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

Output strutturato

L'SDK Vercel AI supporta l'output strutturato tramite zod, una convalida dello schema basata su TypeScript con inferenza del tipo statico. Per informazioni dettagliate, consulta la documentazione Definire gli schemi di zod.

Per richiedere un oggetto JSON corrispondente allo schema, passa output: Output.object({ schema }) a generateText() o streamText():

• generateText() con Output.object() restituisce l'oggetto JSON finale nel campo output al termine della generazione.
• streamText() con Output.object() fornisce un iterabile asincrono partialOutputStream in cui è garantito che ogni risultato intermedio venga analizzato correttamente come JSON. Ad esempio, se lo schema impone un array di due numeri, riceverai [] come primo risultato parziale, [123] come secondo e [123, 456] come risultato finale.

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

Utilizzo ibrido

Il punto di forza dell'SDK AI di Vercel è l'utilizzo ibrido. Fornisce un livello di astrazione di livello superiore sopra le implementazioni di livello inferiore dei provider sottostanti. Quando utilizzi l'API Prompt come provider, crei un model chiamando il costruttore browserAI.

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

const model = browserAI();

Per utilizzare un altro provider, ad esempio il provider Google AI generativa, devi procedere nel seguente modo:

1. Installa il fornitore selezionato.

   npm install @ai-sdk/google
   

2. Crea un'istanza di model utilizzando il costruttore del provider che, per i provider cloud come Google AI generativa, in genere prevede il passaggio di una chiave API. Nel caso del provider Google Generative AI, puoi anche trasmettere un identificatore del modello cloud, ad esempio 'gemini-2.5-flash'. Tutto il resto del codice, come le chiamate a streamText(), rimane esattamente lo stesso.

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

Fallback del cloud

Un caso d'uso ibrido classico consiste nell'utilizzare l'API Prompt quando è disponibile e di eseguire il failover su un provider di servizi cloud in altre circostanze. Per verificare se l'API Prompt è disponibile, il pacchetto @browser-ai/core fornisce la funzione doesBrowserSupportBuiltInAI(). Puoi utilizzare questa funzione per istanziare dinamicamente model come modello basato sul cloud o modello integrato.

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

Riserva integrata

Un altro caso d'uso ibrido è quello di utilizzare preferibilmente un cloud provider quando si è online, ma di eseguire il failover sul provider integrato se l'API Prompt è supportata.

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

Demo

La demo live ti consente di provare entrambi i fornitori fianco a fianco. Seleziona API Cloud (Gemini 2.5 Flash) o AI integrata dai pulsanti di opzione, fai clic su Esegui e guarda la pagina compilarsi in sequenza in quattro sezioni: una barzelletta breve generata tutta in una volta con generateText(), una barzelletta lunga trasmessa token per token con streamText(), una ricetta di lasagne restituita come oggetto JSON completo e poi la stessa ricetta trasmessa in streaming come JSON valido in modo incrementale utilizzando partialOutputStream. Se selezioni AI integrata e il browser non ha ancora scaricato il modello, prima dell'inizio delle demo viene visualizzato un indicatore di avanzamento.

Passaggio successivo

Ora che sai come utilizzare l'API Prompt con l'SDK Vercel AI, il passaggio successivo è utilizzare l'interfaccia utente dell'SDK AI e gli elementi AI per aggiungere un'interfaccia utente grafica alla tua app.

L'interfaccia utente dell'SDK AI è progettata per aiutarti a creare facilmente applicazioni interattive di chat, completamento e assistente. Si tratta di un toolkit indipendente dal framework, che semplifica l'integrazione di funzionalità di AI avanzata nelle tue applicazioni.

AI Elements è una libreria di componenti e un registro personalizzato per aiutarti a creare applicazioni native per l'AI più rapidamente. Fornisce componenti predefiniti come conversazioni, messaggi e altro ancora.

Leggi Utilizzare la UI e gli elementi AI dell'SDK Vercel AI con l'API Prompt per scoprire come aggiungere una GUI alla tua app.