Intégration avec le Vercel AI SDK — Multi-Agent Research

Leçon mise à jour le 3 novembre 2026 d’après la documentation de l’AI SDK 7 et la page Multi-agent de xAI : xai() utilise désormais l’API Responses (la mise en garde de l’ancienne version ne vaut plus), la route Next.js n’utilise plus toDataStreamResponse(), supprimé, et le repli vise grok-4.7. La correspondance low/medium → 4 agents, high/xhigh → 16 agents est celle de la documentation xAI. Sources : AI SDK, provider xAI · xAI, Multi-agent.

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

Le multi-agent exige l’API Responses de xAI. Avec les versions actuelles (AI SDK 7 et @ai-sdk/xai 5), c’est la seule que le provider utilise : xai(modèle) y passe déjà. Écrire xai.responses() rend ce choix explicite, ce qui protège aussi un code exécuté avec une version plus ancienne du SDK, où xai() passait par Chat Completions.

Contrôle du nombre d’agents

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

// À passer comme providerOptions de generateText ou streamText
const rapide = { xai: { reasoningEffort: "low" } };       // 4 agents
const approfondie = { xai: { reasoningEffort: "high" } }; // 16 agents

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 { createTextStreamResponse, streamText, toTextStream } 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" },
    },
  });

  // Flux de texte brut : côté client, lisez-le avec fetch,
  // ou avec useChat et un TextStreamChatTransport
  return createTextStreamResponse({
    stream: toTextStream({ stream: result.stream }),
  });
}

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.7"),
    prompt: "Ma question",
  });
  return text;
}

Le repli passe sur un modèle standard, grok-4.7, qui n’a pas les contraintes du multi-agent (avec l’AI SDK 7, xai() utilise aussi l’API Responses). 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