見出し画像

超簡単！「pipedream」を使ってノーコード開発｜素人でもSlack上にOpenAIのチャットBotを実装できちゃった

えふらいん│art×digital×business

いつの間にやら11月に入ってしまいました。
「10月これやる宣言」で宣言していた「自分専用のAIチャット」、着々と開発は進めているのですが、実現した要件にはあと一歩のところです。
ですが、その過程でとっても便利なサービスを見つけたので一旦記事にしてみようと思います。
note内で検索してもまだあまり記事がなかったので、参考になれば幸いです。
コード書けなくても大丈夫ですが、それでもやっぱりAPIとかHTTPエンドポイントとか、多少の概念は理解できないと難しいかもな、というレベルです。


当初作ろうと思っていたものはこうだった

先月書いた要件定義はこんな内容でした。

独自の学習データを読み込ませる
セイキュリティを担保するために学習データはローカルに置く
自分好みのUIを作る
プロンプトとして複数のキャラクターを設定できるようにする

My要件定義

１ヶ月あれこれトライしていましたが、今のところ実現できたのは１つ目と２つ目までです。
これは比較的簡単で、LlamaーIndexというライブラリーを使えば、自前のデータをあらかじめ「インデックス」と呼ばれるデータに変換しておいて、OpenAIにプロンプトを投げる際に一緒に投げつけることで、独自データにしかない情報でも応答できるようになりました。

以下の記事を参考にさせていただいたので、リンクを貼っておきます。
※最新記事がアップされていたのでそちらを紹介します。

がしかし、Google Colabとか、VSCodeとか、いわゆる開発ツール上でテキストが返ってくるだけでは物足りない！
自分専用のUIにしたい！
ということで、色々他の情報を探索し始めたのでした。

とりあえずUIはSlackでいいんじゃない？

ネット上の記事を色々探していると、どうやら同じようなことを考えている人はたくさんいるようで、中でも多かったのがSlackから質問をするとSlackの中でAIが回答する、という形での実装方法でした。

なるほど。
うちの会社でも日常的にSlackを使っています。
なんなら、初対面の人以外は、社外の人も基本的にはSlackでのやり取りがメインになってきました。
それならばみんなが使い慣れてるSlackからOpenAIが使えるのが良いかもしれません。

しかしそうなると、今度はSlackのAPIを勉強せねばなりません。
うーむ、学ぶことが増えるなあ。
まあこれも良い機会、お勉強するとしよう！

でまあ、「Slack API」で検索したら、アッサリ公式の日本語ページが出てきました。

ふむふむ、BOLTという公式フレームワークがあるようですね。
チュートリアルとか充実してそうですが、「Hellow World」から一通りやるのも面倒だし、またUdemyで勉強するのも時間かかるし、どうしようかな。

と言うことで、既に実現済みの他人様の記事を検索しましたw

と、やっぱり。既に実現されていらっしゃる方が記事を書いています。
いくつか記事を読んだ結果、こちら様の記事が素人には一番簡単そうでした。

レゴブロックみたいに開発できちゃう「Pipedream」

先ほどの記事で紹介されていたのが「Pipedream」というサービスでした。別の記事によると「API統合に特化したメッセージングプラットフォーム」だそうです。

へえ〜。

いわゆるノーコード開発ってやつでしょうか？
調べてみると他にも色々あるようですが、とりあえずコレが簡単そうなんでやってみました。

Pipedreamでは「ステップ」と呼ばれる単一機能の塊を繋げていって、一連の処理を構築するようです。まるでレゴブロックを積み重ねるみたいですね。シンプルなものから、やや複雑なものまで、たくさん登録されていそうです。

ちなみに「pipedream」でググるとハッキングツールの方が有名らしくいっぱいニュース記事やら出てきてしまうと思うので、公式のリンクを貼っておきます。一定回数までは無料で使えるようです。

作ったステップはたった３つ！これで動いちゃった

先ほどご紹介した記事の通りやっていたんですが、どうしてもうまくいかずに途中で諦めましたw
多分、私の知識が足りないせいでしょう。思ったよりプログラムソースを書く部分が多かったので、それが上手く動作しなかったんだと思います。

