Utiliser l'API Prompt intégrée avec le SDK Vercel AI

Thomas Steiner

Publié le 16 juillet 2026

Le SDK Vercel AI est une boîte à outils TypeScript indépendante du fournisseur conçue pour vous aider à créer des applications et des agents basés sur l'IA à l'aide de frameworks d'UI populaires tels que Next.js, React, Svelte, Vue, Angular et d'environnements d'exécution tels que Node.js. Bien que la majorité des fournisseurs soient basés sur le cloud, ce premier guide d'une série en deux parties se concentre sur un fournisseur de la communauté appelé Browser AI, créé par Jakob Hoeg Mørk (financé par Google). Browser AI vous permet d'utiliser l'API Prompt avec le SDK Vercel AI. La deuxième partie de la série explique ensuite comment ajouter une interface utilisateur graphique à votre application d'IA.

Installer la bibliothèque

Le @browser-ai/core package est le fournisseur du SDK AI pour l'API Prompt. Vous pouvez l'installer avec npm. Le SDK Vercel AI sous-jacent est automatiquement installé par le package en tant que dépendance de pair.

npm install @browser-ai/core

Utilisation de base

Pour utiliser le fournisseur :

1. Importez le constructeur browserAI à partir du package @browser-ai/core.
2. Importez les generateText() ou les streamText() fonctions à partir du SDK Vercel AI. Les deux fonctions génèrent du texte et appellent des outils pour une invite donnée à l'aide d'un modèle de langage :

• La fonction generateText() n'est pas en streaming et est idéale pour les sorties courtes ou pour les sorties où vous ne pouvez continuer qu'une fois la sortie complète reçue.
• La fonction streamText() diffuse en streaming les générations de texte à partir d'un modèle de langage. Vous pouvez utiliser cette fonction pour des cas d'utilisation interactifs tels que les chatbots et d'autres applications en temps réel.

Pour créer une instance de modèle :

1. Appelez browserAI(). Remarque : Il est recommandé de toujours vérifier la availability() du modèle, ce qui vous permet d'utiliser une solution de remplacement (voir Utilisation hybride) lorsque le modèle est 'unavailable', ou d'afficher une mise à jour de la progression lorsque le modèle est 'downloadable' ou 'downloading'.

2. Vous pouvez ensuite appeler generateText() ou streamText(). Pour obtenir la liste complète des paramètres, consultez la documentation du SDK Vercel AI. Par exemple, au lieu de transmettre une prompt directement comme dans l'exemple de code suivant, vous pouvez également transmettre un objet messages plus complexe pour une invite multi-shot ou transmettre une invite 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);
  }
})();

Utilisation multimodale

Le package @browser-ai/core est compatible avec les entrées multimodales à l'aide d'un type: 'file' objet dans les objets de contenu du tableau messages.

content Champs d'objet (type: 'file')

type

'file'

data

string | Uint8Array | Buffer | ArrayBuffer | URL

Lorsque data est un string, il doit être l'un des suivants :

Voir l'extrait de code suivant pour un exemple :

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

Sortie structurée

Le SDK Vercel AI est compatible avec les sorties structurées via zod, une validation de schéma TypeScript avec inférence de type statique. Pour en savoir plus, consultez la documentation Définir des schémas de zod.

Pour demander un objet JSON correspondant à votre schéma, transmettez output: Output.object({ schema }) à generateText() ou streamText() :

• generateText() avec Output.object() renvoie l'objet JSON final dans le champ output une fois la génération terminée.
• streamText() avec Output.object() fournit un itérable asynchrone partialOutputStream où chaque résultat intermédiaire est garanti d'être analysé correctement au format JSON. Par exemple, si votre schéma applique un tableau de deux nombres, vous recevrez [] comme premier résultat partiel, [123] comme deuxième et [123, 456] comme résultat 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);
}

Utilisation hybride

Le SDK Vercel AI se distingue vraiment par son utilisation hybride. Il fournit une couche d'abstraction de niveau supérieur en plus des implémentations de niveau inférieur des fournisseurs sous-jacents. Lorsque vous utilisez l'API Prompt comme fournisseur, vous créez un model en appelant le constructeur browserAI.

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

const model = browserAI();

Pour utiliser un autre fournisseur, par exemple le fournisseur Google IA générative, vous devez procéder comme suit :

1. Installez le fournisseur sélectionné.

   npm install @ai-sdk/google
   

2. Instanciez le model à l'aide du constructeur du fournisseur, ce qui, pour les fournisseurs de services cloud tels que Google IA générative, implique généralement de transmettre une clé API. Dans le cas du fournisseur Google IA générative, vous pouvez également transmettre un identifiant de modèle cloud, par exemple 'gemini-2.5-flash'. Le reste du code, comme vos appels à streamText(), reste exactement le même.

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

Solution de remplacement dans le cloud

Un cas d'utilisation hybride classique consiste à utiliser l'API Prompt lorsqu'elle est disponible et à revenir à un fournisseur de services cloud dans d'autres circonstances. Pour vérifier si l'API Prompt est disponible, le package @browser-ai/core fournit la fonction doesBrowserSupportBuiltInAI(). Vous pouvez utiliser cette fonction pour instancier dynamiquement le model en tant que modèle cloud ou modèle intégré.

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

Solution de remplacement intégrée

Un autre cas d'utilisation hybride consiste à utiliser de préférence un fournisseur de services cloud lorsque vous êtes en ligne, mais à revenir au fournisseur intégré si l'API Prompt est compatible.

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

Démo

La démo en direct vous permet d'essayer les deux fournisseurs côte à côte. Sélectionnez Cloud API (Gemini 2.5 Flash) ou Built-in AI (IA intégrée) dans les boutons radio, cliquez sur Run (Exécuter), puis regardez la page remplir quatre sections dans l'ordre : une courte blague générée en une seule fois avec generateText(), une longue blague diffusée en streaming jeton par jeton avec streamText(), une recette de lasagnes renvoyée sous forme d'objet JSON complet, puis cette même recette diffusée en streaming au format JSON valide de manière incrémentale à l'aide de partialOutputStream. Si vous sélectionnez Built-in AI (IA intégrée) et que votre navigateur n'a pas encore téléchargé le modèle, un indicateur de progression s'affiche avant le début des démos.

Étape suivante

Maintenant que vous savez comment utiliser l'API Prompt avec le SDK Vercel AI, l'étape suivante consiste à utiliser l'UI du SDK AI et les éléments d'IA pour ajouter une interface utilisateur graphique à votre application.

L'UI du SDK AI est conçue pour vous aider à créer facilement des applications interactives de chat, de saisie semi-automatique et d'assistant. Il s'agit d'une boîte à outils indépendante du framework qui simplifie l'intégration de fonctionnalités d'IA avancées dans vos applications.

Les éléments d'IA sont une bibliothèque de composants et un registre personnalisé qui vous aident à créer plus rapidement des applications natives de l'IA. Il fournit des composants prédéfinis tels que des conversations, des messages, etc.

Pour savoir comment ajouter une interface graphique à votre application, consultez Utiliser l'UI du SDK Vercel AI et les éléments d'IA avec l'API Prompt.