Intégration avec le Vercel AI SDK

Le multi-agent dans l’écosystème JavaScript

Le Vercel AI SDK (ai) est devenu un standard pour intégrer des modèles d’IA dans les applications web JavaScript et TypeScript. Associé au provider @ai-sdk/xai, il vous donne accès au multi-agent de Grok depuis Next.js, SvelteKit ou n’importe quel autre framework JavaScript, sans quitter les abstractions auxquelles votre équipe front est habituée.

Installation

Deux packages sont nécessaires :

npm install ai @ai-sdk/xai

Ils se partagent le travail : @ai-sdk/xai gère la communication avec l’API xAI, tandis que ai fournit les fonctions génériques generateText et streamText que vous utiliserez quel que soit le fournisseur.

Configuration de base

import { xai } from "@ai-sdk/xai";
import { generateText } from "ai";

const { text } = await generateText({
  model: xai.responses("grok-4.20-multi-agent-0309"),
  prompt: "Quels sont les derniers frameworks JavaScript de 2026 ?",
  providerOptions: {
    xai: { reasoningEffort: "low" },
  },
});

console.log(text);

Un détail de ce code conditionne tout le reste : xai.responses() et non xai(). Le multi-agent exige la Responses API, et appeler le provider sous sa forme courte vous renverra une erreur que rien dans le message ne rattachera évidemment à cette subtilité.

Contrôle du nombre d’agents

Le nombre d’agents se règle par providerOptions.xai.reasoningEffort :

// 4 agents (recherche rapide)
providerOptions: {
  xai: { reasoningEffort: "low" },
}

// 16 agents (recherche approfondie)
providerOptions: {
  xai: { reasoningEffort: "high" },
}

Le mapping est celui déjà rencontré avec l’OpenAI SDK : low et medium mobilisent 4 agents, high et xhigh en mobilisent 16. Vous retrouvez donc les mêmes deux régimes, sous un nom de paramètre différent.

Streaming avec streamText

Dans une application web, le streaming devient obligatoire : une recherche multi-agent peut prendre une minute, et personne ne reste devant un écran vide aussi longtemps.

import { xai } from "@ai-sdk/xai";
import { streamText } from "ai";

const result = streamText({
  model: xai.responses("grok-4.20-multi-agent-0309"),
  prompt: "Analyse les tendances du marche IA en Europe",
  providerOptions: {
    xai: { reasoningEffort: "medium" },
  },
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

Dans une application Next.js utilisant l’App Router, vous n’avez même pas besoin de consommer le flux côté serveur : une route API peut le retourner directement au navigateur.

// app/api/research/route.ts
import { xai } from "@ai-sdk/xai";
import { streamText } from "ai";

export async function POST(req: Request) {
  const { query } = await req.json();

  const result = streamText({
    model: xai.responses("grok-4.20-multi-agent-0309"),
    prompt: query,
    providerOptions: {
      xai: { reasoningEffort: "low" },
    },
  });

  return result.toDataStreamResponse();
}

Le reasoningEffort: "low" de cet exemple est un choix assumé : sur une route appelée directement depuis l’interface, la latence de 16 agents serait difficilement tenable.

Gestion des erreurs

Le multi-agent étant en beta, une indisponibilité ne doit pas se traduire par une page cassée. Le schéma ci-dessous montre le repli le plus simple — on rattrape l’erreur et on rejoue la même question sur un modèle standard :

try {
  const { text } = await generateText({
    model: xai.responses("grok-4.20-multi-agent-0309"),
    prompt: "Ma question",
    providerOptions: {
      xai: { reasoningEffort: "low" },
    },
  });
  return text;
} catch (error) {
  console.error("Erreur multi-agent:", error);
  // Fallback vers un modele standard
  const { text } = await generateText({
    model: xai("grok-4.5"),
    prompt: "Ma question",
  });
  return text;
}

Observez que le fallback abandonne xai.responses() au profit de xai() : le modèle standard n’a pas la contrainte de la Responses API. Prévenez également votre utilisateur d’une manière ou d’une autre, car la réponse de repli sera moins fouillée que celle qu’il attendait.

Cas d’usage dans une application web

L’usage qui tire le meilleur parti de cette intégration est l’interface de recherche avancée : l’utilisateur pose une question complexe, votre application ouvre le flux, et la réponse s’écrit à l’écran pendant que les agents continuent de travailler en arrière-plan.

L’expérience obtenue est étonnamment naturelle. Le texte progresse, marque parfois une pause quand les agents lancent une recherche web, puis reprend. Ces pauses, loin d’être un défaut, signalent à l’utilisateur qu’un vrai travail de recherche est en cours — à condition que votre interface les accompagne d’un indicateur plutôt que de laisser croire à un blocage.

Points clés à retenir

• Utilisez @ai-sdk/xai avec xai.responses() pour le multi-agent
• Le nombre d’agents se contrôle via providerOptions.xai.reasoningEffort
• streamText est idéal pour les applications web interactives
• Le Vercel AI SDK s’intègre nativement avec Next.js et les autres frameworks
• Prévoyez un fallback vers un modèle standard en cas d’erreur