で、改めてPipedreamsの画面を眺めてみると、何やらすぐにでも使えそうなステップが並んでるではありませんか！
これ使えば、もっと簡単にできるんでは？？

OpenAI(ChatGPT)とかあるやないですか！

完成品はこちら。究極的にシンプルな構造です笑

ということで、気を取り直して自前のステップを組んでみました。
ご覧ください、私が組み立てたステップがこちらです。
ジャジャーン！

たった３つのステップで完成！

いかがです？たったこれだけですよ？
これだけで、Slack上で質問をするとOpenAIが回答してくれるんです。

それでは興味のある方向けに、もう少しだけ解説しましょう。
簡単に真似できると思うので、よかったらお試しください。

ステップ１：trigger：何をきっかけで動くのよ？

まずは何をトリガーとして処理がスタートするのかを決めます。
SlackからはHTTPのPUTで接続されてくるので、
先ほどのステップ検索から「HTTP/Webhook」を選択します。

triggerの設定はこんな感じ

  • Event Data：Full HTTP request　＊Fullにしておいた方が無難

  • HTTP：Return a static response　＊シンプルな即答を返すよ

  • Status Code：200　＊成功だよ、は200がお決まりらしい

  • Headers：Content-type:application/json　＊JSONでお返事するよ

  • Body：{"blocks": [{"type": "section","text": {"type": "mrkdwn","text": "🤖＜ ﾁｮｯﾄｶﾝｶﾞｴﾃｲﾏｽ..."}},]}
    　＊とりあえず一次回答なのでなんでもOKなんですが、先ほどの記事を参考にこう書きました。

  • Domains：pipedream.net　＊独自ドメインも設定できるみたいです

ちなみに、ここで専用のURLが発行されますので、これをコピーしてSlack APIの方に設定してください。
The unique URL to trigger this workflow is:https://XXXXX.pipedream.net
（今回はSlackAPI側の設定は省略しますので、冒頭で紹介した記事を参考にしてください！）

ステップ２：Chat：OpenAIさん、お答えください

次はtriggerで受け取ったSlackからの質問をOpenAIに投げる処理です。
triggerの下にある「＋」マークを押して次のステップを追加します。
ステップ検索メニューで「OpenAI(ChatGPT)」を選びます。

OpenAIに質問するステップ

  • OpenAI(ChatGPT)Account：OpenAIのAPIキー　＊予めご用意ください

  • Model：gpt-3.5-turbo　＊gpt4だとタイムアウト連発でした

  • User Message：{{steps.trigger.event.body.text}}
    　＊プルダウンから質問の項目を探して選択

  • System Instructions：あなたは優秀で親切なアシスタントです。
    　＊お好みで「学校の先生」とか「カウンセラー」とかAIに与える役割を書換えてください。

他の項目は設定しなくても大丈夫です。

はい、これで無事OpenAIから回答が返ってきました！
念の為左下のブルーの「TEST」ボタンを押して処理を確認しましょう。
ResultのところにOpenAIからの回答が出ています。
choiceの中のcontent:に回答が出ていると思います。

さあ、最後にSlackに投げ返す処理を追加します！！

ステップ３：Send Message to Slack：Slackに回答を送るよ

最初は元記事を参考に「node」でコードを書こうかと思ったのですが、前半で書いた通りエラーで失敗を繰り返したので、「Send Message to Slack」を使いました。
これなら予め用意された項目だけ入れればSlackにつながりそうです。

いよいよSlackに回答を返しますよ！

  • SlackAcount：普段使っているSlackのアカウントを選ぶ

  • Channnel ID：triggerの中からchannel_idを探す

  • Text：chatの中からmessage.contentを探す

  • Send text Slack mrkdwn：TRUE　＊これ設定しておくときちんと改行してくれます

  • Bot Username：好き名前をつける

  • Include link to workflow：なんだったかな。リンク不要だったのでFALSEにしました・・・

他の項目は設定しなくても大丈夫です。

ステップ4：テストが終わったらDeployだ！

最後のSlack送付のところも「TEST」を行なってResultで結果を確かめてください。
無事OpenAIからの返答が表示されていればOKです。
おもむろにブルーの「Deploy」ボタンを押してください。
（自分は最近この「デプロイ」って専門用語っぽくてカッコ良いなと思ってますw）

