Vercel AI SDK et intégration frontend

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() :

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

const xai = createXai();

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

console.log(text);

Le provider createXai() détecte automatiquement XAI_API_KEY dans l’environnement.

Streaming côté 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-0309-reasoning"),
  system: "Tu es un assistant pédagogique.",
  messages: [
    { role: "user", content: "Comment fonctionne une base de données relationnelle ?" }
  ],
});

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

La méthode toDataStreamResponse() retourne un objet Response compatible avec les API routes de Next.js, formatant automatiquement le stream pour être consomme par les hooks React côté client.

Côté client : le hook useChat

Le hook useChat est la pièce maîtresse côté frontend. Il gère automatiquement l’état 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 gère automatiquement

• Historique des messages : accumule les échanges user/assistant
• Streaming : affiche la réponse token par token pendant la génération
• État de chargement : isLoading passe à true pendant la génération
• Gestion des erreurs : intercepte les erreurs réseau et API
• Annulation : possibilité d’annuler une génération en cours avec stop()

Route API correspondante

Le hook useChat attend une route API qui retourne un stream. Voici l’implémentation 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-0309-reasoning"),
    system: "Tu es un assistant utile. Réponds en français.",
    messages,
  });

  return result.toDataStreamResponse();
}

Le SDK gère automatiquement la sérialisation des messages entre le client et le serveur.

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
• toDataStreamResponse() formate le stream pour la consommation par les hooks React
• Le provider createXai() détecte automatiquement la clé API dans l’environnement