Créez des applications agentiques avec Angular, Genkit et Kendo UI : partie 2

Créons l’application Angular pour notre backend Genkit, afin que les utilisateurs puissent poser des questions sur l’état de leur commande et obtenir une réponse basée sur l’IA.

Dans Partie 1 de cette sérienous avons construit notre première application agent avec Genkit. Nous avons créé des flux, connecté un outil de vérification de statut qui utilise Gemini et tout testé avec le Interface utilisateur du développeur Genkit.

L’interface utilisateur du développeur est très utile pour les tests et le débogage. Par exemple, orderSupportFlow automatiquement appelé getOrderStatusTool lorsque nous avons demandé « Où est ma commande 123-456 ?

Je veux être honnête : nos utilisateurs ne peuvent pas exactement visiter http://localhost:4001 pour vérifier l’état de leur commande, n’est-ce pas ? Ils ont besoin d’une belle interface prête pour la production qu’ils peuvent réellement utiliser.

L’IA est puissante, mais elle a besoin d’autres technologies pour créer de la valeur. L’IA à elle seule ne peut pas interagir avec les gens ; le reste de la pile doit gérer ce travail.

Aujourd’hui, nous allons créer une application de chat angulaire qui communique avec notre backend Genkit. L’objectif est de proposer quelque chose de simple et convivial aux utilisateurs finaux.

De l’interface utilisateur Genkit Developer à l’interface utilisateur Angular et Kendo 🚀

Notre objectif est de créer une interface de discussion claire avec Angular. L’interface appellera notre backend Genkit existant via une simple couche API, afin que le frontend et le backend puissent communiquer sans astuces particulières.

Cela peut sembler complexe, mais les parties les plus difficiles sont déjà faites car le backend agent est prêt. Il nous suffit d’ajouter une interface utilisateur.

Nous souhaitons atteindre les objectifs suivants :

• Une interface de chat claire et intuitive
• La capacité de poser des questions en langage naturel
• Des réponses instantanées qui semblent conversationnelles

Comment pouvons-nous utiliser notre backend Genkit fonctionnel et le connecter à une véritable application Angular avec une expérience de chat agréable ?

Nous réutiliserons le backend existant (avec orderSupportFlow et getOrderStatusTool) et exposez-le via une API REST Express. Angular appellera cette API, nous n’avons donc pas besoin de modifier la logique de l’IA.

Express fait office de pont. Il convertit les requêtes HTTP en appels de flux Genkit qui fonctionnent déjà.

Au lieu de courir orderSupportFlow("What's my order status for 123-456?") manuellement, nous atteindrons un point final comme :

POST /api/order-flow
{
  "data": "What's my order status for 123-456?"
}

Considérez Express comme un traducteur entre le backend intelligent Genkit et le frontend Angular :

• Flux Genkit restent exactement les mêmes (pas besoin de changer notre code !).
• Express.js agit en tant que traducteur, convertissant les requêtes HTTP en appels de flux Genkit.
• Angulaire obtient des points de terminaison REST propres qu’il sait utiliser.

Cette approche maintient la logique agent isolée. N’importe quelle interface (Angular, React, Vue, etc.) peut appeler les mêmes API.

Commençons à construire le pont.

Mise en place du projet

Tout d’abord, assurez-vous de cloner le dépôt et d’installer les dépendances avec npm i dans le agentic-app/backend annuaire:

git clone https://github.com/danywalls/agentic-app.git
cd agentic-app/backend
npm i

Ouvrez le projet dans votre éditeur et dirigez-vous vers backend/src/. Rebaptiser index.ts (qui contient actuellement la logique Genkit) pour genkit.ts.

Chaque fois que vous ajoutez un nouveau flux IA, il vous suffit de toucher genkit.ts.

Ton genkit.ts est maintenant terminé ! Remarquez qu’il ne connaît que l’IA ; c’est juste de la pure logique Genkit, il est donc temps de créer rapidement notre API REST en utilisant Express.

Serveur express

Express.js est un framework Web minimaliste pour Node.js qui facilite la création de serveurs Web et d’API en gérant la plupart des connexions HTTP pour vous.

Besoin d’un rafraîchissement ? Découvrez le Guide officiel d’Express.js.

De la backend répertoire, installez les dépendances dont nous aurons besoin :

