Démarrez sur une application Angular agentique avec Genkit et Gemini. Nous allons développer la possibilité pour les utilisateurs de poser des questions sur l’état de leur commande.
Les chatbots et l’IA sont présents dans pratiquement toutes les phrases qui sortent de notre bouche. La plupart des sites Web sont dotés d’un chatbot fournissant des réponses aux clients connectés à un LLM qui répond aux questions en utilisant sa vaste base de connaissances.
Par exemple, nous avons créé un joli Chatbot utilisant Gemini qui peut recommander quelle interface utilisateur Progress Kendo pour Composants angulaires à utiliser pour créer une page Web basée sur une entrée d’image. Ce chatbot fonctionne bien, car Gemini utilise ses données entraînées pour répondre, mais que se passe-t-il lorsque nous voulons un chatbot qui répond à quelque chose qui n’est pas lié à ses données d’entraînement ?
Si vous demandez quelque chose comme « vérifier le statut de ma commande » ? Il heurte un mur. Le LLM n’a pas cette connaissance, et c’est le moment où un agent peut nous aider, et où il faut passer à autre chose pour parler d’applications agentiques.
Une application agentique est comme un assistant intelligent qui non seulement répond aux questions, mais peut également utiliser des outils pour effectuer des tâches. Il peut raisonner, planifier et interagir avec d’autres systèmes.
Cela semble un peu complexe, mais ne vous inquiétez pas : c’est à ce moment-là que Genkit arrive dans le jeu, pour nous aider à créer facilement des applications agentiques.
Aujourd’hui, nous allons créer une application complète et fonctionnelle à partir de zéro. À partir de Genkit, nous allons créer un agent capable de vérifier le statut d’une commande en utilisant la puissance de Gemini et Genkit.
Passons à autre chose !
Avant de commencer à taper du code, prenons un peu de recul. Nous devons comprendre ce qu’est Genkit, ainsi que ses flux et ses outils. En utilisant un exemple concret que nous connaissons tous, le support client Amazon, cela rendra tout très clair.
Qu’est-ce que Genkit ?
Considérez Genkit comme le « cerveau » derrière le système de support client d’Amazon. C’est comme Angular pour nous, nous permettant de créer des applications ; Genkit est le framework complet qui permet à un développeur de créer le système complet. Ce n’est pas l’agent lui-même ; c’est l’infrastructure qui vous permet de créer et de gérer tous les processus et outils que l’agent utilisera.
En bref, Genkit est la boîte à outils qui nous aide à créer de puissantes applications d’IA.
Que sont les flux Genkit ?
Imaginez que vous avez besoin d’aide avec un colis perdu. Vous ouvrez le chat et une nouvelle session d’assistance démarre.
Tout ce processus, à partir du moment où vous demandez « Où est ma commande ? jusqu’à la résolution finale où vous obtenez un nouveau numéro de suivi ou un remboursement, c’est un flux.
Un flux est la tâche ou la conversation principale que vous souhaitez gérer. Il a les fonctions TypeScript comme checkOrderStatusFlow ou processRefundFlow et orchestre toute l’expérience.
OK, on connaît Genkit et les flow, mais qu’est-ce qu’un outil ?
Que sont les outils Genkit ? 🛠️
Si nous réfléchissons au fonctionnement de l’agent de support Amazon, il ne connaît pas comme par magie les détails de votre commande. Il utilise des outils internes à Amazon.
Par exemple, nous pouvons proposer une action appelée « Rechercher la commande dans la base de données » ou « Envoyer un nouveau numéro de suivi ». Chacun d’eux est un outil.
Un outil est une action spécifique que l’IA peut effectuer. Lorsqu’un utilisateur pose des questions sur sa commande, l’IA voit que sa checkOrderStatus l’outil est parfait pour le travail. Il comprend ce que fait l’outil en lisant sa description, puis il sait quand l’utiliser pour résoudre le problème.
Comment travaillent-ils ensemble ?
Relions les points. Premièrement, le flux représente l’ensemble de la conversation, la vue d’ensemble. Les outils sont les petites actions puissantes que l’IA peut utiliser pour mener à bien cette conversation. Et Genkit est le framework qui vous permet de construire et de connecter tout cela ensemble.
Ainsi, lorsque vous créez une nouvelle application Genkit, vous créez d’abord le flux (l’objectif principal), puis vous lui donnez un ensemble d’outils (les capacités spécifiques) qu’elle peut utiliser pour faire le travail.
Maintenant que nous connaissons chaque partie, construisons notre premier agent en utilisant Genkit !
Mise en place du projet
Commençons par construire notre backend. Ce sera un serveur Node.js qui expose une API.
Tout d’abord, assurez-vous d’avoir Noeud.js (v20+) installé, ouvrez votre terminal et installez le Genkit CLI.
npm install -g genkit-cli
Maintenant, créons notre dossier de projet pour l’ensemble du projet my-agentic-app et créer le backend dossier et accédez-y
mkdir my-agentic-app
cd my-agentic-app
mkdir backend
cd backend
Ensuite, nous installerons les packages Genkit dont nous avons besoin, mais initialisons d’abord le projet en exécutant npm init -y et installez les packages genkit, google-ai et zod.
npm install genkit @genkit-ai/google-genai
Donnons un petit aperçu à leur sujet :
genkit: Le framework Genkit de base pour créer des applications agentiques@google-genkit/google-ai: Le plugin de connexion aux modèles Geminizod: Une bibliothèque pour définir des schémas de données, que Genkit utilise pour les outils
Enfin et surtout, nous utilisons notre langue préférée, Manuscritalors installons TypeScript et tsx npm install -D typescript tsx et créez la configuration en cours d’exécution npx tsc --init
npm install -D typescript tsx
npx tsc --init
Ok, il est temps d’écrire du code !
Configurer le cerveau de notre agent 🧠
Maintenant que notre projet est prêt et que vous avez une image complète de Genkit, des flux et des outils, donnons-lui vie ! Vous vous souvenez de notre chatbot Amazon ? Il est temps de créer l’application agent.
Tout d’abord, créons notre structure de projet. Ouvrez votre terminal et exécutez ces deux commandes simples pour créer un dossier et un fichier index.ts.
mkdir src
touch src/index.ts
Maintenant, ouvrez src/index.ts. C’est là que toute la magie commence. Nous allons configurer notre instance Genkit, en lui indiquant quel modèle d’IA utiliser. C’est comme le moteur principal qui alimentera l’ensemble de notre application.
Importez d’abord le genkit, z à partir du package Genkit et importez googleAI depuis @genkit-ai/google-genai.
import { genkit, z } from 'genkit';
import { googleAI } from '@genkit-ai/google-genai';
Ensuite, enregistrez le plugin Google AI googleAI() et indiquez à l’agent quel cerveau (modèle) spécifique utiliser. Nous utiliserons le modèle « gemini-2.5-flash » et la température du modèle.
La température dans les modèles avec une valeur plus élevée signifie plus créatif, une valeur plus basse est plus directe. Apprendre encore plus.
const ai = genkit({
plugins: [googleAI()],
model: googleAI.model('gemini-2.5-flash', {
temperature: 0.8,
}),
});
Le fichier index.ts final ressemble à :
import { genkit, z } from 'genkit';
import { googleAI } from '@genkit-ai/google-genai';
const ai = genkit({
plugins: [googleAI()],
model: googleAI.model('gemini-2.5-flash', {
temperature: 0.8,
}),
});
Ok, passons à l’outil !
Que peut faire notre agent intelligent ? C’est là qu’intervient un outil ! C’est une action spécifique et contrôlée. Notre agent lira la description de cet outil et décidera s’il est le bon à utiliser en fonction de la question de l’utilisateur.
Dans ce cas, nous donnons à notre agent la possibilité de vérifier l’état d’une commande. Nous lui indiquons exactement de quelles informations il a besoin (par exemple le orderId) et quel type d’informations il renverra (comme status ou estimatedDelivery).
Remarque : la description est super importante ! Le modèle d’IA l’utilise pour savoir quand appeler l’outil.
Créons un outil en utilisant le ai.defineTool fonction pour définir les informations dont l’outil a besoin pour s’exécuter et le type de données que l’outil renvoie à l’aide de zod (z).
Par exemple, nous allons créer getOrderStatusTool. Il s’agit de la fonction réelle qui s’exécute lorsque l’outil est appelé. Pour notre démo, nous vérifions simplement un identifiant codé en dur pour rester simple, et si l’identifiant n’est pas trouvé, nous renvoyons un statut clair.
Consultez le code :
export const getOrderStatusTool = ai.defineTool(
{
name: 'getOrderStatus',
description: "Get the status of a user's order by their order ID.",
inputSchema: z.object({
orderId: z.string().describe("The unique ID of the customer's order"),
}),
outputSchema: z.object({
status: z.string(),
estimatedDelivery: z.string(),
}),
},
async (input) => {
if (input.orderId === '123-456') {
return { status: 'Shipped', estimatedDelivery: 'October 9, 2025' };
}
return { status: 'Not Found', estimatedDelivery: 'N/A' };
}
);
En savoir plus sur la définition d’outils avec Genkit.
Création du flux de travail
Le flux est la pièce finale. Il s’agit du processus principal qui prend l’invite de l’utilisateur (la question) et la transmet au modèle d’IA.
Mais c’est ici que la magie opère : nous transmettons une liste d’outils que le modèle est autorisé à utiliser.
Le modèle (Gémeaux ou autre) est suffisamment intelligent pour lire l’invite de l’utilisateur et décider si notre getOrderStatusTool est la meilleure façon de répondre. Si c’est le cas, Genkit appellera automatiquement cette fonction pour nous !
Cela garantit la sécurité et la prévisibilité de notre agent, car nous pouvons contrôler exactement les actions qu’il peut effectuer.
Faisons en sorte que cela fonctionne dans notre projet !
export const orderSupportFlow = ai.defineFlow(
{
name: 'orderSupportFlow',
inputSchema: z.string(),
outputSchema: z.string(),
},
async (prompt) => {
const llmResponse = await ai.generate({
prompt: prompt,
tools: [getOrderStatusTool],
});
return llmResponse.text;
}
);
Le code final ressemble à :
import { genkit, z } from "genkit";
import { googleAI } from "@genkit-ai/google-genai";
const ai = genkit({
plugins: [googleAI()],
model: googleAI.model("gemini-2.5-flash", {
temperature: 0.8,
}),
});
export const getOrderStatusTool = ai.defineTool(
{
name: "getOrderStatus",
description: "Get the status of a user's order by their order ID.",
inputSchema: z.object({
orderId: z.string().describe("The unique ID of the customer's order"),
}),
outputSchema: z.object({
status: z.string(),
estimatedDelivery: z.string(),
}),
},
async (input) => {
if (input.orderId === "123-456") {
return { status: "Shipped", estimatedDelivery: "October 9, 2025" };
}
return { status: "Not Found", estimatedDelivery: "N/A" };
},
);
export const orderSupportFlow = ai.defineFlow(
{
name: "orderSupportFlow",
inputSchema: z.string(),
outputSchema: z.string(),
},
async (prompt) => {
const llmResponse = await ai.generate({
prompt: prompt,
tools: [getOrderStatusTool],
});
return llmResponse.text;
},
);
Nous avons une dernière étape pour connecter Genkit à notre outil d’IA préféré, Gemini.
Créez un fichier nommé .env dans le genkit-app/backendobtenez ensuite une clé API gratuite auprès de Google IA Studio et ajoutez-le au fichier .env.
GEMINI_API_KEY="YOUR_API_KEY_HERE"
Pour faire notre index.ts avoir accès au fichier .env, nous allons utiliser le dotenv emballer. Ouvrez le terminal et exécutez npm install dotenv. Une fois terminé, importez dotenv et initialisez-le.
import * as dotenv from "dotenv";
dotenv.config();
Parce que nous utilisons CommonJS, ajoutez le champ "type: module" au package.json :
{
"name": "backend",
"version": "1.0.0",
"type": "module",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
....
C’est bon, tout est prêt ! Exécutons notre application agent avec la commande :
genkit start -- npx tsx --watch src/index.ts
Si vous souhaitez définir un port personnalisé, utilisez le --port flag pour définir un port spécifique pour exécuter genkit comme : genkit start --port 4001 -- npx tsx --watch src/index.ts
Oui, notre agent court… mais attendez une seconde. Comment pouvons-nous tester l’agent si nous n’avons pas d’application ?
Genkit fournit l’interface utilisateur du développeur, une application Web locale qui nous permet de travailler avec des modèles, des flux, des invites et d’autres éléments dans nos projets Genkit.
L’interface utilisateur du développeur s’exécute dans http://localhost:4001 et nous permet d’utiliser des modèles et d’appeler nos outils et fonctions pour déboguer notre projet.
Dans le navigateur affichant l’interface utilisateur de Genkit Developer, nous allons nous concentrer sur le test de notre code. Tout d’abord, cliquez sur Modèles. Il fournit une invite système pour demander la configuration et les outils du modèle.
La config nous permet de configurer le modèle, mais le point clé est dans l’onglet Outils. Cliquez dessus et nous voyons notre fonction getOrderStatus.
Avant d’activer notre outil, nous allons rédiger une invite Where is my order 123-456puis cliquez sur le bouton Exécuter. Le modèle n’en a aucune idée.
Enfin, cliquez dans les outils et sélectionnez les outils disponibles getOrderStatus et posez la même question.
Tada !! Le modèle obtient les outils et exécute notre code !! Et répond à notre réponse simulée !
Nous avons construit notre première application agent avec des flux et des outils facilement avec Genkit et avons apporté de la puissance aux modèles !
Résumer
Nous avons découvert comment Genkit nous aide à créer des applications agentiques en créant nos flux, et comment il traite les demandes et utilise des outils pour rendre un agent IA intelligent, combinés avec l’interface utilisateur Genkit Developer pour déboguer, tester et jouer avec nos flux et outils.
Cela nous aide à activer des modèles comme Gemini ou autres pour accéder à nos données et répondre à n’importe quelle question.
C’était tellement agréable d’utiliser l’interface utilisateur de Genkit Developer pour tester notre flux et nos outils. Cependant, dans le monde réel, nous souhaitons connecter sa puissance à un véritable chatbot. Ainsi, dans le prochain chapitre, nous allons connecter Genkit à Angular et créer un chatbot rapide en utilisant la puissance de Kendo UI !
Source link