Fermer

décembre 3, 2025

Créez votre première application d’IA en 30 minutes : SDK TypeScript AI, Gemini

Créez votre première application d’IA en 30 minutes : SDK TypeScript AI, Gemini


Un guide étape par étape permettant aux développeurs TypeScript de créer des applications d’IA puissantes et sécurisées. Créez un chatbot CLI et un générateur de données structurées à l’aide du SDK Vercel AI et du modèle Gemini de Google.

Vous avez vu ce que les LLM peuvent faire : ChatGPT, Claude et d’innombrables produits basés sur l’IA remodèlent la façon dont les logiciels sont créés. Mais en tant que développeur TypeScript, vous vous demandez probablement : puis-je créer des applications d’IA avec la même sécurité de type et la même expérience de développement auxquelles je suis habitué ? La réponse est Oui.

Vous aussi pouvez devenir ingénieur en IA et créer des applications d’IA puissantes et sécurisées en TypeScript avec le SDK IA Vercel. Il s’agit d’une boîte à outils complète conçue pour le Web moderne. Il fournit une API unifiée pour différents modèles comme Gemini et GPT, une prise en charge du streaming de première classe et, plus important encore, un système robuste pour générer des sorties structurées et sécurisées.

Dans ce guide, nous allons réduire le bruit et créer deux exemples pratiques en moins de 30 minutes. Nous allons créer :

  1. Un outil CLI qui transforme une phrase simple en un objet utilisateur entièrement typé
  2. Un chatbot CLI interactif qui mémorise votre conversation

Le tout en TypeScript, le tout fonctionnant directement dans votre terminal. Commençons.

La configuration en 5 minutes : votre environnement de développement d’IA

La mise en route est d’une simplicité rafraîchissante. Tout ce dont vous avez besoin est Node.js 22+ et un compte Google.

Étape 1 : Projet et dépendances

Tout d’abord, créons un nouveau répertoire de projet et initialisons-le. Nous utiliserons pnpmmais vous pouvez utiliser npm ou yarn si vous préférez.

mkdir ai-cli && cd ai-cli
pnpm init

Ensuite, configurez votre package.json pour utiliser les modules ES en ajoutant le "type" champ:

{
  "name": "ai-cli",
  "version": "1.0.0",
  "type": "module"
}

Installez maintenant les packages nécessaires.

pnpm install ai @ai-sdk/google @clack/prompts zod

Voici un aperçu rapide de notre boîte à outils :

  • ai: Le cœur du SDK Vercel AI
  • @ai-sdk/google: Le fournisseur spécifique pour utiliser les modèles Gemini de Google
  • @clack/prompts: Une bibliothèque fantastique pour créer des interfaces de ligne de commande belles et conviviales
  • zod: La pierre angulaire de notre sécurité de type, nous permettant de définir des schémas de données

Étape 2 : Obtenez votre clé API Google Gemini

Le SDK Vercel AI prend en charge de nombreux modèles, mais nous utiliserons Gemini de Google, qui offre un niveau gratuit généreux, parfait pour le développement : aucune carte de crédit n’est requise.

  1. Aller à Google IA Studio.
  2. Cliquez sur «Créer une clé API« . Suivez l’invite et copiez votre nouvelle clé lorsque vous avez terminé.
  3. De retour dans le répertoire de votre projet, créez un nouveau fichier nommé .env.
  4. Ajoutez votre clé API à ce fichier :
GOOGLE_GENERATIVE_AI_API_KEY="YOUR_KEY_HERE"

Le SDK AI détectera et utilisera automatiquement cette clé.

Étape 3 : Exigences de la version Node.js

Ce guide utilise Node.js 22 ou supérieurqui comprend deux fonctionnalités importantes :

  • Prise en charge native de TypeScript via la suppression de type (pas besoin de ts-node ou tsx)
  • Intégré .env chargement du fichier avec le --env-file drapeau

