Intégrer des concepts fondamentaux d'IA dans les applications Google Chat

1. Avant de commencer

Que sont les applications Google Chat avec IA ?

Les applications Google Chat avec IA :

  • fournissent des services et des ressources dans Google Chat, ce qui permet aux utilisateurs de chercher des informations et d'effectuer des actions sans quitter la conversation ;
  • s'intègrent aux modèles d'IA générative pour créer, rechercher et modifier des données telles que du texte ou des images.
  • Offrez une expérience agentique en appliquant des concepts d'IA conversationnelle pour des interactions plus pratiques, naturelles, sophistiquées et utiles.

Pourquoi intégrer les applications Google Chat avec l'IA ?

Voici les cas d'utilisation types :

  • Création et édition de contenu : générez du texte marketing, créez des posts pour les réseaux sociaux et des images réalistes, composez de la musique ou aidez à créer des contenus vidéo.
  • Recherche et analyse de données : dégagez des insights clés d'une base de connaissances non structurée, résumez des textes longs, classez des contenus ou traduisez des langues avec une précision et une rapidité améliorées.
  • Conversation : menez des conversations naturelles, informatives et efficaces comme vous le feriez avec un assistant.
  • Automatisation des tâches. effectuer des actions au nom de l'utilisateur, comme créer un événement d'agenda, envoyer un document ou gérer une demande dans un système externe ;

La possibilité d'intégrer ces fonctionnalités directement dans l'interface familière de Google Chat est une excellente opportunité pour tous ceux qui souhaitent améliorer l'expérience et la productivité de leurs utilisateurs.

Prérequis

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez créer huit applications Google Chat minimalistes qui intègrent des concepts fondamentaux d'IA pour montrer comment ils peuvent être appliqués dans des applications concrètes. Ils sont tous conçus comme des modules complémentaires Google Workspace et reposent sur l'architecture HTTP :

2f1e2c66f6e2e2f0.png

Elle fonctionne comme suit :

  1. Un utilisateur envoie un message dans Google Chat à une application Chat, soit en tant que message privé, soit dans un espace Chat.
  2. Une requête HTTP est envoyée au serveur Web exécuté en tant que fonction Node.js Google Cloud Run contenant la logique de l'application Chat.
  3. La logique de l'application Chat peut éventuellement s'intégrer aux services Google Workspace (comme Agenda et Sheets), à d'autres services Google (comme Maps, YouTube et Vertex AI) ou à d'autres services Web (comme un système de gestion de projet ou un outil de gestion des tickets).
  4. Le serveur Web renvoie une réponse HTTP au service de l'application Chat dans Chat.
  5. La réponse est envoyée à l'utilisateur.
  6. L'application Chat peut éventuellement appeler l'API Chat pour publier des messages de manière asynchrone ou effectuer d'autres opérations.

Chaque fonction Node.js Google Cloud Run d'application Google Chat contient sa propre version des fichiers sources suivants pour effectuer les actions nécessaires aux étapes 3 et 6 ci-dessus :

  • package.json : un fichier manifeste central qui sert de plan pour le projet Node.js. Il permet de définir les métadonnées, les dépendances et les scripts.
  • env.js : script qui définit les constantes requises pour l'exécution. Il doit être modifié en fonction de l'environnement et de la configuration.
  • index.js: Script principal qui gère la logique des événements d'interaction Google Chat. Seul le type d'événement de message est implémenté dans cet atelier de programmation, mais il inclurait généralement d'autres types tels que le clic sur une fiche, la commande à barre oblique et la boîte de dialogue dans les applications réelles.

Application Prompt

Cette application s'appuie sur un modèle Gemini pour discuter avec les utilisateurs dans leur langue naturelle à l'aide de réponses concises et en texte brut.

5975b36968ab597a.gif

Application Format

Cette application s'appuie sur Prompt app en ajoutant la prise en charge des réponses en texte enrichi conformes au format de texte spécifique des messages Google Chat.

bc49e0acf0838f28.gif

Application Ground

Cette application s'appuie sur Format app en ajoutant la prise en charge de l'outil de recherche Google et en renvoyant des sources dans les messages de réponse avec des fiches.

3cf232bf153f6abc.gif

Application MCP

Cette application s'appuie sur Format app en ajoutant la prise en charge du protocole MCP (Model Context Protocol) de l'assistance pour les développeurs Google Workspace.

8219c29366e9120e.gif

Application multitour

Cette application s'appuie sur Format app en ajoutant la prise en charge de la mémoire conversationnelle avec une base de données Google Cloud Firestore.

a819c274ce586451.gif

Application d'outil personnalisé

Cette application s'appuie sur Multi-turn app en ajoutant la prise en charge d'un outil personnalisé d'appel de fonction qui appelle l'API Google Workspace Agenda en fonction des informations fournies par l'utilisateur.

a1c4f586b7ab2e24.gif

Application Stream

Cette application s'appuie sur un modèle Gemini pour générer des nouvelles basées sur des thèmes fournis par les utilisateurs. L'API Google Chat est utilisée pour envoyer des résultats et des états dans des messages au fur et à mesure de la progression.

fd347ba03fe86e22.gif

Application multimodale

Cette application s'appuie sur un modèle Gemini pour modifier des images en fonction des instructions textuelles des utilisateurs. Les API Google Chat sont utilisées pour télécharger et importer les images en tant que pièces jointes aux messages.

57574be33474bbc.gif

Objectifs de l'atelier

  • Les concepts fondamentaux de l'IA sont pertinents pour les applications Google Chat et leur application.
  • Pour accéder à Vertex AI à l'aide du SDK Google Gen AI.
  • Utiliser les API Google Workspace pour développer des fonctionnalités intéressantes et puissantes.
  • Exploiter Cloud Run pour créer des applications Google Chat évolutives.

Ce dont vous aurez besoin

  • Avoir suivi le guide de démarrage rapide Créer une application Google Chat HTTP avec Node.js. (cet atelier de programmation s'appuie sur le projet Google Cloud, l'application Google Chat et la fonction Google Cloud Run obtenus.)

