Temel yapay zeka kavramlarını Google Chat uygulamalarına entegre etme

1. Başlamadan önce

Yapay zeka destekli Google Chat uygulamaları nedir?

Yapay zeka destekli Google Chat uygulamaları şunları yapar:

  • Hizmetlerinizi ve kaynaklarınızı Google Chat'e taşıyın. Böylece kullanıcılar, görüşmeden ayrılmadan bilgi alabilir ve işlem yapabilir.
  • Metin veya resim gibi verileri oluşturmak, aramak ve düzenlemek için üretken yapay zeka modelleriyle entegrasyon
  • Daha pratik, doğal, gelişmiş ve faydalı etkileşimler için etkileşimli yapay zeka kavramlarını uygulayarak ajan tabanlı bir deneyimi destekleyin.

Google Chat uygulamaları neden yapay zeka ile entegre edilmelidir?

Tipik kullanım alanları aşağıdaki kategorilere girer:

  • İçerik oluşturma ve düzenleme. Pazarlama metinleri oluşturma, sosyal medya gönderileri hazırlama, gerçekçi görüntüler oluşturma, müzik besteleme veya video içeriklerinin oluşturulmasına yardımcı olma
  • Veri arama ve analiz. Yapılandırılmamış bir bilgi tabanından önemli analizler elde edin, uzun metinleri özetleyin, içerikleri sınıflandırın veya dilleri daha doğru ve hızlı bir şekilde çevirin.
  • Görüşme Bir asistanla konuşur gibi doğal, bilgilendirici ve verimli sohbetler edin.
  • Görev otomasyonu. Kullanıcı adına işlem yapma (ör. yeni bir takvim etkinliği oluşturma, doküman gönderme veya harici bir sistemdeki bileti yönetme)

Bu özellikleri doğrudan Google Chat'in tanıdık arayüzüne entegre edebilme olanağı, kullanıcılarının deneyimini ve üretkenliğini artırmak isteyen herkes için büyük bir fırsattır.

Ön koşullar

Oluşturacağınız içerikler

Bu codelab'de, temel yapay zeka kavramlarını entegre eden sekiz minimalist Google Chat uygulaması oluşturarak bu kavramların gerçek dünya uygulamalarında nasıl kullanılabileceğini göstereceksiniz. Tümü Google Workspace eklentisi olarak oluşturulur ve HTTP mimarisini kullanır:

2f1e2c66f6e2e2f0.png

İşleyiş şekli şöyledir:

  1. Bir kullanıcı, Google Chat'te bir sohbet uygulamasına doğrudan mesaj yoluyla ya da bir Chat alanında mesaj gönderir.
  2. Sohbet uygulaması mantığını içeren Node.js Google Cloud Run işlevi olarak çalışan web sunucusuna bir HTTP isteği gönderilir.
  3. İsteğe bağlı olarak, sohbet uygulaması mantığı Google Workspace hizmetleriyle (ör. Takvim ve E-Tablolar), diğer Google hizmetleriyle (ör. Haritalar, YouTube ve Vertex AI) veya diğer web hizmetleriyle (ör. proje yönetim sistemi ya da destek kaydı aracı) entegre edilebilir.
  4. Web sunucusu, Chat'teki sohbet uygulaması hizmetine bir HTTP yanıtı geri gönderir.
  5. Yanıt, kullanıcıya iletilir.
  6. İsteğe bağlı olarak, sohbet uygulaması mesajları asenkron olarak yayınlamak veya başka işlemler gerçekleştirmek için Chat API'yi çağırabilir.

Her Google Chat uygulamasının Node.js Google Cloud Run işlevi, yukarıdaki 3. ve 6. adımlarda gerekli işlemleri yapmak için aşağıdaki kaynak dosyaların kendi sürümünü içerir:

  • package.json: Node.js projesi için plan görevi gören merkezi bir bildirim. Meta verileri, bağımlılıkları ve komut dosyalarını tanımlamak için kullanılır.
  • env.js: Yürütme için gerekli sabitleri ayarlayan bir komut dosyası. Ortama ve yapılandırmaya göre düzenlenmelidir.
  • index.js: Google Chat etkileşim etkinliklerinin mantığını işleyen ana komut dosyası. Bu codelab'de yalnızca mesaj etkinliği türü uygulanır ancak gerçek hayattaki uygulamalarda genellikle kart tıklama, eğik çizgi komutu ve iletişim kutusu gibi diğer türler de yer alır.