Si vous utilisez une ancienne version de Node.js, veuillez passer à Node.js 22+ pour suivre.

Vous êtes maintenant prêt à créer votre première application d’IA.

Concepts de base : Comprendre les éléments constitutifs du SDK AI

Avant de nous lancer dans le codage, comprenons les concepts clés qui rendent le SDK Vercel AI puissant pour les développeurs TypeScript.

generateObject vs generateText

Le SDK AI fournit deux fonctions principales pour interagir avec les LLM :

  • generateObject: renvoie des données structurées conformes à un schéma que vous définissez. Parfait pour extraire des informations spécifiques, générer des données fictives ou tout scénario où vous avez besoin de sorties prévisibles et typées.
  • generateText: renvoie des réponses en texte libre. Idéal pour les conversations, l’écriture créative ou les requêtes ouvertes.

Schémas et sécurité des types

Le SDK utilise Zod des schémas pour définir la forme exacte des données que vous attendez de l’IA. Lorsque vous transmettez un schéma à generateObjectvous obtenez :

  1. Sorties de type sécurisé: TypeScript connaît la structure exacte des données renvoyées
  2. Validation d’exécution: Le SDK vérifie que la réponse de l’IA correspond à votre schéma
  3. AI guidance: vos descriptions de schéma servent d’instructions à l’IA, l’aidant à générer de meilleurs résultats

C’est la magie qui introduit la sécurité des types de TypeScript dans le monde imprévisible de l’IA.

L’API unifiée

L’une des plus grandes forces du SDK réside dans son API unifiée entre différents fournisseurs de modèles (Google, OpenAI, Anthropic, etc.). Vous pouvez échanger des modèles en changeant simplement le model paramètre : la logique de votre application reste inchangée.

Avec ces concepts à l’esprit, construisons notre premier exemple.

Exemple 1 : d’une phrase à un objet de type sécurisé

Notre premier exemple consistera à créer un script qui prend une description en langage naturel, comme « un ingénieur logiciel de Londres », et génère à partir de celle-ci un objet utilisateur fictif entièrement typé et structuré.

Cet exemple montre la possibilité d’utiliser LLM pour générer des données fictives pour des bases de données de test, de prototypage ou d’amorçage. Plus important encore, il montre comment tirer parti du SDK AI. generateObject fonction pour demander une réponse structurée et obtenir des sorties de type sécurisé.

Construisons l’exemple étape par étape, mais avant de commencer, créons un nouveau fichier nommé sentence-transformer.ts dans le répertoire de votre projet.

Étape 1 : importations et définition du schéma

Le secret d’une application d’IA de type sécurisé consiste à définir un contrat clair. Nous utiliserons Zod pour créer un schéma qui décrit la forme exacte du User objet que nous voulons que le LLM génère. Le .describe() les appels sont cruciaux ; ils servent d’instructions à l’IA, la guidant sur ce que représente chaque champ. De meilleures descriptions conduisent à de meilleurs résultats.

Nous allons commencer par importer les dépendances et définir son schéma.

import { google } from "@ai-sdk/google";
import { generateObject } from "ai";
import { z } from "zod";
import * as prompts from "@clack/prompts";


const UserSchema = z.object({
  name: z.string().describe("The full name of the person"),
  age: z.number().int().positive().describe("The age of the person in years"),
  occupation: z.string().describe("The person's job or profession"),
  location: z.string().describe("The city or location where the person lives"),
  email: z.email().describe("The person's email address"),
  interests: z.array(z.string()).describe("A list of hobbies or interests"),
});

Avec ce schéma, nous avons indiqué au modèle exactement ce que nous attendons : un nameun ageun location et ainsi de suite, jusqu’aux types de données spécifiques.

Étape 2 : recueillir les commentaires des utilisateurs

Ensuite, nous allons créer notre main fonction. À l’intérieur, nous utiliserons @clack/prompts pour créer une expérience CLI raffinée qui demande une description à l’utilisateur et affiche une double flèche pendant que l’IA fonctionne.