npm install express body-parser cors @types/cors

Créez un nouveau fichier d’entrée à backend/src/server.ts:

touch src/server.ts

Copiez l’extrait suivant, qui crée un serveur Express sur le port 3000. Après son démarrage, il affiche Server running on port 3000. Nous avons l’itinéraire par défaut / je renvoie un gentil message Genkit with Express en utilisant le res.send méthode.

import express from "express";
import bodyParser from "body-parser";
import cors from "cors";

const app = express();
const jsonParser = bodyParser.json();
const PORT = process.env.PORT || 3000;

app.use(cors());

app.get("https://www.telerik.com/", (_req, res) => {
  res.send("Genkit with Express");
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Exécutez-le avec :

npx tsx src/server.ts

Vous devriez voir « Serveur fonctionnant sur le port 3000 » dans le terminal et le message « Genkit with Express » lors de la visite http://localhost:3000.

Parfait, passons à l’étape suivante : exposer un point de terminaison qui transmet les invites de discussion à orderSupportFlow. Étant donné que le client Angular enverra des charges utiles JSON, gardez jsonParser en place et enveloppez le gestionnaire asynchrone dans un try/catch:

app.post("/order-flow", jsonParser, async (req, res) => {
  try {
    const response = await orderSupportFlow(req.body.data);
    res.send(response);
  } catch (error) {
    console.error(error);
    res.status(500).send("Something went wrong");
  }
});

Si votre éditeur importe automatiquement orderSupportFlow avec un .js extension, mise à jour tsconfig.json avec:

"moduleResolution": "bundler",
"module": "esnext"

Cela indique à TypeScript (et tsx) pour résoudre les modules ESM modernes sans forcer .js extensions.

Le code final ressemble à :

import express from "express";
import bodyParser from "body-parser";
import cors from "cors";
import { orderSupportFlow } from "./genkit";

const app = express();
const jsonParser = bodyParser.json();
const PORT = process.env.PORT || 3000;

app.use(cors());

app.get("https://www.telerik.com/", (_req, res) => {
  res.send("Genkit with Express");
});

app.post("/order-flow", jsonParser, async (req, res) => {
  try {
    const response = await orderSupportFlow(req.body.data);
    res.send(response);
  } catch (error) {
    console.error(error);
    res.status(500).send("Something went wrong");
  }
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

N’oubliez pas : pour obtenir une clé API, visitez https://aistudio.google.com/apikeyconnectez-vous avec votre compte Google, créez une clé API et mettez à jour GEMINI_API_KEY= dans le .env déposer.

Avec tout en place, nous pouvons passer à Angular et Kendo UI pour publier des messages sur /order-flow et affichez les réponses dans une interface utilisateur de chat.

Interface utilisateur Kendo angulaire et conversationnelle

Tout d’abord, nous nous assurons que vous disposez de la dernière CLI angulaire :

npm install -g @angular/cli

Depuis l’espace de travail racine du dépôt agentic-app répertoire, créez une nouvelle application Angular à l’aide de la CLI :

ng new genkit-frontend

Acceptez la configuration par défaut. Une fois la CLI terminée, accédez au répertoire genkit-frontend:

cd genkit-frontend

Nous commençons par générer des fichiers d’environnement afin de pouvoir stocker l’URL de base de l’API :

ng g environments

Mise à jour src/environments/environment.development.ts pointer vers notre API http://localhost:3000.

export const environment = {
  API: "http://localhost:3000",
};

Ensuite, installons le Composant d’interface utilisateur conversationnelle angulaire de Progress Kendo UI pour Angular. Utilisation des schémas ng addsa configuration et l’installation de tout ce qui concerne Kendo UI sont faciles.

ng add @progress/kendo-angular-conversational-ui

Une fois les dépendances installées, nous pouvons créer l’expérience du chatbot à l’aide de l’interface utilisateur conversationnelle ! 🥳

Le chat avec interface utilisateur conversationnelle

Avant de commencer, clarifions certains aspects. Quand on pense à un chat, il s’agit d’une interaction entre deux utilisateurs, en l’occurrence le bot et l’utilisateur. Ils interagissent via des messages avec une action ou un événement dans le chat.

Comme vous l’avez vu, ajouter quelques entités, types et un événement dans une conversation semble être un travail difficile si nous voulons la construire en mode sans échec avec des types. Mais ne vous inquiétez pas ! L’interface utilisateur conversationnelle apporte des types intégrés et le kendo-chat Le composant fournit des accessoires tels que messagesdes événements comme sendMessage et authorId pour savoir qui envoie les messages.

Créer src/app/entities/models.ts pour définir les deux participants :

import { User } from "@progress/kendo-angular-conversational-ui";

export const BOT: User = { id: 0, name: "Agent" };
export const USER: User = { id: 1, name: "You" };

Ensuite, générez un service qui gérera l’état du chat et les appels d’API :

ng g s services/genkit

Injecter HttpClientd’en faire la demande et de déclarer une déclaration publique messages signal de type Message[] et démarrez la conversation avec un message d’accueil du bot :

@Injectable({ providedIn: 'root' })
export class GenkitService {
  private http = inject(HttpClient);

  public messages = signal<Message[]>([
    {
      id: Date.now(),
      author: BOT,
      text: "Hello! Ask me about order status (e.g., order 123-456).",
      timestamp: new Date(),
    },
  ]);

Créer le sendMessage afin qu’elle mette à jour le message de l’utilisateur, appelle le point de terminaison Express et renvoie la réponse du bot (ou un message d’erreur) dans le flux :

public sendMessage(text: string): void {
    const userMessage: Message = {
      id: Date.now(),
      author: USER,
      text,
      timestamp: new Date()
    };

    this.messages.update((current) => [...current, userMessage]);

    const payload = { data: text };

    this.http.post(`${environment.API}/order-flow`, payload, { responseType: 'text' })
      .pipe(
        catchError(() => {

          this.messages.update((current) => [...current, {
            id: Date.now(),
            author: BOT,
            text: 'Sorry, I encountered an error. Please try again.',
            timestamp: new Date(),
          }]);
          return EMPTY;
        })
      )
      .subscribe((response) => {
        this.messages.update((current) => [...current, {
          id: Date.now(),
          author: BOT,
          text: response || 'No response received',
          timestamp: new Date(),
        }]);
      });
  }

Le code final ressemble à :

import { Injectable, inject, signal } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Message } from "@progress/kendo-angular-conversational-ui";
import { catchError } from "rxjs/operators";
import { EMPTY } from "rxjs";
import { BOT, USER } from "../entities/models";
import { environment } from "../../environments/environment";

@Injectable({ providedIn: "root" })
export class GenkitService {
  private http = inject(HttpClient);

  public messages = signal<Message[]>([
    {
      id: Date.now(),
      author: BOT,
      text: "Hello! Ask me about order status (e.g., order 123-456).",
      timestamp: new Date(),
    },
  ]);

  public sendMessage(text: string): void {
    const userMessage: Message = {
      id: Date.now(),
      author: USER,
      text,
      timestamp: new Date(),
    };

    this.messages.update((current) => [...current, userMessage]);

    const payload = { data: text };

    this.http
      .post(`${environment.API}/order-flow`, payload, { responseType: "text" })
      .pipe(
        catchError(() => {
          this.messages.update((current) => [
            ...current,
            {
              id: Date.now(),
              author: BOT,
              text: "Sorry, I encountered an error. Please try again.",
              timestamp: new Date(),
            },
          ]);

          return EMPTY;
        })
      )
      .subscribe((response) => {
        this.messages.update((current) => [
          ...current,
          {
            id: Date.now(),
            author: BOT,
            text: response || "No response received",
            timestamp: new Date(),
          },
        ]);
      });
  }
}

Nous avons notre service prêt! Passons à la dernière étape : connecter tous les éléments de service avec le composant Conversational UI !

Le composant de l’interface utilisateur conversationnelle

Branchons maintenant le service sur l’interface utilisateur. Ouvrir app.ts et importer KENDO_CONVERSATIONALUI dans les sections d’importation et injectez le genkitService pour exposer l’utilisateur actuel et lire le réactif messages signal.

Ces propriétés lieront le kendo-chat composant à partir des propriétés du modèle ultérieurement.

import { Component, inject } from '@angular/core';
import { KENDO_CONVERSATIONALUI, SendMessageEvent } from '@progress/kendo-angular-conversational-ui';
import { GenkitService } from './services/genkit';
import { USER } from './entities/models';


@Component({
  selector: 'app-root',
  imports: [KENDO_CONVERSATIONALUI],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {

  genkitService = inject(GenkitService);
  user = USER;
  messages = this.genkitService.messages;
}

Le composant kendo-chat déclenche un SendMessageEvent chaque fois que quelqu’un appuie sur Entrée ou appuie sur l’icône d’envoi. Tout ce que nous avons à faire est de récupérer le texte, de nous assurer qu’il n’est pas vide et d’utiliser sendMessage depuis le genkitService pour mettre à jour les signaux et l’interface utilisateur et appeler l’API.

public onSendMessage(event: SendMessageEvent): void {
  const messageText = event.message.text ?? "";
  if (messageText.trim()) {
    this.genkitService.sendMessage(messageText);
  }
}

Le code final ressemble à :

import { Component, inject } from "@angular/core";
import {
  KENDO_CONVERSATIONALUI,
  SendMessageEvent,
} from "@progress/kendo-angular-conversational-ui";
import { GenkitService } from "./services/genkit";
import { USER } from "./entities/models";

@Component({
  selector: "app-root",
  imports: [KENDO_CONVERSATIONALUI],
  templateUrl: "./app.html",
  styleUrl: "./app.css",
})
export class App {
  genkitService = inject(GenkitService);
  user = USER;
  messages = this.genkitService.messages;

  public onSendMessage(event: SendMessageEvent): void {
    const messageText = event.message.text ?? "";
    if (messageText.trim()) {
      this.genkitService.sendMessage(messageText);
    }
  }
}

Et n’oublie pas de donner Kendo UI pour Angular, un essai (gratuitement) si ce n’est pas déjà fait ! (Aucune carte de crédit requise !)

Maintenant, la dernière étape consiste à mettre à jour le app.html (le modèle), à ​​supprimer le passe-partout par défaut et à ajouter le <kendo-chat> composant et passez trois choses à <kendo-chat>:

Faisons un petit aperçu du kendo-chat. Je vais donner un petit aperçu des propriétés clés pour nous faciliter la tâche :

• [messages]: lie le tableau de messages de la conversation en cours au composant de discussion.
• [user]: Définit l’utilisateur actuel qui interagit avec le chat. Ceci est important pour différencier les messages envoyés par l’utilisateur et les autres.
• (sendMessage): Événement émis lorsque l’utilisateur clique sur Envoyer.

En savoir plus sur Interface utilisateur conversationnelle.

<div class="chat-container">
  <h1>My Angular Agentic App</h1>
  <kendo-chat
    [messages]="messages()"
    [authorId]="user.id"
    (sendMessage)="onSendMessage($event)"
  >
  </kendo-chat>
</div>

Parfait! Nous avons terminé et il est temps de tester notre code. Mais avant de continuer, au lieu de démarrer le serveur ng et l’API manuellement à chaque fois, créez d’abord un package.json en exécutant la commande suivante :

npm init -y

Ensuite, ajoutez des scripts d’assistance package.json aux deux serveurs pour commencer avec une seule commande :

"scripts": {
  "start": "npm run backend & npm run frontend",
  "backend": "cd backend && npm run dev",
  "frontend": "cd genkit-frontend && ng serve"
}

Courir npm run start et ouvert http://localhost:4200.

Ouais! Fait!! Nous avons notre agent Genkit connecté avec les utilisateurs grâce à Express, Angular et Kendo UI !!!

Ce que nous avons accompli

Nous avons connecté Genkit de Google L’IA circule vers une application angulaire. Genkit conserve le travail de l’IA, Angular avec des signaux gère le frontend et Interface utilisateur Kendo pour angulaire fournit à l’interface de discussion une petite quantité de code.

Le résultat est incroyable ! La logique IA, le code API et le code UI restent à des endroits séparés. Vous avez désormais la liberté de créer de nouveaux flux de travail, de nouveaux points de terminaison et bien sûr d’utiliser davantage de composants Kendo UI dans votre incroyable produit !

Code source initial.
Code source final.

Prêt à essayer l’interface utilisateur Kendo pour Angular ?

Pour explorer tous les composants disponibles dans la bibliothèque Kendo UI for Angular, je vous recommande de télécharger l’essai gratuit de 30 jours et de l’explorer par vous-même !

Essayez maintenant