API Prompt

Thomas Steiner

Alexandra Klepper

Publié le 20 mai 2025, dernière modification le 21 septembre 2025

Présentateur	Web	Extensions	État de Chrome	Intention
GitHub	Essai d'origine	Chrome 138	Afficher	Intention de tester

Avec l'API Prompt, vous pouvez envoyer des requêtes en langage naturel à Gemini Nano dans le navigateur.

Vous pouvez utiliser l'API Prompt de nombreuses façons. Par exemple, vous pouvez créer les éléments suivants :

• Recherche optimisée par l'IA : répondez à des questions en fonction du contenu d'une page Web.
• Flux d'actualités personnalisés : créez un flux qui classe dynamiquement les articles par catégories et permet aux utilisateurs de filtrer ce contenu.
• Filtres de contenu personnalisés. Analysez les articles d'actualité et floutez ou masquez automatiquement le contenu en fonction des sujets définis par l'utilisateur.
• Création d'événements d'agenda. Développez une extension Chrome qui extrait automatiquement les détails des événements à partir de pages Web afin que les utilisateurs puissent créer des entrées d'agenda en quelques étapes seulement.
• Extraction de contacts simplifiée. Créez une extension qui extrait les coordonnées des sites Web, ce qui permet aux utilisateurs de contacter plus facilement une entreprise ou d'ajouter des informations à leur liste de contacts.

Ce ne sont là que quelques possibilités. Nous sommes impatients de découvrir ce que vous allez créer.

Utiliser l'API Prompt

L'API Prompt utilise le modèle Gemini Nano dans Chrome. Bien que l'API soit intégrée à Chrome, le modèle est téléchargé séparément la première fois qu'une origine utilise l'API. Avant d'utiliser cette API, acceptez le Règlement sur les utilisations interdites de l'IA générative de Google.

Pour déterminer si le modèle est prêt à être utilisé, appelez LanguageModel.availability().

const availability = await LanguageModel.availability({
  // The same options in `prompt()` or `promptStreaming()`
});

Pour déclencher le téléchargement et instancier le modèle de langage, vérifiez l'activation de l'utilisateur. Appelez ensuite la create() fonction.

