Интеграция фундаментальных концепций ИИ в приложения Google Chat

1. Прежде чем начать

Что представляют собой приложения Google Chat с использованием искусственного интеллекта?

Приложения Google Chat с искусственным интеллектом выполняют следующие функции:

  • Интегрируйте свои услуги и ресурсы в Google Chat, что позволит пользователям получать информацию и совершать действия, не покидая диалог.
  • Интегрируйте с моделями генеративного ИИ для создания, поиска и редактирования данных, таких как текст или изображения.
  • Поддержите взаимодействие с пользователем, применяя концепции разговорного ИИ для более практичных, естественных, сложных и полезных взаимодействий.

Зачем интегрировать приложения Google Chat с искусственным интеллектом?

Типичные сценарии использования подразделяются на следующие категории:

  • Создание и редактирование контента . Разработка маркетинговых текстов, создание постов для социальных сетей, создание реалистичных изображений, написание музыки или помощь в создании видеоконтента.
  • Поиск и анализ данных . Извлекайте ключевые выводы из неструктурированной базы знаний, обобщайте объемные тексты, классифицируйте контент или переводите языки с повышенной точностью и скоростью.
  • Разговор . Ведите естественные, информативные и эффективные беседы, как если бы вы общались с ассистентом.
  • Автоматизация задач. Выполнение действий от имени пользователя, таких как создание нового события в календаре, отправка документа или управление заявкой во внешней системе.

Возможность интегрировать эти функции непосредственно в привычный интерфейс Google Chat открывает огромные возможности для всех, кто хочет улучшить пользовательский опыт и повысить производительность своих пользователей.

Предварительные требования

Что вы построите

В этом практическом занятии вы создадите восемь минималистичных приложений для Google Chat, которые интегрируют фундаментальные концепции искусственного интеллекта, чтобы показать, как их можно применять в реальных задачах. Все они созданы как дополнения для Google Workspace и основаны на архитектуре HTTP.

2f1e2c66f6e2e2f0.png

Это работает следующим образом:

  1. Пользователь отправляет сообщение в Google Chat в приложение для чата, либо в виде личного сообщения, либо в чате.
  2. На веб-сервер, работающий в виде функции Google Cloud Run на Node.js, отправляется HTTP-запрос, содержащий логику приложения чата.
  3. При желании логика приложения «Чат» может интегрироваться с сервисами Google Workspace (такими как Календарь и Таблицы), другими сервисами Google (такими как Карты, YouTube и Vertex AI) или другими веб-сервисами (такими как система управления проектами или система обработки заявок).
  4. Веб-сервер отправляет HTTP-ответ обратно в службу приложения «Чат» в приложении «Чат».
  5. Ответ отправляется пользователю.
  6. При желании приложение «Чат» может вызывать API чата для асинхронной отправки сообщений или выполнения других операций.

Функция Google Cloud Run на Node.js в каждом приложении Google Chat содержит свою собственную версию следующих исходных файлов для выполнения необходимых действий, описанных в шагах #3 и #6 выше:

  • package.json : Центральный манифест, служащий своего рода шаблоном для проекта Node.js. Он используется для определения метаданных, зависимостей и скриптов.
  • env.js : Скрипт, устанавливающий константы, необходимые для выполнения. Его следует редактировать в зависимости от среды и конфигурации.
  • index.js: Основной скрипт, обрабатывающий логику событий взаимодействия в Google Chat. В этом практическом задании реализован только тип события «сообщение», но в реальных приложениях обычно используются и другие типы, такие как клик по карточке, команда с косой чертой и диалоговое окно.

Приложение Prompt

Это приложение использует модель Близнецов для общения с пользователями на их естественном языке, предоставляя краткие и простые текстовые ответы.

5975b36968ab597a.gif

Формат приложения

Это приложение является развитием Prompt app и добавляет поддержку ответов в формате расширенного текста, соответствующего специфическому текстовому формату сообщений Google Chat .

bc49e0acf0838f28.gif

Приложение Ground

Это приложение является развитием Format app , добавляя поддержку инструмента поиска Google и возвращая источники в ответах в виде карточек.