async function main() {
  console.clear();
  prompts.intro("✨ Sentence to Type-Safe Object Generator ✨");

  const description = await prompts.text({
    message: 'Describe a person (e.g., "a software engineer from London"):',
    placeholder: "a software engineer from London who likes to ski...",
    validate: (value) => {
      if (!value || value.length < 3) return "Please provide a description";
    },
  });

  if (prompts.isCancel(description)) {
    prompts.cancel("Operation cancelled.");
    return;
  }

  const spinner = prompts.spinner();
  spinner.start("🤖 Generating type-safe user object...");

  
}

Étape 3 : La magie de generateObject

Voici le cœur de l’application. À l’intérieur d’un try...catch bloquer, nous appellerons generateObject. C’est dans cette fonction que le SDK AI brille, en prenant notre modèle, notre schéma et notre invite, et en gérant tous les appels d’API complexes pour renvoyer un objet typé.



try {
  const { object: user } = await generateObject({
    model: google("gemini-2.5-flash-lite"),
    schema: UserSchema,
    prompt: `Generate a realistic mock user profile based on this description: "${description}". Make sure all fields are filled with believable, creative data.`,
  });
  

  spinner.stop("✅ Generated successfully!");

  
  prompts.note(
    `Name: ${user.name}
Age: ${user.age} years old
Occupation: ${user.occupation}
Location: ${user.location}
Email: ${user.email}
Interests: ${user.interests.join(", ")}`,
    "Generated User Profile",
  );

  prompts.outro("✨ Done! ✨");
} catch (error) {
  spinner.stop("❌ Generation failed");
  prompts.log.error(`Error: ${error instanceof Error ? error.message : error}`);
  return;
}

Notez que le résultat est déstructuré comme { object: user } et le résultat est affiché en utilisant prompts.note(). Le SDK garantit que cela user la variable sera conforme à notre UserSchema. Non JSON.parse()Non as anyjuste des données propres et saisies.

Étape 4 : Appel de la fonction principale

Enfin, n’oubliez pas d’appeler le main fonction à la fin de votre fichier :

main().catch(console.error);

Exécutez-le !

Exécutez le script depuis votre terminal :

node --env-file=.env sentence-transformer.ts

Votre terminal prendra vie et vous demandera une description. Entrez quelque chose et regardez l’IA générer un objet parfait et tapé. Voici un exemple d’interaction :

┌  ✨ Sentence to Type-Safe Object Generator ✨
│
◇  Describe a person (e.g., "a software engineer from London"):
│  a 42-year old chef from Paris who loves jazz and cycling
│
 spinning  🤖 Generating type-safe user object...
●  ✅ Generated successfully!
│
│  Generated User Profile
│  Name: Jean-Pierre Moreau
│  Age: 42 years old
│  Occupation: Chef
│  Location: Paris
│  Email: j.moreau@example.com
│  Interests: Jazz music, Cycling
│
└  ✨ Done! ✨

Les SDK IA generateObject La fonction change la donne pour les développeurs TypeScript. Il élimine la complexité du travail avec les LLM tout en offrant de solides garanties sur la forme et le type des données que vous recevez. Cela signifie que vous pouvez créer des applications basées sur l’IA en toute confiance, sachant que vos données seront toujours conformes à vos schémas définis.

Code complet pour l’exemple 1

Voici le code complet pour sentence-transformer.ts:

import { google } from "@ai-sdk/google";
import { generateObject } from "ai";
import { z } from "zod";
import * as prompts from "@clack/prompts";

const UserSchema = z.object({
  name: z.string().describe("The full name of the person"),
  age: z.number().int().positive().describe("The age of the person in years"),
  occupation: z.string().describe("The person's job or profession"),
  location: z.string().describe("The city or location where the person lives"),
  email: z.email().describe("The person's email address"),
  interests: z.array(z.string()).describe("A list of hobbies or interests"),
});

