Créer un service de narration avec RCS Rich Cards et Gemini

Introduction

Ce tutoriel vous montre comment créer un service de narration générative par l'IA en utilisant l'API Vonage Messages API de Vonage pour RCS et Gemini de Google AI DE GOOGLE. Vous apprendrez ce qu'est RCS, comment envoyer et recevoir des messages RCS Rich Card et comment intégrer Gemini pour générer de courtes histoires à l'heure du coucher.

Inspirée par la routine du coucher de mon enfant, j'ai voulu créer quelque chose d'utile. J'ai donc combiné la messagerie RCS avec Gemini AI pour développer un service de narration simple.

RCS Story Demonstration

Vous pouvez trouver le code source complet sur le dépôt GitHub de la dépôt GitHub de la communauté Vonage.

Conditions préalables

• Node.js est installé sur votre machine.

• Un service de tunnelisation d'API, tel que ngrok.

• Un agent enregistré Agent RCS Business Messaging (RBM) enregistré.

• A téléphone doté de capacités RCS.

• A Compte API Vonage.

  Vonage API Account

  To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

  

  Ready to start building?

  Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Comment faire fonctionner RCS sur votre téléphone

Pour envoyer et recevoir des messages RCS dans votre application Vonage, vous devez disposer d'un agent RBM enregistré et d'un téléphone doté de capacités RCS.

RCS via Vonage n'est actuellement disponible que pour les comptes gérés. Vous devez contacter votre Account Manager pour activer le mode développeur, qui permet de tester les numéros autorisés.

Si vous n'avez pas de compte géré, communiquez avec l'équipe de vente de l'équipe des ventes de Vonage pour obtenir de l'aide.

Terminologie

RCS (Rich Communication Services) : Une norme industrielle qui améliore la messagerie traditionnelle avec du média riche, du contenu de marque et des accusés de réception. Si l'appareil ou le réseau d'un destinataire ne prend pas en charge les RCS, les messages reviennent automatiquement aux SMS pour garantir qu'ils seront tout de même délivrés.

Pour en savoir plus, consultez notre documentation RCS.

SMS (Short Message Service) : Les SMS traditionnels ne prennent en charge que le texte simple. RCS permet d'utiliser des boutons de marque, des images et des mises à jour de l'état des messages. Apprendre à envoyer des SMS avec Node.js.

MMS (Multimedia Messaging Service) : Contrairement aux MMS, qui ont souvent une qualité de média inférieure et des limites de taille de fichier, RCS prend en charge des médias de haute qualité et des fonctionnalités telles que des indicateurs de frappe et des mises à jour de l'état d'avancement de la livraison. Découvrez ce que vous pouvez faire avec les MMS et comment envoyer des MMS avec Node.js.

Capacité de l'API Messages

Démarrer une instance de tunneling ngrok

Si vous n'avez jamais utilisé ngrok, vous pouvez commencer ici. J'ai ajouté les étapes pour lancer une instance sous l'image dans la section suivante.

Exécutez la commande suivante pour démarrer une instance de tunneling ngrok.

ngrok http 3000

Dans le résultat, vous trouverez une URL qui commence par https:// et se termine par .ngrok.app/. Notez-la car vous en aurez besoin à l'étape suivante pour configurer vos webhooks.

Forwarding https://94cd51b63460.ngrok.app/ -> http://localhost:8000          

Configurer les Webhooks

De retour dans le tableau de bord de l'API de Vonage, sous vos applications, activez l'option Messages sous capacités et définissez l'URL publique de votre serveur à partir de ngrok comme point de terminaison pour les messages et les événements entrants : https://94cd51b63460.ngrok.app/webhooks/inbound pour les messages entrants et https://94cd51b63460.ngrok.app/webhooks/status pour le statut. Si vous souhaitez en savoir plus sur les webhooks, vous pouvez trouver des informations dans notre documentation Vonage..

webhooks

Configuration initiale du projet pour l'API Messages Vonage

Cloner le dépôt GitHub de la Dépôt GitHub de la communauté Vonage pour ce projet et npm install les dépendances.

npm install express debug @vonage/messages @vonage/server-sdk dotenv

Créer le fichier des variables d'environnement