2. Configuration

Initialiser les ressources et y accéder

Dans cette section, vous allez accéder aux ressources suivantes et les configurer à partir de votre navigateur Web de votre choix.

Configuration de l'API Google Chat

Ouvrez la console Google Cloud dans un nouvel onglet, puis procédez comme suit :

  1. Sélectionnez votre projet.
  2. Dans le champ de recherche Google Cloud, recherchez "API Google Chat", puis cliquez sur API Google Chat, sur Gérer, puis sur Configuration.

  1. Définissez Nom de l'application et Description sur Gen AI App.
  2. Cliquez sur Enregistrer.

9a06649cf9285b99.png

Espace Google Chat

Ouvrez Google Chat dans un nouvel onglet, puis procédez comme suit :

  1. Si ce n'est pas déjà fait, ouvrez un espace de message privé avec l'application Chat.
  2. Saisissez Hello et appuyez sur enter. L'application Chat devrait répondre en affichant votre nom et votre avatar.

e3b195c7b7b8e2af.png

Service de fonctions Google Cloud Run

Ouvrez la console Google Cloud dans un nouvel onglet, puis procédez comme suit :

  1. Sélectionnez votre projet.
  2. Cliquez sur Menu ☰ > Cloud Run > Services.

  1. Dans la liste des services, cliquez sur addonchatapp, puis ouvrez l'onglet Source.

b69df34ea0dc48a5.png

Télécharger le code source et les ressources en local

  1. Téléchargez ce dépôt GitHub.

  1. Dans l'environnement de développement local de votre choix, ouvrez le répertoire node/chat/gen-ai-apps.

3c57c15db4ebfddb.png

3. Application Prompt

Cette application invite Gemini sur Vertex AI à discuter avec les utilisateurs dans leur langue naturelle en utilisant des réponses concises et en texte brut. L'implémentation repose sur le SDK Google Gen AI pour Node.js.

Passer en revue les concepts

Langage naturel

Toute langue parlée ou écrite par des êtres humains pour communiquer au quotidien, par opposition aux langues artificielles ou informatiques.

Fonctions Cloud Run

Cloud Run Functions est une solution idéale pour créer des backends sans serveur, traiter des données en temps réel et créer des applications intelligentes. Vous n'avez aucun serveur à provisionner, à gérer ni auquel appliquer des correctifs ou mises à jour. Elle effectue un scaling automatique, dispose d'une disponibilité élevée et est tolérante aux pannes.

Invites

Le prompting désigne la technique qui consiste à élaborer des entrées (requêtes) pour guider un modèle d'IA générative afin qu'il produise le résultat souhaité. Il s'agit généralement de formuler soigneusement des questions, de fournir du contexte, de donner des instructions ou de fournir des exemples pour obtenir des réponses spécifiques et pertinentes du modèle.

Vertex AI

Vertex AI offre tout ce dont vous avez besoin pour créer et utiliser l'IA générative, y compris des solutions d'IA, la recherche et la conversation, plus de 130 modèles de fondation et une plate-forme d'IA unifiée.

c9e9c7a1945b22ac.png

Gemini

Gemini est un LLM multimodal de Google, accessible via Vertex AI. Il aide les utilisateurs à libérer leur potentiel en tant qu'humains pour leur permettre de développer leur imagination, d'accroître leur curiosité et d'améliorer leur productivité.

SDK Google Gen AI

Le SDK Google Gen AI est conçu pour permettre aux développeurs de créer des applications optimisées par Gemini. Il fournit une interface unifiée compatible avec l'API Gemini Developer et Vertex AI. Il est fourni avec des bibliothèques clientes en Python, Go, Node.js et Java.

Parcours d'examen

c625fdcc8b4a27f4.png

Passer en revue le code source

env.js

...
// Replace with your GCP project ID.
projectID: process.env.PROJECT_ID || 'your-google-cloud-project-id',

// Replace with your GCP project location.
location: process.env.LOCATION || 'your-google-cloud-project-location',

// Replace with the Gemini model to use.
model: process.env.MODEL || 'gemini-2.5-flash-lite',
...

index.js

// Import the Google Gen AI SDK.
import { GoogleGenAI } from '@google/genai';
...
// Use Vertex AI.
const genAI = new GoogleGenAI({vertexai: true, project: env.projectID, location: env.location});

http('gen-ai-app', async (req, res) => {
 // Send a new Chat message with the generated answer
 return res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
   text: await generateAnswer(req.body.chat.messagePayload.message.text)
 }}}}});
});

async function generateAnswer(message) {
 // The prompt is made of the user's message and specific instructions for the model.
 const prompt = 'In a consice and with plain text only (no formatting), '
                 + 'answer the following message in the same language: ' + message;
 const aiResponse = await genAI.models.generateContent({model: env.model, contents: prompt});
 return aiResponse.candidates[0].content.parts[0].text;
};
...

package.json

...
"main": "index.js",
"type": "module",
"scripts": {
  "start": "node index.js"
},
"dependencies": {
  "@google-cloud/functions-framework": "^4.0.0",
  "@google/genai": "1.15.0"
},
...

Activer l'API Vertex AI

  1. Dans la console Google Cloud, activez l'API Vertex AI :

  1. Cliquez sur Menu ☰ > API et services > API et services activés, puis vérifiez que l'API Vertex AI figure dans la liste.

Mettre à jour la fonction Google Cloud Run Node.js

  1. Dans votre environnement de développement local, remplacez le répertoire actuel par node/chat/gen-ai-apps/1-prompt. Il contient l'intégralité du code source et des ressources.
  2. Ouvrez env.js dans un éditeur et définissez les éléments suivants :
  3. projectID : ID de votre projet Google Cloud. Vous pouvez le récupérer sur la page d'accueil de la console Google Cloud.

  1. location : région de votre service de fonction Google Cloud Run. Vous pouvez la récupérer sur la page d'informations du service de fonction Google Cloud Run.

  1. model : modèle à utiliser. Vous trouverez tous les modèles disponibles dans la documentation Vertex AI. Le modèle défini par défaut est Flash pour une exécution rapide et économique.