3cf232bf153f6abc.gif

Приложение MCP

Это приложение основано на Format app и добавляет поддержку протокола контекста модели (MCP) Google Workspace Developer Assist .

8219c29366e9120e.gif

Приложение для многооборотных задач

Это приложение основано на Format app и добавляет поддержку диалоговой памяти с использованием базы данных Google Cloud Firestore .

a819c274ce586451.gif

Приложение для создания пользовательских инструментов

Это приложение является развитием Multi-turn app и добавляет поддержку функции, вызывающей пользовательский инструмент , который обращается к API календаря Google Workspace на основе информации, предоставленной пользователем.

a1c4f586b7ab2e24.gif

Приложение для потоковой передачи

Это приложение использует модель Gemini для генерации коротких рассказов на основе тем, предоставленных пользователями. Для отправки результатов и статусов в сообщениях по мере выполнения заданий используется API Google Chat.

fd347ba03fe86e22.gif

Мультимодальное приложение

Это приложение использует модель Gemini для редактирования изображений на основе текстовых инструкций от пользователей. Для загрузки и выгрузки изображений в качестве вложений в сообщения используются API Google Chat.

57574be33474bbc.gif

Что вы узнаете

  • Основные концепции искусственного интеллекта актуальны для приложений Google Chat и того, как их применять.
  • Для доступа к Vertex AI используйте SDK Google Gen AI.
  • Использовать API Google Workspace для разработки приятных и мощных функций.
  • Использовать Cloud Run для создания масштабируемых приложений Google Chat.

Что вам понадобится

  • Завершение быстрого руководства по созданию HTTP-приложения Google Chat с использованием Node.js. Данный практический урок основан на созданном проекте Google Cloud, приложении Google Chat и функции Google Cloud Run.

2. Настройка

Инициализация и доступ к ресурсам.

В этом разделе вы можете получить доступ к следующим ресурсам и настроить их с помощью предпочитаемого вами веб-браузера.

Настройка API чата Google

Откройте консоль Google Cloud в новой вкладке, затем выполните следующие действия:

  1. Выберите свой проект.
  2. В поле поиска Google Cloud найдите "Google Chat API", затем щелкните Google Chat API , выберите "Управление" и нажмите "Конфигурация" .

  1. Установите название приложения и описание на Gen AI App .
  2. Нажмите « Сохранить ».

9a06649cf9285b99.png

Пространство Google Чата

Откройте Google Чат в новой вкладке, затем выполните следующие действия:

  1. Если вы еще этого не сделали, создайте личное сообщение в приложении «Чат».
  2. Введите Hello и нажмите enter . Приложение «Чат» должно ответить вашим именем и изображением аватара.

e3b195c7b7b8e2af.png

Сервис функций Google Cloud Run

Откройте консоль Google Cloud в новой вкладке, затем выполните следующие действия:

  1. Выберите свой проект.
  2. Нажмите Меню ☰ > Cloud Run > Сервисы .

  1. В списке сервисов нажмите addonchatapp , затем откройте вкладку «Источник» .

b69df34ea0dc48a5.png

Загрузите исходный код и ресурсы локально.

  1. Загрузите этот репозиторий GitHub .

  1. В предпочитаемой вами локальной среде разработки откройте каталог node/chat/gen-ai-apps .

3c57c15db4ebfddb.png

3. Приложение-подсказка

Это приложение позволяет системе Gemini на платформе Vertex AI общаться с пользователями на их естественном языке, используя краткие и простые текстовые ответы. Реализация основана на SDK Google Gen AI для Node.js.

Обзор концепций

Естественный язык

Любой язык, на котором говорят или пишут люди для повседневного общения, в отличие от искусственных или компьютерных языков.

Функции Cloud Run

Функции Cloud Run отлично подходят для создания бессерверных бэкендов, обработки данных в реальном времени и разработки интеллектуальных приложений. Нет необходимости выделять, управлять, обновлять или устанавливать дополнительные серверы. Они автоматически масштабируются, обладают высокой доступностью и отказоустойчивостью.