const session = await LanguageModel.create({
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

Si la réponse à availability() est downloading, écoutez la progression du téléchargement et informez l'utilisateur, car le téléchargement peut prendre du temps.

Utiliser sur localhost

Toutes les API d'IA intégrées sont disponibles sur localhost dans Chrome. Définissez les indicateurs suivants sur Activé :

• chrome://flags/#optimization-guide-on-device-model
• chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

Cliquez ensuite sur Relancer ou redémarrez Chrome. Si vous rencontrez des erreurs, résolvez les problèmes liés à localhost.

Paramètres du modèle

La fonction params() vous informe des paramètres du modèle de langage. L'objet comporte les champs suivants :

• defaultTopK : valeur top-K par défaut .
• maxTopK : valeur top-K maximale.
• defaultTemperature : température par défaut .
• maxTemperature : température maximale.

// Only available when using the Prompt API for Chrome Extensions.
await LanguageModel.params();
// {defaultTopK: 3, maxTopK: 128, defaultTemperature: 1, maxTemperature: 2}

Créer une session

Une fois que l'API Prompt peut s'exécuter, vous créez une session avec la fonction create().

const session = await LanguageModel.create();

Créer une session avec l'API Prompt pour les extensions Chrome

Lorsque vous utilisez l'API Prompt pour les extensions Chrome, chaque session peut être personnalisée avec topK et temperature à l'aide d'un objet d'options facultatif. Les valeurs par défaut de ces paramètres sont renvoyées par LanguageModel.params().

// Only available when using the Prompt API for Chrome Extensions.
const params = await LanguageModel.params();
// Initializing a new session must either specify both `topK` and
// `temperature` or neither of them.
// Only available when using the Prompt API for Chrome Extensions.
const slightlyHighTemperatureSession = await LanguageModel.create({
  temperature: Math.max(params.defaultTemperature * 1.2, 2.0),
  topK: params.defaultTopK,
});

L'objet d'options facultatif de la fonction create() accepte également un champ signal, qui vous permet de transmettre un AbortSignal pour détruire la session.

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const session = await LanguageModel.create({
  signal: controller.signal,
});

Ajouter du contexte avec des prompts initiaux

Avec les prompts initiaux, vous pouvez fournir au modèle de langage un contexte sur les interactions précédentes, par exemple pour permettre à l'utilisateur de reprendre une session stockée après le redémarrage du navigateur.

const session = await LanguageModel.create({
  initialPrompts: [
    { role: 'system', content: 'You are a helpful and friendly assistant.' },
    { role: 'user', content: 'What is the capital of Italy?' },
    { role: 'assistant', content: 'The capital of Italy is Rome.' },
    { role: 'user', content: 'What language is spoken there?' },
    {
      role: 'assistant',
      content: 'The official language of Italy is Italian. [...]',
    },
  ],
});

Limiter les réponses avec un préfixe

Vous pouvez ajouter un rôle "assistant", en plus des rôles précédents, pour développer les réponses précédentes du modèle. Exemple :

const followup = await session.prompt([
  {
    role: "user",
    content: "I'm nervous about my presentation tomorrow"
  },
  {
    role: "assistant",
    content: "Presentations are tough!"
  }
]);

Dans certains cas, au lieu de demander une nouvelle réponse, vous pouvez préremplir une partie du message de réponse du rôle "assistant". Cela peut être utile pour guider le modèle de langage afin qu'il utilise un format de réponse spécifique. Pour ce faire, ajoutez prefix: true au message de rôle "assistant"- final. Exemple :

const characterSheet = await session.prompt([
  {
    role: 'user',
    content: 'Create a TOML character sheet for a gnome barbarian',
  },
  {
    role: 'assistant',
    content: '```toml\n',
    prefix: true,
  },
]);

Ajouter une entrée et une sortie attendues

L'API Prompt dispose de fonctionnalités multimodales et est compatible avec plusieurs langues. Définissez les modalités et les langues expectedInputs et expectedOutputs lorsque vous créez votre session.

• type : modalité attendue.
  • Pour expectedInputs, il peut s'agir de text, image ou audio.
  • Pour expectedOutputs, l'API Prompt n'autorise que text.
• languages : tableau permettant de définir la ou les langues attendues. L'API Prompt accepte "en", "ja" et "es". La compatibilité avec d'autres langues est en cours de développement.
  • Pour expectedInputs, définissez la langue du prompt système et une ou plusieurs langues de prompt utilisateur attendues.
  • Définissez une ou plusieurs langues expectedOutputs.

const session = await LanguageModel.create({
  expectedInputs: [
    { type: "text", languages: ["en" /* system prompt */, "ja" /* user prompt */] }
  ],
  expectedOutputs: [
    { type: "text", languages: ["ja"] }
  ]
});

Vous pouvez recevoir une "NotSupportedError" DOMException si le modèle rencontre une entrée ou une sortie non compatible.

Fonctionnalités multimodales

Ces fonctionnalités vous permettent d'effectuer les opérations suivantes :

• Autoriser les utilisateurs à transcrire les messages audio envoyés dans une application de chat.
• Décrire une image importée sur votre site Web pour l'utiliser dans une légende ou un texte alternatif.

Consultez la démonstration Mediarecorder Audio Prompt pour utiliser l'API Prompt avec une entrée audio et la démonstration Canvas Image Prompt pour utiliser l'API Prompt avec une entrée image.

L'API Prompt est compatible avec les types d'entrée suivants :

• Audio:
  • AudioBuffer
  • ArrayBufferView
  • ArrayBuffer
  • Blob
• Visuel :
  • HTMLImageElement
  • SVGImageElement
  • HTMLVideoElement (utilise l'image vidéo à la position vidéo actuelle)
  • HTMLCanvasElement
  • ImageBitmap
  • OffscreenCanvas
  • VideoFrame
  • Blob
  • ImageData

Cet extrait montre une session multimodale qui traite d'abord deux éléments visuels (un Blob d'image et un HTMLCanvasElement) et demande à l'IA de les comparer, puis permet à l'utilisateur de répondre avec un enregistrement audio (en tant que AudioBuffer).

const session = await LanguageModel.create({
  expectedInputs: [
    { type: "text", languages: ["en"] },
    { type: "audio" },
    { type: "image" },
  ],
  expectedOutputs: [{ type: "text", languages: ["en"] }],
});

const referenceImage = await (await fetch("reference-image.jpeg")).blob();
const userDrawnImage = document.querySelector("canvas");

const response1 = await session.prompt([
  {
    role: "user",
    content: [
      {
        type: "text",
        value:
          "Give a helpful artistic critique of how well the second image matches the first:",
      },
      { type: "image", value: referenceImage },
      { type: "image", value: userDrawnImage },
    ],
  },
]);
console.log(response1);

const audioBuffer = await captureMicrophoneInput({ seconds: 10 });

const response2 = await session.prompt([
  {
    role: "user",
    content: [
      { type: "text", value: "My response to your critique:" },
      { type: "audio", value: audioBuffer },
    ],
  },
]);
console.log(response2);

Ajouter des messages

L'inférence peut prendre un certain temps, en particulier lorsque vous utilisez des entrées multimodales. Il peut être utile d'envoyer des prompts prédéterminés à l'avance pour remplir la session, afin que le modèle puisse commencer le traitement.

Bien que initialPrompts soit utile lors de la création de la session, la méthode append() peut être utilisée en plus des méthodes prompt() ou promptStreaming() pour fournir des prompts contextuels supplémentaires après la création de la session.

Exemple :

const session = await LanguageModel.create({
  initialPrompts: [
    {
      role: 'system',
      content:
        'You are a skilled analyst who correlates patterns across multiple images.',
    },
  ],
  expectedInputs: [{ type: 'image' }],
});

fileUpload.onchange = async () => {
  await session.append([
    {
      role: 'user',
      content: [
        {
          type: 'text',
          value: `Here's one image. Notes: ${fileNotesInput.value}`,
        },
        { type: 'image', value: fileUpload.files[0] },
      ],
    },
  ]);
};

analyzeButton.onclick = async (e) => {
  analysisResult.textContent = await session.prompt(userQuestionInput.value);
};

La promesse renvoyée par append() est remplie une fois le prompt validé, traité et ajouté à la session. La promesse est rejetée si le prompt ne peut pas être ajouté.

Transmettre un schéma JSON

Ajoutez le champ responseConstraint à la méthode prompt() ou promptStreaming() pour transmettre un schéma JSON en tant que valeur. Vous pouvez ensuite utiliser une sortie structurée avec l' API Prompt.

Dans l'exemple suivant, le schéma JSON s'assure que le modèle répond par true ou false pour classer si un message donné concerne la poterie.

const session = await LanguageModel.create();

const schema = {
  "type": "boolean"
};

const post = "Mugs and ramen bowls, both a bit smaller than intended, but that
happens with reclaim. Glaze crawled the first time around, but pretty happy
with it after refiring.";

const result = await session.prompt(
  `Is this post about pottery?\n\n${post}`,
  {
    responseConstraint: schema,
  }
);
console.log(JSON.parse(result));
// true

Votre implémentation peut inclure un schéma JSON ou une expression régulière dans le message envoyé au modèle. Cela utilise une partie de la fenêtre de contexte. Vous pouvez mesurer la quantité de fenêtre de contexte qu'elle utilisera en transmettant l'option responseConstraint à session.measureContextUsage().

Vous pouvez éviter ce comportement avec l'option omitResponseConstraintInput. Si vous le faites, nous vous recommandons d'inclure quelques conseils dans le prompt :

const result = await session.prompt(`
  Summarize this feedback into a rating between 0-5. Only output a JSON
  object { rating }, with a single property whose value is a number:
  The food was delicious, service was excellent, will recommend.
`, { responseConstraint: schema, omitResponseConstraintInput: true });

Inviter le modèle

Vous pouvez inviter le modèle avec les fonctions prompt() ou promptStreaming().

Sortie basée sur les requêtes

Si vous vous attendez à un résultat court, vous pouvez utiliser la fonction prompt() qui renvoie la réponse une fois qu'elle est disponible.

// Start by checking if it's possible to create a session based on the
// availability of the model, and the characteristics of the device.
const available = await LanguageModel.availability({
  expectedInputs: [{type: 'text', languages: ['en']}],
  expectedOutputs: [{type: 'text', languages: ['en']}],
});

if (available !== 'unavailable') {
  const session = await LanguageModel.create();

  // Prompt the model and wait for the whole result to come back.
  const result = await session.prompt('Write me a poem!');
  console.log(result);
}

Sortie en flux continu

Si vous vous attendez à une réponse plus longue, vous devez utiliser la fonction promptStreaming() qui vous permet d'afficher des résultats partiels à mesure qu'ils proviennent du modèle. La fonction promptStreaming() renvoie un ReadableStream.

const available = await LanguageModel.availability({
  expectedInputs: [{type: 'text', languages: ['en']}],
  expectedOutputs: [{type: 'text', languages: ['en']}],
});
if (available !== 'unavailable') {
  const session = await LanguageModel.create();

  // Prompt the model and stream the result:
  const stream = session.promptStreaming('Write me an extra-long poem!');
  for await (const chunk of stream) {
    console.log(chunk);
  }
}

Arrêter l'invitation

prompt() et promptStreaming() acceptent un deuxième paramètre facultatif avec un champ signal, qui vous permet d'arrêter l'exécution des prompts.

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const result = await session.prompt('Write me a poem!', {
  signal: controller.signal,
});

Gestion de la session

Chaque session suit le contexte de la conversation. Les interactions précédentes sont prises en compte pour les interactions futures jusqu'à ce que la fenêtre de contexte de la session soit pleine.

Chaque session dispose d'un nombre maximal de jetons qu'elle peut traiter. Vérifiez votre progression par rapport à cette limite avec les éléments suivants :

console.log(`${session.contextUsage}/${session.contextWindow}`);

Il est possible d'envoyer un prompt qui provoque un dépassement de la fenêtre de contexte. Dans ce cas, les parties initiales de la conversation avec le modèle de langage seront supprimées, une paire de prompts et de réponses à la fois, jusqu'à ce que suffisamment de jetons soient disponibles pour traiter le nouveau prompt. L'exception est le prompt système, qui n'est jamais supprimé.

Ces dépassements peuvent être détectés en écoutant l'événement contextoverflow sur la session :

session.addEventListener("contextoverflow", () => {
  console.log("We've gone past the context window, and some inputs will be dropped!");
});

S'il n'est pas possible de supprimer suffisamment de jetons de l'historique des conversations pour traiter le nouveau prompt, l'appel prompt() ou promptStreaming() échouera avec une exception QuotaExceededError, et rien ne sera supprimé. QuotaExceededError présente les propriétés suivantes :

• requested : nombre de jetons que contient l'entrée
• contextWindow : nombre de jetons disponibles

En savoir plus sur la gestion des sessions.

Cloner une session

Pour préserver les ressources, vous pouvez copier une session existante avec la fonction clone(). Cela crée une bifurcation de la conversation, où le contexte et le prompt initial sont conservés.

La fonction clone() accepte un objet d'options facultatif avec un champ signal, qui vous permet de transmettre un AbortSignal pour détruire la session clonée.

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const clonedSession = await session.clone({
  signal: controller.signal,
});

Terminer une session

Appelez destroy() pour libérer des ressources si vous n'avez plus besoin d'une session. Lorsqu'une session est détruite, elle ne peut plus être utilisée et toute exécution en cours est abandonnée. Vous pouvez conserver la session si vous avez l'intention d'inviter souvent le modèle, car la création d'une session peut prendre un certain temps.

await session.prompt(
  "You are a friendly, helpful assistant specialized in clothing choices."
);

session.destroy();

// The promise is rejected with an error explaining that
// the session is destroyed.
await session.prompt(
  "What should I wear today? It is sunny, and I am choosing between a t-shirt
  and a polo."
);

Démonstrations

Nous avons créé plusieurs démonstrations pour explorer les nombreux cas d'utilisation de l'API Prompt. Les démonstrations suivantes sont des applications Web :

• Bac à sable de l'API Prompt
• Prompt audio Mediarecorder
• Prompt d'image Canvas

Pour tester l'API Prompt dans les extensions Chrome, installez l'extension de démonstration. Le code source de l'extension est disponible sur GitHub.

Stratégie de performances

L'API Prompt pour le Web est toujours en cours de développement. Pendant que nous créons cette API, consultez nos bonnes pratiques sur la gestion des sessions pour des performances optimales.

Règle relative aux autorisations, iframes et Web Workers

Par défaut, l'API Prompt n'est disponible que pour les fenêtres de premier niveau et leurs iframes de même origine. L'accès à l'API peut être délégué à des iframes d'origine croisée à l'aide de l'attribut allow="" de la règle relative aux autorisations :

<!--
  The hosting site at https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Prompt API by
  setting the `allow="language-model"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="language-model"></iframe>

L'API Prompt n'est pas disponible dans les Web Workers pour le moment, en raison de la complexité de l'établissement d'un document responsable pour chaque worker afin de vérifier l'état de la règle relative aux autorisations.

Participer et envoyer des commentaires

Vos commentaires peuvent avoir un impact direct sur la façon dont nous créons et implémentons les futures versions de cette API et de toutes les API d'IA intégrées.

• Pour envoyer des commentaires sur l'implémentation de Chrome, signalez un bug ou enregistrez une demande de fonctionnalité.
• Partagez vos commentaires sur la forme de l'API en commentant un problème existant ou en en ouvrant un nouveau dans le dépôt GitHub de l'API Prompt.
• Rejoignez le programme Preview.