Grundlegende KI-Konzepte in Google Chat-Apps einbinden

1. Hinweis

Was sind Google Chat-Apps mit KI?

Google Chat-Apps mit KI bieten folgende Möglichkeiten:

• Sie können Ihre Dienste und Ressourcen in Google Chat einbinden, damit Nutzer Informationen abrufen und Aktionen ausführen können, ohne die Unterhaltung zu verlassen.
• Integration mit generativen KI-Modellen zum Erstellen, Suchen und Bearbeiten von Daten wie Text oder Bildern
• Unterstützen Sie eine agentenbasierte Erfahrung, indem Sie Konzepte für konversationelle KI für praktischere, natürlichere, anspruchsvollere und hilfreichere Interaktionen anwenden.

Warum sollten Google Chat-Apps mit KI integriert werden?

Die typischen Anwendungsfälle lassen sich in die folgenden Kategorien einteilen:

• Erstellung und Bearbeitung von Inhalten Marketingtexte, Beiträge für soziale Medien, realistische Bilder oder Musik erstellen oder bei der Erstellung von Videoinhalten helfen.
• Datensuche und ‑analyse Wichtige Informationen aus einer unstrukturierten Wissensdatenbank extrahieren, lange Texte zusammenfassen, Inhalte klassifizieren oder Sprachen mit erhöhter Genauigkeit und Geschwindigkeit übersetzen
• Unterhaltung Führen Sie natürliche, informative und effiziente Unterhaltungen wie mit einem Assistenten.
• Aufgabenautomatisierung: Aktionen im Namen des Nutzers ausführen, z. B. einen neuen Kalendertermin erstellen, ein Dokument senden oder ein Ticket in einem externen System verwalten.

Die Möglichkeit, diese Funktionen direkt in die vertraute Oberfläche von Google Chat zu integrieren, ist eine große Chance für alle, die die Nutzerfreundlichkeit und Produktivität ihrer Nutzer verbessern möchten.

Voraussetzungen

• Grundlegende Kenntnisse zu Google Cloud und Node.js.
• Grundkenntnisse zu Google Chat-Apps, einschließlich Nachrichten, Karten, Authentifizierung, APIs und HTTP-Endpunkten.

Umfang

In diesem Codelab erstellen Sie acht minimalistische Google Chat-Apps, in die grundlegende KI-Konzepte integriert sind. So wird gezeigt, wie sie in realen Anwendungen eingesetzt werden können. Sie sind alle als Google Workspace-Add‑ons konzipiert und basieren auf der HTTP-Architektur:

Das funktioniert so:

1. Ein Nutzer sendet eine Nachricht in Google Chat an eine Chat-App, entweder als Direktnachricht oder in einem Chat-Gruppenbereich.
2. Eine HTTP-Anfrage wird an den Webserver gesendet, der als Node.js Google Cloud Run-Funktion mit der Chat-App-Logik ausgeführt wird.
3. Optional kann die Chat-App-Logik in Google Workspace-Dienste (z. B. Google Kalender und Google Tabellen), andere Google-Dienste (z. B. Google Maps, YouTube und Vertex AI) oder andere Webdienste (z. B. ein Projektmanagementsystem oder ein Ticketing-Tool) eingebunden werden.
4. Der Webserver sendet eine HTTP-Antwort an den Chat App-Dienst in Chat zurück.
5. Die Antwort wird an den Nutzer gesendet.
6. Optional kann die Chat-App die Chat API aufrufen, um asynchron Nachrichten zu posten oder andere Vorgänge auszuführen.

Die Node.js Google Cloud Run-Funktion jeder Google Chat-App enthält eine eigene Version der folgenden Quelldateien, um die erforderlichen Aktionen in den Schritten 3 und 6 oben auszuführen:

• package.json: Ein zentrales Manifest, das als Blaupause für das Node.js-Projekt dient. Sie wird verwendet, um die Metadaten, Abhängigkeiten und Skripts zu definieren.
• env.js: Ein Skript, das für die Ausführung erforderliche Konstanten festlegt. Sie sollte je nach Umgebung und Konfiguration bearbeitet werden.
• index.js: Das Hauptskript, das die Logik für die Google Chat-Interaktionsereignisse verarbeitet. In diesem Codelab wird nur der Nachrichtentyp „message“ implementiert. In der Praxis würden in der Regel auch andere Typen wie „card click“, „slash command“ und „dialog“ verwendet.

Prompt-App

Diese App verwendet ein Gemini-Modell, um mit Nutzern in ihrer natürlichen Sprache zu kommunizieren und prägnante Antworten in einfachem Text zu geben.

App formatieren

Diese App basiert auf Prompt app und bietet Unterstützung für Rich-Text-Antworten, die dem spezifischen Textformat von Google Chat-Nachrichten entsprechen.

App fundieren

Diese App basiert auf Format app und bietet Unterstützung für das Google-Suchtool. Außerdem werden Quellen in Antwortnachrichten mit Karten zurückgegeben.

MCP-App

Diese App basiert auf Format app und bietet Unterstützung für das Model Context Protocol (MCP) von Google Workspace Developer Assist.

App mit mehreren Durchgängen

Diese App basiert auf Format app und bietet Unterstützung für das Konversationsgedächtnis mit einer Google Cloud Firestore-Datenbank.

Benutzerdefinierte Tool-App

Diese App basiert auf der Multi-turn app und bietet Unterstützung für ein benutzerdefiniertes Tool zum Funktionsaufruf, das die Google Workspace Calendar API auf Grundlage der vom Nutzer bereitgestellten Informationen aufruft.