Подсказка

Под «подсказками» понимается метод формирования входных данных (подсказок) для управления генеративной моделью искусственного интеллекта с целью получения желаемого результата. Обычно он включает в себя тщательную формулировку вопросов, предоставление контекста, инструкций или примеров для получения конкретных и релевантных ответов от модели.

Vertex AI

Vertex AI предлагает все необходимое для создания и использования генеративного ИИ, включая решения для ИИ, поиск и диалоги, более 130 базовых моделей и единую платформу ИИ.

c9e9c7a1945b22ac.png

Близнецы

Gemini — это мультимодальная магистерская программа от Google, доступная через Vertex AI. Она помогает людям раскрыть свой человеческий потенциал, чтобы они могли развивать воображение, расширять кругозор и повышать продуктивность.

Google Gen AI SDK

Google Gen AI SDK предназначен для разработчиков, создающих приложения на базе Gemini. Он предоставляет унифицированный интерфейс, совместимый как с Gemini Developer API , так и с Vertex AI . В комплект входят клиентские библиотеки на Python , Go , Node.js и Java .

Процесс проверки

c625fdcc8b4a27f4.png

Просмотрите исходный код

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

Включить API Vertex AI

  1. В консоли Google Cloud включите API Vertex AI :

  1. Нажмите Меню ☰ > API и сервисы > Включенные API и сервисы , а затем убедитесь, что API Vertex AI находится в списке.

Обновите функцию Node.js в Google Cloud.

  1. В локальной среде разработки перейдите в каталог node/chat/gen-ai-apps/1-prompt . В нём содержится весь исходный код и ресурсы.
  2. Откройте env.js в редакторе и установите следующие параметры:
  3. projectID : Идентификатор вашего проекта в Google Cloud. Его можно получить на приветственной странице консоли Google Cloud.

  1. Местоположение : регион, в котором работает ваша служба функций Google Cloud Run. Его можно получить на странице с подробными сведениями о службе функций Google Cloud Run.

  1. model : Используемая модель. Все доступные модели можно найти в документации Vertex AI. По умолчанию установлена ​​модель Flash для быстрого и недорогого выполнения.

6c2fb9f554f53a4a.png

  1. Перейдите на вкладку «Источник» на странице с подробными сведениями о службе функций Google Cloud Run.

  1. Нажмите «Редактировать исходный код» .
  2. Установите точку входа функции на gen-ai-app .
  3. Нажмите , введите env.js и нажмите ✔️, чтобы создать недостающий исходный файл.
  4. Замените всё содержимое файлов index.js , env.js и package.json на содержимое вашей локальной среды разработки.
  5. Нажмите «Сохранить и повторно развернуть» .
  6. Дождитесь успешного завершения развертывания версии.

487b64f2d3b1a104.png

Попробуйте!

  1. В личном сообщении в приложении «Чат» в Google Chat введите Hello, how are you? и нажмите enter . Приложение должно ответить кратким текстовым сообщением в соответствии с нашими инструкциями в подсказке.

3cc1fd1de2a9e239.png

  1. В поле для личных сообщений в приложении «Чат» в Google Chat введите Bonjour comment allez-vous? и нажмите enter . Приложение должно ответить на французском языке в соответствии с нашими инструкциями в подсказке.

77010f4ad0bde5da.png

4. Форматировать приложение

Это приложение является развитием Prompt app и добавляет поддержку ответов в формате расширенного текста, совместимого с форматом текстовых сообщений Google Chat. Инструкции в окне запроса обновлены и содержат исчерпывающее описание различных параметров, которые может использовать модель.

Обзор концепций

Текстовые сообщения Google Чата

В текстовых сообщениях Google Chat поддерживаются различные параметры форматирования, позволяющие создавать более четкие и выразительные сообщения непосредственно в интерфейсе Google Chat. Они основаны на определенных правилах разметки Markdown, позволяющих применять жирный шрифт, курсив, зачеркивание, создавать гиперссылки и т. д.

Процесс проверки

c625fdcc8b4a27f4.png

