Maîtriser le Kit de Développement Logiciel (SDK) IA de Vercel- Partie 1

Tout au long de cette série, nous explorerons comment utiliser le "AI SDK" de Vercel pour diverses tâches d'IA courantes, de la création d'un chatbot simple à la génération de données structurées. Nous fournirons des exemples pratiques, des extraits de code et des explications pour vous permettre de démarrer rapidement. Que vous construisiez un bot de service client, un outil de génération de contenu ou une application d'analyse de données, le SDK IA de Vercel a quelque chose à offrir.

Embarquons-nous dans ce voyage pour débloquer le potentiel de l'IA dans vos applications web !

Partie 1 : Construire votre premier chatbot de base avec le "AI SDK" de Vercel

Introduction

Bienvenue dans la première partie de notre série sur le "AI SDK" de Vercel ! Aujourd'hui, nous commençons par un classique : la création d'un chatbot de base. Les chatbots sont un excellent moyen d'engager les utilisateurs, de fournir un support instantané ou simplement d'ajouter un élément interactif d'IA à votre application. Le "AI SDK" de Vercel rend cela étonnamment simple, surtout lorsqu'il est associé à un framework tel que Next.js.

Dans cet article, nous allons aborder :

• Configurer votre projet Next.js.
• Installation du SDK Vercel AI et des bibliothèques de fournisseurs nécessaires (nous utiliserons OpenAI).
• Création d'une route API simple pour gérer les demandes de chat.
• Création d'un composant React pour interagir avec le chatbot.

Prérequis

• Node.js (v18+) et npm/yarn installés.
• Un compte Vercel (pour un déploiement facile, optionnel pour le développement local).
• Une clé API OpenAI (ou une clé API pour un autre fournisseur de LLM pris en charge comme Anthropic, Cohere, etc.).
• Connaissances de base de React et de Next.js.

Étape 1 : Configuration de votre projet Next.js

Si vous n'avez pas de projet Next.js, créez-en un :

npx create-next-app@latest vercel-ai-chatbot
cd vercel-ai-chatbot

Étape 2 : Installation des dépendances

Nous avons besoin du paquet ai (le SDK central de Vercel AI) et d'un paquet spécifique au fournisseur. Pour OpenAI, c'est @ai-sdk/openai.

npm install ai @ai-sdk/openai
# ou
yarn add ai @ai-sdk/openai

Vous devrez également configurer votre clé API OpenAI en tant que variable d'environnement. Créez un fichier .env.local dans la racine de votre projet :

# .env.local
OPENAI_API_KEY="votre_clé_api_openai_ici"

Important : Ajoutez .env.local à votre fichier .gitignore !

Étape 3 : Création de la route API (côté serveur)

Le SDK IA de Vercel se distingue en aidant à gérer le flux de réponses des modèles de langage de grande taille (LLMs). Nous allons créer une route API que notre frontend appellera.

Créez app/api/chat/route.ts (si vous utilisez App Router, qui est le choix par défaut pour les nouveaux projets Next.js) :

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

// Permettre des réponses en streaming jusqu'à 30 secondes
export const maxDuration = 30;

// IMPORTANT ! Définir le runtime sur edge
export const runtime = 'edge';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

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

  le résultat = await streamText({
    model: openai('gpt-40'), // Ou tout autre modèle pris en charge
    messages,
  });

  // Répondre avec le flux
  return result.toDataStreamResponse();
}

Explication :

• runtime = 'edge': Ceci est crucial pour les fonctions Vercel Edge, qui sont idéales pour diffuser des réponses d'IA avec une faible latence.
• maxDuration = 30: Configure la durée maximale pendant laquelle la fonction Edge peut s'exécuter.
• OpenAI: Nous initialisons le fournisseur OpenAI avec notre clé API.
• streamText: Il s'agit de la fonction principale du paquet ai pour générer des réponses textuelles en flux continu. Elle utilise le modèle de langue et l'historique des messages.
• messages: Le SDK IA de Vercel attend des messages dans un format spécifique (un tableau d'objets avec role et content). Le useChat hook côté client s'en chargera pour nous.
• result.toAIStreamResponse(): Ceci convertit le flux du SDK IA en un StreamingTextResponse, qui est un assistant de Vercel pour le streaming de données vers le client.

Étape 4 : Construction de l'interface utilisateur du chat (côté client)

Maintenant, créons le composant frontal. Modifiez votre app/page.tsx:

// app/page.tsx
'use client';

import { useChat } from '@ai-sdk/react';

const Chat = () => {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  // Par défaut, useChat appellera le point de terminaison `/api/chat`

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {messages.map(message => (
        <div key={message.id} className="whitespace-pre-wrap py-2">
          <strong>{message.role === 'user' ? 'Utilisateur : ' : 'IA : '}</strong>
          {message.parts.map((part, i) => {
            switch (part.type) {
              case 'text':
                return <div key={message.id}>{part.text}</div>
            }
          })}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl text-black"
          value={input}
          placeholder="Dites quelque chose..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}
export default Chat

Explication :

• 'use client': Indique qu'il s'agit d'un composant client dans le routeur d'application Next.js.
• useChat: Ce puissant crochet de @ai-sdk/react gère :
  • Gérer l'historique des messages du chat (messages).
  • Stockage de l'entrée utilisateur actuelle (input).
  • Fournir handleInputChange pour mettre à jour l'entrée lors de la frappe.
  • Fournir handleSubmit pour envoyer les messages à votre point de terminaison API (/api/chat par défaut) et ajouter la réponse en streaming de l'IA.
• L'interface utilisateur est simple : elle parcourt les messages pour afficher la conversation et fournit un formulaire de saisie.

La réponse du LLM est accessible via le tableau 'message parts'. Chaque message contient un tableau ordonné de parties, qui représente le contenu intégral généré par le modèle dans sa réponse. Ces parties peuvent inclure du texte brut, des jetons de raisonnement, et d'autres éléments qui seront expliqués plus tard. Le tableau préserve la séquence des sorties du modèle, vous permettant d'afficher ou de traiter chaque composant dans l'ordre où il a été généré.

Étape 5 : Lancer votre chatbot

Lancez votre serveur de développement Next.js :

npm run dev
# ou
yarn dev

Ouvrez http://localhost:3000 dans votre navigateur. Vous devriez voir un champ de saisie simple. Tapez un message et appuyez sur Entrée. Vous verrez la réponse de l'IA s'afficher !

Interface utilisateur de chatbot

Points clés

• Le SDK IA de Vercel, en particulier le useChat crochet et la fonction streamText, simplifie considérablement la création d'interfaces de chat en streaming.
• Les fonctions Edge (runtime = 'edge') sont recommandées pour des réponses IA à faible latence.
• Le SDK gère l'historique des messages et le streaming pour vous, vous permettant de vous concentrer sur l'interface utilisateur et la logique du backend.

Quelle est la prochaine étape ?

Dans la prochaine partie de cette série, nous allons améliorer notre chatbot en lui donnant des "outils" – la capacité d'appeler des fonctions et d'interagir avec des API externes en fonction de la conversation. Cela ouvre la porte à des interactions bien plus puissantes et dynamiques !

Restez à l'écoute !