Contents
スポンサードリンク
1. 事前準備
| 項目 | 必要な操作 | 保存場所 |
|---|---|---|
| Bubble アカウント | 無料プランでサインアップ → プロジェクト作成 | Bubble のダッシュボード |
| OpenAI API キー | OpenAI コンソール → API keys → 「Create new key」 | Bubble → Settings → Secrets（例: OPENAI_API_KEY） |
| Anthropic (Claude) API キー | Anthropic Console → API Keys → 新規作成 | 同上 (ANTHROPIC_API_KEY) |
| Dify API キー | Dify ダッシュボード → Settings > API → キー生成 | 同上 (DIFY_API_KEY) |
ポイント
- すべてのキーは App secrets に保存し、ワークフローやプラグインから{{app secret KEY_NAME}}で参照します。
- 無料枠でも開発テストは可能ですが、レートリミットと利用上限には注意してください。
2. UI 作成
2‑1. ページと要素の配置
| 手順 | 操作内容 |
|---|---|
| 1 | Pages → 「New page」→ ChatApp と命名し作成 |
| 2 | 左パネルから Input をドラッグ、プロパティで ID user_input、プレースホルダー「質問を入力…」 |
| 3 | 同様に Multiline Input（読み取り専用）を配置、ID ai_response、高さ 200 px、スクロール有効化 |
| 4 | Button を追加しテキスト「送信」、クリック時のワークフローは後述 |
2‑2. レイアウト上の留意点
- 入力フィールドと送信ボタンは同一行に配置し、モバイルでもタップしやすいサイズ（最小 44 dp）を確保。
ai_responseは Read only にしておくことで、ユーザーが誤って書き換えることを防止。
3. API Connector 設定
3‑1. 共通認証設定
- Plugins → API Connector → Add another API
- 名前例:
OpenAI Chat、Anthropic Claude、Dify Chat（それぞれ別に作成） - Authentication：Private key in header を選択し、以下のヘッダーを設定
| サービス | ヘッダー形式 |
|---|---|
| OpenAI | Authorization: Bearer {{app secret OPENAI_API_KEY}} |
| Anthropic | x-api-key: {{app secret ANTHROPIC_API_KEY}} |
| Dify | Authorization: Bearer {{app secret DIFY_API_KEY}} |
3‑2. 各サービスの API 呼び出し例（POST / JSON）
OpenAI (GPT‑4o‑mini)
|
1 2 3 4 5 6 7 8 9 |
{ "model": "gpt-4o-mini", "messages": [ {"role":"system","content":"You are a helpful assistant."}, {"role":"user","content":"<user_input>"} ], "temperature": 0.7 } |
URL: https://api.openai.com/v1/chat/completions
Body type: JSON (raw)
Anthropic Claude
|
1 2 3 4 5 6 7 8 9 |
{ "model": "claude-3-haiku-20240307", "messages": [ {"role":"user","content":"<user_input>"} ], "max_tokens": 1024, "temperature": 0.7 } |
URL: https://api.anthropic.com/v1/messages
Dify
|
1 2 3 4 5 6 |
{ "query": "<user_input>", "response_mode": "blocking", "conversation_id": "" } |
URL: https://api.dify.ai/v1/chat-messages
ポイント
-<user_input>は Bubble の動的データ Input user_input's value に置換。
- 各呼び出しは Action として保存し、後のワークフローで「API Call」アクションとして利用します。
4. Buildprint AI の導入とデバッグログ活用※
※2026 年 2 月にベータ版が公開予定という情報は、Bubble フォーラムの予告記事（2025‑11）に基づくものです。正式リリース日や価格は未確定なので、本稿では「将来的に利用可能になると想定される機能」として取り扱います。
4‑1. プラグイン追加手順
- Plugins → Add plugins → 検索バーで「Buildprint AI」→インストール
- 設定画面で API Key（Buildprint 発行）を入力し、
Observabilityを有効化
4‑2. ログの確認方法
| 手順 | 内容 |
|---|---|
| A | プレビュー実行中に画面右上の Buildprint Console アイコンをクリック |
| B | 「Request URL」「Headers」「Body」「Response」等がリアルタイムで表示される |
| C | ワークフロー内で Add action → Buildprint AI → Log request を追加すると、任意のタイミングで手動ログ取得可能 |
4‑3. デバッグ活用例
- API 呼び出しが失敗したときに Response のステータスコードやエラーメッセージを即座に確認でき、原因特定が迅速になる。
- レートリミット警告がコンソールに表示されたら、Bubble 側の「Only when」条件でリクエスト頻度を制御する。
5. Bubble AI App Builder でワークフロー自動生成
5‑1. 機能概要
自然言語で要件を書くだけで、Bubble が内部的に API Connector とワークフローを組み立てる
（2025 年末の公式アップデートで正式リリース済み）
5‑2. 実装手順
- Plugins → Bubble AI → AI App Builder を開く。
- 「Create new AI app」→
ChatAssistantと命名し、以下の要件を入力
|
1 2 3 4 |
ユーザーが「送信」ボタンをクリックしたら、 1) Input user_input の文字列を OpenAI Chat API に送る 2) 返ってきたテキストを Multiline Input ai_response に表示する |
- 「Generate」ボタンを押すと、Workflow tab に次のアクションが自動作成される
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "trigger": "When Button Send is clicked", "actions": [ { "type": "API Call", "api_name": "OpenAI Chat", "parameters": { "user_input": "<Input user_input's value>" } }, { "type": "Set State", "element": "Multiline Input ai_response", "state": "value", "value": "<Result of API Call>" } ] } |
- 必要に応じて AI Assistant や Autocomplete と組み合わせ、プロンプトの微調整や入力補完を追加できる。
6. 効果的なプロンプト設計のベストプラクティス
6‑1. システム指示・ロール設定
| 項目 | 書き方例（日本語） |
|---|---|
| 役割 | You are a friendly Japanese customer support agent. |
| 口調 | Use polite language (です・ます). |
| 制約 | Answers must be ≤ 150 characters. |
JSON に組み込む例
|
1 2 3 4 5 6 7 |
{ "messages": [ {"role":"system","content":"You are a friendly Japanese customer support agent. Use polite language and keep answers under 150 characters."}, {"role":"user","content":"<Input user_input's value>"} ] } |
Tips
- システムメッセージは固定テキストとして App secret（例:SYSTEM_PROMPT_JP) に保存し、全リクエストで再利用すると管理が楽です。
- 必ずroleキーを付与し、モデルに「assistant」「user」の区別を認識させる。
6‑2. コンテキスト保持（会話履歴）
- Repeating Group にデータ型
ChatLog（フィールド:role,content）を作成。 - ユーザー送信時に新規レコードを保存し、同時に最新 10 件までを
messages配列へマージして API 呼び出しに渡す。
|
1 2 3 4 5 6 7 |
let history = []; search_for_ChatLog:first_n(10).each(item => { history.push({role: item.role, content: item.content}); }); history.push({role:"user",content: Input user_input's value}); // API Connector のパラメータに `messages: history` を設定 |
この手順は OpenAI、Claude、Dify 全てで同様に機能します。
7. テスト・デプロイ時の注意点と運用チェックリスト
7‑1. レートリミットとコスト管理
| サービス | 主な制限 | コストシミュレーション例 |
|---|---|---|
| OpenAI (gpt‑4o‑mini) | 3,500 req / min（推定） | 10 USD/1M トークン → 30 USD/月 （≈ 300k トークン想定） |
| Anthropic Claude | 2 req/s、月間 1 M トークン上限 | 5 USD/1M トークン → 5 USD/月 |
| Dify | 10,000 req / day（無料枠） | 無料プランで十分なテストが可能 |
対策
- Bubble のボタンに Only when 条件 Do every 2 seconds を設定し、連続クリックを防止。
- Buildprint AI の Rate Limit Alert を有効化すると、超過時に Slack やメールで通知できる。
7‑2. エラーハンドリングと再試行
- API 呼び出し後に Result is not empty と Status code = 200 の両方をチェック。
429（Too Many Requests）や5xx系エラーが返ったら、Schedule API workflow を使って指数バックオフで再試行する。
|
1 2 3 |
When API Call returns status 429 → Schedule this workflow (retry) after 3 seconds When API Call returns status 500 → Schedule this workflow (retry) after 5 seconds |
- ユーザー向けには「サーバーが混雑しています。少々お待ちください」と表示する Text 要素を用意し、エラーフラグで表示/非表示を切り替える。
7‑3. デプロイ前最終チェックリスト
- [ ] API キー が全て App secrets に安全に格納されている
- [ ] Buildprint AI コンソールにエラー・警告が出ていないか確認（プレビュー画面でログを閲覧）
- [ ] 主要フローの平均応答時間が 2 秒以内 に収まっているか（Bubble → Performance タブ）
- [ ] 月間トークン使用量とコストシミュレーションが予算内に収まることを確認
8. まとめと次のステップ
- ポイント
- Bubble のビジュアルエディタで UI を作り、API Connector に LLM 呼び出しを設定すれば、コード不要でチャット機能が実装できる。
- Buildprint AI（将来的に利用可能）を併用すると、リクエストログやレートリミット警告が可視化され、デバッグが格段に楽になる。
-
AI App Builder は自然言語からワークフロー自動生成を行い、開発スピードをさらに加速させる。
-
次のアクション
- 本ガイドに沿ってローカル環境（Bubble のプレビュー）で一通り実装し、ログと応答速度を確認する。
- 必要なら プロンプト を微調整し、システム指示やコンテキスト保持のロジックを最適化。
- ビジネス要件に合わせて UI のデザインや認証フロー（ユーザー登録・ログイン）を追加し、本番環境へデプロイする。
以上で、ノーコード開発者でも 数分 で基本的な AI チャットアプリが完成します。ぜひ実際に手を動かして、独自のユースケースに合わせた拡張を試みてください！
スポンサードリンク