Featured image of post Slack App Setup

Slack App Setup

Setup a Slack app to use for future interactive messages and slash commands in my workspace.

I have my automatic cover image generator setup, but currently don’t have a way to trigger it.

I could set it up to automatically trigger on a pull request, but because I’m watching my AI costs, I’d like to have some control on when it actually runs.

There’s a few ways that I could trigger it manually:

  1. Start the process from a comment in a GitHub pull request
  2. Create a Slack app:
    • with a slash command to trigger the image generation
    • -AND/OR-
    • prompt the user automatically on a pull request open if they would like to generate an image

I’m leaning into Slack app instead because it provides a space for a future-facing feature where the user can choose from multiple images generated by the AI.

I’ll start with the slash command as that was easy to set up last I recall.

Slack API Endpoint

Similar to GitHub, Slack will ask for an API endpoint to send events. I’ll add this code to my dev-workflow repo.

Because Slack requires a POST endpoint that responds within 3 seconds, I’ll need to set up the Lambda function call to be asynchronous.

With asynchronous calls, you cannot do a Lambda Proxy, because it removes the option to add the X-Amz-Invocation-Type header.

Additionally, the slash command content type is sent as application/x-www-form-urlencoded, so I had to tweak the API Gateway mapping template to not attempt to convert to json.

Set Up the Slack App and Slack Command

It’s been awhile since I’ve set up a Slack app, so I’ll create a new one from scratch to better understand the scopes and settings. For free users, you can create/integrate up to 10 apps.

Slack app configuration home screen

First I’m going to change the avatar, so I’m not always looking at a notebook and pencil. 📝

Upon expanding the “Add features and functionality” section, I see the “Slash Commands” option; it is also in the left navigation halfway down the list.

I’m going to name the command ‘pattyrbot’ for now and I added the endpoint I created in my dev-workflow API Gateway.

Slack command configuration screen

Now, I’ll install the app to a workspace and try to run the command.

Running the Slack command in the workspace

The command ran but nothing displayed in the chat because I’m not returning anything to the user.

I see in the lambda function logs that the command was received, so now I can modify the lambda function to return a message to the user.

Respond to the Slack Command

The body I received in the Lambda function looks something like this (after splitting by &):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
token=abc
team_id=123
team_domain=smylee
channel_id=CCCCCC
channel_name=pattyrbot
user_id=ABCD
user_name=pattyr
command=%2Fpattyrbot
text=idk
api_app_id=AAAAAAA
is_enterprise_install=false
response_url=https%3A%2F%2Fhooks.slack.com%2Fcommands%2FT1FEY2U01%2F7360902495110%2asdfsfadsf
trigger_id=123.456.7890

The response_url is where I need to send the response.

Slack command response

Parse the action (text)

The text parameter is where the user can sends additional information to the command.

I’m going to make a hugo-cover-image action that will send a message to the SNS topic the image generator Lambda function is subscribed.

The command will end up looking like: /pattyrbot hugo-cover-image.

Slack command with an action

I also sent a bad request response if the action is not recognized.

Slack command with an unrecognized action

Connecting to the Image Generator

The image generator Lambda function is already set up to receive messages from the SNS topic, so I just need to publish a message in a format that the app knows to the topic.

Additionally, the image generator no longer writes immediately to the pull request, so I’ll need to send a message back to the Slack command to let the user choose which image they want to use.

Currently, it only generates one image, but it’s setup to accept more.

generated_image_in_slack.png

I know the command is a bit long, but at least it will tell you what is missing and the exact command you last entered 😅

missing_parameters.png

Next Steps

Get all my code uploaded and merged. 👀

Set up the button functionality so it triggers the file update on the pull request with the chosen image.

Future Idea

What I’d like to do next is to use the @botname feature to give it natural language to process through an AI, generate the payload to trigger the process, instead of the long command. 🤖

Built with Hugo
Theme Stack designed by Jimmy