Vercel AI SDK et integration frontend

Le Vercel AI SDK pour les applications web

Le Vercel AI SDK est un framework TypeScript concu pour integrer des modeles d’IA dans des applications web. Il fournit des hooks React, des utilitaires de streaming et une abstraction unifiee qui supporte nativement xAI/Grok depuis le package @ai-sdk/xai.

Si vous developpez une application Next.js, Nuxt, SvelteKit ou toute application React qui doit afficher des reponses en streaming, le Vercel AI SDK simplifie considerablement le travail.

Installation

Installez le SDK core et le provider xAI :

npm install ai @ai-sdk/xai

Configurez votre cle API dans les variables d’environnement :

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

Cote serveur : generer du texte

La fonction generateText est l’equivalent le plus simple de client.chat.create() :

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

const xai = createXai();

const { text } = await generateText({
  model: xai("grok-4.20-reasoning"),
  system: "Tu es un assistant technique.",
  prompt: "Explique le concept de conteneurisation.",
});

console.log(text);

Le provider createXai() detecte automatiquement XAI_API_KEY dans l’environnement.

Streaming cote serveur

Pour du streaming, utilisez streamText :

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

const xai = createXai();

const result = streamText({
  model: xai("grok-4.20-reasoning"),
  system: "Tu es un assistant pedagogique.",
  messages: [
    { role: "user", content: "Comment fonctionne une base de donnees relationnelle ?" }
  ],
});

// Utiliser dans une route API Next.js
return result.toDataStreamResponse();

La methode toDataStreamResponse() retourne un objet Response compatible avec les API routes de Next.js, formatant automatiquement le stream pour etre consomme par les hooks React cote client.

Cote client : le hook useChat

Le hook useChat est la piece maitresse cote frontend. Il gere automatiquement l’etat de la conversation, le streaming et l’interface utilisateur :

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

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: "/api/chat",
  });

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          <strong>{m.role === "user" ? "Vous" : "Grok"}</strong>
          <p>{m.content}</p>
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Posez votre question..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>
          Envoyer
        </button>
      </form>
    </div>
  );
}

Ce que useChat gere automatiquement

• Historique des messages : accumule les echanges user/assistant
• Streaming : affiche la reponse token par token pendant la generation
• Etat de chargement : isLoading passe a true pendant la generation
• Gestion des erreurs : intercepte les erreurs reseau et API
• Annulation : possibilite d’annuler une generation en cours avec stop()

Route API correspondante

Le hook useChat attend une route API qui retourne un stream. Voici l’implementation avec Next.js App Router :

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

const xai = createXai();

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

  const result = streamText({
    model: xai("grok-4.20-reasoning"),
    system: "Tu es un assistant utile. Reponds en francais.",
    messages,
  });

  return result.toDataStreamResponse();
}

Le SDK gere automatiquement la serialisation des messages entre le client et le serveur.

Points cles a retenir

• Le Vercel AI SDK supporte xAI/Grok via le package @ai-sdk/xai
• generateText pour les reponses synchrones, streamText pour le streaming
• Le hook useChat gere l’etat complet d’une conversation cote client
• toDataStreamResponse() formate le stream pour la consommation par les hooks React
• Le provider createXai() detecte automatiquement la cle API dans l’environnement