Skip to content
Learni
Voir tous les tutoriels
Intelligence Artificielle

Comment maîtriser le Vercel AI SDK avancé en 2026

22 minADVANCED
Next.jsVercelAI SDK
Read in English

Introduction

Le Vercel AI SDK est devenu l'outil de référence pour intégrer des modèles de langage dans des applications web. En 2026, ses fonctionnalités avancées permettent de gérer des flux complexes, des appels d'outils dynamiques et des providers personnalisés. Ce tutoriel vous guide pas à pas pour créer une application IA robuste avec Next.js. Vous apprendrez à optimiser les performances de streaming, à sécuriser les appels et à étendre le SDK. Chaque étape inclut du code prêt à l'emploi. Ce niveau avancé suppose une bonne maîtrise de TypeScript et des API REST.

Prérequis

  • Node.js 20+ et Next.js 15
  • Compte OpenAI ou Anthropic
  • Connaissances solides en TypeScript et React Server Components
  • Vercel CLI installé

Initialisation du projet

terminal
npx create-next-app@latest ai-sdk-app --yes
cd ai-sdk-app
npm install ai @ai-sdk/openai zod

Cette commande crée un projet Next.js 15 et installe le SDK Vercel AI avec le provider OpenAI et Zod pour la validation. Le package ai gère le streaming et les hooks React.

Route API avec streaming avancé

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

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o'),
    messages,
    tools: {
      getWeather: {
        description: 'Obtenir la météo',
        parameters: z.object({ city: z.string() }),
        execute: async ({ city }) => ({ temp: 18, city }),
      },
    },
    maxSteps: 5,
  });
  return result.toDataStreamResponse();
}

Cette route API utilise streamText pour gérer le streaming et le tool calling. maxSteps limite les itérations d'outils. Le code est complet et prêt à l'emploi avec validation Zod.

Composant React avec useChat

app/page.tsx
'use client';
import { useChat } from 'ai/react';
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <div>
      {messages.map(m => <div key={m.id}>{m.role}: {m.content}</div>)}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">Envoyer</button>
      </form>
    </div>
  );
}

Le hook useChat gère automatiquement le streaming et l'état des messages. Il se connecte à la route API sans configuration supplémentaire.

Provider personnalisé avancé

lib/custom-provider.ts
import { createOpenAI } from '@ai-sdk/openai';
export const customOpenAI = createOpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  baseURL: 'https://api.openai.com/v1',
  headers: { 'X-Custom-Header': 'advanced' },
  fetch: async (url, options) => {
    const res = await fetch(url, options);
    if (!res.ok) throw new Error('Provider error');
    return res;
  },
});

Créer un provider personnalisé permet d'ajouter des headers, de gérer les erreurs et de router les requêtes. Cette approche est essentielle pour la production.

Gestion des outils complexes

app/api/tools/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o'),
    messages,
    tools: {
      searchDatabase: {
        parameters: z.object({ query: z.string() }),
        execute: async ({ query }) => ({ results: ['item1'] }),
      },
    },
  });
  return result.toDataStreamResponse();
}

Les outils complexes avec exécution asynchrone permettent d'intégrer des bases de données ou APIs externes tout en maintenant le streaming fluide.

Bonnes pratiques

  • Toujours valider les entrées avec Zod avant d'appeler les modèles
  • Limiter maxSteps pour éviter les boucles infinies d'outils
  • Utiliser des variables d'environnement pour les clés API
  • Implémenter un système de rate limiting côté serveur
  • Logger les erreurs de providers pour le monitoring

Erreurs courantes à éviter

  • Oublier de retourner toDataStreamResponse() ce qui bloque le streaming
  • Ne pas gérer les erreurs async dans les fonctions execute des tools
  • Utiliser des modèles non supportés sans provider custom
  • Ignorer la limite de tokens ce qui provoque des coupures de réponse

Pour aller plus loin

Explorez les fonctionnalités multi-modèles et les agents autonomes dans nos formations Learni.