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
- Connaissances de base concernant Google Cloud et Node.js
- Connaissances de base concernant les applications Google Chat, y compris les messages, les fiches, l'authentification, les API et les points de terminaison HTTP.
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 :
Elle fonctionne comme suit :
- Un utilisateur envoie un message dans Google Chat à une application Chat, soit en tant que message privé, soit dans un espace Chat.
- 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.
- 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).
- Le serveur Web renvoie une réponse HTTP au service de l'application Chat dans Chat.
- La réponse est envoyée à l'utilisateur.
- 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.
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.
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.
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.
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.
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.
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.
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.
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 :
- Sélectionnez votre projet.
- Dans le champ de recherche Google Cloud, recherchez "API Google Chat", puis cliquez sur API Google Chat, sur Gérer, puis sur Configuration.
- Définissez Nom de l'application et Description sur
Gen AI App
. - Cliquez sur Enregistrer.
Espace Google Chat
Ouvrez Google Chat dans un nouvel onglet, puis procédez comme suit :
- Si ce n'est pas déjà fait, ouvrez un espace de message privé avec l'application Chat.
- Saisissez
Hello
et appuyez surenter
. L'application Chat devrait répondre en affichant votre nom et votre avatar.
Service de fonctions Google Cloud Run
Ouvrez la console Google Cloud dans un nouvel onglet, puis procédez comme suit :
- Sélectionnez votre projet.
- Cliquez sur Menu ☰ > Cloud Run > Services.
- Dans la liste des services, cliquez sur addonchatapp, puis ouvrez l'onglet Source.
Télécharger le code source et les ressources en local
- Téléchargez ce dépôt GitHub.
- Dans l'environnement de développement local de votre choix, ouvrez le répertoire
node/chat/gen-ai-apps
.
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.
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
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
- Dans la console Google Cloud, activez l'API Vertex AI :
- 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
- 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. - Ouvrez
env.js
dans un éditeur et définissez les éléments suivants : - projectID : ID de votre projet Google Cloud. Vous pouvez le récupérer sur la page d'accueil de la console Google Cloud.
- 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.
- 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.
- Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.
- Cliquez sur Modifier la source.
- Définissez Point d'entrée de la fonction sur
gen-ai-app
. - Cliquez sur ➕, saisissez
env.js
, puis cliquez sur ✔️ pour créer le fichier source manquant. - Remplacez l'intégralité du contenu des fichiers
index.js
,env.js
etpackage.json
par celui de votre environnement de développement local. - Cliquez sur Enregistrer et redéployer.
- Attendez que le déploiement de la révision soit terminé.
Essayer
- Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez
Hello, how are you?
, puis appuyez surenter
. L'application doit répondre de manière concise en texte brut, conformément aux instructions de la requête.
- Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez
Bonjour comment allez-vous?
, puis appuyez surenter
. L'application doit répondre en français, conformément à nos instructions dans la requête.
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
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
- 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. - Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.
- Cliquez sur Modifier la source.
- Remplacez l'intégralité du contenu du fichier
index.js
par celui de votre environnement de développement local. - Cliquez sur Enregistrer et redéployer.
- Attendez que le déploiement de la révision soit terminé.
Essayer
- 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 surenter
. L'application doit répondre avec des exemples de mise en forme basés sur nos instructions dans la requête.
- 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 surenter
. L'application doit répondre en utilisant la mise en forme lorsque cela est utile.
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
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
- 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. - Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.
- Cliquez sur Modifier la source.
- Remplacez l'intégralité du contenu du fichier
index.js
par celui de votre environnement de développement local. - Cliquez sur Enregistrer et redéployer.
- Attendez que le déploiement de la révision soit terminé.
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.
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
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
- 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. - Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.
- Cliquez sur Modifier la source.
- Remplacez l'intégralité du contenu des fichiers
index.js
etpackage.json
par ceux de votre environnement de développement local. - Cliquez sur Enregistrer et redéployer.
- Attendez que le déploiement de la révision soit terminé.
Essayer
- Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez
What can you do for me?
, puis appuyez surenter
. L'application doit décrire ce qu'elle est capable de faire (outils MCP).
- 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 surenter
. L'application doit répondre en fournissant la documentation demandée (à l'aide des outils MCP).
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
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
- Dans la console Google Cloud, activez l'API Google Cloud Firestore :
- 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
- Dans la console Google Cloud, cliquez sur Menu ☰ > Firestore.
- Cliquez sur Créer une base de données Firestore.
- 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
- 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. - Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.
- Cliquez sur Modifier la source.
- Remplacez l'intégralité du contenu des fichiers
index.js
etpackage.json
par ceux de votre environnement de développement local. - Cliquez sur Enregistrer et redéployer.
- Attendez que le déploiement de la révision soit terminé.
Essayer
- 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 surenter
. L'application doit répondre de manière positive.
- 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 surenter
. L'application doit continuer à répondre en utilisant l'anglais des années 1980.
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
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
- Dans la console Google Cloud, activez l'API Google Calendar :
- 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 :
- Cliquez sur Menu ☰ > API et services > Identifiants.
- Cliquez sur + Créer des identifiants, puis sélectionnez Clé API.
- Attendez la fin de l'opération.
- 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
- 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. - Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.
- Cliquez sur Modifier la source.
- Remplacez l'intégralité du contenu des fichiers
index.js
etpackage.json
par ceux de votre environnement de développement local. - Ouvrez le fichier
env.js
et procédez comme suit : - Ajoutez googleApiKey aux champs exportés.
export const env = {
...
googleApiKey: 'your-google-api-key',
};
- 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é.
- Cliquez sur Enregistrer et redéployer.
- Attendez que le déploiement de la révision soit terminé.
Essayer
- Dans Google Agenda, procédez comme suit :
- Sous Autres agendas, cliquez sur +, puis sur Créer un agenda.
- Définissez Nom sur
My Public Calendar
. - Cliquez sur Créer l'agenda.
- Attendez la fin de l'opération.
- Sous Paramètres de mes agendas, sélectionnez le nouvel agenda Mon agenda public.
- Sous Autorisations d'accès aux événements, sélectionnez Rendre disponible publiquement, puis cliquez sur OK dans la boîte de dialogue Avertissement.
- 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.
- Sous Intégrer l'agenda, copiez la valeur du champ ID de l'agenda dans le presse-papiers.
- Cliquez sur la flèche vers la gauche en haut à gauche pour quitter Paramètres.
- 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. - Dans l'espace de message privé avec l'application Chat dans Google Chat, saisissez
When is the next meeting?
, puis appuyez surenter
. L'application doit demander une précision, car le calendrier auquel il est fait référence n'est pas clair.
- 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.
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
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
- 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. - Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.
- Cliquez sur Modifier la source.
- Remplacez l'intégralité du contenu des fichiers
index.js
etpackage.json
par ceux de votre environnement de développement local. - Cliquez sur Enregistrer et redéployer.
- Attendez que le déploiement de la révision soit terminé.
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.
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
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
- 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 :
- Cliquez sur Menu ☰ > IAM et administration > Comptes de service.
- Cliquez sur le compte de service nommé Compte de service Compute par défaut.
- Développez la section Paramètres avancés.
- Copiez l'ID client dans le presse-papiers.
- Créer et télécharger une clé privée pour le compte de service Cloud Run par défaut
- Cliquez sur Menu ☰ > IAM et administration > Comptes de service.
- Cliquez sur le compte de service nommé Compte de service Compute par défaut.
- Sélectionnez l'onglet Clés, cliquez sur Ajouter une clé, puis sur Créer une clé.
- Sélectionnez JSON, puis cliquez sur Créer.
- 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
- 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. - Accédez à l'onglet Source de la page d'informations sur le service de fonction Google Cloud Run.
- Cliquez sur Modifier la source.
- Cliquez sur ➕, saisissez
credentials.json
, puis cliquez sur ✔️ pour créer le fichier de ressources manquant. - 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. - Remplacez l'intégralité du contenu du fichier
index.js
par celui de votre environnement de développement local. - Ouvrez le fichier
env.js
et définissez la valeur de model surgemini-2.0-flash-preview-image-generation
.
...
model: 'gemini-2.0-flash-preview-image-generation',
...
- Cliquez sur Enregistrer et redéployer.
- Attendez que le déploiement de la révision soit terminé.
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.
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 :
- Cliquez sur Menu ☰ > IAM et administration > Paramètres.
- Cliquez sur Arrêter.
- Saisissez l'ID du projet.
- Cliquez sur Arrêter quand même.
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 :
- Chaîne YouTube pour les développeurs Google Workspace : bienvenue !
- Site Web de documentation destinée aux développeurs pour Google Chat
- Dépôt GitHub pour tous les exemples Google Chat
- Centre pour les développeurs Google Cloud
- IA générative sur Vertex AI
- Modèles d'IA générative
- Réglage des modèles d'IA générative
- Entraînement personnalisé de l'IA générative