Vercel AI SDK pour Grok

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.5'),
  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.5'),
  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.5'),
  prompt: 'Rédigez une introduction sur les API RESTful.',
});

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

Utilisation avec l’endpoint Responses

Pour accéder aux fonctionnalités avancées via l’endpoint /v1/responses, utilisez xai.responses() :

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

const { text } = await generateText({
  model: xai.responses('grok-4.20-0309-reasoning'),
  prompt: 'Analysez les avantages et inconvénients des microservices.',
});

Intégration avec Next.js

Le Vercel AI SDK est conçu pour fonctionner de manière optimale avec Next.js. Voici un exemple de route API avec streaming :

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

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

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

  return result.toDataStreamResponse();
}

Génération d’images

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

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

const model = xai.image('grok-imagine-image');

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.responses() donne accès à l’endpoint moderne /v1/responses