Просмотрите исходный код

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

Обновите функцию Node.js в Google Cloud.

  1. В локальной среде разработки перейдите в каталог node/chat/gen-ai-apps/2-format . В нём содержится весь исходный код и ресурсы.
  2. Перейдите на вкладку «Источник» на странице с подробными сведениями о службе функций Google Cloud Run.

  1. Нажмите «Редактировать исходный код» .
  2. Замените всё содержимое файла index.js на содержимое файла из вашей локальной среды разработки.
  3. Нажмите «Сохранить и повторно развернуть» .
  4. Дождитесь успешного завершения развертывания версии.

487b64f2d3b1a104.png

Попробуйте!

  1. В поле для личных сообщений в приложении «Чат» в Google Chat введите Showcase all formatting options you have with one paragraph each и нажмите enter . Приложение должно ответить примерами форматирования, основанными на наших инструкциях в подсказке.

cc7f7101d9f7c10.png

  1. В поле для личных сообщений в приложении «Чат» в Google Chat введите What are Google Chat apps? What's great about them? и нажмите enter . Приложение должно ответить, при необходимости форматируя текст.

83557d4c7071aac8.png

5. Приложение «Наземное»

Это приложение является развитием Format app , добавляя поддержку указания и возврата источников. Оно запускает инструмент поиска Google и прикрепляет карточки со ссылками на ответы.

Обзор концепций

Заземление

Привязка к источникам информации — это метод, позволяющий связать модели с источниками информации. В практических приложениях он часто используется для повышения точности и релевантности генерируемого контента путем сопоставления с реальными данными, что предотвращает искажения или создание моделью фактически неверной информации.

Инструмент поиска Google

Инструмент поиска Google повышает точность данных, позволяя моделям искать в интернете информацию в режиме реального времени, что гарантирует точность и актуальность ответов.

Фреймворк Google Workspace Card

Фреймворк Card в Google Workspace позволяет разработчикам создавать многофункциональные интерактивные пользовательские интерфейсы. Он позволяет создавать организованные и визуально привлекательные карточки, которые могут включать текст, изображения, кнопки и другие виджеты. Эти карточки улучшают пользовательский опыт, предоставляя структурированную информацию и позволяя быстро выполнять действия непосредственно в диалоге.

Процесс проверки

b72d69a6e79858d6.png

Просмотрите исходный код

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

Обновите функцию Node.js в Google Cloud.

  1. В локальной среде разработки перейдите в каталог node/chat/gen-ai-apps/3-ground . В нём содержится весь исходный код и ресурсы.
  2. Перейдите на вкладку «Источник» на странице с подробными сведениями о службе функций Google Cloud Run.

  1. Нажмите «Редактировать исходный код» .
  2. Замените всё содержимое файла index.js на содержимое файла из вашей локальной среды разработки.
  3. Нажмите «Сохранить и повторно развернуть» .
  4. Дождитесь успешного завершения развертывания версии.

487b64f2d3b1a104.png

Попробуйте!

В личном сообщении в приложении «Чат» в Google Chat введите What's the world population? и нажмите enter . Приложение должно ответить, прикрепив ссылки на источники в виде карточки.

cff461da29c05873.png

6. Приложение MCP

Это приложение основано на Format app и добавляет поддержку инструментов, предоставляемых сервером Model Context Protocol (MCP), размещенным удаленно. Оно подключается к Google Workspace Developer Assist MCP , который предоставляет инструменты для доступа и поиска документации Google Workspace Developers .

Обзор концепций

Протокол контекста модели (MCP)

Model Context Protocol — это платформа с открытым исходным кодом, интегрирующая модели с внешними сервисами стандартизированным способом. Модели могут программно обнаруживать, понимать и взаимодействовать с различными инструментами, расширяя свои возможности, выполняя действия из реального мира и получая доступ к обновленной информации.

MCP TypeScript SDK

SDK для TypeScript реализует полную спецификацию MCP, упрощая создание клиентов MCP, подключающихся к любому серверу MCP. Он также позволяет разрабатывать серверы MCP, предоставляющие доступ к ресурсам, подсказкам и инструментам.