Streaming-App

Diese App nutzt ein Gemini-Modell, um Kurzgeschichten basierend auf von Nutzern bereitgestellten Themen zu generieren. Die Google Chat API wird verwendet, um Ergebnisse und Status in Nachrichten zu senden, wenn Fortschritte erzielt werden.

Multimodale App

Diese App verwendet ein Gemini-Modell, um Bilder auf Grundlage von Textanweisungen von Nutzern zu bearbeiten. Google Chat-APIs werden verwendet, um die Bilder als Nachrichtenanhänge herunter- und hochzuladen.

Lerninhalte

• Die grundlegenden KI-Konzepte sind für Google Chat-Apps und deren Anwendung relevant.
• So greifen Sie mit dem Google Gen AI SDK auf Vertex AI zu:
• Google Workspace APIs verwenden, um ansprechende und leistungsstarke Funktionen zu entwickeln.
• Cloud Run zum Erstellen skalierbarer Google Chat-Apps nutzen

Das brauchen Sie

• Die Kurzanleitung zum Erstellen einer HTTP-Google Chat-App mit Node.js wurde abgeschlossen. Dieses Codelab baut auf dem resultierenden Google Cloud-Projekt, der Google Chat-App und der Google Cloud Run-Funktion auf.

2. Einrichten

Ressourcen initialisieren und darauf zugreifen

In diesem Abschnitt greifen Sie über Ihren bevorzugten Webbrowser auf die folgenden Ressourcen zu und konfigurieren sie.

Hinweis:Wir empfehlen, diese Ressourcen griffbereit zu halten, da Sie sie in diesem Codelab verwenden.

Konfiguration der Google Chat API

Öffnen Sie die Google Cloud Console in einem neuen Tab und folgen Sie dieser Anleitung:

1. Wählen Sie Ihr Projekt aus.
2. Suchen Sie im Google Cloud-Suchfeld nach „Google Chat API“, klicken Sie dann auf Google Chat API, auf Verwalten und auf Konfiguration.

Google Chat API-Konfiguration aufrufen

3. Legen Sie für App-Name und Beschreibung Gen AI App fest.
4. Klicken Sie auf Speichern.

Google Chat-Gruppenbereich

Öffnen Sie Google Chat in einem neuen Tab und folgen Sie dann dieser Anleitung:

1. Öffnen Sie einen Direktnachrichtenbereich mit der Chat App, falls noch nicht geschehen.
2. Geben Sie Hello ein und drücken Sie enter. Die Chat-App sollte mit Ihrem Namen und Avatarbild antworten.

Google Cloud Run-Funktionsdienst

Öffnen Sie die Google Cloud Console in einem neuen Tab und folgen Sie dieser Anleitung:

1. Wählen Sie Ihr Projekt aus.
2. Klicken Sie auf das Dreistrich-Menü ☰ > Cloud Run > Dienste.

Zu Cloud Run > Dienste

3. Klicken Sie in der Liste der Dienste auf addonchatapp und öffnen Sie dann den Tab Quelle.

Quellcode und Ressourcen lokal herunterladen

Achtung:Der Code wurde stark vereinfacht, um die Konzepte in diesem Codelab zu veranschaulichen. Wenn Sie diesen Code in einer Produktions-App wiederverwenden möchten, müssen Sie Fehler abfangen, gründlich testen und Best Practices befolgen.

1. Laden Sie dieses GitHub-Repository herunter.

ZIP-Datei herunterladen

2. Öffnen Sie in Ihrer bevorzugten lokalen Entwicklungsumgebung das Verzeichnis node/chat/gen-ai-apps.

3. Prompt-App

Diese App nutzt Gemini auf Vertex AI, um mit Nutzern in ihrer natürlichen Sprache zu kommunizieren und prägnante Antworten in einfachem Text zu geben. Die Implementierung basiert auf dem Google Gen AI SDK für Node.js.

Konzepte für Rezensionen

Natürliche Sprache

Jede Sprache, die von Menschen für die alltägliche Kommunikation gesprochen oder geschrieben wird, im Gegensatz zu künstlichen oder computerbasierten Sprachen.

Cloud Run Functions

Cloud Run-Funktionen eignen sich hervorragend zum Erstellen serverloser Backends, zur Datenverarbeitung in Echtzeit und zum Erstellen intelligenter Apps. Es gibt keine Server, die bereitgestellt, verwaltet, gepatcht oder aktualisiert werden müssen. Sie werden automatisch skaliert und sind hochverfügbar und fehlertolerant.

Aufforderungen

Prompting bezieht sich auf die Technik, Eingaben (Prompts) zu erstellen, um ein generatives KI-Modell dazu zu bringen, eine gewünschte Ausgabe zu generieren. Dazu gehört in der Regel, Fragen sorgfältig zu formulieren, Kontext bereitzustellen, Anweisungen zu geben oder Beispiele zu liefern, um spezifische und relevante Antworten vom Modell zu erhalten.

Vertex AI

Vertex AI bietet alles, was Sie zum Erstellen und Verwenden von generativer KI benötigen – von KI-Lösungen über die Suche und Unterhaltung bis hin zu über 130 Foundation Models bis hin zu einer einheitlichen KI-Plattform.

Gemini

Gemini ist ein multimodales LLM von Google, auf das über Vertex AI zugegriffen werden kann. Sie hilft Menschen, ihr volles Potenzial zu entfalten, ihre Fantasie anzuregen, ihre Neugier zu wecken und ihre Produktivität zu steigern.

