【初めてのAPI接続】Bubble × ChatGPT API でチャットボックスを作ってみた

2023年5月13日 17:36

本日は、ノーコード開発ツールのBubbleを使って、ChatGPTのAPIを動かしてみたいと思います。

※前提として、私は非エンジニアです。元々はデザイン業界に長くおり、様々なプロジェクトや組織の運営に関わる中で、業務の効率化や省人化に役立つスキルが身に付いていきました。

Bubblesでのアプリケーション開発全般については、ノーコードラボさんがとても詳しく書かれていて、いつも参考にさせていただいています。ノーコードラボさん、ありがとうございます！

また、今回のBubble×ChatGPT APIでは、PlanetNoCode さんの動画を参考に進めさせていただきました。PlanetNoCode さん、ありがとうございます！

ChatGPTのAPIをゲットする

ChatGPTのAPIを使うには、フリープランから ChatGPT Plus（月$20）に切り替える必要があります。クレジットカード決済ですぐに切り替えができます。2023年4月22日時点のレートで、月20$ = 月2,735円でした。まぁまぁなお値段…。

ちなみにですが、ChatGPT Plusに切り替えてもChatGPTのAPIが使い放題になるわけではありません。APIは、使用量に応じて費用が請求がされる課金モデルになっていますので、こちらも別途支払いの設定が必要になります。私がAPIの支払い設定をした2023年5月5日時点では、無料で使えるクーポンの付与などは無く、いきなり課金でレッツゴーな感じでした。残念…。

BubbleでのAPI設定｜プラグインを入れる

それでは、Bubbleで設定をしてみましょう。まず初めに、APIを使うためのプラグインを入れます。「API Connector」というのを使いますので、追加してください。API Connector を Install → Doneで追加ができます。

BubbleでのAPI設定｜API Reference を見にいく

「API Connector」の設定に必要な情報がOpenAIの「API Reference」ページにありますので、別タブで開いておきましょう。リファレンスには、ChatGPTのAPIを使うための様々なリファレンスが公開されています。

curl https://api.openai.com/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -d '{
    "model": "gpt-3.5-turbo",
    "messages": [{"role": "user", "content": "Hello!"}]
  }'

BubbleでのAPI設定｜プラグインの設定をする

上記の情報をBubbleの「API Connector」の設定欄にコピペしていきます。ちょっと長いですが、コピペだけすれば良いので、一個一個間違えないように設定を入れていきましょう。赤い場所が、ChatGPTのAPI keyを入れる場所です。

API Name：Open AI
Authentication：Private key in header
Key name：Authorization
Key value：先頭に「Bearer」を書いて、その後ろに「半角スペース」を入れ、さらにその後ろにChatGPTのAPI keyをコピペしてください。
Key：Content-Type
Value：application/json
Name：Send message
Use as：Action
Data type：JSON
POST：https://api.openai.com/v1/chat/completions
Body type：JSON
Body (JSON object, use <> for dynamic values)：下記をコピペ。

{
    "model": "gpt-3.5-turbo",
    "messages": [{"role": "user", "content": "<message contents>"}]
  }

まず、「model」のところが「gpt-3.5-turbo」になっています。これは、皆さんが作っているWEBアプリケーションでChatGPTのどのモデルを使いたいかで変わってきます。モデルの一覧はこちらにありますので、適切なモデルを選んでください。ただ、モデルによってAPIの課金費用が変わってきますので、いきなり最高級な「gpt-4」を使うのではなく、一番安い「gpt-3.5-turbo」で開発を進めて、ちゃんと稼働が確認できた後に「gpt-4」に変えるのがおすすめです。

また「content」の方も本来の「Example request」に書かれている「Hello!」から変えてあります。この「Hello!」の部分が、我々人間がChatGPTに投げるメッセージの部分になります。ここを変える（変数にする）ことで、ChatGPTの返事が変わるということですね。

この「Hello!」の部分に「<message contents>」と入れてみてください。そうすると、その下の Body parameters > Key に「message contents」と表示されませんか？これで、様々な変数を入れてChatGPTの反応を試してみることができます。なお、「message contents」は、英数ならなんでもOKです。この後、Bubbleのワークフローなどで使っていくので、皆さんの任意の名前をつけてください。

BubbleでのAPI設定｜ちゃんと動くかテストする

「message contents」の「Value」に「日本の首都は？」と入れて「Initialize call」のボタンを押してみましょう。「Initialize call」では、APIの設定がきちんとできているか、実装テストをすることができます。

そうすると、「Returned values - Send message」というポップアップが出ます。文字が小さくて気が付きにくいのですが、「日本の首都は？」の質問に対して、「message content」に「東京です。」と回答が来ました！API接続の成功です。「Save」して完了です。

この「Returned values - Send message」では、BubbleからChatGPTのAPIに質問を投げかけて、返ってきた様々な値を表示させています。一般的に私たちは質問に対する回答である「message content」にしか目が行かないのですが、それ以外にも、どれくらいトークンを使ったかとか、どのモデルを使ったかなど、色々な情報が戻ってきているのです。

Bubbleで見た目の設定

ChatGPTのAPI接続に成功したので、あとはBubble側で見た目を作って、ワークフローを設定します。

まず初めに、ChatGPTに送るメッセージを書くところ、そのメッセージを送信するボタン、ChatGPTからの返事を書くところの3つを用意しましょう。

「ChatGPTからの返事を書くところ」はリピーティンググループになっています。

Bubbleでデータベースの設定

また、ChatGPTから返ってきた返事を保存するためのデータベースも用意します。「Message」というTypeを作り、「Contents」というFieldを用意します。

Bubbleでワークフローの設定

「Send message」の青いボタンを押したときのワークフローを設定します。まず初めに、ChatGPTへメッセージを送ります。次に、ChatGPTからの返事を「Message」>「Contents」Fieldに記録します。最後に、リピーティンググループになっている「ChatGPTからの返事を書くところ」の設定で「Contents」Fieldに記録したデータを表示させれば完成です。