Процесс проверки

e0b324e2cca21915.png

Просмотрите исходный код

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

Обновите функцию Node.js в Google Cloud.

  1. В локальной среде разработки перейдите в каталог node/chat/gen-ai-apps/4-mcp . В нём содержится весь исходный код и ресурсы.
  2. Перейдите на вкладку «Источник» на странице с подробными сведениями о службе функций Google Cloud Run.

  1. Нажмите «Редактировать исходный код» .
  2. Замените всё содержимое файлов index.js и package.json на содержимое вашей локальной среды разработки.
  3. Нажмите «Сохранить и повторно развернуть» .
  4. Дождитесь успешного завершения развертывания версии.

487b64f2d3b1a104.png

Попробуйте!

  1. В поле для личных сообщений в приложении «Чат» в Google Chat введите What can you do for me? и нажмите enter . Приложение должно описать свои возможности (инструменты MCP).

13535bfd31d85a50.png

  1. В личном сообщении в приложении «Чат» в Google Chat введите I would like to get the latest official documentation for the Google Sheets API append values и нажмите enter . Приложение должно ответить запрошенной документацией (с использованием инструментов MCP).

8a6f4ac5b7d5fa4a.png

7. Приложение для многооборотного режима

Это приложение основано на Format app и добавляет поддержку памяти диалогов, отслеживая историю взаимодействий в чате. Это обеспечивает более естественный, интеллектуальный и персонализированный пользовательский опыт. Для хранения данных приложение использует базу данных Google Cloud Firestore по умолчанию, связанную с их проектом Google Cloud.

Обзор концепций

Многооборотный

Концепция многоходового взаимодействия подразумевает способность модели поддерживать контекст и непрерывность на протяжении множества обменов сообщениями и диалогов. Это необходимая функция для поддержки сложных диалогов, сложных функций на основе искусственного интеллекта и естественного пользовательского опыта.

Google Cloud Firestore

Google Cloud Firestore — это гибкая, масштабируемая облачная база данных NoSQL для разработки мобильных, веб-приложений и серверных приложений. Она хранит данные в документах, организованных в коллекции, и обеспечивает синхронизацию в реальном времени и поддержку работы в автономном режиме.

Процесс проверки

52920a2227467218.png

Просмотрите исходный код

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

Включите API Google Cloud Firestore

  1. В консоли Google Cloud включите API Google Cloud Firestore :

  1. Нажмите Меню ☰ > API и сервисы > Включенные API и сервисы , а затем убедитесь, что API Cloud Firestore присутствует в списке.

Создание базы данных Cloud Firestore

  1. В консоли Google Cloud нажмите Меню ☰ > Firestore

  1. Нажмите «Создать базу данных Firestore».
  2. Оставьте конфигурацию по умолчанию и нажмите «Создать базу данных».

Обновите функцию Node.js в Google Cloud.

  1. В локальной среде разработки перейдите в каталог node/chat/gen-ai-apps/5-multi-turn . В нём содержится весь исходный код и ресурсы.
  2. Перейдите на вкладку «Источник» на странице с подробными сведениями о службе функций Google Cloud Run.

  1. Нажмите «Редактировать исходный код» .
  2. Замените всё содержимое файлов index.js и package.json на содержимое вашей локальной среды разработки.
  3. Нажмите «Сохранить и повторно развернуть» .
  4. Дождитесь успешного завершения развертывания версии.

487b64f2d3b1a104.png

Попробуйте!

  1. В личном сообщении в приложении «Чат» в Google Chat введите Can you speak with the English from the 80's for now on? и нажмите enter . Приложение должно ответить положительно.

b273beda7e203b23.png

  1. В поле для личных сообщений в приложении «Чат» в Google Chat напишите Define what Google Chat apps are in one sentence и нажмите enter . Приложение должно продолжить отвечать на английском языке из 80-х.

9156f563c369f186.png

8. Пользовательское приложение-инструмент

