Integration avec le Vercel AI SDK

Le multi-agent dans l’ecosysteme JavaScript

Le Vercel AI SDK (ai) est devenu un standard pour integrer des modeles d’IA dans les applications web JavaScript et TypeScript. Avec le provider @ai-sdk/xai, vous pouvez utiliser le multi-agent de Grok dans vos applications Next.js, SvelteKit ou tout autre framework JavaScript.

Installation

Vous avez besoin de deux packages :

npm install ai @ai-sdk/xai

Le provider @ai-sdk/xai gere la communication avec l’API xAI, tandis que ai fournit les fonctions generiques comme generateText et streamText.

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"),
  prompt: "Quels sont les derniers frameworks JavaScript de 2026 ?",
  providerOptions: {
    xai: { reasoningEffort: "low" },
  },
});

console.log(text);

Notez l’utilisation de xai.responses() (et non xai()) : le multi-agent necessite la Responses API.

Controle du nombre d’agents

Le nombre d’agents se controle via providerOptions.xai.reasoningEffort :

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

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

Le mapping est identique a celui de l’OpenAI SDK : low/medium → 4 agents, high/xhigh → 16 agents.

Streaming avec streamText

Pour les applications web interactives, le streaming est essentiel :

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

const result = streamText({
  model: xai.responses("grok-4.20-multi-agent"),
  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 avec l’App Router, vous pouvez retourner directement le stream depuis une route API :

// 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"),
    prompt: query,
    providerOptions: {
      xai: { reasoningEffort: "low" },
    },
  });

  return result.toDataStreamResponse();
}

Gestion des erreurs

Le multi-agent etant en beta, gerez les erreurs proprement :

try {
  const { text } = await generateText({
    model: xai.responses("grok-4.20-multi-agent"),
    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"),
    prompt: "Ma question",
  });
  return text;
}

Cas d’usage dans une application web

Le multi-agent est particulierement adapte aux interfaces de recherche avancee : un utilisateur pose une question complexe, et votre application affiche la reponse en streaming pendant que les agents travaillent en arriere-plan.

L’experience utilisateur est naturelle : l’utilisateur voit la reponse se construire progressivement, avec parfois des pauses quand les agents effectuent des recherches web.

Points cles a retenir

• Utilisez @ai-sdk/xai avec xai.responses() pour le multi-agent
• Le nombre d’agents se controle via providerOptions.xai.reasoningEffort
• streamText est ideal pour les applications web interactives
• Le Vercel AI SDK s’integre nativement avec Next.js et les autres frameworks
• Prevoyez un fallback vers un modele standard en cas d’erreur