AccueilClientsExpertisesBlogOpen SourceContact

6 septembre 2024

Comment construire des applications IA avec Vercel AI SDK — Part I

5 minutes de lecture

Comment construire des applications IA avec Vercel AI SDK — Part I

Vercel a dévoilé une nouvelle version de Vercel AI SDK, conçu pour simplifier le processus de développement d'applications IA en fournissant des outils et des bibliothèques prêts à l'emploi pour les développeurs.

C'est ce que met en pratique cette vidéo didactique de Nico Albanese, ingénieur chez Vercel. Il présente les différentes fonctionnalités du framework et explique comment l'utiliser pour construire des applications IA de manière simple et efficace. Je vous propose un tour d'horizon des exemples clés abordés.

La génération de texte

Dans ce premier exemple, Nico Albanese nous montre comment générer du texte avec un large language model (LLM) en utilisant AI SDK Core. Pour cela, il utilise le modèle GPT-4o de OpenAI.

Laissons-nous guider, pour débuter créons un fichier TypeScript et définissons une fonction principale. Dans cette fonction, appelons generateText, spécifions le modèle souhaité et demandons lui de nous raconter une blague, puis affichons la génération de texte dans la console.

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

async function main() {
  const result = await generateText({
    model: openai('gpt-4o'),
    prompt: 'Tell me a joke.',
  })
  console.log(result.text)
}

Le AI SDK Core API est conçu pour faciliter le changement de modèle en modifiant seulement deux lignes de code.

pnpm tsx generate-text.ts

Why don’t scientists trust atoms?

Because they make up everything!

Bienvenue à l’OpenAI Comedy Club ! 🤡

Avez-vous remarqué un léger délai entre l'exécution du script et la réponse du modèle ? Nous pouvons résoudre cela avec le streaming.

Le streaming de texte

Le streaming permet d'envoyer la réponse du modèle de manière incrémentielle lors de sa génération. Pour cela il suffit de remplacer la fonction generateText par la fonction streamText et de gérer le résultat du streaming.

Utilisons une boucle for asynchrone pour itérer sur le flux de texte résultant et l'afficher dans la console.

import { streamText } from 'ai'
import { openai } from '@ai-sdk/openai'