6c2fb9f554f53a4a.png

  1. Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.

  1. Cliquez sur Modifier la source.
  2. Définissez Point d'entrée de la fonction sur gen-ai-app.
  3. Cliquez sur , saisissez env.js, puis cliquez sur ✔️ pour créer le fichier source manquant.
  4. Remplacez l'intégralité du contenu des fichiers index.js, env.js et package.json par celui de votre environnement de développement local.
  5. Cliquez sur Enregistrer et redéployer.
  6. Attendez que le déploiement de la révision soit terminé.

487b64f2d3b1a104.png

Essayer

  1. Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez Hello, how are you?, puis appuyez sur enter. L'application doit répondre de manière concise en texte brut, conformément aux instructions de la requête.

3cc1fd1de2a9e239.png

  1. Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez Bonjour comment allez-vous?, puis appuyez sur enter. L'application doit répondre en français, conformément à nos instructions dans la requête.

77010f4ad0bde5da.png

4. Format app

Cette application s'appuie sur Prompt app en ajoutant la prise en charge des réponses en texte enrichi conformes au format des messages texte Google Chat. Les instructions de la requête sont mises à jour avec une description exhaustive des différentes options que le modèle peut utiliser.

Passer en revue les concepts

Messages Google Chat

Les messages Google Chat sont compatibles avec différentes options de mise en forme pour vous permettre de rédiger des messages plus clairs et plus expressifs directement dans l'interface Google Chat. Elles sont basées sur des règles de mise en forme spécifiques pour appliquer le gras, l'italique, le barré, créer des liens hypertexte, etc.

Parcours d'examen

c625fdcc8b4a27f4.png

Passer en revue le code source

index.js

...
async function generateAnswer(message) {
 // Specify formatting options that are compatible with Google Chat messages
 // https://developers.google.com/workspace/chat/format-messages#format-texts
 const prompt = `Use simple text for concise answers. The only formatting options you can use is to
(1) surround some text with a single star for bold such as *text* for strong emphasis
(2) surround some text with a single underscore for italic such as _text_ for gentle emphasis
(3) surround some text with a single tild for strikethrough such as ~text~ for removal
(4) use a less than before followed by a URL followed by a pipe followed by a link text followed
    by a more than for a hyperlink such as <https://example.com|link text> for resource referencing
(5) use a backslash followed by the letter n for a new line such as \n for readibility
(6) surround some text with a single backquote such as \`text\` for quoting code
(7) surround an entire paragraph with three backquotes in dedicated lines such as
    \`\`\`\nparagraph\n\`\`\` for quoting code
(8) prepend lines with list items with a single star or hyphen followed by a single space
    such as * list item or - list item for bulleting ;
DO NOT USE ANY OTHER FORMATTING OTHER THAN THOSE.
Answer the following message in the same language: ${message}`;
...
};
...

Mettre à jour la fonction Google Cloud Run Node.js

  1. Dans votre environnement de développement local, remplacez le répertoire actuel par node/chat/gen-ai-apps/2-format. Il contient l'intégralité du code source et des ressources.
  2. Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.

  1. Cliquez sur Modifier la source.
  2. Remplacez l'intégralité du contenu du fichier index.js par celui de votre environnement de développement local.
  3. Cliquez sur Enregistrer et redéployer.
  4. Attendez que le déploiement de la révision soit terminé.

487b64f2d3b1a104.png

Essayer

  1. Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez Showcase all formatting options you have with one paragraph each, puis appuyez sur enter. L'application doit répondre avec des exemples de mise en forme basés sur nos instructions dans la requête.

cc7f7101d9f7c10.png

  1. Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez What are Google Chat apps? What's great about them?, puis appuyez sur enter. L'application doit répondre en utilisant la mise en forme lorsque cela est utile.

83557d4c7071aac8.png

5. Application Ground

Cette application s'appuie sur Format app en ajoutant la prise en charge de l'ancrage et du renvoi des sources. Il exécute l'outil de recherche Google et joint des fiches contenant des liens vers des réponses.

Passer en revue les concepts

Ancrage

L'ancrage est une technique qui permet de connecter les modèles à des sources d'informations. Il est souvent utilisé dans des applications pratiques pour améliorer la précision et la pertinence du contenu généré en faisant référence à des données réelles, ce qui empêche le modèle d'halluciner ou de produire des informations factuellement incorrectes.

Outil Recherche Google

L'outil de recherche Google améliore l'ancrage en permettant aux modèles de rechercher des informations en temps réel sur le Web, ce qui garantit des réponses précises et à jour.

Framework de fiches Google Workspace

Le framework de cartes de Google Workspace permet aux développeurs de créer des interfaces utilisateur riches et interactives. Il permet de créer des fiches organisées et visuellement attrayantes pouvant inclure du texte, des images, des boutons et d'autres widgets. Ces cartes améliorent l'expérience utilisateur en fournissant des informations structurées et en permettant d'effectuer des actions rapides directement dans la conversation.

Processus d'examen

b72d69a6e79858d6.png

Passer en revue le code source

index.js

...
const aiResponse = await genAI.models.generateContent({
 model: env.model,
 contents: prompt,
 // Google Search tool is enabled
 config: { tools: [{ googleSearch: {}}]}
});

let groundingCardsV2 = undefined;
const grounding = aiResponse.candidates[0].groundingMetadata;
// Go through the grounding metadata if any
if (grounding && grounding.groundingChunks && grounding.groundingChunks.length > 0) {
 let linkButtons = [];
 grounding.groundingChunks.forEach(groundingChunk => {
   if (groundingChunk.web) {
     // Create one link button per web URL returned
     linkButtons.push({
       text: groundingChunk.web.domain,
       onClick: { openLink: { url: groundingChunk.web.uri}}
     });
   }
 });
 // Create a card with link buttons
 groundingCardsV2 = [{
   cardId: "sourcesCard",
   card: { sections: [{
     header: "Sources",
     widgets: [{ buttonList: { buttons: linkButtons}}]
   }]}
 }];
}

