こんにちは！今回は、生成AI Claude 3.5 SonnetとAPIで連携してBubbleでAIチャットアプリを構築する方法をご紹介します。
ClaudeはAnthropic社が開発・提供しているAIファミリーで、SonnetはClaudeファミリーのパフォーマンスとスピードを両立するモデルです。Claudeはチャット型アシスタント「Claude ai」とClaude APIで利用することができます。
今回はそのClaude 3.5 SonnetとBubbleを連携し、API ConnectorでClaude APIを実行して連続したやり取りが可能なチャットアプリを構築する方法をご紹介します。
Claude aiのArtifactsについてもご紹介しているのでぜひご覧ください！
1. Claude概要
1.1. Claude
ClaudeはAnthropic社が開発する大規模言語モデルに基づく生成AIモデルのファミリーです。Haiku、Sonnet、Opusの3モデルが公開されており、それぞれ強みやコストパフォーマンスが異なります。Sonnetは3つの中でスピードとパフォーマンスのバランスがよいモデルとされています。
Claude 3.5 Sonnetは2024年6月に公開されたSonnetの最新バージョンです（2024年8月時点）。パフォーマンスと価格効率が向上し、Claude 3 Opus の 2 倍の速度で動作するということです。また、多くのベンチマークでGPT-4oを上回りました。推論力や知識、コーディング能力で他のモデルを上回ったほか、ニュアンスやユーモア、複雑な指示を理解する能力が向上し、自然な口調のコンテンツを生成する能力に優れていると評価されています。
Claudeはチャット型アシスタントの「Claude ai」と、Claude APIで使用することができます。
1.2. Claude ai Artifacts
Claude aiはClaudeをチャット形式で無料で利用できるサービスです。Claude 3.5 Sonnetも利用可能です。
Claude aiでは先日Artifactsという機能が公開されました。Artifactsは、Claude 3.5 Sonnetで利用できる機能で、チャットで送信したプロンプトを元に画面右側に生成物を表示してくれます。コードやテキストドキュメント、Webサイトのデザインや簡易的なアプリが対象です。
Artifactsは、Claude aiのホームでArtifactsをオンにして利用できます。
下記はArtifactsを試したプロンプトと生成結果の例です。下記のプロンプトを入力して簡易的な電卓アプリの生成を試してみました。
- プロンプト：
シンプルな電卓アプリを生成してください。四則計算ができるアプリで、シンプルなUIのものをお願いします。
プロンプトを送信すると、チャット画面の右側Artifacts画面で生成物が表示されます。Artifacts右上のタブで「Preview」を選択すると生成したアプリが表示され、「Code」を選択するとこのアプリのコードが表示されます。
実際に計算してみても正しい結果が表示されます。
1.3. Claude API
Claudeの各種モデルはAPIで利用することができます。Input、Outputのトークン数に応じて、モデルごとに異なる料金が発生する従量課金制です。今回試すClaude 3.5 Sonnetは下記の料金で利用できます。
- Input：$3 / MTok
- Output：$15 / MTok
- Prompt caching write：$3.75 / MTok
- Prompt caching read：$0.30 / MTok
ちなみに、Prompt caching write/readは、特定のプロンプトとその応答を保存（キャッシュ）する機能に関するもので、Prompt caching writeはプロンプトとその応答を保存すること、Prompt caching readは保存された応答を取得することを指します。この機能は、同じ質問が繰り返されるFAQチャットボット等のコスト削減や応答時間短縮に役立ちます。
Claude API登録時に$5分の無料クレジットを申請することができるので、今回はそれを使って試してみます。
2. Claude API利用登録
それでは、早速チャットアプリ構築手順を進めていきます。まずは、Claude APIのページを開き「Start Building」をクリックしてClaude APIの利用登録をします。
メールアドレスを入力後、名前等を入力して「Continue」をクリックします。
次の画面で、組織名を入力して「Create Account」をクリックします。
利用登録が完了したら、Developer Dashboardが開きます。上部に表示されている「Claim」をクリックすると、無料クレジットの申請画面に遷移します。
国を日本に変更し、自分の携帯電話番号を入力して「Send Code」をクリックします。
SMSで届いた認証コードを入力してクレジットの受け取り完了です。Dashboardに戻り、「Get API keys」をクリックします。
「API Keys」の画面で右上の「+Create Key」をクリックします。
表示されたポップアップでAPI Keyの名前を入力し「Create Key」をクリックします。
ポップアップでAPI Keyが表示されるのでコピーしておきます。
これでClaude APIの準備は完了です。
3. Bubbleでチャットアプリ構築
それでは、BubbleでClaudeと対話できるチャットアプリを構築していきます。
3.1. API Connectorの設定
まずはAPI ConnectorでClaude APIを実行する設定を行います。今回はClaude APIの「Create a message」APIを使います。
BubbleでAPI Connectorを下記の通り設定します。
- HTTP URL…https://api.anthropic.com/v1/messages
- Headers…①Key：
x-api-key、Value：作成したAPI Key、②Key：anthropic-version、Value：2023-06-01、③Key：content-type、Value：application/json - Body
{
"model": "claude-3-5-sonnet-20240620",
"max_tokens": 150,
"messages": [
{"role": "user", "content": "Hello, world"}
]
}
Claude 3.5 Sonnetでは、max_tokensは最大8192に設定できます（2024年7月、max_tokensが4096から8192にアップ）。ここではイニシャライズ用で150に設定しておきます。
チャットで送信する内容はmessagesで指定します。roleは、アプリの利用者によるメッセージならuser、チャットアシスタントならassistantが入ります。contentにはチャットの本文を指定します。イニシャライズで使用するcontentとしてHello, worldを設定しておきます。
設定できたら「Initialize call」をクリックします。Returned Valuesが確認できれば完了です。
今回は、Returned Valuesを下記の通り扱います。
- チャット画面に表示：
content: text - Dataに保存：
id、role、content: text
3.2. Dataの設定
Data typeとOption setを作成します。まず、Option setでチャット送信者のroleを識別するRoleを作成します。Optionとして、userとassistantを作成します。
Data typeは、Chatroomとチャットで送信されたメッセージを一つずつ保存するMessageを作成します。各Fieldは下記を参考に設定してください。
Chatroom
- Messages(List of Messages)
Message
- Chatroom(Chatroom)
- Content(text)
- Id(text)
- Role(role)
- RowContent(text)
3.3. PageとWorkflowの設定
チャットアプリの基本的な画面を作成します。今回は、ホーム画面とチャット画面を作成します。
3.3.1. ホーム画面
Chatroomを選択したり、新たにChatroomを作成するホーム画面を作成します。新規Chatroomを作成するボタンと、作成済みChatroomを表示する一覧を表示します。
ボタンクリック時に新規Chatroomを作成し、チャット画面に遷移して新規Chatroomを表示するようにWorkflowを設定します。
一覧クリック時に、チャット画面に遷移して選択したChatroomを表示するようにWorkflowを設定します。
3.3.2. チャット画面
チャット画面のPageとWorkflowを作成していきます。この画面ではチャットメッセージを送信しClaudeとやり取りします。Pageの詳細は、下記の記事やチャット・メッセージングアプリのTemplateを参考にしてみてください。
今回は、Claude aiのUIを参考に下記のようなPageを作成しました。
次に、送信ボタンクリック時のWorkflowを作成します。メッセージの送信ボタンから「Add workflow」をクリックしてWorkflowを作成します。
- Step1：Create a new Message（送信したメッセージをMessageに保存する）
- Step2：Make changes to Chatroom（Step1を現在のChatroomに保存する）
- Step3：Rest relevant input（入力欄を空欄にする）
- Step4：Scroll to entry of RepeatingGroup Message（最新のメッセージまでRepeatingGroupをスクロールする）
- Step5：Claude API - Create a message（Claude APIリクエストを実行する）
- Step6：Create a new Message（Step5の応答をMessageに保存する）
- Step7：Make changes to Chatroom（Step6を現在のChatroomに保存する）
- Step8：Scroll to entry of RepeatingGroup Message（最新のメッセージまでRepeatingGroupをスクロールする）
WorkflowのポイントはStep1とStep6、Step5です。Claude APIを使ってこれまでのメッセージを踏まえて会話するには、APIリクエストのBodymessagesパラメータに踏まえたいメッセージを全て含める必要があります。さらにこのとき、roleとcontentパラメータを使って発話者と発話内容を明らかにします。
{"role": "ROLE", "content": "MESSAGE-BODY"}
そこで、Step1とStep6ではmessagesの内容をJSON形式でMessage>RowContentに保存します。このとき、roleをStep1ではuserに、Step6ではassistantに設定し、contentに含まれる改行をfind&replace演算子を使って改行を表す文字\nに変換しておきます。
次に、Step5でAPIリクエストを実行する際、現在のChatroomの全Messageをmessagesに含むようにします。split by演算子を使ってRowContentを,で区切ります。
3.4. テスト
これで基本的な設定は完了です。正常にClaudeとチャットができるか確認してみます。特に2回以上往復したときに連続したやり取りができるかは要チェックです。
ホーム画面で「New Chat」をクリックします。
チャット画面でメッセージを3回送信して、連続したやり取りができているのを確認します。
ログでも、同じChatroomの過去のメッセージを送信できているのを確認します。
4. まとめ
今回は、Claude 3.5 Sonnetと対話できるチャットアプリをBubbleで構築する方法をご紹介しました。
Claude APIを使って過去のやり取りも踏まえた会話を成立させるには、過去のメッセージ全てを発話者と発話内容を明確にしてAPIリクエストで送信する必要がありました。
Claude 3.5 Sonnetは、推論の力や知識量の向上に加え、自然な会話のニュアンスやユーモアを理解する能力も向上しました。正確性と人間らしさの両方が必要なチャットアプリやコンテンツ生成に活用できそうです。ぜひお試しください！