async function main() {
  const result = await streamText({
    model: openai('gpt-4o'),
    prompt: 'Tell me a joke.',
  })

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

La réponse est maintenant streamée comme sur ChatGPT. Grâce à Nico Albanese nous savons maintenant comment générer et streamer du texte avec un LLM. Mais remarquez que la réponse du modèle ne contient pas seulement une blague. Ne serait-il pas agréable de pouvoir renvoyer la réponse dans un format structuré ?

Obtenir une réponse dans un format structuré

Nous pouvons générer une réponse sous forme d'objet avec l'aide de Zod, une librairie de validation de schéma. Reprenons l'exemple generateText pour forcer le modèle à renvoyer un objet structuré et remplaçons generateText par generateObject et importons Zod.

Utilisons le schéma Zod proposé dans l'exemple pour notre blague. Dans l'exemple présenté, la réponse aura deux clés : setup et punchline, toutes deux de type chaîne de caractères. Nous pouvons également décrire optionnellement chacune de nos clés pour garantir que le modèle dispose du contexte approprié pour une génération adéquate. Enfin, affichons l'objet résultant dans la console.

import { generateObject } from 'ai'
import { openai } from '@ai-sdk/openai'
import { z } from 'zod'

async function main() {
  const { object: joke } = await generateObject({
    model: openai('gpt-4o'),
    prompt: 'Tell me a joke.',
    schema: z.object({
      joke: z.object({
        setup: z.string().describe('the setup for the joke'),
        punchline: z.string().describe('the punchline for the joke'),
      }),
    }),
  })
  return joke
}

Exécutons le script et constatons que nous avons maintenant notre blague dans un format structuré.

{
  setup: 'Why don’t scientists trust atoms?'
  punchline: 'Because they make up everything!'
}

Utilisations des tools

Bien que les LLM soient puissants, ils sont également connus pour halluciner, c'est-à-dire inventer des choses. Nico Albanese nous propose de résoudre cela et permettre au modèle d'interagir avec le monde extérieur en utilisant des tools. Ces derniers sont comme des programmes que vous pouvez fournir au modèle et que celui-ci peut décider d'utiliser quand il le souhaite.

L'exemple présent au sein de la vidéo illustre comment utiliser un tool pour obtenir la météo de la localisation de l'utilisateur et l'intégrer dans une nouvelle blague. Pour se faire, créons weather, notre premier tool. Nous devons d'abord fournir une description, car c'est ce que le modèle utilisera pour décider de l'utiliser ou non. Ensuite, fournissons un schéma Zod pour les paramètres nécessaires à l'exécution de l'outil. Enfin, définissons une fonction asynchrone qui sera exécutée si le modèle décide de l'utiliser.

Vous pouvez exécuter n'importe quel code asynchrone ici, par exemple appeler une API externe pour obtenir la météo de la localisation de l'utilisateur, mais dans ce cas, nous allons simplement calculer un nombre aléatoire et le renvoyer comme température.

import { openai } from "@ai-sdk/openai";
import { streamText, generateText } from "ai";
import { z } from "zod";

async function main() => {
  const location = “London”;
  const result = await generateText({
    model: openai("gpt-4o"),
    temperature: 0.8,
    prompt: `You are a funny chatbot. users location: ${location}`,
    tools: {
      weather: {
        description: "Get the weather for the user's location",
        parameters: z.object({
          location: z.string().describe("user's location"),
        }),
        execute: async ({ location }) => {
          const temperature = Math.floor(Math.random() * 31);
          return { temperature };
        },
      },
    },
  });
};

Nous pouvons maintenant vérifier si le modèle a décidé d'utiliser l'outil et, si oui, passer le résultat à un autre appel de LLM pour générer notre blague. Dans cet exemple, cette blague est streamée à l'utilisateur, donc importons et appelons streamText. Comme précédemment, passons un modèle et un prompt, celui-ci va maintenant intégrer à la fois la localisation de l'utilisateur et le résultat de l'appel à notre tool weather.

if (result.toolResults && result.toolCalls) {
  const joke = await streamText({
    model: openai('gpt-4o'),
    prompt: `Tell me a joke that incorporates ${location} and it's current temperature (${result.toolResults[0].result.temperature})`,
  })
  for await (const textPart of joke.textStream) {
    process.stdout.write(textPart)
  }
}

Pour gérer la réponse en streaming, c'est une boucle for asynchrone qui est utilisée pour itérer sur le flux de texte et l'écrire dans la console.

"Pourquoi le Londonien a-t-il apporté un ventilateur aux températures ?"
"Parce qu'avec 27 degrés, même la Tamise avait besoin d'une brise fraîche."

Nous avons maintenant couvert les fondamentaux de AI SDK Core. Dans un second article nous explorerons la suite des exemples et comment utiliser AI SDK UI pour construire un chatbot.

À découvrir également

Notre workflow de traduction d’articles avec l’API OpenAI

08 Oct 2024

Notre workflow de traduction d’articles avec l’API OpenAI

Chez Premier Octet, nous aimons partager nos articles avec le plus grand nombre, pour cela nous avons mis en place un workflow de traduction automatisée.

par

Baptiste

AI et UI #1 - Filtres intelligents avec le SDK Vercel AI et Next.js

12 Jun 2024

AI et UI #1 - Filtres intelligents avec le SDK Vercel AI et Next.js

Dans ce premier article d’une série consacrée à l’IA et l’UI, je vous propose de découvrir différentes manières d’intégrer ces modèles d’IA dans vos applications React pour améliorer l’expérience utilisateur.

par

Baptiste

Retour d'expérience chez 20 Minutes : s'adapter au journalisme numérique

30 May 2024

Retour d'expérience chez 20 Minutes : s'adapter au journalisme numérique

Dans cet article, vous ne trouverez pas de snippets ou de tips croustillants sur React, seulement le récit d'une aventure plutôt ordinaire à travers le développement et l'évolution d'un projet technique.

par

Vincent

Premier Octet vous accompagne dans le développement de vos projets avec react

En savoir plusNous contacter
18 avenue Parmentier
75011 Paris
+33 1 43 57 39 11
hello@premieroctet.com

Suivez nos aventures

GitHub
X (Twitter)
Flux RSS

Naviguez à vue