Créer un fichier .env à la racine de votre projet.

VONAGE_APPLICATION_ID=YOUR_VONAGE_APPLICATION_ID, can be found within the application you’ve created

VONAGE_PRIVATE_KEY=./private.key, is the path to the private.key file that was generated when you created your application

RCS_SENDER_ID=YOUR_RCS_SENDER_ID

PHONE_NUMBER=YOUR_PHONE_NUMBER_E164 that will receive the RCS messages

PORT=3000

VONAGE_API_SIGNATURE_SECRET= is the secret used to sign the request that corresponds to the signature secret associated with the api_key included in the JWT claims. You can identify your signature secret on the Dashboard settings

Dans votre projet, vous trouverez également un fichier vonage.js qui contient l'installation de Dotenv et du client Vonage.

Ajouter la vérification JWT

const verifyJWT = (req) => {
  // Verify if the incoming request came from Vonage
  const jwtToken = req.headers.authorization.split(" ")[1];
  if(!verifySignature(jwtToken, process.env.VONAGE_API_SIGNATURE_SECRET)) {
    console.error("Signature does not match");
    throw new Error("Not a Vonage API request");
  }

  console.log("JWT verified");
}

npm install @vonage/jwt

Envoyer un message RCS Rich Card

Dans votre fichier server.js, vous trouverez le code finalisé avec l'intégration de Gemini, mais je voulais vous donner un point de départ sur la façon d'envoyer un Rich Card Message en RCS avec un texte codé en dur afin que vous puissiez avoir une première expérience et le voir fonctionner avant toute installation plus complexe, avec tout ce que nous avons mis en place jusqu'à présent.

Commencez par ajouter les importations et définir vos variables.

import Express from "express";

import { RCSCustom, RCSText } from "@vonage/messages";

import { vonage } from "./vonage.js";

import "dotenv/config";

const app = new Express();

const port = process.env.PORT || 3000;

const recipientNumber = process.env.PHONE_NUMBER;

if (!recipientNumber) {

  process.exit(1);

}

if (!process.env.RCS_SENDER_ID) {

  process.exit(1);

}

Nous utiliserons également un wrapper asynchrone pour la gestion des erreurs dans les routes.

const catchAsync = (fn) => (req, res, next) => {

  fn(req, res, next).catch(next);

};

app.use(Express.json());

app.get(

  "/send-story-request",

  catchAsync(async (req, res) => {

    await sendBedtimeStoryRequest(recipientNumber);

    res.status(200).json({ message: "Bedtime story request sent!" });

  })

);

Créer le /webhooks/status point de terminaison.

app.post(

  "/webhooks/status",

  catchAsync(async (req, res) => {

    res.status(200).json({ ok: true });

  })

);

Créer le /webhooks/inbound point de terminaison.

app.post(

  "/webhooks/inbound",

  catchAsync(async (req, res) => {

    const { channel, message_type, reply, from } = req.body;

    if (channel === 'rcs' && message_type === 'reply' && reply) {

      const receivedId = reply.id;

      const receivedTitle = reply.title;

      if (receivedId === 'GENERATE_STORY_REQUEST' || receivedTitle === 'Generate Story') {

        const replyToNumber = from;

        const helloWorldMessage = "Hello world!";

        await sendRCSGreeting(replyToNumber, helloWorldMessage);

      } else {

        // Unhandled reply

      }

    } else if (channel === 'rcs' && message_type === 'text') {

      if (req.body.text && req.body.text.toLowerCase() === 'generate story') {

        await sendRCSGreeting(from, "Hello world!");

      } else {

        await sendRCSGreeting(from, "I received your message: " + req.body.text);

      }

    }

    res.status(200).json({ ok: true });

  })

);

Ajoutez quelques messages de gestion des erreurs, et l'application écoute sur le port défini (3000).

app.all("*", (req, res) => {

  res.status(404).json({

    status: 404,

    title: "Not Found",

  });

});

app.use((err, req, res, next) => {

  res.status(500).json({

    status: 500,

    title: "Internal Server Error",

    detail: err.message,

  });

});

app.listen(port);

Créer le message sendBedtimeStoryRequest qui envoie un nouveau message RCS personnalisé intitulé "Bedtime Story Generator", contenant un bouton pour générer une nouvelle histoire.