async function main() {
  console.clear();
  prompts.intro("✨ Sentence to Type-Safe Object Generator ✨");

  const description = await prompts.text({
    message: 'Describe a person (e.g., "a software engineer from London"):',
    placeholder: "a software engineer from London who likes to ski...",
    validate: (value) => {
      if (!value || value.length < 3) return "Please provide a description";
    },
  });

  if (prompts.isCancel(description)) {
    prompts.cancel("Operation cancelled.");
    return;
  }

  const spinner = prompts.spinner();
  spinner.start("🤖 Generating type-safe user object...");

  try {
    const { object: user } = await generateObject({
      model: google("gemini-2.5-flash-lite"),
      schema: UserSchema,
      prompt: `Generate a realistic mock user profile based on this description: "${description}". Make sure all fields are filled with believable, creative data.`,
    });

    spinner.stop("✅ Generated successfully!");

    prompts.note(
      `Name: ${user.name}
Age: ${user.age} years old
Occupation: ${user.occupation}
Location: ${user.location}
Email: ${user.email}
Interests: ${user.interests.join(", ")}`,
      "Generated User Profile",
    );

    prompts.outro("✨ Done! ✨");
  } catch (error) {
    spinner.stop("❌ Generation failed");
    prompts.log.error(`Error: ${error instanceof Error ? error.message : error}`);
    return;
  }
}

main().catch(console.error);

Exemple 2 : Créer une application d’IA conversationnelle

Créer une application d’IA conversationnelle est un rite de passage pour tout développeur d’IA. C’est le message « Bonjour le monde ! » de l’ère des agents IA. Ce qui rend cet exemple spécial est la façon dont le SDK Vercel AI simplifie la tâche complexe de maintien du contexte de conversation tout en préservant la sécurité des types.

Créons une expérience de type ChatGPT directement dans votre terminal. Ce sera notre deuxième exemple, et il s’appuie naturellement sur ce que nous avons appris sur les résultats structurés.

Nous allons reconstruire cela pièce par pièce. Créez un nouveau fichier nommé conversing-bot.ts dans le répertoire de votre projet et suivez-le.

Étape 1 : configuration et historique des conversations

Tout d’abord, nous importons nos outils. L’élément clé ici est le messages tableau. Chaque objet de ce tableau aura un role (user ou assistant) et content. L’intégralité de ce tableau est envoyée au modèle à chaque nouvelle invite, lui donnant ainsi le contexte complet de la conversation.

import { generateText } from "ai";
import type { UserModelMessage, AssistantModelMessage } from "ai";
import { google } from "@ai-sdk/google";
import * as prompts from "@clack/prompts";
import process from "node:process";


const messages: Array<UserModelMessage | AssistantModelMessage> = [];

Important: Les LLM n’ont pas de mémoire entre les appels, le maintien de cet historique est donc crucial pour le contexte. C’est ainsi que l’IA « se souvient » de ce qui a été dit précédemment, permettant ainsi des réponses cohérentes et contextuelles. Dans les applications de production, vous devrez gérer la durée des conversations puisque la plupart des modèles ont des limites de jetons (par exemple, 32 000 jetons). Pensez à mettre en œuvre un découpage ou un résumé des messages pour les longues conversations.

Étape 2 : la boucle de discussion principale

La logique de l’application vivra dans un while (true) boucle. À chaque itération, il demandera à l’utilisateur une entrée, vérifiera s’il souhaite quitter, puis ajoutera son message au tableau d’historique.