// Send a Chat message with the generated answer
return res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
 text: aiResponse.candidates[0].content.parts[0].text,
 // The sources are referenced in the card
 cardsV2: groundingCardsV2
}}}}});
...

Mettre à jour la fonction Google Cloud Run Node.js

  1. Dans votre environnement de développement local, remplacez le répertoire actuel par node/chat/gen-ai-apps/3-ground. Il contient l'intégralité du code source et des ressources.
  2. Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.

  1. Cliquez sur Modifier la source.
  2. Remplacez l'intégralité du contenu du fichier index.js par celui de votre environnement de développement local.
  3. Cliquez sur Enregistrer et redéployer.
  4. Attendez que le déploiement de la révision soit terminé.

487b64f2d3b1a104.png

Essayer

Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez What's the world population?, puis appuyez sur enter. L'application doit répondre en ajoutant des liens vers les sources dans une fiche.

cff461da29c05873.png

6. Application MCP

Cette application s'appuie sur Format app en ajoutant la prise en charge des outils fournis par un serveur MCP (Model Context Protocol) hébergé à distance. Il se connecte au MCP Google Workspace Developer Assist, qui fournit des outils permettant d'accéder à la documentation Google Workspace pour les développeurs et de la parcourir.

Passer en revue les concepts

Protocole MCP (Model Context Protocol)

Le Model Context Protocol est un framework Open Source qui intègre les modèles aux services externes de manière standardisée. Les modèles peuvent découvrir, comprendre et utiliser différents outils de manière programmatique, ce qui leur permet d'étendre leurs capacités, d'effectuer des actions concrètes et d'accéder à des informations à jour.

SDK TypeScript MCP

Le SDK TypeScript implémente la spécification MCP complète, ce qui simplifie la création de clients MCP qui se connectent à n'importe quel serveur MCP. Il permet également de développer des serveurs MCP qui donnent accès aux ressources, aux prompts et aux outils.

Parcours d'examen

e0b324e2cca21915.png

Passer en revue le code source

index.js

// Import the MCP TypeScript SDK.
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
...
// Create and connect the MCP client from the URL.
const mcpServerUrl = new URL("https://workspace-developer.goog/mcp");
const client = new Client({ name: "gen-ai-app-mcp", version: "1.0.0" });
// Try Streamable HTTP first (new) and SSE (old) as fallback for transport
try {
 await client.connect(new StreamableHTTPClientTransport(mcpServerUrl));
} catch (error) {
 await client.connect(new SSEClientTransport(mcpServerUrl));
}

http('gen-ai-app', async (req, res) => {
 ...
 const aiResponse = await genAI.models.generateContent({
   model: env.model,
   contents: prompt,
   // MCP tools are enabled
   config: { tools: [mcpToTool(client)]}
 });
 ...
}
...

package.json

...
"dependencies": {
  ...
  "@modelcontextprotocol/sdk": "^1.18.1"
},
...

Mettre à jour la fonction Google Cloud Run Node.js

  1. Dans votre environnement de développement local, remplacez le répertoire actuel par node/chat/gen-ai-apps/4-mcp. Il contient l'intégralité du code source et des ressources.
  2. Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.

  1. Cliquez sur Modifier la source.
  2. Remplacez l'intégralité du contenu des fichiers index.js et package.json par ceux de votre environnement de développement local.
  3. Cliquez sur Enregistrer et redéployer.
  4. Attendez que le déploiement de la révision soit terminé.

487b64f2d3b1a104.png

Essayer

  1. Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez What can you do for me?, puis appuyez sur enter. L'application doit décrire ce qu'elle est capable de faire (outils MCP).

13535bfd31d85a50.png

  1. Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez I would like to get the latest official documentation for the Google Sheets API append values, puis appuyez sur enter. L'application doit répondre en fournissant la documentation demandée (à l'aide des outils MCP).

8a6f4ac5b7d5fa4a.png

7. Application multitours

Cette application s'appuie sur Format app en ajoutant la prise en charge de la mémoire conversationnelle en suivant l'historique des interactions de chat. Elle permet une expérience plus naturelle, intelligente et personnalisée. L'application utilise la base de données Google Cloud Firestore par défaut associée à son projet Google Cloud pour le stockage.

Passer en revue les concepts

Multitour

Le concept de multitours fait référence à la capacité d'un modèle à maintenir le contexte et la continuité sur plusieurs échanges et conversations. Il s'agit d'une fonctionnalité indispensable pour prendre en charge les conversations complexes, les fonctionnalités sophistiquées basées sur l'IA et une expérience utilisateur naturelle.

Google Cloud Firestore

Google Cloud Firestore est une base de données cloud NoSQL flexible et évolutive pour le développement mobile, Web et serveur. Il stocke les données dans des documents, organisés en collections, et permet la synchronisation en temps réel et le fonctionnement hors connexion.

Parcours d'examen

52920a2227467218.png

Passer en revue le code source

index.js

// Import the Google Cloud Firestore client library.
import { Firestore } from '@google-cloud/firestore';
...
// Configure DB
const USERS_PREFIX = 'users/';
const CHATS_COLLECTION = 'chats';
const db = new Firestore();
...
// Create or update data for a given user
async function createOrUpdateChatHistory(userId, data) {
 await db.collection(CHATS_COLLECTION).doc(userId.replace(USERS_PREFIX, '')).set(data);
};

