b77.aiでアプリにAI機能を追加する

アプリにAIを組み込むには、ふつうはAIモデルの提供会社に登録し、APIキーをサーバーに保存し、キーがブラウザに届かないようにバックエンドのエンドポイントを書く必要があります。builder77では、それがすでに済んでいます。どのアプリにも b77.ai.chat があり、呼び出しの料金はアプリの所有者の連携クレジットから引かれます。500トークンごとに1クレジットです（入力と出力の合計、1回の呼び出しで最低1）。

基本

const reply = await b77.ai.chat('Suggest three names for a coffee shop by the sea');

const answer = await b77.ai.chat(
  [{ role: 'user', content: question }],
  { system: 'You are a friendly barista. Answer in two sentences.' }
);

1回だけのプロンプトなら文字列を、会話ならメッセージの配列を渡します。任意の system 指示で、口調やルールを決められます。

json: true で構造化された出力を得る

役に立つAI機能の多くは、文章を必要としません。必要なのは、画面に表示できるデータです。json: true を指定し、欲しい形を説明してください。解析済みのオブジェクトが返ってきます。

const recipe = await b77.ai.chat(
  `Create a recipe using: ${ingredients.join(', ')}.
   Return JSON: { "title": string, "minutes": number, "steps": string[] }`,
  { json: true }
);
renderRecipe(recipe);

うまくいく5つのパターン

• 要約：長いメモ、レビュー、問い合わせを短くまとめて、ページの上部に表示します。
• 分類：届いたフォームの内容に話題や緊急度のタグを付け、b77.db.update でラベルを保存します。
• 下書きの作成：商品説明、SNSの投稿、メールの返信など。保存する前に必ず編集できるようにします。
• 抽出：自由に書かれた文章から日付、金額、名前を取り出して、各フィールドに入れます。
• アシスタント：ページの内容についての質問に答える、小さなチャット欄です。

結果を保存して、二重に払わない

呼び出しはトークン数で計算され、500トークンごとに連携クレジットを1消費します（入力と出力の合計、1回の呼び出しで最低1）。一般的な返答なら3〜4クレジットほどです。文書の要約やレコードのタグのように、結果があまり変わらないものはデータベースに保存し、元の内容が変わったときだけ作り直しましょう。

if (!note.summary) {
  const summary = await b77.ai.chat(`Summarize in one sentence: ${note.body}`);
  await b77.db.update('notes', note.id, { summary });
}

待ち時間と失敗に備えて設計する

AIの呼び出しには少し時間がかかるので、ほかのネットワーク通信と同じように扱います。ボタンを押せないようにし、読み込み中の表示を出し、エラーのときはわかりやすいメッセージを出します。b77.toast('Something went wrong', 'error') は手軽な代替手段です。builder77が作るアプリでは最初からそうなっていますが、手作業で機能を追加したときは確認しておきましょう。

プロンプトは仕様書のように書く

アプリを作るときのコツは、アプリの中で使うプロンプトにもそのまま当てはまります。長さ、口調、形式、入力がないときやおかしいときにどうするかを具体的に書きましょう。

あなたは手作り陶器のお店の商品説明を書きます。80字以内。温かく具体的に、最上級の表現は使わない。入力に詳しい情報がなければ、事実を作らずに短く中立的な説明を書くこと。

AIの出力を責任をもって扱う

• AIが作った内容であることをユーザーに伝えます。チャット画面では特に大切です。
• AIの下書きは、公開や送信の前に人が確認・編集できるようにします。
• 健康、法律、お金に関する質問では、AIの出力を最終的な答えにしないでください。
• どうしても必要な場合を除き、プロンプトに機微な個人データを含めないでください。

builder77に作ってもらう

こうしたコードを自分で書く必要はほとんどありません。「メモごとにタグを提案して保存するAIボタンを追加して」や「メニューについての質問に答えるチャットアシスタントを追加して」のようなプロンプトを試してみてください。ビルダーは b77.ai を理解しているので、画面、読み込み中の表示、保存までつないでくれます。