こんにちは、令和トラベルでバックエンドエンジニアをしている高橋です。
令和トラベルでは2ヶ月に1回、Bet on Future Day （BoF Day）という1day開発合宿を開催しております。
前回の BoF Day は生成系AIの活用をテーマに開催されたので、その際に私がノーコードで作成した GPT Slack Bot の作り方をご紹介します。
今回作るもの
今回は Slack 上で GPT とやりとりできるシンプルな Bot を、MAKE（旧Integromat）というノーコードツールを使って作ろうと思います。
完成形は以下です。Slack 上で Bot にメンションをつけてメッセージを送ると、スレッド内で GPT から返信が返ってきます。
今回は文量の都合もあるので、Slack 利用者からのメッセージに対して一回のラリーで完結する回答のみをしてくれる Bot を作成しようと思います。
そのため、前のメッセージの内容など文脈を意識した回答をすることはできません。
（もちろん、ノーコードでも文脈を意識した回答をする Bot を作ることはできます！）
またシーケンス図としては以下になります。
GPT からのレスポンスに時間がかかるため、Slack 利用者がメッセージを送った際に Bot は一次返信として「入力中…」というメッセージを送るようにします。
なお、MAKE も GPT API もある程度までは無料枠で利用することができます。
いずれも無料枠を超える場合は課金をしないと使えなくなるのでご注意ください。
1. Slack Bot 用の Slack App を作る
Slack App を作成する
以下のページを開く。
「Create New App」を押す。
「From scratch」を押す。
「App Name」に適当なアプリ名を入力し、「Pick a workspace to develop your app in:」から Slack App を入れたいワークスペースを選択し、「Create App」を押す。
Slack App に権限を付与する
サイドメニューにある「OAuth & Permissions」を押す。
ページを下にスクロールすると「Scopes」が表示されるので、「Bot Token Scopes」の「Add an OAuth Scope」を押す。
「app_mentions:read」と「chat:write」を入力、選択する。
Slack App をチャンネルに追加する
ページを上にスクロールすると「OAuth Tokens for Your Workspace」が表示されるので、「Install to Workspace」を押す。
Slack App からワークスペースへのアクセスする権限をリクエストされるので「許可する」を押す。
Slack App を追加したいチャンネルを開き、チャンネル名を押す。
「インテグレーション」タブを押す。
「アプリを追加する」を押す。
検索バーに作成した Slack App の名前を入力する。
ワークスペースに追加した Slack App が表示されるので「追加」を押す。
2. OpenAI API の API key を取得する
以下のページから OpenAI API に登録する。
登録が完了したら以下のページを開く。
電話番号認証をするため「Start verification」を押す。
電話番号を入力し、「Send code」を押す。
SMS で届いたコードを入力する。
「Create new secret key」と表示されるので「Name」に適当なキーの名前を入力し、「Create secret key」を押す。
API key が生成されるのでコピーをしてどこかにメモしておく。
3. MAKE で Webhook を作成し Slack App と連携する
MAKE で Slack App からのリクエストを受け付ける Webhook を作成する
以下のページから MAKE に登録する（「Hosting Region」は「US」を選択する）。
ログイン後、ヘッダー右にある「Create a new scenario」を押す。
真ん中に表示される「＋」を押す。
ポップアップ内の検索枠に「Webhooks」と入力し、検索結果から「Webhooks」を選択する。
「Custom webhook」を選択する。
「Create a webhook」を押す。
「Webhook name」に適当な名前を入力し、「Save」を押す。
「Copy address to clipboard」を押して Webhook URL をクリップボードにコピーする。
Slack App を作成するで作成した Slack App を開き、サイドメニューの「Event Subscriptions」を押す。
「Enable Events」を On にして、Resuest URL に先ほどクリップボードにコピーした Webhook URL を貼る。
Slack App から Webhook に POST リクエストが飛び、「Your URL didn't respond with the value of the challenge parameter.」というメッセージが表示されるようになる。
この時点ではまだ Webhook URL は認証されていない。
MAKE の画面に戻ると「Successfuly determined.」というメッセージが表示されるようになるので「OK」を押す。
MAKE の Webhook URL を認証する
Webhooks のモジュールの右に表示されている「+ Add another module」を押す。
ポップアップ内の検索枠に「Flow Control」と入力し、検索結果から「Flow Control」を選択する。
「Router」を選択する。これで条件分岐が設定できるようになる。
上のレンチのアイコンを押す。
「Set up a filter」を選択する。
「Label」に「typeがurl_verificationの場合」と入力し、「Condition」を押す。
ポップアップ内に Slack App から Webhook に対して送られた Post リクエストのボディのキーが表示されるので、「Webhooks」→「type」を選択する。
「Text operators: Equal to」に「url_verification」と入力し、「OK」を押す。
これで Slack App から Webhook へのリクエストボディの type が url_verification の場合に、後続の処理が実行されるようになる。
上の「+」を押す。
「Webhooks」を選択する。
「Webhook response」を選択し、Webhook へのリクエストに対するレスポンスを設定する。
「Body」を押す。
「Webhooks」→「challenge」を選択し、「OK」を押す。
「Run once」を押して、Webhook へのリクエストを1度だけ受け付けることができるようにする。
起動中になる。
Slack App の画面に戻り、「Retry」を押す。
Webhook URL の認証に成功すると「Verified」と表示される。
4. MAKE で Slack App と GPT API を繋げる
Slack App にメンションしたらスレッドに返信がくるようにする
ページを下にスクロールすると「Subscribe to bot events」が表示されるので押す。
「Add Bot User Event」を押す。
「app_mention」を選択する。
これで Slack App へのメンションをトリガーに Webhook に POST リクエストが送られるようになる。
画面下部の「Save Changes」を押して保存する。
サイドメニューにある「OAuth & Permissions」を押す。
「Bot User OAuth Token」の「Copy」を押してトークンをクリップボードにコピーする。
MAKE の画面に戻り「Run once」を押す。
Slack App を導入したチャンネルで Slack App にメンションする。
MAKE の画面に戻り、下の「+」を押す。
ポップアップ内の検索枠に「HTTP」と入力し、検索結果から「HTTP」を選択する。
「Make a request」を選択する。
「URL」に「 https://slack.com/api/chat.postMessage 」を入力し、
「Method」で「POST」を選択し、
「Body type」で「Application/x-www-form-urlencoded」を選択し、
「Fields」の「Add item」を押す。
「Item 1」の「Key」に「token」を入力し、「Value」にクリップボードにコピーしたトークンを貼りつけ、
「Item 2」の「Key」に「channel」を入力し、「Value」に「Webhooks」→「event」→「channel」を選択する。
「Item 3」の「Key」に「thread_ts」を入力し、「Value」に「Webhooks」→「event」→「ts」を選択する。
「Item 4」の「Key」に「text」を入力し、「Value」に「入力中…」と入力する。
「Parse response」の「Yes」を選択し、「OK」を押す。
「Run once」を押す。
Slack で Slack App にメンションをすると、スレッド内に「入力中…」と返信が返ってくる。
Slack App へのメンション内容を GPT API にリクエストする
MAKE の画面に戻り、HTTP のモジュールの右に表示されている「+ Add another module」を押す。
ポップアップ内の検索枠に「JSON」と入力し、検索結果から「JSON」を選択する。
「Transform to JSON」を選択する。
「Object」を押し、ポップアップの上部タブにある「A」を押す。
「replace」関数を選択し、ポップアップの上部タブにある「☆」を押す。
「replace」関数の第1引数にカーソルを合わせ、「Webhooks」→「event」→「text」を選択する。
「replace」関数の第２引数にカーソルを合わせ、「/^<.+> /」（ボットへのメンションを抽出するための正規表現）と入力し、ポップアップの上部タブにある「A」を押す。
「replace」関数の第3引数にカーソルを合わせ、「emptystring」を選択し、「OK」を押す。
これで Slack App へのメッセージの中からメンションを取り除くことができるようになる。
次に JSON のモジュールの右に表示されている「+ Add another module」を押す。
「HTTP」を選択する。
「Make a request」を選択する。
「URL」に「 https://api.openai.com/v1/chat/completions 」を入力し、
「Method」で「POST」を選択し、
「Headers」の「item 1」の「Name」に「Authorization」を入力し、
「Value」に「Bearer [OPEN AI の API Key]（2. OpenAI API の API key を取得するでメモした API Key）」と入力し、
「Body type」で「Raw」を選択する。
「Content type」で「JSON (application/json)」を選択し、「Request content」に以下を入力する。
{
"model":"gpt-3.5-turbo",
"messages":[
{
"role":"user",
"content":
}
]
}
"content": の右にカーソルを合わせて、「JSON」→「JSON string」を選択する。
「Parse response」の「Yes」を選択し、「OK」を押す。
「Run once」を押す。
Slack で Slack App にメンションをする。
右の HTTP のモジュールの右上に「1」が表示されるので押す。
「OUTPUT」に「Status code 200」が表示されていれば GPT API へのリクエストに成功🎉
GPT API のレスポンス内容で Slack App の返信を更新する
右の HTTP のモジュールの右に表示されている「+ Add another module」を押す。
「HTTP」を選択する。
「Make a request」を選択する。
「URL」に「 https://slack.com/api/chat.update 」を入力し、
「Method」で「POST」を選択し、
「Body type」で「Application/x-www-form-urlencoded」を選択し、
「Fields」の「Add item」を押す。
「Item 1」の「Key」に「token」を入力し、「Value」に Slack App の Bot User OAuth Token を貼りつけ、
「Item 2」の「Key」に「channel」を入力し、「Value」に「Webhooks」→「event」→「channel」を選択する。
「Item 3」の「Key」に「ts」を入力し、「Value」に下の「HTTP」→「Data」→「message」→「ts」を選択する。
「Item 4」の「Key」に「text」を入力し、「Value」に上の「HTTP」→「Data」→「choices[]」→「message」→「content」を選択する。
「Parse response」の「Yes」を選択し、「OK」を押す。
「Run once」を押す。
Slack で Slack App にメンションをして返信が GPT からのレスポンスで更新されたら成功🎉
MAKE の画面に戻り、「Save」を押して保存し、左下の「SCHEDULING」を「ON」にしたら完成。
これで GPT bot とやりとりができるようになった！
しかし、一つの質問に対して連続して回答がくる現象が発生。
調べてみると、Slack App からの Webhook のリクエストに対してレスポンスを返していないことが原因だと判明。
MAKE の画面に戻り、Router と HTTP の間のレンチを押す。
「Add a module」を選択する。
「Webhooks」を選択する。
「Webhook response」を選択する。
「OK」を押す。
これで一つの質問に対して一つの回答が返ってくるように🙌
まとめ
今回は MAKE を使ってノーコードで GPT Slack bot を作成する方法をご紹介しました。
今回作った GPT bot は会話の文脈を理解した回答ができないですが、 MAKE のロジックをいじれば文脈を理解した回答などもできるようになります。
また MAKE ではスケジューラーでの定期実行ができたり、データベース機能も備わっていたりするので、MVP 的なアプリケーションをノーコードで作るのに優れていると感じました。
この記事が MAKE を使って Slack bot を作ろうとしている方の参考になれば嬉しいです。
最後に少し宣伝させてください 🙌
令和トラベルでは定期的に Tech LT 会などの勉強会やイベントを開催しております。
2/20（火）は 19:30からタイミーさん、Voicy さんと Backend に関する合同イベントを開催しますので、ぜひご参加ください！
令和トラベルのTech Blogです。 「あたらしい旅行を、デザインする。」をミッションに、海外旅行におけるあたらしい体験や、あたらしい社会価値の提供を目指すデジタルトラベルエージェンシーです。海外ツアー・ホテル予約アプリ「NEWT（ニュート）」を提供しています。（NEWT：newt.net/）
Discussion