Это приложение основано на Multi-turn app и добавляет поддержку функции, вызывающей пользовательский инструмент, который использует API Google Workspace Calendar для получения следующего события из общедоступного календаря. Модель управляет всеми взаимодействиями пользователя, включая получение входных данных и вывод результатов из инструмента. Однако приложение по-прежнему отвечает за выполнение необходимых вызовов API и предоставление результатов модели по запросу. Приложение использует ключ API Google, поскольку для получения данных из общедоступного календаря не требуются учетные данные пользователя.

Обзор концепций

Вызов функции

Вызов функций позволяет модели определять, когда запрос пользователя может быть выполнен внешним инструментом или API. Затем модель предоставляет параметры, необходимые для вызова этого инструмента, интегрируя внешние функции в свои ответы.

API Google Workspace

API Google Workspace позволяют разработчикам интегрировать свои приложения с различными сервисами Google Workspace. Эти API обеспечивают программный доступ к функциям таких продуктов, как Gmail, Chat, Calendar, Drive, Docs, Sheets и многих других, что позволяет автоматизировать процессы, синхронизировать данные и создавать пользовательские рабочие процессы.

Процесс проверки

ed866ca369a4512f.png

Просмотрите исходный код

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

Включить API календаря

  1. В консоли Google Cloud включите API Google Календаря :

  1. Нажмите Меню ☰ > API и сервисы > Включенные API и сервисы , а затем убедитесь, что Google Calendar API присутствует в списке.

Создать ключ API Google

В консоли Google Cloud выполните следующие действия:

  1. Нажмите Меню ☰ > API и сервисы > Учетные данные .

  1. Нажмите « + Создать учетные данные» , а затем выберите «Ключ API» .
  2. Дождитесь завершения операции.
  3. В диалоговом окне подтверждения найдите текстовое поле «Ваш API-ключ» и нажмите «Скопировать в буфер обмена» .

Обновите функцию Node.js в Google Cloud.

  1. В локальной среде разработки перейдите в каталог node/chat/gen-ai-apps/6-custom-tool . Он содержит весь исходный код и ресурсы.
  2. Перейдите на вкладку «Источник» на странице с подробными сведениями о службе функций Google Cloud Run.

  1. Нажмите «Редактировать исходный код» .
  2. Замените всё содержимое файлов index.js и package.json на содержимое вашей локальной среды разработки.
  3. Откройте файл env.js и выполните следующие действия.
  4. Добавьте googleApiKey в экспортированные поля.
export const env = {
 ...
 googleApiKey: 'your-google-api-key',
};
  1. Замените your-google-api-key на ключ API Google, скопированный на предыдущем шаге. Его можно получить на странице учетных данных Google Cloud, нажав кнопку «Показать ключ» .

  1. Нажмите «Сохранить и повторно развернуть» .
  2. Дождитесь успешного завершения развертывания версии.

487b64f2d3b1a104.png

Попробуйте!

  1. В Google Календаре выполните следующие действия:
  2. В разделе «Другие календари» нажмите + , затем нажмите «Создать новый календарь» .
  3. Установить название для My Public Calendar
  4. Нажмите «Создать календарь»
  5. Дождитесь завершения операции.
  6. В разделе «Настройки моих календарей» выберите недавно созданный календарь «Мой общедоступный календарь».
  7. В разделе «Права доступа к событиям» выберите «Сделать доступным для всех» , а затем нажмите кнопку «ОК» в диалоговом окне «Предупреждение» .
  8. В разделе «Права доступа к событиям» выберите «Просмотреть все сведения о событии» из выпадающего меню рядом с опцией «Сделать доступным для всех».
  9. В разделе «Интеграция календаря» скопируйте значение поля «Идентификатор календаря» в буфер обмена.
  10. Чтобы выйти из настроек, нажмите на стрелку влево в верхнем левом углу.
  11. Щелкните по календарю, чтобы создать новое событие на завтра, введите Important meeting , выберите «Мой общедоступный календарь» из выпадающего списка, затем нажмите «Сохранить».
  12. В поле для личных сообщений в приложении «Чат» в Google Chat введите When is the next meeting? и нажмите enter . Приложение должно запросить уточнение, поскольку неясно, к какому календарю относится запрос.

