Vercel AI SDK et intégration frontend — Chat Completions : compatibilité OpenAI

Leçon mise à jour le 3 novembre 2026 d’après la documentation de l’AI SDK 7 (ai 7.0.x, @ai-sdk/react 4.x) : useChat s’utilise avec DefaultChatTransport et sendMessage, les messages s’affichent par leurs parts, la route renvoie createUIMessageStreamResponse, system devient instructions, et le provider @ai-sdk/xai 5 ne prend plus en charge Chat Completions : xai() passe par l’API Responses (le code a été vérifié par le compilateur TypeScript avec ai 7.0.162 et @ai-sdk/xai 5.0.38). L’ancienne version utilisait l’API de l’AI SDK 4 (input, handleSubmit, isLoading, toDataStreamResponse). Sources : AI SDK, Chatbot · AI SDK, provider xAI.

Le Vercel AI SDK pour les applications web

Le Vercel AI SDK est un framework TypeScript conçu pour intégrer des modèles d’IA dans des applications web. Il fournit des hooks React, des utilitaires de streaming et une abstraction unifiée qui supporte nativement xAI/Grok depuis le package @ai-sdk/xai.

Si vous développez une application Next.js, Nuxt, SvelteKit ou toute application React qui doit afficher des réponses en streaming, le Vercel AI SDK simplifie considérablement le travail.

Installation

Installez le SDK core et le provider xAI :

npm install ai @ai-sdk/xai

Configurez votre clé API dans les variables d’environnement :

# .env.local
XAI_API_KEY=votre-cle-api

Côté serveur : générer du texte

La fonction generateText est l’équivalent le plus simple de client.chat.create(). Un point a changé, et il concerne directement ce cours : depuis la version 5 du provider @ai-sdk/xai (septembre 2026), compatible avec l’AI SDK 7, le provider ne prend plus en charge l’endpoint Chat Completions. xai(modèle) passe par l’API Responses, celle que xAI recommande désormais. La méthode xai.chat(modèle), que citent encore certains guides de migration, n’existait que dans la version 4 du provider ; pour un code qui doit rester sur Chat Completions, utilisez plutôt le SDK OpenAI pointé sur xAI (leçon 5).

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

const { text } = await generateText({
  model: xai("grok-4.7"), // API Responses de xAI
  instructions: "Tu es un assistant technique.",
  prompt: "Explique le concept de conteneurisation.",
});

console.log(text);

Le provider xai lit automatiquement XAI_API_KEY dans l’environnement ; createXai() sert à créer une instance avec d’autres réglages. L’option instructions remplace system, encore accepté mais déprécié dans l’AI SDK 7.

Streaming côté serveur

Pour du streaming, utilisez streamText. La réponse se lit morceau par morceau dans textStream :

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

const result = streamText({
  model: xai("grok-4.7"),
  instructions: "Tu es un assistant pédagogique.",
  messages: [
    { role: "user", content: "Comment fonctionne une base de données relationnelle ?" },
  ],
});

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

Côté client : le hook useChat

Le hook useChat est la pièce maîtresse côté frontend. Il gère l’historique de la conversation, le streaming et l’état de la requête ; le champ de saisie, lui, reste un simple état React que vous gérez :

"use client";
import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport } from "ai";
import { useState } from "react";

export default function ChatPage() {
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({ api: "/api/chat" }),
  });
  const [input, setInput] = useState("");

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          <strong>{m.role === "user" ? "Vous" : "Grok"}</strong>
          {m.parts.map((part, i) =>
            part.type === "text" ? <p key={i}>{part.text}</p> : null
          )}
        </div>
      ))}

      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (input.trim()) {
            sendMessage({ text: input });
            setInput("");
          }
        }}
      >
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Posez votre question..."
          disabled={status !== "ready"}
        />
        <button type="submit" disabled={status !== "ready"}>
          Envoyer
        </button>
      </form>
    </div>
  );
}

Ce que useChat gère automatiquement

Historique des messages : accumule les échanges ; chaque message porte des parts (texte, appels d’outils…), à afficher plutôt que l’ancien champ content
Streaming : affiche la réponse au fil de la génération
État de la requête : status vaut ready quand un nouveau message peut partir
Gestion des erreurs : intercepte les erreurs réseau et API
Annulation : stop() interrompt une génération en cours

Route API correspondante

Le hook attend une route qui renvoie un flux de messages d’interface. Voici l’implémentation avec le routeur App de Next.js, calquée sur l’exemple officiel de l’AI SDK 7 :

// 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"),
    instructions: "Tu es un assistant utile. Réponds en français.",
    messages: await convertToModelMessages(messages),
  });

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

Deux conversions encadrent l’échange : convertToModelMessages transforme les messages d’interface reçus du client en messages pour le modèle, et toUIMessageStream fait l’inverse sur le flux de réponse. Les méthodes toUIMessageStreamResponse() du résultat de streamText fonctionnent encore dans l’AI SDK 7, mais elles sont dépréciées ; quant à l’ancien toDataStreamResponse(), il n’existe plus.

Points clés à retenir

Le Vercel AI SDK supporte xAI/Grok via le package @ai-sdk/xai
generateText pour les réponses synchrones, streamText pour le streaming
Le hook useChat gère l’état complet d’une conversation côté client
createUIMessageStreamResponse et toUIMessageStream renvoient le flux attendu par useChat ; toDataStreamResponse() n’existe plus
Depuis @ai-sdk/xai 5, le provider ne prend plus en charge Chat Completions : xai() utilise l’API Responses ; pour rester sur Chat Completions, passez par le SDK OpenAI
Le provider createXai() détecte automatiquement la clé API dans l’environnement