// Retrieve data snapshot for a given user
async function getChatHistory(userId) {
 return await db.collection(CHATS_COLLECTION).doc(userId.replace(USERS_PREFIX, '')).get();
};
...
...
http('gen-ai-app', async (req, res) => {
 // Retrieve the chat history of the user
 const chatHistory = await getChatHistory(userId);
 const chat = genAI.chats.create({
   model: env.model,
   // Initiate the model with chat history for context
   history: chatHistory.exists ? chatHistory.data().contents : []
 });
 // If no history, send a first message to the model with instructions on how to behave
 if(!chatHistory.exists) {
   const preambule = 'The only formatting options you can use is to '
                   + ...
                   + 'DO NOT USE ANY OTHER FORMATTING OTHER THAN THOSE. '
                   + 'Answer in the same language that I use.';
   // The answer to this message is ignored
   await chat.sendMessage({message: preambule});
 }

 // Send the user's message to the model to generate the answer
 const aiResponse = await chat.sendMessage({message: userMessage});

 // Persist the updated chat history of the user
 await createOrUpdateChatHistory(userId, {contents: chat.getHistory({curated: true})});

 // Send a Chat message with the generated answer
 return res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
   text: aiResponse.candidates[0].content.parts[0].text
 }}}}});
});
...

package.json

...
"dependencies": {
  ...
  "@google-cloud/firestore": "^7.11.5"
},
...

Activer l'API Google Cloud Firestore

  1. Dans la console Google Cloud, activez l'API Google Cloud Firestore :

  1. Cliquez sur Menu ☰ > API et services > API et services activés, puis vérifiez que l'API Cloud Firestore figure dans la liste.

Créer une base de données Cloud Firestore

  1. Dans la console Google Cloud, cliquez sur Menu ☰ > Firestore.

  1. Cliquez sur Créer une base de données Firestore.
  2. Conservez la configuration par défaut, puis cliquez sur Créer une base de données.

Mettre à jour la fonction Google Cloud Run Node.js

  1. Dans votre environnement de développement local, remplacez le répertoire actuel par node/chat/gen-ai-apps/5-multi-turn. Il contient l'intégralité du code source et des ressources.
  2. Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.

  1. Cliquez sur Modifier la source.
  2. Remplacez l'intégralité du contenu des fichiers index.js et package.json par ceux de votre environnement de développement local.
  3. Cliquez sur Enregistrer et redéployer.
  4. Attendez que le déploiement de la révision soit terminé.

487b64f2d3b1a104.png

Essayer

  1. Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez Can you speak with the English from the 80's for now on?, puis appuyez sur enter. L'application doit répondre de manière positive.

b273beda7e203b23.png

  1. Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez Define what Google Chat apps are in one sentence, puis appuyez sur enter. L'application doit continuer à répondre en utilisant l'anglais des années 1980.

9156f563c369f186.png

8. Application d'outil personnalisé

Cette application s'appuie sur Multi-turn app en ajoutant la prise en charge d'un outil personnalisé d'appel de fonction qui s'appuie sur l'API Google Workspace Calendar pour récupérer le prochain événement d'un agenda public. Le modèle gère toutes les interactions utilisateur, y compris la réception des entrées et la fourniture des sorties de l'outil. Toutefois, l'application reste responsable de l'exécution des appels d'API nécessaires et de la fourniture des résultats au modèle sur demande. L'application utilise une clé API Google, car il n'est pas nécessaire d'avoir des identifiants utilisateur pour récupérer les données de calendrier public.

Passer en revue les concepts

Appel de fonction

L'appel de fonction permet à un modèle de détecter quand la requête d'un utilisateur peut être traitée par un outil ou une API externes. Le modèle fournit ensuite les paramètres nécessaires pour appeler cet outil, en intégrant des fonctionnalités externes dans ses réponses.

API Google Workspace

Les API Google Workspace permettent aux développeurs d'intégrer leurs applications à différents services Google Workspace. Ces API offrent un accès programmatique aux fonctionnalités de produits tels que Gmail, Chat, Agenda, Drive, Docs, Sheets et plus encore, ce qui permet l'automatisation, la synchronisation des données et la création de workflows personnalisés.

Parcours d'examen

ed866ca369a4512f.png

Passer en revue le code source

env.js

...
// Replace with your Google API key.
googleApiKey: process.env.GOOGLE_API_KEY || 'your-google-api-key',
...

index.js

// Import parameter type definitions from Google Gen AI SDK.
import { GoogleGenAI, Type } from '@google/genai';
// Import Google APIs that include the Google Calendar API.
import { google } from 'googleapis';
...
// Create a Google Calendar API client using a Google API key.
const calendar = google.calendar({version: 'v3', auth: env.googleApiKey});
...
// Define the tool used for function calling
const getNextPublicCalendarEventTitleFunctionDeclaration = {
 name: 'getNextPublicCalendarEventTitle',
 parameters: {
   type: Type.OBJECT,
   description: 'Get the title of the next event of a public calendar.',
   properties: {
     calendarId: {
       type: Type.STRING,
       description: 'ID of the public calendar to get the next event title.',
     }
   },
   required: ['calendarId']
 }
};

// The function referenced in the tool definition
async function getNextPublicCalendarEventTitle(calendarId) {
 // Use Calendar API to retrieve the next event in the given calendar
 const response = await calendar.events.list({
   calendarId: calendarId,
   timeMin: new Date().toISOString(),
   maxResults: 1,
   singleEvents: true,
   orderBy: 'startTime',
 });
 const events = response.data.items;
 if (!events || events.length === 0) {
   return null;
 }
 return `${events[0].summary}`;
};
...
...
http('gen-ai-app', async (req, res) => {
 ...
 // Send the user's message to the model to generate the answer
 let aiResponse = await chat.sendMessage({
   message: userMessage,
   // The tool used for function calling is enabled
   config: { tools: [{ functionDeclarations: [getNextPublicCalendarEventTitleFunctionDeclaration]}]}
 });

 // Handle the function calling turn with the model if any
 const functionCall = aiResponse.candidates[0].content.parts[0].functionCall;
 if (functionCall) {
   let functionResult = null;
   switch(functionCall.name) {
     case 'getNextPublicCalendarEventTitle':
       // Make the function call as per model request
       functionResult = await getNextPublicCalendarEventTitle(functionCall.args['calendarId']);
       break;
     default:
   }
   // Finish the function calling turn by sending the execution result to the model
   aiResponse = await chat.sendMessage({ message: { functionResponse: {
     name: functionCall.name,
     response: { output: functionResult }
   }}});
 }
 ...
 // Send a Chat message with the generated answer
 return res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
   text: aiResponse.candidates[0].content.parts[0].text
 }}}}});
});
...