async function main() {
  prompts.intro("🤖 Conversational CLI Bot");
  console.log('Type "exit" or "quit" to end the conversation.\n');

  while (true) {
    const userMessage = await prompts.text({
      message: "You:",
      placeholder: "Type your message here...",
      validate: (value) => {
        if (!value) return "Please enter a message";
      },
    });

    if (prompts.isCancel(userMessage)) {
      prompts.cancel("Conversation ended.");
      process.exit(0);
    }

    const messageText = userMessage;
    if (
      messageText === "exit" ||
      messageText === "quit" ||
      messageText === "bye"
    ) {
      prompts.outro("👋 Goodbye! Thanks for chatting!");
      break;
    }

    
    messages.push({ role: "user", content: messageText });

    
  }
}

Étape 3 : Générer une réponse et boucler la boucle

Passons maintenant à la partie IA. Nous utilisons generateTextce qui est parfait pour les interactions conversationnelles. Nous passons l’intégralité messages tableau, c’est ainsi que le modèle se souvient de ce qui a été dit. Après avoir obtenu la réponse, nous l’imprimons et, surtout, ajoutons le message du modèle au tableau historique pour boucler la boucle pour le tour suivant.

Tout cela se passe à l’intérieur d’un try...catch bloquer dans le while boucle.



const spinner = prompts.spinner();
spinner.start("AI is thinking...");

try {
  const { text } = await generateText({
    model: google("gemini-2.5-flash-lite"),
    messages: messages, 
    system: "You are a helpful and friendly AI assistant.",
  });

  spinner.stop("AI response received");
  prompts.note(text, "AI Response");

  
  messages.push({ role: "assistant", content: text });
} catch (error) {
  spinner.stop("Error occurred");
  console.error("\n❌ Error generating response:", error);
  messages.pop(); 
}

Étape 4 : Appel de la fonction principale

N’oubliez pas d’appeler le main fonction à la fin de votre fichier :

main().catch(console.error);

Exécutez le chatbot

Maintenant, lancez votre nouveau chatbot et discutez ! Accédez à votre terminal et exécutez :

node --env-file=.env conversing-bot.ts

Voici à quoi pourrait ressembler une courte conversation :

┌  🤖 Conversational CLI Bot
│
◇  You:
│  Hello, what's the capital of France?
│
◇  spinning  AI is thinking...
●  AI response received
|
AI: The capital of France is Paris.
|
◇  You:
│  What's it famous for?
│
◇  spinning  AI is thinking...
●  AI response received

AI: Paris is famous for many things, including the Eiffel Tower, the Louvre Museum, its delicious cuisine, and its romantic atmosphere.

Code complet pour l’exemple 2

Voici le code complet pour conversing-bot.ts:

import { generateText } from "ai";
import type { UserModelMessage, AssistantModelMessage } from "ai";
import { google } from "@ai-sdk/google";
import * as prompts from "@clack/prompts";
import process from "node:process";

const messages: Array<UserModelMessage | AssistantModelMessage> = [];

async function main() {
  prompts.intro("🤖 Conversational CLI Bot");
  console.log('Type "exit" or "quit" to end the conversation.\n');

  while (true) {
    const userMessage = await prompts.text({
      message: "You:",
      placeholder: "Type your message here...",
      validate: (value) => {
        if (!value) return "Please enter a message";
      },
    });

    if (prompts.isCancel(userMessage)) {
      prompts.cancel("Conversation ended.");
      process.exit(0);
    }

    const messageText = userMessage;
    if (
      messageText === "exit" ||
      messageText === "quit" ||
      messageText === "bye"
    ) {
      prompts.outro("👋 Goodbye! Thanks for chatting!");
      break;
    }

    messages.push({ role: "user", content: messageText });

    const spinner = prompts.spinner();
    spinner.start("AI is thinking...");

    try {
      const { text } = await generateText({
        model: google("gemini-2.5-flash-lite"),
        messages: messages,
        system: "You are a helpful and friendly AI assistant.",
      });

      spinner.stop("AI response received");
      prompts.note(text, "AI Response");

      messages.push({ role: "assistant", content: text });
    } catch (error) {
      spinner.stop("Error occurred");
      console.error("\n❌ Error generating response:", error);
      messages.pop();
    }
  }
}