40383099311b0813.png

  1. В поле для личных сообщений в приложении «Чат» в Google Chat вставьте ранее скопированный в буфер обмена идентификатор календаря и нажмите enter . Приложение должно ответить подробной информацией о ранее созданном событии.

4c614c7e444e3b45.png

9. Приложение для потокового вещания

Это приложение использует модель Gemini для генерации 2-минутных историй на основе тем, предоставленных пользователями. Поскольку для генерации полных ответов требуется время, приложение обращается к модели в потоковом режиме и использует API Google Chat для отправки контента и статусов в сообщениях по мере выполнения заданий.

Обзор концепций

API чата Google

API Google Chat позволяет разработчикам программно взаимодействовать с Google Chat, предоставляя им возможность отправлять сообщения, создавать пространства, управлять участниками и многое другое, а также создавать собственные интеграции и ботов.

Стриминг

Потоковая обработка данных подразумевает получение данных в непрерывном потоке, а не ожидание генерации всего ответа. В контексте вызовов моделей ИИ потоковая обработка позволяет приложениям отображать пользователям частичные результаты сразу после их получения, улучшая воспринимаемую производительность и пользовательский опыт, особенно для задач генерации, требующих больших временных затрат. Это особенно актуально для генеративных моделей ИИ, для получения полного результата которых может потребоваться значительное время.

Процесс проверки

25f9036eecd9a48b.png

Просмотрите исходный код

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

Обновите функцию Node.js в Google Cloud.

  1. В локальной среде разработки перейдите в каталог node/chat/gen-ai-apps/7-stream . В нём содержится весь исходный код и ресурсы.
  2. Перейдите на вкладку «Источник» на странице с подробными сведениями о службе функций Google Cloud Run.

  1. Нажмите «Редактировать исходный код» .
  2. Замените всё содержимое файлов index.js и package.json на содержимое вашей локальной среды разработки.
  3. Нажмите «Сохранить и повторно развернуть» .
  4. Дождитесь успешного завершения развертывания версии.

487b64f2d3b1a104.png

Попробуйте!

В личном сообщении в приложении «Чат» в Google Chat введите turtle и нажмите enter . Приложение должно ответить подтверждающим сообщением, сгенерированным сценарием с указанием прогресса и сообщением о завершении.

17600cd1490972c7.png

26af4b3d442712a5.png

10. Мультимодальное приложение

Это приложение использует модель редактирования изображений на основе текстовых инструкций от пользователей. И пользователи, и приложение добавляют свои изображения в качестве вложений в сообщениях Google Chat для обмена данными. Приложение использует API Google Chat для программной загрузки и выгрузки изображений.

Обзор концепций

Вложение сообщения Google Чата

Вложения в сообщениях Google Chat — это файлы, такие как изображения или видео, которые загружаются в сообщения Google Chat. Этими вложениями можно управлять программно, что позволяет приложениям взаимодействовать с мультимедийным контентом непосредственно в диалогах.

Делегирование полномочий в масштабе домена (DWD)

Функция делегирования в масштабе домена (Domain-Wide Delegation, DWD) позволяет служебной учетной записи выдавать себя за пользователей в домене Google Workspace, что дает приложениям возможность выполнять действия от имени этих пользователей без прямой авторизации. Это полезно для приложений, которым необходимо получать доступ к данным пользователя или выполнять действия (например, загружать вложения в Google Chat) в контексте пользователя, даже когда пользователь не присутствует активно, предоставляя служебной учетной записи широкий доступ в рамках домена.

Процесс проверки

74295b25761f1682.png

Просмотрите исходный код

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

