Vercel AI SDK pour Grok — API Grok : démarrage rapide

Leçon mise à jour le 3 novembre 2026 d’après la documentation de l’AI SDK 7 et de son provider xAI : xai() utilise l’API Responses et le provider @ai-sdk/xai 5 ne prend plus en charge Chat Completions, la route Next.js renvoie createUIMessageStreamResponse (l’ancien toDataStreamResponse() n’existe plus) et la génération d’images passe par generateImage avec aspectRatio. Sources : AI SDK, provider xAI · AI SDK, Chatbot.

Grok dans l’écosystème JavaScript

Le Vercel AI SDK est la solution de référence pour intégrer des modèles de langage dans les applications JavaScript et TypeScript. xAI fournit un provider dédié (@ai-sdk/xai) qui s’intègre nativement avec ce SDK, offrant une expérience de développement fluide pour les applications web.

Installation

Installez le SDK et le provider xAI :

npm install ai @ai-sdk/xai

Si vous utilisez TypeScript avec des schémas de validation (sorties structurées), ajoutez Zod :

npm install ai @ai-sdk/xai zod

Configuration

Le provider xAI lit automatiquement la variable d’environnement XAI_API_KEY. Créez un fichier .env.local à la racine de votre projet :

XAI_API_KEY=xai-votre-cle-ici

Générer du texte

L’utilisation de base avec generateText :

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

const { text } = await generateText({
  model: xai('grok-4.7'),
  prompt: 'Expliquez le concept de serverless en 3 phrases.',
});

console.log(text);

Avec un historique de conversation

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

const { text } = await generateText({
  model: xai('grok-4.7'),
  messages: [
    { role: 'system', content: 'Vous êtes un expert en architecture cloud.' },
    { role: 'user', content: 'Quels sont les avantages du serverless ?' },
  ],
});

Streaming

Le Vercel AI SDK excelle dans le streaming, particulièrement utile pour les interfaces utilisateur réactives :

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

const result = streamText({
  model: xai('grok-4.7'),
  prompt: 'Rédigez une introduction sur les API RESTful.',
});

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

API Responses ou Chat Completions

Avec les versions actuelles (AI SDK 7 et @ai-sdk/xai 5), xai(modèle) passe par l’API Responses de xAI, celle que xAI recommande : tous les exemples ci-dessus l’utilisent déjà, et xai.responses(modèle) permet de le dire explicitement. L’endpoint hérité Chat Completions n’est plus pris en charge par le provider depuis sa version 5 (septembre 2026) ; si vous en avez besoin, passez par le SDK OpenAI pointé sur xAI (leçon précédente).

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

// API Responses : forme courte, ou explicite
const { text } = await generateText({
  model: xai('grok-4.7'),
  prompt: 'Analysez les avantages et inconvénients des microservices.',
});

const explicite = await generateText({
  model: xai.responses('grok-4.7'),
  prompt: 'Même question, en nommant l\'API.',
});

Intégration avec Next.js

Le Vercel AI SDK est conçu pour fonctionner de manière optimale avec Next.js. Voici une route API avec streaming, au format attendu par le hook useChat de @ai-sdk/react :

// app/api/chat/route.ts
import {
  convertToModelMessages,
  createUIMessageStreamResponse,
  streamText,
  toUIMessageStream,
  type UIMessage,
} from 'ai';
import { xai } from '@ai-sdk/xai';

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model: xai('grok-4.7'),
    messages: await convertToModelMessages(messages),
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

L’ancien result.toDataStreamResponse() n’existe plus ; result.toUIMessageStreamResponse() fonctionne encore dans l’AI SDK 7 mais est déprécié.

Génération d’images

Le provider xAI supporte aussi la génération d’images, avec generateImage :

import { generateImage } from 'ai';
import { xai } from '@ai-sdk/xai';

const { image } = await generateImage({
  model: xai.image('grok-imagine-image'),
  prompt: 'Une ville futuriste au coucher du soleil',
  aspectRatio: '16:9',
});

Le modèle d’image de xAI ne prend pas de paramètre size : utilisez aspectRatio.

Quand choisir ce SDK

Le Vercel AI SDK s’impose dès que votre terrain est le web JavaScript ou TypeScript. Si votre application vit dans Next.js, Nuxt, SvelteKit ou un framework comparable, il s’intègre là où vous travaillez déjà, avec des hooks et des composants pensés pour ces environnements. Son point fort le plus visible est le streaming vers le navigateur : l’affichage progressif des réponses, qui demande du code délicat à la main, fonctionne ici en quelques lignes. Et son abstraction multi-fournisseurs — la même API pour OpenAI, Anthropic et xAI — fait de lui le meilleur choix quand vous voulez pouvoir changer de modèle sans réécrire la couche d’intégration : le provider xAI se substitue à un autre en une ligne d’import.

Points clés à retenir

Installez ai et @ai-sdk/xai pour le support natif de Grok
Le provider xai() lit automatiquement XAI_API_KEY
Utilisez generateText pour les réponses complètes, streamText pour le streaming
xai() utilise l’API Responses ; le provider ne prend plus en charge Chat Completions depuis sa version 5