Google Gen AI SDK

Das Google Gen AI SDK wurde für Entwickler entwickelt, um Anwendungen mit Gemini zu erstellen. Es bietet eine einheitliche Schnittstelle, die sowohl mit der Gemini Developer API als auch mit Vertex AI kompatibel ist. Es enthält Clientbibliotheken in Python, Go, Node.js und Java.

Ablauf der Überprüfung

Quellcode prüfen

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"
},
...

Vertex AI API aktivieren

1. Aktivieren Sie in der Google Cloud Console die Vertex AI API:

Vertex AI API aktivieren

2. Klicken Sie auf Menü ☰ > APIs & Dienste > Aktivierte APIs & Dienste und prüfen Sie, ob Vertex AI API in der Liste enthalten ist.

Zu „APIs & Dienste“ > „Aktivierte APIs & Dienste“

Google Cloud Run Node.js-Funktion aktualisieren

1. Wechseln Sie in Ihrer lokalen Entwicklungsumgebung in das Verzeichnis node/chat/gen-ai-apps/1-prompt. Sie enthält den gesamten Quellcode und alle Ressourcen.
2. Öffnen Sie env.js in einem Editor und legen Sie Folgendes fest:
3. projectID: Die ID Ihres Google Cloud-Projekts. Sie finden sie auf der Begrüßungsseite der Google Cloud Console.

Zur Google Cloud Console-Startseite

2. location: Die Region Ihres Google Cloud Run-Funktionsdienstes. Sie kann auf der Detailseite des Google Cloud Run-Funktionsdienstes abgerufen werden.

Zu Cloud Run > Dienste

3. model: Das zu verwendende Modell. Alle verfügbaren Modelle finden Sie in der Vertex AI-Dokumentation. Standardmäßig wird das Modell „Flash“ für eine schnelle und kostengünstige Ausführung verwendet.

Zur Vertex AI-Dokumentation

3. Rufen Sie den Tab Quelle auf der Seite mit den Google Cloud Run-Funktionsdienstdetails auf.

Zu Cloud Run > Dienste

4. Klicken Sie auf Quelle bearbeiten.
5. Legen Sie für Funktionseinstiegspunkt die Einstellung gen-ai-app fest.
6. Klicken Sie auf ➕, geben Sie env.js ein und klicken Sie auf ✔️, um die fehlende Quelldatei zu erstellen.
7. Ersetzen Sie den gesamten Inhalt der Dateien index.js, env.js und package.json durch den Inhalt in Ihrer lokalen Entwicklungsumgebung.
8. Klicken Sie auf Speichern und wieder bereitstellen.
9. Warten Sie, bis die Bereitstellung der Überarbeitung abgeschlossen ist.

Ausprobieren

1. Geben Sie im Direktnachrichtenbereich mit der Chat-App in Google Chat Hello, how are you? ein und drücken Sie die enter-Taste. Die App sollte gemäß unseren Anweisungen im Prompt präzise in Nur-Text antworten.

2. Geben Sie im Direktnachrichtenbereich mit der Chat-App in Google Chat Bonjour comment allez-vous? ein und drücken Sie die enter-Taste. Die App sollte gemäß unserer Anleitung im Prompt auf Französisch antworten.

4. App formatieren

Diese App basiert auf Prompt app und bietet Unterstützung für Rich-Text-Antworten, die dem Google Chat-Nachrichtenformat entsprechen. Die Anleitung im Prompt wird mit einer umfassenden Beschreibung der verschiedenen Optionen aktualisiert, die das Modell verwenden kann.

Konzepte für Rezensionen

Google Chat-SMS

Google Chat-SMS unterstützen verschiedene Formatierungsoptionen, um klarere und ausdrucksstärkere Nachrichten direkt in der Google Chat-Oberfläche zu ermöglichen. Sie basieren auf bestimmten Markdown-Regeln, mit denen Sie Text fett, kursiv oder durchgestrichen formatieren oder Hyperlinks erstellen können.

Ablauf der Überprüfung

