Vercel AI SDK : intégrer l'IA dans une app web

Qu'est-ce que le Vercel AI SDK

Le Vercel AI SDK est une bibliothèque TypeScript open-source qui simplifie l'intégration de modèles de langage (LLM) dans des applications web. Développé par Vercel, il fonctionne aussi bien avec Next.js, React, Vue, Svelte qu'avec n'importe quel framework Node.js.

Son point fort : une API unifiée qui permet de changer de provider (OpenAI, Anthropic, Mistral, Google Gemini, etc.) sans réécrire son code.

Installation et configuration

# Installer le core + un provider (ex: OpenAI)
npm install ai @ai-sdk/openai

# Ou avec Anthropic
npm install ai @ai-sdk/anthropic

# Ou avec Google Gemini
npm install ai @ai-sdk/google

Configurer la clé API dans un fichier .env.local :

OPENAI_API_KEY=sk-...
# ou
ANTHROPIC_API_KEY=sk-ant-...
# ou
GOOGLE_GENERATIVE_AI_API_KEY=AIza...

Génération de texte simple

La fonction generateText() est le point d'entrée le plus simple : elle envoie un prompt et attend la réponse complète.

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

const { text } = await generateText({
  model: openai('gpt-4o'),
  prompt: 'Explique le concept de closure en JavaScript en 3 phrases.',
});

console.info(text);

Avec un système de messages (historique de conversation) :

const { text } = await generateText({
  model: openai('gpt-4o'),
  system: 'Tu es un expert JavaScript. Réponds en français.',
  messages: [
    { role: 'user', content: 'Qu\'est-ce qu\'un closure ?' },
    { role: 'assistant', content: 'Un closure est...' },
    { role: 'user', content: 'Donne-moi un exemple pratique.' },
  ],
});

Streaming de réponses

Le streaming affiche les tokens au fur et à mesure qu'ils arrivent, pour une expérience utilisateur plus réactive (comme ChatGPT). La fonction streamText() retourne un flux de données.

// API Route (Next.js App Router)
// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

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

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });

  return result.toDataStreamResponse();
}

Côté client avec le hook useChat() :

// components/ChatInterface.tsx
'use client';
import { useChat } from 'ai/react';

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

  return (
    <div>
      {messages.map(m => (
        <div key={m.id} className={m.role === 'user' ? 'user' : 'assistant'}>
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} disabled={isLoading} />
        <button type="submit">Envoyer</button>
      </form>
    </div>
  );
}

Les tools (outils)

Les tools permettent au LLM d'appeler des fonctions définies par le développeur. C'est la base des AI agents : le modèle décide quand et comment utiliser chaque outil.

import { generateText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const { text, toolResults } = await generateText({
  model: openai('gpt-4o'),
  prompt: 'Quelle météo fait-il à Paris aujourd\'hui ?',
  tools: {
    getWeather: tool({
      description: 'Récupère la météo actuelle d\'une ville',
      parameters: z.object({
        city: z.string().describe('Nom de la ville'),
        unit: z.enum(['celsius', 'fahrenheit']).default('celsius'),
      }),
      execute: async ({ city, unit }) => {
        // Appel à une API météo réelle
        return { temperature: 18, condition: 'Nuageux', city, unit };
      },
    }),
  },
});

console.info(text);
// "Il fait actuellement 18°C à Paris avec un ciel nuageux."

Changer de provider LLM

L'un des plus grands avantages du Vercel AI SDK est la portabilité : changer de modèle se fait en une ligne.

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';
import { mistral } from '@ai-sdk/mistral';
import { google } from '@ai-sdk/google';

// OpenAI GPT-4o
const r1 = await generateText({ model: openai('gpt-4o'), prompt });

// Anthropic Claude
const r2 = await generateText({ model: anthropic('claude-3-5-sonnet-20241022'), prompt });

// Mistral
const r3 = await generateText({ model: mistral('mistral-large-latest'), prompt });

// Google Gemini
const r4 = await generateText({ model: google('gemini-2.0-flash'), prompt });