package.json

...
"dependencies": {
  ...
   "googleapis": "^160.0.0"
},
...

Activer l'API Calendar

  1. Dans la console Google Cloud, activez l'API Google Calendar :

  1. Cliquez sur Menu ☰ > API et services > API et services activés, puis vérifiez que l'API Google Agenda figure dans la liste.

Créer une clé API Google

Dans la console Google Cloud, procédez comme suit :

  1. Cliquez sur Menu ☰ > API et services > Identifiants.

  1. Cliquez sur + Créer des identifiants, puis sélectionnez Clé API.
  2. Attendez la fin de l'opération.
  3. Dans la boîte de dialogue de confirmation, recherchez le champ de texte Votre clé API, puis cliquez sur Copier dans le presse-papiers.

Mettre à jour une fonction Google Cloud Run Node.js

  1. Dans votre environnement de développement local, remplacez le répertoire actuel par node/chat/gen-ai-apps/6-custom-tool. Il contient l'intégralité du code source et des ressources.
  2. Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.

  1. Cliquez sur Modifier la source.
  2. Remplacez l'intégralité du contenu des fichiers index.js et package.json par ceux de votre environnement de développement local.
  3. Ouvrez le fichier env.js et procédez comme suit :
  4. Ajoutez googleApiKey aux champs exportés.
export const env = {
 ...
 googleApiKey: 'your-google-api-key',
};
  1. Remplacez your-google-api-key par la clé API Google copiée à l'étape précédente. Vous pouvez la récupérer sur la page des identifiants Google Cloud en cliquant sur Afficher la clé.

  1. Cliquez sur Enregistrer et redéployer.
  2. Attendez que le déploiement de la révision soit terminé.

487b64f2d3b1a104.png

Essayer

  1. Dans Google Agenda, procédez comme suit :
  2. Sous Autres agendas, cliquez sur +, puis sur Créer un agenda.
  3. Définissez Nom sur My Public Calendar.
  4. Cliquez sur Créer l'agenda.
  5. Attendez la fin de l'opération.
  6. Sous Paramètres de mes agendas, sélectionnez le nouvel agenda Mon agenda public.
  7. Sous Autorisations d'accès aux événements, sélectionnez Rendre disponible publiquement, puis cliquez sur OK dans la boîte de dialogue Avertissement.
  8. Sous Autorisations d'accès aux événements, sélectionnez Voir les détails des événements dans le menu déroulant à côté de l'option Rendre disponible publiquement.
  9. Sous Intégrer l'agenda, copiez la valeur du champ ID de l'agenda dans le presse-papiers.
  10. Cliquez sur la flèche vers la gauche en haut à gauche pour quitter Paramètres.
  11. Cliquez sur le calendrier pour créer un événement pour demain, saisissez Important meeting, sélectionnez Mon agenda public dans le menu déroulant, puis cliquez sur Enregistrer.
  12. Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez When is the next meeting?, puis appuyez sur enter. L'application doit demander une précision, car le calendrier auquel il est fait référence n'est pas clair.

40383099311b0813.png

  1. Dans l'espace de message privé avec l'application Chat dans Google Chat, collez l'ID de l'agenda que vous avez copié précédemment dans le presse-papiers, puis appuyez sur enter. L'application doit répondre en fournissant des informations sur l'événement créé précédemment.

4c614c7e444e3b45.png

9. Application de streaming

Cette application s'appuie sur un modèle Gemini pour générer des histoires de deux minutes basées sur des thèmes fournis par les utilisateurs. Comme il faut du temps pour générer des réponses complètes, l'application appelle le modèle en mode streaming et s'appuie sur l'API Google Chat pour envoyer des contenus et des états dans les messages au fur et à mesure de la progression.

Passer en revue les concepts

API Google Chat

L'API Google Chat permet aux développeurs d'interagir de manière programmatique avec Google Chat. Ils peuvent ainsi envoyer des messages, créer des espaces, gérer des membres et plus encore, afin de créer des intégrations et des bots personnalisés.

Streaming

La diffusion en streaming désigne le processus de réception des données dans un flux continu, plutôt que d'attendre que la réponse entière soit générée. En ce qui concerne les appels de modèles d'IA, le streaming permet aux applications d'afficher des résultats partiels aux utilisateurs dès qu'ils sont disponibles, ce qui améliore les performances perçues et l'expérience utilisateur, en particulier pour les tâches de génération plus longues. Cela est particulièrement pertinent pour les modèles d'IA générative qui peuvent mettre beaucoup de temps à produire un résultat complet.

Parcours d'examen

25f9036eecd9a48b.png

Passer en revue le code source

index.js

// Import Google Auth library used to create Google Chat API client
import { GoogleAuth } from 'google-auth-library';
...
http('gen-ai-app', async (req, res) => {
 // Use app authentication.
 // Application Default Credentials (ADC) will use the Cloud Run function's
 // default service account, we just need to specify the Chat API app auth scopes.
 const auth = new GoogleAuth({
   // Chat API app authentication scopes
   scopes: ['https://www.googleapis.com/auth/chat.bot']
 });

 // Create Chat service client with application credentials
 const chatClient = google.chat({
   version: 'v1',
   auth: await auth.getClient()
 });

 // Send a server streaming request to generate the answer
 const aiResponse = await genAI.models.generateContentStream({
   model: env.model,
   contents: `Generate a story about a ${userMessage}. `
               + `It should take 2 minutes to read it out loud.`
 });

 // Send a first Chat message to summarize what will be done
 await chatClient.spaces.messages.create({
   parent: spaceName,
   requestBody: { text: `Sure, let me work on generating a short story `
                           + `about a ${userMessage} like you requested.`}
 });

 // Go through the response chunks received from the stream
 let messageName = undefined;
 let answer = "";
 for await (const chunk of aiResponse) {
   const text = chunk.text;
   if (text) {
     // Update the answer by concatenating the response chunks
     answer += text;
     // The Chat message request body is the same for message creation and update
     const responseBody = {
       text: answer,
       accessoryWidgets: [getStatusAccessoryWidget('Generating story...', 'progress_activity')]
     }
     if (!messageName) {
       // Create a Chat message dedicated to the generated content
       const messageResponse = await chatClient.spaces.messages.create({
         parent: spaceName,
         requestBody: responseBody
       });
       messageName = messageResponse.data.name;
     } else {
       // Update the Chat message dedicated to the generated content
       await chatClient.spaces.messages.patch({
         name: messageName,
         updateMask: 'text,accessory_widgets',
         requestBody: responseBody
       });
     }
   }
 }

 // Update the accessory widget with final progress status
 await chatClient.spaces.messages.patch({
   name: messageName,
   updateMask: 'accessory_widgets',
   requestBody: {
     accessoryWidgets: [getStatusAccessoryWidget('Story is fully generated', 'check')]
   }
 });

 // Send a last Chat message to confirm it's done
 return res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
   text: 'All done, I hope you like it!'
 }}}}});
});

