1. Antes de comenzar
¿Qué son las apps de Google Chat con IA?
Las apps de Google Chat con IA hacen lo siguiente:
- Llevan tus servicios y recursos a Google Chat, lo que permite que los usuarios obtengan información y realicen acciones sin abandonar la conversación.
- Integración con modelos de IA generativa para crear, buscar y editar datos, como texto o imágenes
- Admite una experiencia de agente aplicando conceptos de IA conversacional para interacciones más prácticas, naturales, sofisticadas y útiles.
¿Por qué deberías integrar las apps de Google Chat con IA?
Los casos de uso típicos se clasifican en las siguientes categorías:
- Creación y edición de contenido Genera textos de marketing, elabora publicaciones para redes sociales, crea imágenes realistas, compone música o ayuda en la creación de contenido de video.
- Búsqueda y análisis de datos Extrae información clave de una base de conocimiento no estructurada, resume textos extensos, clasifica contenido o traduce idiomas con mayor precisión y velocidad.
- Conversación. Participa en conversaciones naturales, informativas y eficientes como lo harías con un asistente.
- Automatización de tareas. Realizar acciones en nombre del usuario, como crear un evento de calendario nuevo, enviar un documento o administrar un ticket en un sistema externo
La capacidad de integrar estas funciones directamente en la interfaz que ya conocemos de Google Chat es una gran oportunidad para cualquiera que desee mejorar la experiencia y la productividad de sus usuarios.
Requisitos previos
- Conocimientos básicos de Google Cloud y Node.js
- Conocimientos básicos de las apps de Google Chat, incluidos los mensajes, las tarjetas, la autenticación, las APIs y los endpoints HTTP
Qué compilarás
En este codelab, compilarás ocho apps minimalistas de Google Chat que integran conceptos fundamentales de la IA para mostrar cómo se pueden aplicar en aplicaciones del mundo real. Todos se compilan como complementos de Google Workspace y se basan en la arquitectura HTTP:
Esto funciona de la siguiente manera:
- Un usuario envía un mensaje en Google Chat a una app de Chat, ya sea como mensaje directo o en un espacio de Chat.
- Se envía una solicitud HTTP al servidor web que se ejecuta como una función de Google Cloud Run de Node.js que contiene la lógica de la app de Chat.
- De manera opcional, la lógica de la app de Chat puede integrarse con los servicios de Google Workspace (como Calendar y Hojas de cálculo), otros servicios de Google (como Maps, YouTube y Vertex AI) o con otros servicios web (como un sistema de administración de proyectos o una herramienta de tickets).
- El servidor web envía una respuesta HTTP al servicio de la app de Chat en Chat.
- La respuesta se entrega al usuario.
- De manera opcional, la app de Chat puede llamar a la API de Chat para publicar mensajes de forma asíncrona o realizar otras operaciones.
Cada función de Google Cloud Run de Node.js de la app de Google Chat contiene su propia versión de los siguientes archivos fuente para realizar las acciones necesarias en los pasos 3 y 6 anteriores:
package.json
: Es un manifiesto central que actúa como plano del proyecto de Node.js. Se usa para definir los metadatos, las dependencias y las secuencias de comandos.env.js
: Es un script que establece las constantes necesarias para la ejecución. Se debe editar según el entorno y la configuración.index.js:
Es el script principal que controla la lógica de los eventos de interacción de Google Chat. En este codelab, solo se implementa el tipo de evento de mensaje, pero, en las aplicaciones de la vida real, suele incluir otros tipos, como clics en tarjetas, comandos de barra y diálogos.
App de instrucciones
Esta app se basa en un modelo de Gemini para conversar con los usuarios en sus idiomas naturales con respuestas concisas y en texto simple.
Formatear la app
Esta app se basa en Prompt app
y agrega compatibilidad con respuestas de texto enriquecido que cumplen con el formato de texto específico de los mensajes de Google Chat.
App de Ground
Esta app se basa en Format app
y agrega compatibilidad con la herramienta de la Búsqueda de Google, además de devolver fuentes en los mensajes de respuesta con tarjetas.
App de MCP
Esta app se basa en Format app
y agrega compatibilidad con el Protocolo de contexto del modelo (MCP) de Google Workspace Developer Assist.
App de varios turnos
Esta app se basa en Format app
y agrega compatibilidad con la memoria conversacional con una base de datos de Google Cloud Firestore.
App de herramienta personalizada
Esta app se basa en Multi-turn app
y agrega compatibilidad con una herramienta personalizada de llamada a funciones que llama a la API de Calendario de Google Workspace según la información que proporciona el usuario.
App de transmisión
Esta app se basa en un modelo de Gemini para generar cuentos cortos basados en temas proporcionados por los usuarios. La API de Google Chat se usa para enviar resultados y estados en mensajes a medida que se avanza.
App multimodal
Esta app se basa en un modelo de Gemini para editar imágenes según las instrucciones de texto de los usuarios. Las APIs de Google Chat se usan para descargar y subir las imágenes como archivos adjuntos de mensajes.
Qué aprenderás
- Los conceptos fundamentales de la IA son relevantes para las apps de Google Chat y su aplicación.
- Acceder a Vertex AI con el SDK de IA generativa de Google
- Usar las APIs de Google Workspace para desarrollar funciones potentes y agradables
- Aprovechar Cloud Run para compilar apps de Google Chat escalables
Lo que necesitarás
- Haber completado la guía de inicio rápido Compila una app de Google Chat HTTP con Node.js Este codelab se basa en el proyecto de Google Cloud, la app de Google Chat y la función de Google Cloud Run resultantes.
2. Prepárate
Inicializa recursos y accede a ellos
En esta sección, accederás a los siguientes recursos y los configurarás desde tu navegador web preferido.
Configuración de la API de Google Chat
Abre la consola de Google Cloud en una pestaña nueva y, luego, sigue estos pasos:
- Elige tu proyecto.
- En el campo de búsqueda de Google Cloud, busca “API de Google Chat”, haz clic en API de Google Chat, luego en Administrar y, por último, en Configuración.
- Configura el Nombre de la app y la Descripción como
Gen AI App
. - Haz clic en Guardar.
Espacio de Google Chat
Abre Google Chat en una pestaña nueva y, luego, sigue estos pasos:
- Si aún no lo hiciste, abre un espacio de mensajes directos con la app de Chat.
- Escribe
Hello
y presionaenter
. La app de Chat debería responder con tu nombre y tu imagen de avatar.
Servicio de Google Cloud Run Functions
Abre la consola de Google Cloud en una pestaña nueva y, luego, sigue estos pasos:
- Elige tu proyecto.
- Haz clic en Menú ☰ > Cloud Run > Servicios.
- En la lista de servicios, haz clic en addonchatapp y, luego, abre la pestaña Fuente.
Descarga el código fuente y los recursos de manera local
- Descarga este repositorio de GitHub.
- En tu entorno de desarrollo local preferido, abre el directorio
node/chat/gen-ai-apps
.
3. App de instrucciones
Esta app le solicita a Gemini en Vertex AI que converse con los usuarios en sus idiomas naturales con respuestas concisas y en texto simple. La implementación se basa en el SDK de IA generativa de Google para Node.js.
Repasa conceptos
Lenguaje natural
Se refiere a cualquier lenguaje hablado o escrito por personas para la comunicación diaria, en contraste con los lenguajes artificiales o informáticos.
Cloud Run Functions
Cloud Run Functions es ideal para compilar backends sin servidores, realizar procesamiento de datos en tiempo real y crear apps inteligentes. No es necesario aprovisionar, administrar, corregir ni actualizar servidores. Se escalab automáticamente y son tolerantes a errores y con alta disponibilidad.
Mensajes
La creación de instrucciones se refiere a la técnica de elaborar entradas (instrucciones) para guiar a un modelo de IA generativa a producir un resultado deseado. Por lo general, implica formular preguntas con cuidado, proporcionar contexto, dar instrucciones o brindar ejemplos para obtener respuestas específicas y pertinentes del modelo.
Vertex AI
Vertex AI ofrece todo lo que necesitas para compilar y usar IA generativa, como soluciones de IA, búsqueda y conversación, más de 130 modelos de base y una plataforma de IA unificada.
Gemini
Gemini es un LLM multimodal de Google al que se puede acceder desde Vertex AI. Ayuda a las personas a desbloquear su potencial humano para aumentar su imaginación, expandir su curiosidad y mejorar su productividad.
Google Gen AI SDK
El SDK de IA generativa de Google está diseñado para que los desarrolladores compilen aplicaciones potenciadas por Gemini y proporciona una interfaz unificada compatible con la API de Gemini Developer y Vertex AI. Incluye bibliotecas cliente en Python, Go, Node.js y Java.
Flujo de revisión
Revisa el código fuente
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"
},
...
Habilitar la API de Vertex AI
- En la consola de Google Cloud, habilita la API de Vertex AI:
- Haz clic en Menú ☰ > APIs y servicios > APIs y servicios habilitados y, luego, confirma que la API de Vertex AI esté en la lista.
Actualiza la función de Google Cloud Run Node.js
- En tu entorno de desarrollo local, cambia el directorio actual a
node/chat/gen-ai-apps/1-prompt
. Contiene todo el código fuente y los recursos. - Abre
env.js
en un editor y configura lo siguiente: - projectID: Es el ID de tu proyecto de Google Cloud. Se puede recuperar de la página de bienvenida de la consola de Google Cloud.
- location: Es la región de tu servicio de Google Cloud Run Functions. Se puede recuperar de la página de detalles del servicio de Cloud Run Function de Google Cloud.
- model: Es el modelo que se usará. Puedes encontrar todos los modelos disponibles en la documentación de Vertex AI. El modelo establecido de forma predeterminada es Flash para una ejecución rápida y económica.
- Ve a la pestaña Fuente de la página de detalles del servicio de la función de Google Cloud Run.
- Haz clic en Editar fuente.
- Establece el Punto de entrada de la función como
gen-ai-app
. - Haz clic en ➕, escribe
env.js
y haz clic en ✔️ para crear el archivo fuente faltante. - Reemplaza todo el contenido de los archivos
index.js
,env.js
ypackage.json
por el de tu entorno de desarrollo local. - Haz clic en Guardar y volver a implementar.
- Espera a que se complete correctamente la implementación de la revisión.
Probar
- En el espacio de mensajes directos con la app de Chat en Google Chat, escribe
Hello, how are you?
y presionaenter
. La app debe responder de forma concisa en texto sin formato según nuestras instrucciones en la instrucción.
- En el espacio de mensajes directos con la app de Chat en Google Chat, escribe
Bonjour comment allez-vous?
y presionaenter
. La app debería responder en francés según nuestras instrucciones en la instrucción.
4. Formatea la app
Esta app se basa en Prompt app
y agrega compatibilidad con respuestas de texto enriquecido que cumplen con el formato de mensaje de texto de Google Chat. Las instrucciones de la instrucción se actualizan con una descripción exhaustiva de las diferentes opciones que puede usar el modelo.
Repasa conceptos
Mensajes de texto de Google Chat
Los mensajes de texto de Google Chat admiten varias opciones de formato para permitir mensajes más claros y expresivos directamente en la interfaz de Google Chat. Se basan en reglas de Markdown específicas para aplicar negrita, cursiva, tachado, crear hipervínculos, etcétera.
Flujo de revisión
Revisa el código fuente
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}`;
...
};
...
Actualiza la función de Google Cloud Run Node.js
- En tu entorno de desarrollo local, cambia el directorio actual a
node/chat/gen-ai-apps/2-format
. Contiene todo el código fuente y los recursos. - Ve a la pestaña Fuente de la página de detalles del servicio de la función de Google Cloud Run.
- Haz clic en Editar fuente.
- Reemplaza todo el contenido del archivo
index.js
por el que se encuentra en tu entorno de desarrollo local. - Haz clic en Guardar y volver a implementar.
- Espera a que se complete correctamente la implementación de la revisión.
Probar
- En el espacio de mensajes directos con la app de Chat en Google Chat, escribe
Showcase all formatting options you have with one paragraph each
y presionaenter
. La app debería responder con muestras de formato basadas en nuestras instrucciones en la instrucción.
- En el espacio de mensajes directos con la app de Chat en Google Chat, escribe
What are Google Chat apps? What's great about them?
y presionaenter
. La app debería responder con formato cuando sea útil.
5. App de tierra
Esta app se basa en Format app
y agrega compatibilidad para fundamentar y devolver fuentes. Ejecuta la herramienta de la Búsqueda de Google y adjunta tarjetas con vínculos a las respuestas.
Repasa conceptos
Fundamentación
La fundamentación es la técnica para conectar modelos a fuentes de información. A menudo, se usa en aplicaciones prácticas para mejorar la precisión y la relevancia del contenido generado haciendo referencia a datos del mundo real, lo que evita que el modelo alucine o produzca información incorrecta.
Herramienta de la Búsqueda de Google
La herramienta de la Búsqueda de Google mejora la fundamentación, ya que permite que los modelos busquen información en tiempo real en la Web, lo que garantiza que las respuestas sean precisas y actuales.
Marco de tarjetas de Google Workspace
El framework de tarjetas en Google Workspace permite que los desarrolladores creen interfaces de usuario interactivas y enriquecidas. Permite crear tarjetas organizadas y visualmente atractivas que pueden incluir texto, imágenes, botones y otros widgets. Estas tarjetas mejoran la experiencia del usuario, ya que proporcionan información estructurada y permiten realizar acciones rápidas directamente en la conversación.
Flujo de revisión
Revisa el código fuente
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
}}}}});
...
Actualiza la función de Google Cloud Run Node.js
- En tu entorno de desarrollo local, cambia el directorio actual a
node/chat/gen-ai-apps/3-ground
. Contiene todo el código fuente y los recursos. - Ve a la pestaña Fuente de la página de detalles del servicio de la función de Google Cloud Run.
- Haz clic en Editar fuente.
- Reemplaza todo el contenido del archivo
index.js
por el que se encuentra en tu entorno de desarrollo local. - Haz clic en Guardar y volver a implementar.
- Espera a que se complete correctamente la implementación de la revisión.
Probar
En el espacio de mensajes directos con la app de Chat en Google Chat, escribe What's the world population?
y presiona enter
. La app debería responder adjuntando vínculos de fuentes en una tarjeta.
6. App de MCP
Esta app se basa en Format app
y agrega compatibilidad con las herramientas que proporciona un servidor del Protocolo de contexto del modelo (MCP) alojado de forma remota. Se conecta al MCP de Google Workspace Developer Assist, que proporciona herramientas para acceder a la documentación para desarrolladores de Google Workspace y buscar en ella.
Repasa conceptos
Model Context Protocol (MCP)
El Protocolo de contexto del modelo es un framework de código abierto que integra modelos con servicios externos de forma estandarizada. Los modelos pueden descubrir, comprender e interactuar de forma programática con varias herramientas, lo que expande sus capacidades, les permite realizar acciones en el mundo real y acceder a información actualizada.
SDK de TypeScript de MCP
El SDK de TypeScript implementa la especificación completa de MCP, lo que simplifica la creación de clientes de MCP que se conectan a cualquier servidor de MCP. También permite el desarrollo de servidores de MCP que brindan acceso a recursos, instrucciones y herramientas.
Flujo de revisión
Revisa el código fuente
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"
},
...
Actualiza la función de Google Cloud Run Node.js
- En tu entorno de desarrollo local, cambia el directorio actual a
node/chat/gen-ai-apps/4-mcp
. Contiene todo el código fuente y los recursos. - Ve a la pestaña Fuente de la página de detalles del servicio de la función de Google Cloud Run.
- Haz clic en Editar fuente.
- Reemplaza todo el contenido de los archivos
index.js
ypackage.json
por los de tu entorno de desarrollo local. - Haz clic en Guardar y volver a implementar.
- Espera a que se complete correctamente la implementación de la revisión.
Probar
- En el espacio de mensajes directos con la app de Chat en Google Chat, escribe
What can you do for me?
y presionaenter
. La app debe describir lo que puede hacer (herramientas de MCP).
- En el espacio de mensajes directos con la app de Chat en Google Chat, escribe
I would like to get the latest official documentation for the Google Sheets API append values
y presionaenter
. La app debería responder con la documentación solicitada (con herramientas de MCP).
7. App de varios turnos
Esta app se basa en Format app
y agrega compatibilidad con la memoria conversacional a través del seguimiento del historial de interacciones de chat. Permite una experiencia más natural, inteligente y personalizada. La app usa la base de datos predeterminada de Google Cloud Firestore asociada con su proyecto de Google Cloud para el almacenamiento.
Repasa conceptos
Varios turnos
El concepto de varios turnos se refiere a la capacidad de un modelo para mantener contextos y continuidad en varios intercambios y conversaciones. Es una función imprescindible para admitir conversaciones complejas, funcionalidades sofisticadas basadas en IA y una experiencia del usuario natural.
Google Cloud Firestore
Google Cloud Firestore es una base de datos en la nube NoSQL flexible y escalable para el desarrollo de aplicaciones móviles, web y de servidores. Almacena datos en documentos, organizados en colecciones, y permite la sincronización en tiempo real y la asistencia sin conexión.
Flujo de revisión
Revisa el código fuente
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"
},
...
Habilita la API de Google Cloud Firestore
- En la consola de Google Cloud, habilita la API de Google Cloud Firestore:
- Haz clic en Menú ☰ > APIs y servicios > APIs y servicios habilitados y, luego, confirma que la API de Cloud Firestore esté en la lista.
Crea una base de datos de Cloud Firestore
- En la consola de Google Cloud, haz clic en Menú ☰ > Firestore.
- Haz clic en Crear una base de datos de Firestore.
- Deja la configuración predeterminada y haz clic en Crear base de datos.
Actualiza la función de Google Cloud Run Node.js
- En tu entorno de desarrollo local, cambia el directorio actual a
node/chat/gen-ai-apps/5-multi-turn
. Contiene todo el código fuente y los recursos. - Ve a la pestaña Fuente de la página de detalles del servicio de la función de Google Cloud Run.
- Haz clic en Editar fuente.
- Reemplaza todo el contenido de los archivos
index.js
ypackage.json
por los de tu entorno de desarrollo local. - Haz clic en Guardar y volver a implementar.
- Espera a que se complete correctamente la implementación de la revisión.
Probar
- En el espacio de mensajes directos con la app de Chat en Google Chat, escribe
Can you speak with the English from the 80's for now on?
y presionaenter
. La app debería responder de forma positiva.
- En el espacio de mensajes directos con la app de Chat en Google Chat, escribe
Define what Google Chat apps are in one sentence
y presionaenter
. La app debería seguir respondiendo con el inglés de los años 80.
8. App de herramientas personalizadas
Esta app se basa en Multi-turn app
y agrega compatibilidad con una herramienta personalizada de llamada a funciones que se basa en la API de Google Workspace Calendar para recuperar el próximo evento de un calendario público. El modelo administra todas las interacciones del usuario, lo que incluye recibir entradas y entregar resultados de la herramienta. Sin embargo, la aplicación sigue siendo responsable de ejecutar las llamadas a la API necesarias y proporcionar los resultados al modelo cuando se soliciten. La app usa una clave de API de Google porque no se necesitan credenciales de usuario para recuperar datos públicos del calendario.
Repasa conceptos
Llamada a función
La llamada a función permite que un modelo detecte cuándo una herramienta o API externa puede satisfacer la solicitud de un usuario. Luego, el modelo proporciona los parámetros necesarios para llamar a esa herramienta, lo que integra funcionalidades externas en sus respuestas.
APIs de Google Workspace
Las APIs de Google Workspace permiten a los desarrolladores integrar sus aplicaciones en varios servicios de Google Workspace. Estas APIs proporcionan acceso programático a funcionalidades en todos los productos, como Gmail, Chat, Calendario, Drive, Documentos, Hojas de cálculo y muchos más, lo que permite la automatización, la sincronización de datos y la creación de flujos de trabajo personalizados.
Flujo de revisión
Revisa el código fuente
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"
},
...
Habilita la API de Calendar
- En la consola de Google Cloud, habilita la API de Google Calendar:
- Haz clic en Menú ☰ > APIs y servicios > APIs y servicios habilitados y, luego, confirma que la API de Google Calendar esté en la lista.
Crea una clave de API de Google
En la consola de Google Cloud, sigue estos pasos:
- Haz clic en Menú ☰ > APIs y servicios > Credenciales.
- Haz clic en + Crear credenciales y, luego, selecciona Clave de API.
- Espera a que se complete la operación.
- En el cuadro de diálogo de confirmación, busca el campo de texto Tu clave de API y haz clic en Copiar al portapapeles.
Actualiza la función de Google Cloud Run Node.js
- En tu entorno de desarrollo local, cambia el directorio actual a
node/chat/gen-ai-apps/6-custom-tool
. Contiene todo el código fuente y los recursos. - Ve a la pestaña Fuente de la página de detalles del servicio de la función de Google Cloud Run.
- Haz clic en Editar fuente.
- Reemplaza todo el contenido de los archivos
index.js
ypackage.json
por los de tu entorno de desarrollo local. - Abre el archivo
env.js
y haz lo siguiente: - Agrega googleApiKey a los campos exportados
export const env = {
...
googleApiKey: 'your-google-api-key',
};
- Reemplaza
your-google-api-key
por la clave de API de Google que copiaste en el paso anterior. Para recuperarla, haz clic en Mostrar clave en la página de credenciales de Google Cloud.
- Haz clic en Guardar y volver a implementar.
- Espera a que se complete correctamente la implementación de la revisión.
Probar
- Sigue estos pasos en el Calendario de Google:
- En Otros calendarios, haz clic en + y, luego, en Crear calendario.
- Establece el Nombre como
My Public Calendar
. - Haz clic en Crear calendario.
- Espera a que se complete la operación.
- En Configuración de mis calendarios, selecciona el calendario recién creado Mi calendario público.
- En Permisos de acceso para eventos, selecciona Compartir de forma pública y, luego, haz clic en Aceptar en el diálogo Advertencia.
- En Permisos de acceso para eventos, selecciona Ver todos los detalles del evento en el menú desplegable junto a la opción Compartir de forma pública.
- En Integrar calendario, copia el valor del campo ID del calendario en el portapapeles.
- Haz clic en la flecha hacia la izquierda en la esquina superior izquierda para salir de Configuración.
- Haz clic en el calendario para crear un evento nuevo para mañana, escribe
Important meeting
, selecciona Mi calendario público en el menú desplegable y, luego, haz clic en Guardar. - En el espacio de mensajes directos con la app de Chat en Google Chat, escribe
When is the next meeting?
y presionaenter
. La app debe solicitar una precisión porque no está claro a qué calendario se hace referencia.
- En el espacio de mensajes directos con la app de Chat en Google Chat, pega el ID del calendario que copiaste anteriormente en el portapapeles y presiona
enter
. La app debería responder con detalles sobre el evento creado anteriormente.
9. App de transmisión
Esta app se basa en un modelo de Gemini para generar historias de 2 minutos basadas en temas proporcionados por los usuarios. Como lleva tiempo generar respuestas completas, la app realiza llamadas al modelo en modo de transmisión y se basa en la API de Google Chat para enviar contenido y estados en los mensajes a medida que se avanza.
Repasa conceptos
API de Google Chat
La API de Google Chat permite a los desarrolladores interactuar de forma programática con Google Chat, lo que les permite enviar mensajes, crear espacios, administrar miembros y mucho más para crear integraciones y bots personalizados.
Transmisión
Transmisión hace referencia al proceso de recibir datos en un flujo continuo en lugar de esperar a que se genere la respuesta completa. En el caso de las llamadas a modelos de IA, la transmisión permite que las aplicaciones muestren resultados parciales a los usuarios en cuanto estén disponibles, lo que mejora el rendimiento percibido y la experiencia del usuario, en especial para las tareas de generación más largas. Esto es especialmente relevante para los modelos de IA generativa que pueden tardar una cantidad significativa de tiempo en producir un resultado completo.
Flujo de revisión
Revisa el código fuente
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"
},
...
Actualiza la función de Google Cloud Run Node.js
- En tu entorno de desarrollo local, cambia el directorio actual a
node/chat/gen-ai-apps/7-stream
. Contiene todo el código fuente y los recursos. - Ve a la pestaña Fuente de la página de detalles del servicio de la función de Google Cloud Run.
- Haz clic en Editar fuente.
- Reemplaza todo el contenido de los archivos
index.js
ypackage.json
por los de tu entorno de desarrollo local. - Haz clic en Guardar y volver a implementar.
- Espera a que se complete correctamente la implementación de la revisión.
Probar
En el espacio de mensajes directos con la app de Chat en Google Chat, escribe turtle
y presiona enter
. La app debe responder con un mensaje de confirmación, la historia generada con el estado a medida que se avanza y un mensaje de confirmación de finalización.
10. App multimodal
Esta app se basa en un modelo para editar imágenes según las instrucciones de texto de los usuarios. Tanto los usuarios como la app agregan sus imágenes como archivos adjuntos de mensajes de Google Chat para intercambiarlas. La app se basa en las APIs de Google Chat para descargar y subir imágenes de forma programática.
Repasa conceptos
Archivo adjunto de mensaje de Google Chat
Los archivos adjuntos de mensajes de Google Chat son archivos, como imágenes o videos, que se suben a un mensaje de Google Chat. Estos archivos adjuntos se pueden administrar de forma programática, lo que permite que las aplicaciones interactúen con contenido multimedia enriquecido directamente en las conversaciones.
Delegación para todo el dominio (DWD)
La delegación de todo el dominio (DWD) permite que una cuenta de servicio actúe en nombre de los usuarios de un dominio de Google Workspace, lo que permite que las aplicaciones realicen acciones en nombre de esos usuarios sin autorización directa. Esto es útil para las apps que necesitan acceder a los datos del usuario o realizar acciones (como subir archivos adjuntos a Google Chat) en el contexto del usuario, incluso cuando este no está presente de forma activa, ya que se le otorga a la cuenta de servicio un acceso amplio en todo el dominio.
Flujo de revisión
Revisa el código fuente
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!'
}}}}});
});
...
Configura la cuenta de servicio y exporta la clave privada
- Delega la cuenta de servicio predeterminada de Cloud Run para administrar los mensajes de Google Chat de los usuarios. Sigue las instrucciones con el alcance https://www.googleapis.com/auth/chat.messages. Para recuperar el ID de cliente de la cuenta de servicio predeterminada de Cloud Run, sigue estos pasos:
- Haz clic en Menú ☰ > IAM y administración > Cuentas de servicio.
- Haz clic en la cuenta de servicio con el nombre Cuenta de servicio de Compute predeterminada.
- Expande la sección Configuración avanzada.
- Copia el ID de cliente en el portapapeles.
- Crea y descarga una clave privada nueva para la cuenta de servicio predeterminada de Cloud Run
- Haz clic en Menú ☰ > IAM y administración > Cuentas de servicio.
- Haz clic en la cuenta de servicio con el nombre Cuenta de servicio de Compute predeterminada.
- Selecciona la pestaña Claves, haz clic en Agregar clave y, luego, en Crear clave nueva.
- Selecciona JSON y, luego, haz clic en Crear.
- Ya se generó y descargó el nuevo par de claves pública y privada en tu equipo como un archivo nuevo. Guarda el archivo JSON descargado y copia su contenido en el portapapeles. Este archivo es la única copia de esta clave. Para obtener información sobre cómo almacenar tu clave de forma segura, consulta Cómo administrar claves para cuentas de servicio.
Actualiza la función de Google Cloud Run Node.js
- En tu entorno de desarrollo local, cambia el directorio actual a
node/chat/gen-ai-apps/8-multimodal
. Contiene todo el código fuente y los recursos. - Ve a la pestaña Fuente de la página de detalles del servicio de la función de Google Cloud Run.
- Haz clic en Editar fuente.
- Haz clic en ➕, escribe
credentials.json
y haz clic en ✔️ para crear el archivo de recursos faltante. - Pega el contenido del archivo JSON que descargaste en el paso anterior en el archivo
credentials.json
recién creado. - Reemplaza todo el contenido del archivo
index.js
por el que se encuentra en tu entorno de desarrollo local. - Abre el archivo
env.js
y configura el valor de model engemini-2.0-flash-preview-image-generation
.
...
model: 'gemini-2.0-flash-preview-image-generation',
...
- Haz clic en Guardar y volver a implementar.
- Espera a que se complete correctamente la implementación de la revisión.
Probar
En el espacio de mensajes directos con la app de Chat en Google Chat, sube una foto de retrato tuya en formato PNG, escribe Change the background color to blue
y presiona enter
. La app debería responder con una versión de la imagen con un fondo azul y un mensaje de confirmación de finalización.
11. Realiza una limpieza
Borra el proyecto de Google Cloud
Para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que usaste en este codelab, te recomendamos que borres el proyecto de Google Cloud.
En la consola de Google Cloud, sigue estos pasos:
- Haz clic en Menú ☰ > IAM y administración > Configuración.
- Haz clic en Cerrar.
- Ingresa el ID del proyecto.
- Haz clic en Apagar de todos modos.
12. ¡Felicitaciones!
¡Felicitaciones! Creaste apps de Google Chat como complementos de Google Workspace que integran conceptos fundamentales de la IA.
Próximos pasos
En este codelab, solo mostramos casos de uso minimalistas, pero hay muchas áreas de expansión que podrías considerar en tus apps de Google Chat, como las siguientes:
- Admitir otros tipos de contenido multimedia, como audio y video
- Integrar otros modelos de IA, incluidos los personalizados, alojados en plataformas dedicadas como Vertex AI
- Integración con agentes, incluidos los personalizados, alojados en plataformas dedicadas como Agentspace y Dialogflow CX
- Confiar en los bucles de retroalimentación y las clasificaciones para supervisar y mejorar el rendimiento
- Publica en el mercado para potenciar a los equipos, las organizaciones o los usuarios públicos.
Más información
Existen muchos recursos disponibles para los desarrolladores, como videos de YouTube, sitios web de documentación, muestras de código e instructivos:
- Canal de YouTube para desarrolladores de Google Workspace: ¡Bienvenidos, desarrolladores!
- Sitio web con documentación de Google Chat para desarrolladores
- Repositorio de GitHub para todas las muestras de Google Chat
- Google Cloud Developer Center
- IA generativa en Vertex AI
- Modelos de IA generativa
- Ajuste de modelos de IA generativa
- Capacitación personalizada de IA generativa