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'),
  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'),
  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'),
  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-reasoning'),
  prompt: 'Analysez les avantages et inconvénients du micro-services.',
});

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'),
    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 avec le provider xAI est le bon choix quand :

• Vous développez une application web en JavaScript ou TypeScript
• Vous utilisez Next.js, Nuxt, SvelteKit ou un framework similaire
• Vous avez besoin de streaming fluide vers le navigateur
• Vous voulez pouvoir changer de modèle facilement (OpenAI, Anthropic, xAI) avec une API unifiée

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