// Create an accessory widget with progress status
function getStatusAccessoryWidget(text, icon) {
 return { buttonList: { buttons: [{
   text: text,
   icon: { materialIcon: { name: icon}},
   // This is a workaround to have the icon shown, it's not clickable
   onClick: { openLink: { url: "https://google.com"}},
   disabled: true
 }]}};
}

package.json

...
"dependencies": {
  ...
   "google-auth-library": "^10.3.0"
},
...

Mettre à jour la fonction Google Cloud Run Node.js

  1. Dans votre environnement de développement local, remplacez le répertoire actuel par node/chat/gen-ai-apps/7-stream. Il contient l'intégralité du code source et des ressources.
  2. Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.

  1. Cliquez sur Modifier la source.
  2. Remplacez l'intégralité du contenu des fichiers index.js et package.json par ceux de votre environnement de développement local.
  3. Cliquez sur Enregistrer et redéployer.
  4. Attendez que le déploiement de la révision soit terminé.

487b64f2d3b1a104.png

Essayer

Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez turtle, puis appuyez sur enter. L'application doit répondre par un message d'accusé de réception, puis générer l'histoire en indiquant l'état d'avancement et enfin envoyer un message de confirmation.

17600cd1490972c7.png

26af4b3d442712a5.png

10. Application multimodale

Cette application s'appuie sur un modèle pour retoucher des images en fonction des instructions textuelles des utilisateurs. L'utilisateur et l'application ajoutent leurs images en tant que pièces jointes aux messages Google Chat pour les échanger. L'application s'appuie sur les API Google Chat pour télécharger et importer des images de manière programmatique.

Passer en revue les concepts

Pièce jointe à un message Google Chat

Les pièces jointes des messages Google Chat sont des fichiers (images ou vidéos, par exemple) importés dans un message Google Chat. Ces pièces jointes peuvent être gérées de manière programmatique, ce qui permet aux applications d'interagir avec les contenus multimédias enrichis directement dans les conversations.

Délégation à l'échelle du domaine

La délégation au niveau du domaine permet à un compte de service d'usurper l'identité des utilisateurs d'un domaine Google Workspace. Les applications peuvent ainsi effectuer des actions en leur nom sans autorisation directe. Cela est utile pour les applications qui ont besoin d'accéder aux données utilisateur ou d'effectuer des actions (comme importer des pièces jointes dans Google Chat) dans le contexte de l'utilisateur, même lorsque celui-ci n'est pas activement présent, en accordant au compte de service un accès étendu à l'ensemble du domaine.

Parcours d'examen

74295b25761f1682.png

Passer en revue le code source

env.js

...
// Replace with the Gemini model to use.
model: process.env.MODEL || 'gemini-2.0-flash-preview-image-generation',
...

index.js

...
// Import byte stream management libraries.
import { Buffer } from 'buffer';
import { Readable } from 'stream';
...
// Download a Google Chat attachment as base 64 string.
async function downloadFile(appChatClient, attachmentName) {
 const response = await appChatClient.media.download({
     resourceName: attachmentName,
     alt: 'media'
   }, {
     responseType: 'stream'
 });
 const chunks = [];
 return new Promise((resolve) => {
   response.data.on('data', (chunk) => {
     chunks.push(chunk);
   });
   response.data.on('end', () => {
     const fileBuffer = Buffer.concat(chunks);
     const base64String = fileBuffer.toString('base64');
     resolve(base64String);
   });
 });
}

// Upload a base 64 string as Google Chat attachment of a space.
async function uploadFile(useChatClient, spaceName, data) {
 const filename = 'generated_image.png';
 return await userChatClient.media.upload({
   parent: spaceName,
   requestBody: { filename: filename },
   media: {
     mimeType: 'image/png',
     body: Readable.from(Buffer.from(data, 'base64'))
   }
 });
}
...
...
http('gen-ai-app', async (req, res) => {
 const userEmail = req.body.chat.user.email;
 const spaceName = req.body.chat.messagePayload.space.name;
 const userMessage = req.body.chat.messagePayload.message.text;
 const attachmentName = req.body.chat.messagePayload.message.attachment[0].attachmentDataRef.resourceName;
 const attachmentContentType = req.body.chat.messagePayload.message.attachment[0].contentType;

 // Set up app authentication used to download the attachment input
 // Application Default Credentials (ADC) will use the Cloud Run function's
 // default service account.
 const appAuth = new GoogleAuth({
   // Specify the Chat API app authentication scopes
   scopes: ['https://www.googleapis.com/auth/chat.bot']
 });
 // Create Chat service client with application credentials
 const appChatClient = google.chat({
   version: 'v1',
   auth: await appAuth.getClient()
 });

 // Send a request to generate the answer with both text and image contents
 const aiResponse = await genAI.models.generateContent({
   model: env.model,
   contents: [{
     role: 'USER',
     parts: [
       // The text content of the message
       { text: userMessage },
       // The attachment of the message is downloaded and added inline
       { inlineData: {
         data: await downloadFile(appChatClient, attachmentName),
         mimeType: attachmentContentType
       }}
     ]
   }],
   config: { responseModalities: ['TEXT', 'IMAGE']}
 });

 // Set up user impersonation authentication used to upload the attachment output
 // and send the response.
 const impersonatedUserAuth = new GoogleAuth({
   // Specify the Chat API user authentication scopes
   scopes: ['https://www.googleapis.com/auth/chat.messages'],
   keyFile: './credentials.json',
   clientOptions: {
     // Impersonate the user who sent the original message
     subject: userEmail
   }
 });
 // Create Chat service client with impersonated user credentials
 const userChatClient = google.chat({
   version: 'v1',
   auth: await impersonatedUserAuth.getClient()
 });

 let responseText = undefined;
 let responseAttachment = undefined;
 // Go through the response parts received
 for (const part of aiResponse.candidates[0].content.parts) {
   if (part.inlineData) {
     // The resulting image is retrieved inline and uploaded
     const mediaResponse = await uploadFile(userChatClient, spaceName, part.inlineData.data);
     responseAttachment = mediaResponse.data;
   } else {
     responseText = part.text;
   }
 }

 // Create a Chat message dedicated to the generated content
 await userChatClient.spaces.messages.create({
   parent: spaceName,
   requestBody: {
     text: responseText ? responseText : 'Here it is!',
     // The uploaded image is referenced as attachment
     attachment: responseAttachment ? [responseAttachment] : undefined
   }
 });

 // Send a last Chat message to confirm it's done
 return res.send({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
   text: 'Done, feel free to let me know if you need anything else!'
 }}}}});
});
...