Настройте учетную запись службы и экспортируйте закрытый ключ.

  1. Делегируйте учетную запись службы Cloud Run по умолчанию для управления сообщениями Google Chat для пользователей. Следуйте инструкциям в разделе https://www.googleapis.com/auth/chat.messages . Чтобы получить идентификатор клиента учетной записи службы Cloud Run по умолчанию, выполните следующие действия:
  2. Нажмите Меню ☰ > IAM и администрирование > Учетные записи служб

  1. Щелкните учетную запись службы с именем «Учетная запись вычислительной службы по умолчанию» .
  2. Разверните раздел «Расширенные настройки» .
  3. Скопировать идентификатор клиента в буфер обмена.
  4. Создайте и загрузите новый закрытый ключ для учетной записи службы Cloud Run по умолчанию.
  5. Нажмите Меню ☰ > IAM и администрирование > Учетные записи служб

  1. Щелкните учетную запись службы с именем «Учетная запись вычислительной службы по умолчанию» .
  2. Выберите вкладку «Клавиши» , нажмите «Добавить клавишу» , затем «Создать новую клавишу» .
  3. Выберите JSON , затем нажмите «Создать» .
  4. Ваша новая пара открытого/закрытого ключей будет сгенерирована и загружена на ваш компьютер в виде нового файла. Сохраните загруженный JSON-файл и скопируйте его содержимое в буфер обмена. Этот файл является единственной копией данного ключа. Информацию о том, как безопасно хранить ключ, см. в разделе «Управление ключами учетных записей служб» .

Обновите функцию Node.js в Google Cloud.

  1. В локальной среде разработки перейдите в каталог node/chat/gen-ai-apps/8-multimodal . В нём содержится весь исходный код и ресурсы.
  2. Перейдите на вкладку «Источник» на странице с подробными сведениями о службе функций Google Cloud Run.

  1. Нажмите «Редактировать исходный код» .
  2. Нажмите , введите credentials.json и нажмите ✔️, чтобы создать недостающий файл ресурсов.
  3. Вставьте содержимое JSON-файла, загруженного на предыдущем шаге, в только что созданный файл credentials.json .
  4. Замените всё содержимое файла index.js на содержимое файла, находящегося в вашей локальной среде разработки.
  5. Откройте файл env.js и установите значение параметра model равным gemini-2.0-flash-preview-image-generation .
...
model: 'gemini-2.0-flash-preview-image-generation',
...
  1. Нажмите «Сохранить и повторно развернуть» .
  2. Дождитесь успешного завершения развертывания версии.

487b64f2d3b1a104.png

Попробуйте!

В личном сообщении в приложении Google Chat загрузите свою фотографию в формате PNG, введите Change the background color to blue и нажмите enter . Приложение должно ответить версией фотографии с синим фоном и сообщением с подтверждением завершения.

270547e7a83c1841.png

11. Уборка

Удалить проект Google Cloud

Чтобы избежать списания средств с вашего аккаунта Google Cloud за ресурсы, использованные в этом практическом задании, мы рекомендуем удалить проект Google Cloud.

В консоли Google Cloud выполните следующие действия:

  1. Нажмите Меню ☰ > IAM и администрирование > Настройки .

  1. Нажмите « Выключить» .
  2. Введите идентификатор проекта.
  3. Нажмите « Выключить в любом случае» .

407699a4e03afea6.png

12. Поздравляем!

Поздравляем! Вы создали приложения Google Chat как дополнения к Google Workspace, интегрирующие фундаментальные концепции искусственного интеллекта!

Что дальше?

В этом практическом занятии мы демонстрируем только минималистичные примеры использования, но существует множество областей для расширения функционала ваших приложений Google Chat, например, следующие:

  • Поддерживает другие типы мультимедиа, такие как аудио и видео.
  • Интегрируйтесь с другими моделями ИИ, включая пользовательские, размещенными на специализированных платформах, таких как Vertex AI.
  • Интегрируйте систему с агентами, включая пользовательских, размещенными на специализированных платформах, таких как Agentspace и Dialogflow CX.
  • Используйте механизмы обратной связи и классификации для мониторинга и улучшения производительности.
  • Публикуйте контент на торговой площадке, чтобы расширить возможности команд, организаций или обычных пользователей.

Узнать больше

Разработчикам доступно множество ресурсов, таких как видеоролики на YouTube, сайты с документацией, примеры кода и обучающие материалы: