Building a Google Chat App with n8n
Tags: googlechat, n8n, chatapp, nocode
Published: 2023-12-01 06:35:35

---
title: Building a Google Chat App with n8n
published: true
date: 2023-12-01 00:00:00 UTC
tags: googlechat, n8n, chatapp, nocode
canonical_url: https://justin.poehnelt.com/posts/google-chat-app-with-n8n-workflow/
---

This afternoon I updated my homelab server from Bullseye to Bookworm and the latest version of Proxmox. This went off without too much excitement and I decided to install [n8n](https://n8n.io/) on the server. I’ve always enjoyed mashing tools together to do something useful and I decided to build a [Google Chat App](https://developers.google.com/chat) in the visual workflow editor.

## The Workflow

The workflow is pretty simple, but also incomplete.

1. The workflow starts with a Webhook Node that listens for an event from Google Chat.
2. Switch on message type.
3. Parse the slash command for the target language and the message to translate.
4. Use the Cloud Translation API to translate the message to the target language.
5. Send the translated message back to the user via the Webhook Response Node.
  
[![n8n workflow for a Google Chat App](https://justin.poehnelt.com/images/n8n-google-chat-app-workflow-_kf-dThrlu-600.jpeg)](https://justin.poehnelt.com/images/n8n-google-chat-app-workflow-_kf-dThrlu-600.jpeg)    

n8n workflow for a Google Chat App

    

You can download the workflow source from: [https://gist.github.com/jpoehnelt/b8327c11c77a3228e9f2ef1727d48a8f](https://gist.github.com/jpoehnelt/b8327c11c77a3228e9f2ef1727d48a8f)

Here are the settings for the Chat node.

  
[![n8n Google Chat App node settings](https://justin.poehnelt.com/images/n8n-chat-app-node--Z2TOAtTqd-400.jpeg)](https://justin.poehnelt.com/images/n8n-chat-app-node--Z2TOAtTqd-400.jpeg)    

n8n Google Chat App node settings

    

The finally node in the slash command path responds with JSON matching the following, which is basically a concatenation of the [Cloud Translation API response](https://cloud.google.com/translate/docs/reference/rest/v3/TranslateTextResponse#Translation):

```js
{ "text":  "Translates to: '{{ $json.translatedText }}' from {{ $json.detectedSourceLanguage }}."}
```

## Demo

The app is obviously not very refined, but it works! 🎉

[![n8n demo for a Google Chat App](https://justin.poehnelt.com/images/n8n-google-chat-demo.gif)](https://justin.poehnelt.com/images/n8n-google-chat-demo.gif)

n8n demo for a Google Chat App

## Chat App config

There isn’t much exciting about the Chat App config.

  
[![Chat App config basics](https://justin.poehnelt.com/images/n8n-chat-app-config-basics-mxVFCoIm-T-600.jpeg)](https://justin.poehnelt.com/images/n8n-chat-app-config-basics-mxVFCoIm-T-600.jpeg)    

Chat App config basics

    

The Google Chat App interactivity is configured with a slash command that sends a POST request to the webhook URL. The URL is the n8n webhook URL. The slash command is `/translate` and the parameters are `language` and `text`, the only code I had to write!

  
[![Chat App config interactivity](https://justin.poehnelt.com/images/n8n-chat-app-config-interactivity-Iyu9iDUv98-600.jpeg)](https://justin.poehnelt.com/images/n8n-chat-app-config-interactivity-Iyu9iDUv98-600.jpeg)    

Chat App config interactivity

    

## TODOs

There are a few things I didn’t do:

- Use cards, dialogs, etc
- Properly respond to the slash command so it is not visible in the chat
- Validate the token
- Handle errors

## Resources

- [n8n.io](https://n8n.io/)
- [Google Chat n8n Node](https://docs.n8n.io/integrations/builtin/app-nodes/n8n-nodes-base.googlechat/)
- [Google Chat API](https://developers.google.com/chat)
- [Cloud Translation API](https://cloud.google.com/translate)