Configurer le compte de service et exporter la clé privée

  1. Déléguez le compte de service Cloud Run par défaut pour gérer les messages Google Chat des utilisateurs. Suivez les instructions avec le champ d'application https://www.googleapis.com/auth/chat.messages. Pour récupérer l'ID client du compte de service par défaut de Cloud Run, procédez comme suit :
  2. Cliquez sur Menu ☰ > IAM et administration > Comptes de service.

  1. Cliquez sur le compte de service nommé Compte de service Compute par défaut.
  2. Développez la section Paramètres avancés.
  3. Copiez l'ID client dans le presse-papiers.
  4. Créer et télécharger une clé privée pour le compte de service Cloud Run par défaut
  5. Cliquez sur Menu ☰ > IAM et administration > Comptes de service.

  1. Cliquez sur le compte de service nommé Compte de service Compute par défaut.
  2. Sélectionnez l'onglet Clés, cliquez sur Ajouter une clé, puis sur Créer une clé.
  3. Sélectionnez JSON, puis cliquez sur Créer.
  4. La nouvelle paire de clés publique/privée est générée et téléchargée sur votre ordinateur sous la forme d'un nouveau fichier. Enregistrez le fichier JSON téléchargé et copiez son contenu dans le presse-papiers. Ce fichier est la seule copie de cette clé. Pour savoir comment stocker votre clé de façon sécurisée, consultez Gérer les clés de compte de service.

Mettre à jour la fonction Google Cloud Run Node.js

  1. Dans votre environnement de développement local, remplacez le répertoire actuel par node/chat/gen-ai-apps/8-multimodal. Il contient l'intégralité du code source et des ressources.
  2. Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.

  1. Cliquez sur Modifier la source.
  2. Cliquez sur , saisissez credentials.json, puis cliquez sur ✔️ pour créer le fichier de ressources manquant.
  3. Collez le contenu du fichier JSON téléchargé à l'étape précédente dans le fichier credentials.json que vous venez de créer.
  4. Remplacez l'intégralité du contenu du fichier index.js par celui de votre environnement de développement local.
  5. Ouvrez le fichier env.js et définissez la valeur de model sur gemini-2.0-flash-preview-image-generation.
...
model: 'gemini-2.0-flash-preview-image-generation',
...
  1. Cliquez sur Enregistrer et redéployer.
  2. Attendez que le déploiement de la révision soit terminé.

487b64f2d3b1a104.png

Essayer

Dans l'espace de message privé avec l'application Chat dans Google Chat, importez une photo de vous au format PNG, saisissez Change the background color to blue, puis appuyez sur enter. L'application doit répondre en affichant une version de l'image avec un arrière-plan bleu et un message de confirmation.

270547e7a83c1841.png

11. Effectuer un nettoyage

Supprimer un projet Google Cloud

Pour éviter que les ressources utilisées dans cet atelier de programmation ne soient facturées sur votre compte Google Cloud, nous vous recommandons de supprimer le projet Google Cloud.

Dans la console Google Cloud, procédez comme suit :

  1. Cliquez sur Menu ☰ > IAM et administration > Paramètres.

  1. Cliquez sur Arrêter.
  2. Saisissez l'ID du projet.
  3. Cliquez sur Arrêter quand même.

407699a4e03afea6.png

12. Félicitations

Félicitations ! Vous avez créé des applications Google Chat sous forme de modules complémentaires Google Workspace qui intègrent des concepts fondamentaux d'IA.

Étape suivante

Nous n'avons présenté que des cas d'utilisation minimalistes dans cet atelier de programmation, mais vous pouvez envisager de nombreux domaines d'extension dans vos applications Google Chat, par exemple :

  • Assurez la compatibilité avec d'autres types de contenus multimédias, tels que des contenus audio et des vidéos.
  • Effectuez une intégration à d'autres modèles d'IA, y compris aux modèles personnalisés, hébergés sur des plates-formes dédiées telles que Vertex AI.
  • Intégrez des agents, y compris des agents personnalisés, hébergés sur des plates-formes dédiées telles qu'Agentspace et Dialogflow CX.
  • S'appuyer sur des boucles de rétroaction et des classifications pour surveiller et améliorer les performances.
  • Publiez sur le Marketplace pour donner plus de moyens aux équipes, aux organisations ou aux utilisateurs publics.

En savoir plus

De nombreuses ressources sont à la disposition des développeurs, comme des vidéos YouTube, des sites Web de documentation, des exemples de code et des tutoriels :