const sendBedtimeStoryRequest = async (number) => {

  const message = new RCSCustom({

    to: number,

    from: process.env.RCS_SENDER_ID,

    custom: {

      contentMessage: {

        richCard: {

          standaloneCard: {

            cardOrientation: "VERTICAL",

            cardContent: {

              title: "Bedtime Story Generator",

              description: 'Tap "Generate Story" for a magical tale!',

              media: {

                height: "MEDIUM",

                contentInfo: {

                  fileUrl:

                    "https://cdn-icons-png.flaticon.com/512/2917/2917637.png",

                },

              },

              suggestions: [

                {

                  reply: {

                    text: "Generate Story",

                    postbackData: "GENERATE_STORY_REQUEST",

                  },

                },

              ],

            },

          },

        },

      },

    },

  });

  try {

    await vonage.messages.send(message);

  } catch (err) {

    if (err.response) {

      err.response.text().catch(() => {});

    }

  }

};

Créez le sendRCSGreeting qui envoie un message RCS en utilisant l'API Messages de Vonage.

const sendRCSGreeting = async (to, messageText) => {

  const message = new RCSText({

    to: to,

    from: process.env.RCS_SENDER_ID,

    text: messageText,

  });

  try {

    await vonage.messages.send(message);

  } catch (err) {

    if (err.response) {

      err.response.text().catch(() => {});

    }

  }

};

Pour exécuter l'application, démarrez le serveur :

node server.js

Visitez ensuite l'URL suivante dans votre navigateur, ce qui déclenche l'envoi du premier message au téléphone de l'utilisateur, l'invitant à générer une histoire. La confirmation JSON dans votre navigateur, ainsi que le message RCS reçu sur votre téléphone, sont les signes que le système fonctionne.

http://localhost:3000/send-story-request

Intégrer Google Gemini

Maintenant que la messagerie RCS et le webhook fonctionnent, ajoutons Google Gemini à notre service de narration.

Lorsque vous naviguez vers AI Studioet que vous créez un nouveau chat, vous pouvez voir "Get Code" en haut à droite et sélectionner le langage de programmation de votre choix. Choisissez le modèle. J'ai utilisé "Gemini 1.5 Flash Experimental", mais vous pouvez choisir celui qui convient le mieux à votre projet.

Pour en savoir plus, consultez la page de documentation de l'API page de documentation de Gemini Developer API.

Installer le SDK Gemini

npm install @google/generative-ai

Ajoutez votre clé API Gemini à .env.

GEMINI_API_KEY="YOUR_GEMINI_API_KEY"

Initialiser Gemini

import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

const geminiModel = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

Générer des histoires avec Gemini

Une fois Gemini initialisé, nous mettons à jour notre /webhooks/inbound . Lorsque l'utilisateur clique sur "Générer une histoire", au lieu de répondre "Hello world !", nous appelons maintenant geminiModel.generateContent avec une invite spécifique pour une histoire à dormir debout.

Le texte généré est ensuite renvoyé à l'utilisateur à l'aide de la commande sendGeneratedStory. Nous avons également ajouté une gestion pour les utilisateurs qui pourraient taper "Generate Story" manuellement.

La fonction sendGeneratedStory prend maintenant le texte généré et utilise RCSText pour le renvoyer sous la forme d'un message texte RCS normal.

Tester le service de narration

Pour exécuter l'application, il faut (re)démarrer le serveur :

node server.js

Visitez ensuite l'URL suivante dans votre navigateur : http://localhost:3000/send-story-request

Depuis votre appareil, vous recevrez un message RCS. Appuyez sur le bouton "Générer une histoire" pour recevoir une histoire à dormir debout créée par Gemini.

RCS Project

Conclusion

Ce tutoriel vous a montré comment construire un service de narration alimenté par Gemini en utilisant l'API RCS de Vonage. La dernière fois que j'ai fait quelque chose en rapport avec le RCS, c'était en 2020. J'ai participé à un atelier où chaque participant recevait une carte SIM compatible RCS. C'était agréable de travailler à nouveau avec RCS, et j'ai hâte d'écrire d'autres articles de blog à ce sujet.