Quellcode prüfen

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}`;
...
};
...

Google Cloud Run Node.js-Funktion aktualisieren

1. Wechseln Sie in Ihrer lokalen Entwicklungsumgebung in das Verzeichnis node/chat/gen-ai-apps/2-format. Sie enthält den gesamten Quellcode und alle Ressourcen.
2. Rufen Sie den Tab Quelle auf der Seite mit den Google Cloud Run-Funktionsdienstdetails auf.

Zu Cloud Run > Dienste

3. Klicken Sie auf Quelle bearbeiten.
4. Ersetzen Sie den gesamten Inhalt der Datei index.js durch den Inhalt in Ihrer lokalen Entwicklungsumgebung.
5. Klicken Sie auf Speichern und wieder bereitstellen.
6. Warten Sie, bis die Bereitstellung der Überarbeitung abgeschlossen ist.

Ausprobieren

1. Geben Sie im Direktnachrichtenbereich mit der Chat-App in Google Chat Showcase all formatting options you have with one paragraph each ein und drücken Sie die enter-Taste. Die App sollte mit Formatierungsbeispielen antworten, die auf unseren Anweisungen im Prompt basieren.

2. Geben Sie im Direktnachrichtenbereich mit der Chat-App in Google Chat What are Google Chat apps? What's great about them? ein und drücken Sie die enter-Taste. Die App sollte bei Bedarf mit Formatierung antworten.

5. Ground App

Diese App basiert auf Format app und bietet zusätzliche Unterstützung für die Fundierung und Rückgabe von Quellen. Es wird das Google-Suchtool ausgeführt und es werden Karten mit Links zu Antworten angehängt.

Konzepte

Fundierung

Fundierung ist die Technik, Modelle mit Informationsquellen zu verbinden. Sie wird häufig in praktischen Anwendungen eingesetzt, um die Genauigkeit und Relevanz der generierten Inhalte zu verbessern, indem auf reale Daten verwiesen wird. So wird verhindert, dass das Modell halluziniert oder faktisch falsche Informationen liefert.

Google Suche-Tool

Das Google Suche-Tool verbessert die Fundierung, da Modelle damit im Web nach Echtzeitinformationen suchen können. So sind die Antworten präzise und aktuell.

Google Workspace-Kartenframework

Mit dem Karten-Framework in Google Workspace können Entwickler umfangreiche, interaktive Benutzeroberflächen erstellen. Damit lassen sich übersichtliche und ansprechende Karten erstellen, die Text, Bilder, Schaltflächen und andere Widgets enthalten können. Diese Karten verbessern die Nutzerfreundlichkeit, da sie strukturierte Informationen liefern und schnelle Aktionen direkt im Gespräch ermöglichen.

Ablauf der Überprüfung

Quellcode prüfen

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
}}}}});
...

Google Cloud Run Node.js-Funktion aktualisieren

1. Wechseln Sie in Ihrer lokalen Entwicklungsumgebung in das Verzeichnis node/chat/gen-ai-apps/3-ground. Sie enthält den gesamten Quellcode und alle Ressourcen.
2. Rufen Sie den Tab Quelle auf der Seite mit den Google Cloud Run-Funktionsdienstdetails auf.

Zu Cloud Run > Dienste

3. Klicken Sie auf Quelle bearbeiten.
4. Ersetzen Sie den gesamten Inhalt der Datei index.js durch den Inhalt in Ihrer lokalen Entwicklungsumgebung.
5. Klicken Sie auf Speichern und wieder bereitstellen.
6. Warten Sie, bis die Bereitstellung der Überarbeitung abgeschlossen ist.

Ausprobieren

Geben Sie im Direktnachrichtenbereich mit der Chat-App in Google Chat What's the world population? ein und drücken Sie die enter-Taste. Die App sollte antworten, indem sie Quelllinks in einer Karte anhängt.

6. MCP-App

Diese App basiert auf dem Format app und bietet Unterstützung für Tools, die von einem MCP-Server (Model Context Protocol) bereitgestellt werden, der remote gehostet wird. Es ist mit dem Google Workspace Developer Assist MCP verbunden, das Tools für den Zugriff auf und die Suche in der Google Workspace-Entwicklerdokumentation bietet.

Konzepte für Rezensionen

Model Context Protocol (MCP)

Das Model Context Protocol ist ein Open-Source-Framework, mit dem Modelle auf standardisierte Weise in externe Dienste eingebunden werden können. Modelle können verschiedene Tools programmatisch erkennen, verstehen und mit ihnen interagieren. So können sie ihre Fähigkeiten erweitern, Aktionen in der realen Welt ausführen und auf aktuelle Informationen zugreifen.

MCP TypeScript SDK

Das TypeScript SDK implementiert die vollständige MCP-Spezifikation und vereinfacht so die Erstellung von MCP-Clients, die eine Verbindung zu einem beliebigen MCP-Server herstellen. Außerdem ermöglicht sie die Entwicklung von MCP-Servern, die Zugriff auf Ressourcen, Prompts und Tools bieten.

Ablauf der Überprüfung

Quellcode prüfen

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"
},
...

Google Cloud Run Node.js-Funktion aktualisieren

1. Wechseln Sie in Ihrer lokalen Entwicklungsumgebung in das Verzeichnis node/chat/gen-ai-apps/4-mcp. Sie enthält den gesamten Quellcode und alle Ressourcen.
2. Rufen Sie den Tab Quelle auf der Seite mit den Google Cloud Run-Funktionsdienstdetails auf.

Zu Cloud Run > Dienste

3. Klicken Sie auf Quelle bearbeiten.
4. Ersetzen Sie den gesamten Inhalt der Dateien index.js und package.json durch den Inhalt Ihrer lokalen Entwicklungsumgebung.
5. Klicken Sie auf Speichern und wieder bereitstellen.
6. Warten Sie, bis die Bereitstellung der Überarbeitung abgeschlossen ist.

Ausprobieren

1. Geben Sie im Direktnachrichtenbereich mit der Chat-App in Google Chat What can you do for me? ein und drücken Sie die enter-Taste. In der App sollte beschrieben werden, was sie leisten kann (MCP-Tools).

2. Geben Sie im Direktnachrichtenbereich mit der Chat-App in Google Chat I would like to get the latest official documentation for the Google Sheets API append values ein und drücken Sie die enter-Taste. Die App sollte mit der angeforderten Dokumentation antworten (mithilfe von MCP-Tools).

7. App mit mehreren Schritten

Diese App basiert auf Format app und bietet Unterstützung für das Gesprächsgedächtnis, indem der Verlauf von Chat-Interaktionen verfolgt wird. So wird die Nutzung natürlicher, intelligenter und personalisierter. Die App verwendet die Standard-Google Cloud Firestore-Datenbank, die mit dem Google Cloud-Projekt des Entwicklers verknüpft ist, zum Speichern von Daten.

Konzepte

Mehrere Züge

Das Konzept Multi-Turn bezieht sich auf die Fähigkeit eines Modells, den Kontext und die Kontinuität über mehrere Interaktionen und Unterhaltungen hinweg aufrechtzuerhalten. Sie ist eine unverzichtbare Funktion, um komplexe Unterhaltungen, anspruchsvolle KI-basierte Funktionen und eine natürliche Nutzererfahrung zu ermöglichen.

Google Cloud Firestore

Google Cloud Firestore ist eine flexible, skalierbare NoSQL-Cloud-Datenbank für die Mobil-, Web- und Serverentwicklung. Daten werden in Dokumenten gespeichert, die in Sammlungen organisiert sind. Außerdem sind Echtzeitsynchronisierung und Offlineunterstützung möglich.

Ablauf der Überprüfung

Quellcode prüfen

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"
},
...

Google Cloud Firestore API aktivieren

1. Aktivieren Sie in der Google Cloud Console die Google Cloud Firestore API:

Google Cloud Firestore API aktivieren

2. Klicken Sie auf Menü ☰ > APIs und Dienste > Aktivierte APIs und Dienste und prüfen Sie, ob Cloud Firestore API in der Liste enthalten ist.

Zu „APIs & Dienste“ > „Aktivierte APIs & Dienste“

Cloud Firestore-Datenbank erstellen

1. Klicken Sie in der Google Cloud Console auf Menü ☰ > Firestore.

Firestore aufrufen

2. Klicken Sie auf Firestore-Datenbank erstellen.
3. Übernehmen Sie die Standardkonfiguration und klicken Sie auf Datenbank erstellen.

Google Cloud Run Node.js-Funktion aktualisieren

1. Wechseln Sie in Ihrer lokalen Entwicklungsumgebung in das Verzeichnis node/chat/gen-ai-apps/5-multi-turn. Sie enthält den gesamten Quellcode und alle Ressourcen.
2. Rufen Sie den Tab Quelle auf der Seite mit den Google Cloud Run-Funktionsdienstdetails auf.

Zu Cloud Run > Dienste

3. Klicken Sie auf Quelle bearbeiten.
4. Ersetzen Sie den gesamten Inhalt der Dateien index.js und package.json durch den Inhalt Ihrer lokalen Entwicklungsumgebung.
5. Klicken Sie auf Speichern und wieder bereitstellen.
6. Warten Sie, bis die Bereitstellung der Überarbeitung abgeschlossen ist.

Ausprobieren

1. Geben Sie im Direktnachrichtenbereich mit der Chat-App in Google Chat Can you speak with the English from the 80's for now on? ein und drücken Sie die enter-Taste. Die App sollte positiv reagieren.

2. Geben Sie im Direktnachrichtenbereich mit der Chat-App in Google Chat Define what Google Chat apps are in one sentence ein und drücken Sie die enter-Taste. Die App sollte weiterhin mit dem Englisch der 1980er-Jahre antworten.

Hinweis:Diese Anwendung konzentriert sich auf die Demonstration von Interaktionen mit mehreren Durchgängen und enthält keine Funktionen zur Verwaltung des Chatverlaufs wie das Entfernen oder Bearbeiten von Daten, da diese nicht zum Kernkonzept gehören.

Wenn Sie den vom Modell verwendeten Chatverlauf anpassen möchten, können Sie das entsprechende Dokument des Nutzers in der Sammlung chats in Ihrer Google Cloud Firestore-Datenbank (Standard) direkt ändern.

Wenn Sie den Verlauf des Nutzers löschen müssen, gehen Sie so vor:

1. Klicken Sie in der Google Cloud Console auf Menü ☰ > Firestore.

Firestore aufrufen

2. Klicken Sie in der Datenbankliste auf (Standard).
3. Wählen Sie die Sammlung chats und dann das Dokument mit der Nutzer-ID aus.
4. Klicken Sie neben der Dokument-ID auf das Dreipunkt-Menü und dann auf Dokument löschen.
5. Klicken Sie im Bestätigungsdialogfeld auf Löschen.

8. App für benutzerdefinierte Tools

Diese App basiert auf Multi-turn app und bietet Unterstützung für ein benutzerdefiniertes Tool zum Funktionsaufruf, das auf der Google Workspace Calendar API basiert, um das nächste Ereignis aus einem öffentlichen Kalender abzurufen. Das Modell verwaltet alle Nutzerinteraktionen, einschließlich des Empfangs von Eingaben und der Bereitstellung von Ausgaben aus dem Tool. Die Anwendung ist jedoch weiterhin für die Ausführung der erforderlichen API-Aufrufe und die Bereitstellung von Ergebnissen für das Modell auf Anfrage verantwortlich. Die App verwendet einen Google API-Schlüssel, da zum Abrufen öffentlicher Kalenderdaten keine Nutzeranmeldedaten erforderlich sind.

Konzepte für Rezensionen

Funktionsaufrufe

Mit Funktionsaufrufen kann ein Modell erkennen, wann die Anfrage eines Nutzers durch ein externes Tool oder eine externe API erfüllt werden kann. Das Modell gibt dann die Parameter an, die zum Aufrufen dieses Tools erforderlich sind, und integriert externe Funktionen in seine Antworten.

Google Workspace APIs

Mit Google Workspace APIs können Entwickler ihre Anwendungen in verschiedene Google Workspace-Dienste einbinden. Diese APIs bieten programmatischen Zugriff auf Funktionen in Produkten wie Gmail, Chat, Kalender, Drive, Docs und Sheets. So lassen sich Automatisierungen, Datensynchronisierungen und benutzerdefinierte Workflows erstellen.

Ablauf der Überprüfung

Quellcode prüfen

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"
},
...

Calendar API aktivieren

1. Aktivieren Sie in der Google Cloud Console die Google Calendar API:

Google Calendar API aktivieren

2. Klicken Sie auf Menü ☰ > APIs und Dienste > Aktivierte APIs und Dienste und prüfen Sie, ob die Google Calendar API in der Liste enthalten ist.

Zu „APIs & Dienste“ > „Aktivierte APIs & Dienste“

Google API-Schlüssel erstellen

Gehen Sie in der Google Cloud Console so vor:

1. Klicken Sie auf das Menü ☰ > APIs & Dienste > Anmeldedaten.

Rufen Sie „APIs & Dienste“ > „Anmeldedaten“ auf.

2. Klicken Sie auf + Anmeldedaten erstellen und wählen Sie dann API-Schlüssel aus.
3. Warten Sie, bis der Vorgang abgeschlossen ist.
4. Suchen Sie im Bestätigungsdialogfeld das Textfeld Ihr API-Schlüssel und klicken Sie auf In die Zwischenablage kopieren.

Google Cloud Run Node.js-Funktion aktualisieren

1. Wechseln Sie in Ihrer lokalen Entwicklungsumgebung in das Verzeichnis node/chat/gen-ai-apps/6-custom-tool. Sie enthält den gesamten Quellcode und alle Ressourcen.
2. Rufen Sie den Tab Quelle auf der Seite mit den Google Cloud Run-Funktionsdienstdetails auf.

Zu Cloud Run > Dienste

3. Klicken Sie auf Quelle bearbeiten.
4. Ersetzen Sie den gesamten Inhalt der Dateien index.js und package.json durch den Inhalt Ihrer lokalen Entwicklungsumgebung.
5. Öffnen Sie die Datei env.js und gehen Sie so vor:
6. googleApiKey zu den exportierten Feldern hinzufügen

export const env = {
 ...
 googleApiKey: 'your-google-api-key',
};

2. Ersetzen Sie your-google-api-key durch den Google API-Schlüssel, den Sie im vorherigen Schritt kopiert haben. Er kann auf der Seite „Google Cloud-Anmeldedaten“ abgerufen werden, indem Sie auf Schlüssel anzeigen klicken.

Rufen Sie „APIs & Dienste“ > „Anmeldedaten“ auf.

6. Klicken Sie auf Speichern und wieder bereitstellen.
7. Warten Sie, bis die Bereitstellung der Überarbeitung abgeschlossen ist.

Ausprobieren

1. Gehen Sie in Google Kalender so vor:
2. Klicken Sie unter Weitere Kalender auf + und dann auf Neuen Kalender einrichten.
3. Legen Sie als Name My Public Calendar fest.
4. Klicken Sie auf Kalender erstellen.
5. Warten Sie, bis der Vorgang abgeschlossen ist.
6. Wählen Sie unter Einstellungen für meine Kalender den neu erstellten Kalender Mein öffentlicher Kalender aus.
7. Wählen Sie unter Zugriffsberechtigungen für Termine die Option Öffentlich freigeben aus und klicken Sie dann im Dialogfeld Warnung auf OK.
8. Wählen Sie unter Zugriffsberechtigungen für Termine im Drop-down-Menü neben der Option Öffentlich freigeben die Option Alle Termindetails ansehen aus.
9. Kopieren Sie unter Kalender einbinden den Wert des Felds Kalender-ID in die Zwischenablage.
10. Klicken Sie oben links auf den Pfeil nach links, um die Einstellungen zu verlassen.
11. Klicken Sie auf den Kalender, um einen neuen Termin für morgen zu erstellen, geben Sie Important meeting ein, wählen Sie im Drop-down-Menü Mein öffentlicher Kalender aus und klicken Sie dann auf Speichern.
12. Geben Sie im Direktnachrichtenbereich mit der Chat-App in Google Chat When is the next meeting? ein und drücken Sie die enter-Taste. Die App sollte eine Präzision anfordern, da nicht klar ist, auf welchen Kalender sich die Anfrage bezieht.

3. Fügen Sie im Direktnachrichtenbereich mit der Chat App in Google Chat die Kalender-ID ein, die Sie zuvor in die Zwischenablage kopiert haben, und drücken Sie die enter-Taste. Die App sollte mit Details zum zuvor erstellten Termin antworten.

9. Streaming-App

Diese App nutzt ein Gemini-Modell, um auf Grundlage von Themen, die von Nutzern bereitgestellt werden, 2‑minütige Geschichten zu generieren. Da es einige Zeit dauert, vollständige Antworten zu generieren, ruft die App das Modell im Streamingmodus auf und verwendet die Google Chat API, um Inhalte und Status in Nachrichten zu senden, sobald Fortschritte erzielt werden.

Konzepte für Rezensionen

Google Chat API

Mit der Google Chat API können Entwickler programmgesteuert mit Google Chat interagieren. So können sie Nachrichten senden, Gruppenbereiche erstellen und Mitglieder verwalten, um benutzerdefinierte Integrationen und Bots zu entwickeln.

Streaming

Streaming bezieht sich auf den Prozess, bei dem Daten in einem kontinuierlichen Fluss empfangen werden, anstatt darauf zu warten, dass die gesamte Antwort generiert wird. Beim Streaming von KI-Modellaufrufen können Anwendungen Teilergebnisse für Nutzer anzeigen, sobald sie verfügbar sind. Das verbessert die wahrgenommene Leistung und Nutzerfreundlichkeit, insbesondere bei längeren Generierungsaufgaben. Das ist besonders wichtig für generative KI-Modelle, bei denen es lange dauern kann, bis eine vollständige Ausgabe erstellt wird.

Ablauf der Überprüfung

Quellcode prüfen

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"
},
...

Google Cloud Run Node.js-Funktion aktualisieren

1. Wechseln Sie in Ihrer lokalen Entwicklungsumgebung in das Verzeichnis node/chat/gen-ai-apps/7-stream. Sie enthält den gesamten Quellcode und alle Ressourcen.
2. Rufen Sie den Tab Quelle auf der Seite mit den Google Cloud Run-Funktionsdienstdetails auf.

Zu Cloud Run > Dienste

3. Klicken Sie auf Quelle bearbeiten.
4. Ersetzen Sie den gesamten Inhalt der Dateien index.js und package.json durch den Inhalt Ihrer lokalen Entwicklungsumgebung.
5. Klicken Sie auf Speichern und wieder bereitstellen.
6. Warten Sie, bis die Bereitstellung der Überarbeitung abgeschlossen ist.

Ausprobieren

Geben Sie im Direktnachrichtenbereich mit der Chat-App in Google Chat turtle ein und drücken Sie die enter-Taste. Die App sollte mit einer Bestätigungsnachricht antworten, die generierte Geschichte mit dem Status „In Bearbeitung“ anzeigen und eine Bestätigungsnachricht senden, wenn die Geschichte fertig ist.

10. Multimodale App

Diese App verwendet ein Modell, um Bilder auf Grundlage von Textanweisungen von Nutzern zu bearbeiten. Sowohl die Nutzer als auch die App fügen ihre Bilder als Google Chat-Nachrichtenanhänge hinzu, um sie auszutauschen. Die App verwendet Google Chat-APIs, um Bilder programmgesteuert herunter- und hochzuladen.

Hinweis:Das Hochladen von Anhängen mit App-Authentifizierung wird in der Google Chat API zum Zeitpunkt der Erstellung dieses Dokuments nicht unterstützt.

Als Workaround verwendet die App die Identitätsübernahme des Nutzers, um die Ausgabe der Anlage hochzuladen und die Antwort mit der Anlage zu senden. Das ist nicht ideal. Dazu muss die domainweite Delegation für das Cloud Run-Standarddienstkonto aktiviert und Anmeldedaten für die Cloud Run-Funktion verfügbar gemacht werden.

Öffentliches Problem

Warnung:Für die Implementierung des Workarounds wird der Einfachheit halber ein exportierter Dienstkontoschlüssel verwendet. Der Export eines privaten Schlüssels wird in der Produktion nicht empfohlen, da er nicht an einem unsicheren Ort wie der Quellcodeverwaltung gespeichert werden sollte.

Weitere Informationen zu sicheren Dienstkontoimplementierungen und Best Practices finden Sie unter Wann sollten Dienstkonten verwendet werden?.

Konzepte für Rezensionen

Google Chat-Nachrichtenanhang

Google Chat-Nachrichtenanhänge sind Dateien wie Bilder oder Videos, die in eine Google Chat-Nachricht hochgeladen werden. Diese Anhänge können programmatisch verwaltet werden, sodass Anwendungen direkt in Unterhaltungen mit Rich Media interagieren können.

Domainweite Delegation

Mit der domainweiten Delegierung kann ein Dienstkonto die Identität von Nutzern in einer Google Workspace-Domain übernehmen. So können Anwendungen Aktionen im Namen dieser Nutzer ohne direkte Autorisierung ausführen. Das ist nützlich für Apps, die im Kontext des Nutzers auf Nutzerdaten zugreifen oder Aktionen ausführen müssen (z. B. Anhänge in Google Chat hochladen), auch wenn der Nutzer nicht aktiv anwesend ist. Dazu wird dem Dienstkonto ein umfassender Zugriff auf die gesamte Domain gewährt.

Ablauf der Überprüfung

Quellcode prüfen

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!'
 }}}}});
});
...

Dienstkonto konfigurieren und privaten Schlüssel exportieren

1. Delegieren Sie das Cloud Run-Standarddienstkonto, um Google Chat-Nachrichten für Nutzer zu verwalten. Folgen Sie der Anleitung mit dem Bereich https://www.googleapis.com/auth/chat.messages. So rufen Sie die Client-ID des Cloud Run-Standarddienstkontos ab:
2. Klicken Sie auf das Menü ☰ > IAM & Verwaltung > Dienstkonten.

Zur Seite „IAM & Verwaltung > Dienstkonten“

2. Klicken Sie auf das Dienstkonto mit dem Namen Compute-Standarddienstkonto.
3. Maximieren Sie den Abschnitt Erweiterte Einstellungen.
4. Kopieren Sie die Client-ID in die Zwischenablage.
5. Neuen privaten Schlüssel für das Cloud Run-Standarddienstkonto erstellen und herunterladen
6. Klicken Sie auf das Menü ☰ > IAM & Verwaltung > Dienstkonten.

Zur Seite „IAM & Verwaltung > Dienstkonten“

2. Klicken Sie auf das Dienstkonto mit dem Namen Compute-Standarddienstkonto.
3. Wählen Sie den Tab Schlüssel aus, klicken Sie auf Schlüssel hinzufügen und dann auf Neuen Schlüssel erstellen.
4. Wählen Sie JSON aus und klicken Sie auf Erstellen.
5. Ihr neues öffentliches/privates Schlüsselpaar wird generiert und als neue Datei auf Ihren Computer heruntergeladen. Speichern Sie die heruntergeladene JSON-Datei und kopieren Sie ihren Inhalt in die Zwischenablage. Diese Datei ist die einzige Kopie dieses Schlüssels. Informationen dazu, wie Sie den Schlüssel sicher speichern, finden Sie unter Dienstkontoschlüssel verwalten.

Google Cloud Run Node.js-Funktion aktualisieren

1. Wechseln Sie in Ihrer lokalen Entwicklungsumgebung in das Verzeichnis node/chat/gen-ai-apps/8-multimodal. Sie enthält den gesamten Quellcode und alle Ressourcen.
2. Rufen Sie den Tab Quelle auf der Seite mit den Google Cloud Run-Funktionsdienstdetails auf.

Zu Cloud Run > Dienste

3. Klicken Sie auf Quelle bearbeiten.
4. Klicken Sie auf ➕, geben Sie credentials.json ein und klicken Sie auf ✔️, um die fehlende Ressourcendatei zu erstellen.
5. Fügen Sie den Inhalt der JSON-Datei, die Sie im vorherigen Schritt heruntergeladen haben, in die neu erstellte Datei credentials.json ein.
6. Ersetzen Sie den gesamten Inhalt der Datei index.js durch den Inhalt in Ihrer lokalen Entwicklungsumgebung.
7. Öffnen Sie die Datei env.js und legen Sie den Wert von model auf gemini-2.0-flash-preview-image-generation fest.

...
model: 'gemini-2.0-flash-preview-image-generation',
...

8. Klicken Sie auf Speichern und wieder bereitstellen.
9. Warten Sie, bis die Bereitstellung der Überarbeitung abgeschlossen ist.

Jetzt ausprobieren

Laden Sie im Direktnachrichtenbereich mit der Chat App in Google Chat ein Porträtbild von sich selbst im PNG-Format hoch, geben Sie Change the background color to blue ein und drücken Sie die enter-Taste. Die App sollte mit einer Version des Bildes mit blauem Hintergrund und einer Bestätigungsmeldung antworten.

11. Bereinigen

Google Cloud-Projekt löschen

Damit Ihrem Google Cloud-Konto die in diesem Codelab verwendeten Ressourcen nicht in Rechnung gestellt werden, empfehlen wir, das Google Cloud-Projekt zu löschen.

Achtung: Das Löschen eines Google Cloud-Projekts hat folgende Auswirkungen:

• Alle Inhalte des Projekts werden gelöscht. Wenn Sie für dieses Codelab ein bestehendes Projekt verwendet haben, werden auch alle anderen im Rahmen des Projekts erstellten Daten gelöscht.
• Benutzerdefinierte Projekt-IDs gehen verloren. Beim Erstellen dieses Projekts haben Sie möglicherweise eine benutzerdefinierte Projekt-ID erstellt, die Sie weiterhin verwenden möchten. Damit die URLs, die die Projekt-ID verwenden, z. B. eine URL auf appspot.com, erhalten bleiben, sollten Sie ausgewählte Ressourcen innerhalb des Projekts löschen, statt das gesamte Projekt.

Gehen Sie in der Google Cloud Console so vor:

1. Klicken Sie auf das Dreistrich-Menü ☰ > IAM & Verwaltung > Einstellungen.

Zu „IAM & Verwaltung“ > „Einstellungen“

2. Klicken Sie auf Beenden.
3. Geben Sie die Projekt-ID ein.
4. Klicken Sie auf Trotzdem beenden.

12. Glückwunsch

Glückwunsch! Sie haben Google Chat-Apps als Google Workspace-Add‑ons entwickelt, die grundlegende KI-Konzepte integrieren.

Nächste Schritte

In diesem Codelab werden nur minimalistische Anwendungsfälle vorgestellt. Es gibt jedoch viele Erweiterungsbereiche, die Sie in Ihren Google Chat-Apps berücksichtigen sollten, z. B.:

• Unterstützung anderer Medientypen wie Audio und Video.
• Integration mit anderen KI-Modellen, einschließlich benutzerdefinierter Modelle, die auf dedizierten Plattformen wie Vertex AI gehostet werden.
• Integration mit Agents, einschließlich benutzerdefinierter Agents, die auf dedizierten Plattformen wie Agentspace und Dialogflow CX gehostet werden.
• Verlassen Sie sich auf Feedbackschleifen und Klassifizierungen, um die Leistung zu überwachen und zu verbessern.
• Veröffentlichen Sie auf dem Marketplace, um Teams, Organisationen oder öffentlichen Nutzern die Nutzung zu ermöglichen.

Weitere Informationen

Für Entwickler sind viele Ressourcen verfügbar, z. B. YouTube-Videos, Dokumentationswebsites, Codebeispiele und Anleitungen:

• YouTube-Kanal für Google Workspace-Entwickler – Willkommen, Entwickler!
• Dokumentationswebsite für Entwickler für Google Chat
• GitHub-Repository für alle Google Chat-Beispiele
• Google Cloud Developer Center
• Generative KI in Vertex AI
• Modelle für generative KI
• Abstimmung von Modellen für generative KI
• Benutzerdefiniertes Training für generative KI