あとはSlack上で実際に質問をして、回答が返ってくるか確認してください。

補足と注意点

少しだけ自分が気をつけたことというか、発見したことを書いておきます。

SlackAPIは3秒しか待ってくれない！

そうなんですよ、Slack APIは気が短くて、3秒待っても返事が返ってこないとタイムアウトしてしまいます。OpenAIはそんな素早く回答してくれないので、時間稼ぎが必要です。
そこで冒頭のtrrigerのところで、「🤖＜ ﾁｮｯﾄｶﾝｶﾞｴﾃｲﾏｽ...」というテキストを一旦返しておいて、タイムアウトを防いでいます。
そのあと改めてOpenAIからの回答をSlackに返信しています。

GPT4はタイムアウトになりやすい！

今回使った「OpenAI(ChatGPT)」では、どうやら自動的にモデル一覧を取得してきているのか、公式のGPT-4やGPT-4-0613が選択肢に出てきます。
何度か成功はしたんですが、ほとんどの場合はタイムアウトしてしまいました。
タイムアウトの設定を変える箇所が見つからなかったので、あきらめてgpt-3.5-turboを使っています。

System Instructionsで回答精度をコントロール！

ChatGPTでもよく言われていますが、与えるプロンプトによって回答の精度が変わってきます。
例では「あなたは優秀で親切なアシスタントです。」としましたが、これは汎用的なロール（役割）なので、実は何も入力しなくても大して変わりません。
自分は質問の内容によって与えるロールを変えて使っています。参考にいくつか例を挙げておきます。
・あなたは優秀なビジネスコンサルタントです。
・あなたは優秀なファイナンシャルプランナーです。
・あなたは優秀な心理カウンセラーです。
・あなたは優秀なブロガーです。
・あなたは優秀なコピーライターです。

まとめ

今回は「Pipedream」というAPI統合ツールを使って、SlackからOpenAIに質問できるチャットBotを開発してみました。
これが開発と呼べるなのか分かりませんが、コンソール画面じゃなく、普段使っているSlackの画面上でOpenAIが使えるようになったので、自分としてはたいへん満足しています笑

Pipedreamにはあらかじめ便利なステップが多数用意されているので、これらをレゴブロックのように組み合わせるだけで、様々な機能が開発できます。他にもGlithも使ってみたのですが、Pipedreamの方が簡単でした。どちらも無料で使えるのですが、1日の上限回数があるので、本格的に使うには有料版にアップグレードする必要がありそうです。

「こういうものが実現したい！」というゴールが先にあると、どうやって開発して良いか、多数ある選択肢の中から最短ルートが選べると思います。
今回は「Pythonで０から開発するのは一旦脇に置いて、手軽にSlack上でチャットができれば良いや！」とゴール（仕様）を割り切ったので、Pipedreamを使ったノーコード開発に辿り着きました。

とはいえ、当初の目的である「独自のUI」と「複数キャラクターの切替設定」は実現できていないので、引き続き次なる開発に向けて取り組んでいこうと思っています。

いやあ、ほんと開発って楽しい。

新しいことを覚えている実感があるのもそうですが、実際に動いた時の喜びがあります。こういうポジティブフィードバックがあると、モチベーションが続くんでしょうねぇ。

おまけ

ちなみにHTMLからPipedreamに接続するアプリも開発中です。こちらは「独自のUI」を実現するために、画面のデザインをHTMLで工夫するためです。
基本構成はほぼ同じで、最後のステップが「Send Message to Slack」じゃなくて、「return_http_response」というHTTPのステップになります。
最初にSlack UIで実装してから取り組んだので、応用が効いたのか割と早く実装ができました。

しかし、Pipedreamを無料で使っている限りは1日上限があるんですよね。ちょっと質問を繰り返しているだけで、あっという間に上限に達してしまいます。
なので、次はAWSのLambdaを使った開発にトライしようと思っています。
ラムダ、おー！ついに本格的な名前が出てきたぞ！
仕事で接する開発ベンダーの人から聞いたことはあれど、ついに自分が触ることになろうとは。
乞うご期待ですw

ここまで読んでいただき、ありがとうございました。 またお時間ある時にでも立ち寄っていただけたら幸いです。


いいなと思ったら応援しよう！