main().catch(console.error);

Considérations relatives à la production

Bien que ces exemples fonctionnent très bien pour l’apprentissage et le prototypage, la création d’applications d’IA prêtes pour la production nécessite des considérations supplémentaires :

Limitation du débit et gestion des erreurs

Les fournisseurs d’IA imposent des limites de débit sur les appels API. En production, mettre en œuvre :

  • Logique de nouvelle tentative avec interruption exponentielle
  • File d’attente des demandes pour les scénarios à fort trafic
  • Dégradation gracieuse lorsque les limites sont atteintes

Gestion des conversations

Pour les applications conversationnelles, la gestion de l’historique des messages devient critique :

  • Limites des jetons: La plupart des modèles ont des limites de fenêtre contextuelle (par exemple, 32 000 jetons). Surveillez la durée des conversations et mettez en œuvre des stratégies telles que le résumé des messages ou la suppression des messages plus anciens.
  • Gestion des coûts: Des conversations plus longues signifient plus de jetons envoyés à chaque demande, ce qui augmente les coûts. Envisagez de mettre en cache ou de résumer un contexte plus ancien.
  • Ingénierie du contexte: Tous les messages n’ont pas la même importance. Apprenez à hiérarchiser le contexte récent et les instructions système critiques.

Sécurité et confidentialité

  • N’exposez jamais les clés API dans le code côté client.
  • Désinfectez les entrées utilisateur avant de les envoyer au LLM.
  • Soyez attentif aux données sensibles dans les historiques de conversations.
  • Implémentez le filtrage de contenu pour les applications destinées aux utilisateurs.

Ces sujets méritent une exploration plus approfondie, que nous aborderons dans les prochains articles. Pour l’instant, concentrez-vous sur la compréhension des principes fondamentaux et sur la création de vos premières applications.

Votre voyage vers l’IA vient de commencer

En quelques minutes seulement, vous avez mis en place un environnement de développement d’IA complet et créé deux puissantes applications TypeScript. Vous avez vu comment :

  • Utiliser generateObject pour obtenir des données structurées fiables et de type sécurisé à partir d’un LLM
  • Utiliser generateText et un historique des messages pour créer une application de chat contextuel
  • Tirez parti des schémas Zod pour la sécurité des types et les conseils de l’IA

Le SDK Vercel AI vous permet de traiter l’IA comme un citoyen de premier ordre dans vos applications TypeScript, avec la sécurité et la prévisibilité que vous attendez. L’API unifiée signifie que vous pouvez facilement basculer entre les modèles de Google, OpenAI, Anthropic et plus sans réécrire votre logique de base.

Ce n’est que le début et j’en partagerai davantage dans les prochains articles. Le SDK offre un riche ensemble de fonctionnalités à explorer ensuite :

  • Interfaces Web avec React/Next.js: Utilisez des crochets puissants comme useChat et useCompletion pour créer des interfaces Web réactives.
  • Appel d’outil: Donnez des super pouvoirs à votre IA en lui permettant d’appeler vos propres fonctions, de rechercher des bases de données ou d’interagir avec des API externes. Gardez un œil sur ce sujet prochainement.
  • La documentation complète: Plongez plus profondément dans les fonctionnalités avancées, les différents fournisseurs de modèles et les meilleures pratiques de production.

Vous disposez désormais des bases nécessaires pour créer des applications d’IA sophistiquées et sécurisées. Allez créer quelque chose d’incroyable ! Le code source des deux exemples peut être trouvé dans ce Dépôt GitHub.

Si vous avez trouvé ce guide utile, partagez-le avec vos amis et collègues développeurs. Si vous avez des questions ou souhaitez partager ce que vous avez construit, n’hésitez pas à nous contacter sur Gazouillement ou GitHub. Bon codage ! 🚀

Le meilleur outil 2023 pour ta croissance Instagram !



Source link