İstem uygulaması

Bu uygulama, kısa ve net metin yanıtları kullanarak kullanıcılarla doğal dillerinde sohbet etmek için bir Gemini modelini kullanır.

5975b36968ab597a.gif

Biçimlendirme uygulaması

Bu uygulama, Prompt app üzerine kurulmuştur ve Google Chat mesajlarının belirli metin biçimine uygun zengin metin yanıtları için destek ekler.

bc49e0acf0838f28.gif

Ground uygulaması

Bu uygulama, Format app üzerine kurulmuştur. Google Arama Aracı desteği ekler ve yanıt mesajlarındaki kaynakları kartlarla birlikte döndürür.

3cf232bf153f6abc.gif

MCP uygulaması

Bu uygulama, Format app üzerine kurulmuş olup Google Workspace Developer Assist Model Context Protocol (MCP) desteği eklenmiştir.

8219c29366e9120e.gif

Çok turlu uygulama

Bu uygulama, Format app üzerine kurulmuş olup Google Cloud Firestore veri tabanı ile etkileşimli hafıza desteği ekler.

a819c274ce586451.gif

Özel araç uygulaması

Bu uygulama, kullanıcı tarafından sağlanan bilgilere göre Google Workspace Takvim API'sini çağıran bir işlev çağrısı özel aracı desteği ekleyerek Multi-turn app üzerine kurulmuştur.

a1c4f586b7ab2e24.gif

Stream uygulaması

Bu uygulama, kullanıcılar tarafından sağlanan temalara dayalı kısa hikayeler oluşturmak için bir Gemini modelini kullanır. Google Chat API, ilerleme kaydedildikçe sonuçları ve durumları mesaj olarak göndermek için kullanılır.

fd347ba03fe86e22.gif

Çok formatlı uygulama

Bu uygulama, kullanıcıların metin talimatlarına göre resimleri düzenlemek için bir Gemini modelini kullanır. Google Chat API'leri, resimleri mesaj eki olarak indirmek ve yüklemek için kullanılır.

57574be33474bbc.gif

Öğrenecekleriniz

  • Temel yapay zeka kavramları, Google Chat uygulamaları ve bunların nasıl uygulanacağıyla ilgilidir.
  • Google Gen AI SDK'yı kullanarak Vertex AI'ye erişmek için.
  • Google Workspace API'lerini kullanarak ilgi çekici ve güçlü özellikler geliştirmek için.
  • Ölçeklenebilir Google Chat uygulamaları oluşturmak için Cloud Run'dan yararlanma

İhtiyacınız olanlar

  • Node.js ile HTTP Google Chat uygulaması oluşturma hızlı başlangıç kılavuzunu tamamlama. Bu codelab, ortaya çıkan Google Cloud projesi, Google Chat sohbet uygulaması ve Google Cloud Run işlevini temel alır.

2. Hazırlanın

Kaynakları başlatma ve kaynaklara erişme

Bu bölümde, tercih ettiğiniz web tarayıcısından aşağıdaki kaynaklara erişip bunları yapılandıracaksınız.

Google Chat API yapılandırması

Google Cloud Console'u yeni bir sekmede açın ve şu adımları uygulayın:

  1. Projenizi seçin.
  2. Google Cloud arama alanında "Google Chat API"yi arayın, ardından Google Chat API'yi, Yönet'i ve Yapılandırma'yı tıklayın.

  1. Uygulama adı ve Açıklama'yı Gen AI App olarak ayarlayın.
  2. Kaydet'i tıklayın.

9a06649cf9285b99.png

Google Chat alanı

Google Chat'i yeni bir sekmede açın ve aşağıdaki adımları uygulayın:

  1. Henüz yapmadıysanız sohbet uygulamasıyla doğrudan mesajlaşma alanı açın.
  2. Hello yazıp enter tuşuna basın. Sohbet uygulaması, adınız ve avatar resminizle yanıt verir.

e3b195c7b7b8e2af.png

Google Cloud Run işlev hizmeti

Google Cloud Console'u yeni bir sekmede açın ve şu adımları uygulayın:

  1. Projenizi seçin.
  2. Menü ☰ > Cloud Run > Hizmetler'i tıklayın.

.

  1. Hizmetler listesinde addonchatapp'i tıklayın, ardından Kaynak sekmesini açın.

b69df34ea0dc48a5.png

Kaynak kodu ve kaynakları yerel olarak indirme

  1. Bu GitHub deposunu indirin.

  1. Tercih ettiğiniz yerel geliştirme ortamında node/chat/gen-ai-apps dizinini açın.

3c57c15db4ebfddb.png

3. İstem uygulaması

Bu uygulama, Vertex AI'daki Gemini'ı kısa ve net metin yanıtları kullanarak kullanıcılarla doğal dillerinde sohbet etmeye yönlendirir. Uygulama, Node.js için Google Gen AI SDK'sını kullanır.

Kavramları inceleme

Doğal dil

Yapay veya bilgisayar tabanlı dillerin aksine, insanların günlük iletişim için konuştuğu veya yazdığı herhangi bir dil.

Cloud Run işlevleri

Cloud Run işlevleri, sunucusuz arka uçlar oluşturmak, gerçek zamanlı veri işleme yapmak ve akıllı uygulamalar oluşturmak için idealdir. Sağlama, yönetim, yama uygulama veya güncelleme için sunucu gerekmez. Otomatik olarak ölçeklendirilir, yüksek düzeyde kullanılabilir ve hatadan etkilenmez.

İstem

İstem mühendisliği, üretken yapay zeka modelini istenen çıkışı üretmeye yönlendirmek için giriş (istem) oluşturma tekniğini ifade eder. Genellikle modelden belirli ve alakalı yanıtlar almak için soruları dikkatli bir şekilde ifade etmeyi, bağlam sağlamayı, talimat vermeyi veya örnekler vermeyi içerir.

Vertex AI

Vertex AI; yapay zeka çözümleri, arama ve sohbet, 130'dan fazla temel model ve birleşik yapay zeka platformu dahil olmak üzere üretken yapay zeka oluşturmak ve kullanmak için ihtiyacınız olan her şeyi sunar.

c9e9c7a1945b22ac.png

Gemini

Gemini, Vertex AI üzerinden erişilebilen, Google'ın çok formatlı bir LLM'sidir. Kullanıcıların hayal güçlerini artırmalarına, meraklarını genişletmelerine ve üretkenliklerini geliştirmelerine yardımcı olarak potansiyellerini ortaya çıkarmalarını sağlar.

Google Gen AI SDK

Google Gen AI SDK, geliştiricilerin Gemini destekli uygulamalar oluşturması için tasarlanmıştır. Hem Gemini Developer API hem de Vertex AI ile uyumlu birleşik bir arayüz sunar. Python, Go, Node.js ve Java için istemci kitaplıklarıyla birlikte gelir.

İnceleme akışı

c625fdcc8b4a27f4.png

Kaynak kodunu inceleme

env.js

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

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

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

index.js

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

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

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

package.json

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

Vertex AI API'yi etkinleştirme

  1. Google Cloud Console'da Vertex AI API'yi etkinleştirin:

  1. Menü ☰ > API'ler ve Hizmetler > Etkin API'ler ve Hizmetler'i tıklayın ve Vertex AI API'nin listede olduğunu doğrulayın.

Google Cloud Run Node.js işlevini güncelleme

  1. Yerel geliştirme ortamınızda geçerli dizini node/chat/gen-ai-apps/1-prompt olarak değiştirin. Tüm kaynak kodu ve kaynakları içerir.
  2. env.js dosyasını bir düzenleyicide açın ve aşağıdakileri ayarlayın:
  3. projectID: Google Cloud projenizin kimliği. Bu anahtarı Google Cloud Console karşılama sayfasından alabilirsiniz.

  1. location: Google Cloud Run işlevi hizmetinizin bölgesi. Google Cloud Run işlevi hizmeti ayrıntıları sayfasından alınabilir.

.

  1. model: Kullanılacak model. Kullanılabilir tüm modelleri Vertex AI belgelerinde bulabilirsiniz. Varsayılan olarak ayarlanan model seti, hızlı ve ucuz bir yürütme için Flash'tir.

6c2fb9f554f53a4a.png

  1. Google Cloud Run işlevi hizmet ayrıntıları sayfasının Kaynak sekmesine gidin.

.

  1. Kaynağı düzenle'yi tıklayın.
  2. İşlev giriş noktası'nı gen-ai-app olarak ayarlayın.
  3. ➕ simgesini tıklayın, env.js yazın ve eksik kaynak dosyasını oluşturmak için ✔️ simgesini tıklayın.
  4. index.js, env.js ve package.json dosyalarının tüm içeriğini yerel geliştirme ortamınızdaki içeriklerle değiştirin.
  5. Kaydet ve yeniden dağıt'ı tıklayın.
  6. Düzeltme dağıtımının başarıyla tamamlanmasını bekleyin.

487b64f2d3b1a104.png

Deneyin

  1. Google Chat'te Chat uygulamasıyla olan doğrudan mesaj alanında Hello, how are you? yazıp enter tuşuna basın. Uygulama, istemdeki talimatlarımıza uygun olarak düz metinle kısa ve öz yanıt vermelidir.

3cc1fd1de2a9e239.png

  1. Google Chat'te Chat uygulamasıyla olan doğrudan mesaj alanında Bonjour comment allez-vous? yazıp enter tuşuna basın. Uygulama, istemdeki talimatlarımıza göre Fransızca yanıt vermelidir.

77010f4ad0bde5da.png

4. Biçimlendirme uygulaması

Bu uygulama, Google Chat kısa mesaj biçimine uygun zengin metin yanıtları desteği ekleyerek Prompt app üzerine kurulmuştur. İstemdeki talimatlar, modelin kullanabileceği farklı seçeneklerin ayrıntılı açıklamasıyla güncellenir.

Kavramları inceleme

Google Chat kısa mesajları

Google Chat kısa mesajları, doğrudan Google Chat arayüzünde daha net ve etkileyici mesajlar göndermenize olanak tanıyan çeşitli biçimlendirme seçeneklerini destekler. Kalın, italik, üstü çizili gibi biçimlendirmeler uygulamak ve köprü oluşturmak için belirli Markdown kurallarına dayanır.

İnceleme akışı

c625fdcc8b4a27f4.png

Kaynak kodunu inceleme

index.js

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

Google Cloud Run Node.js işlevini güncelleme

  1. Yerel geliştirme ortamınızda geçerli dizini node/chat/gen-ai-apps/2-format olarak değiştirin. Tüm kaynak kodu ve kaynakları içerir.
  2. Google Cloud Run işlevi hizmet ayrıntıları sayfasının Kaynak sekmesine gidin.

.

  1. Kaynağı düzenle'yi tıklayın.
  2. index.js dosyasının tüm içeriğini yerel geliştirme ortamınızdaki içerikle değiştirin.
  3. Kaydet ve yeniden dağıt'ı tıklayın.
  4. Düzeltme dağıtımının başarıyla tamamlanmasını bekleyin.

487b64f2d3b1a104.png

Deneyin

  1. Google Chat'te Chat uygulamasıyla olan doğrudan mesaj alanında Showcase all formatting options you have with one paragraph each yazıp enter tuşuna basın. Uygulama, istemdeki talimatlarımıza göre biçimlendirme örnekleriyle yanıt vermelidir.

cc7f7101d9f7c10.png

  1. Google Chat'te Chat uygulamasıyla olan doğrudan mesaj alanında What are Google Chat apps? What's great about them? yazıp enter tuşuna basın. Uygulama, yararlı olduğunda biçimlendirme yaparak yanıt vermelidir.

83557d4c7071aac8.png

5. Ground uygulaması

Bu uygulama, Format app üzerine kurulmuş olup kaynakları temellendirme ve döndürme desteği ekler. Google Arama aracını çalıştırır ve yanıtlara giden bağlantıların bulunduğu kartları ekler.

Kavramları inceleme

Temellendirme (Grounding)

Temellendirme, modelleri bilgi kaynaklarına bağlama tekniğidir. Gerçek dünya verilerine referans vererek oluşturulan içeriğin doğruluğunu ve alaka düzeyini artırmak için pratik uygulamalarda sıklıkla kullanılır. Böylece modelin halüsinasyon görmesi veya gerçeğe aykırı bilgiler üretmesi önlenir.

Google Arama Aracı

Google Arama aracı, modellerin web'de gerçek zamanlı bilgi aramasına olanak tanıyarak temellendirmeyi geliştirir ve yanıtların doğru ve güncel olmasını sağlar.

Google Workspace Card framework'ü

Google Workspace'teki Kart çerçevesi, geliştiricilerin zengin ve etkileşimli kullanıcı arayüzleri oluşturmasına olanak tanır. Metin, resim, düğme ve diğer widget'ları içerebilen düzenli ve görsel açıdan çekici kartlar oluşturulmasına olanak tanır. Bu kartlar, yapılandırılmış bilgiler sağlayarak ve doğrudan görüşme içinde hızlı işlemler yapılmasına olanak tanıyarak kullanıcı deneyimini iyileştirir.

Akışı inceleme

b72d69a6e79858d6.png

Kaynak kodunu inceleme

index.js

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

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

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

Google Cloud Run Node.js işlevini güncelleme

  1. Yerel geliştirme ortamınızda geçerli dizini node/chat/gen-ai-apps/3-ground olarak değiştirin. Tüm kaynak kodu ve kaynakları içerir.
  2. Google Cloud Run işlevi hizmet ayrıntıları sayfasının Kaynak sekmesine gidin.

.

  1. Kaynağı düzenle'yi tıklayın.
  2. index.js dosyasının tüm içeriğini yerel geliştirme ortamınızdaki içerikle değiştirin.
  3. Kaydet ve yeniden dağıt'ı tıklayın.
  4. Düzeltme dağıtımının başarıyla tamamlanmasını bekleyin.

487b64f2d3b1a104.png

Deneyin

Google Chat'te Chat uygulamasıyla olan doğrudan mesaj alanında What's the world population? yazıp enter tuşuna basın. Uygulama, kaynak bağlantılarını bir karta ekleyerek yanıt vermelidir.

cff461da29c05873.png

6. MCP uygulaması

Bu uygulama, uzaktan barındırılan bir Model Context Protocol (MCP) sunucusu tarafından sağlanan araçlar için destek ekleyerek Format app üzerine kurulmuştur. Google Workspace Developers dokümanlarına erişmek ve bu dokümanlarda arama yapmak için araçlar sağlayan Google Workspace Developer Assist MCP'ye bağlanır.

Kavramları inceleme

Model Context Protocol (MCP)

Model Context Protocol, modelleri harici hizmetlerle standartlaştırılmış bir şekilde entegre eden açık kaynaklı bir çerçevedir. Modeller, çeşitli araçları programatik olarak keşfedebilir, anlayabilir ve bunlarla etkileşime geçebilir. Böylece yeteneklerini genişletebilir, gerçek dünyada işlemler gerçekleştirebilir ve güncel bilgilere erişebilir.

MCP TypeScript SDK'sı

TypeScript SDK, tam MCP spesifikasyonunu uygular ve herhangi bir MCP sunucusuna bağlanan MCP istemcilerinin oluşturulmasını kolaylaştırır. Ayrıca, kaynaklara, istemlere ve araçlara erişim sağlayan MCP sunucularının geliştirilmesini de sağlar.

İnceleme akışı

e0b324e2cca21915.png

Kaynak kodunu inceleme

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