1. 概要

エンドユーザーが自身の状況や目的に合わせたプルダウンメニューを選ぶことで、最適な文章を生成するための機能です。

1-1. 機能の特徴

設定者は、プルダウンメニューの選択肢ごとにAIへの指示プロンプトを個別設定できます。
エンドユーザーは、プルダウンメニューから目的や回答タイプを選択することで、カスタマイズされた回答を得られます。

プルダウンを開いた時のイメージ画像

⚠️

注意

本機能は、HTMLブロックを利用したローコード実装を採用しております。

1-2. 開発の背景

従来のAIによる文章生成機能では、期待した内容と異なる文章が生成されるケースがありました。例えば、

メール文章を生成する際に、カジュアルな表現やフォーマルな表現を選択したい
機能の使い方やエラー対応など、問い合わせの種類に応じて回答を変えたい

このようなニーズにお応えするため、本機能を開発しました。

2. 設定方法

すでに作成済みのヒントが対象の場合は、2-2から開始してください。

2-1. ヒント編集画面から、AIモードのヒントを作成する

ヒントの編集画面に移動
［・・・］をクリックし、メニューの［AIモード設定(β版)］をクリック

AIモード設定を［有効］ にチェック

［保存］をクリック

2-2. 作成したヒントのHTMLブロックにテンプレートを挿入する

HTMLブロックを新規に作成
HTMLブロックに初期値として入っている記述を全て削除し、以下のテンプレートをコピー&ペーストして保存 ※すでに設定済みのデータを編集する場合は、プロンプトの内容を消去しないようにご注意ください

<div class="onb-ai-system-prompt" data-onb-prompt-key="a">
{Aの回答ルール}に従って回答してください。
</div>

<div class="onb-ai-system-prompt" data-onb-prompt-key="b">
{Bの回答ルール}に従って回答してください。
</div>

<select class="onb-ai-dropdown" data-onb-dropdown-label="ラベル">
  <option value="a">メニューA</option>
  <option value="b">メニューB</option>
</select>

<textarea type="text" class="onb-ai-prompt-input" placeholder="メッセージを入力" ></textarea>
<button class="onb-ai-send-button">送信</button>

2-3. プルダウンメニューの設定を行う

テンプレートの以下範囲を修正します。

<select class="onb-ai-dropdown" data-onb-dropdown-label="ラベル">
  <option value="a">メニューA</option>
  <option value="b">メニューB</option>
</select>

プルダウンメニューに表示する選択肢をメニューA、メニューBに入力
プルダウンを補足するための文言をラベルに入力

設定したラベルがプルダウンメニューの左に表示される様子

2-4. プロンプトの設定を行う

テンプレートの以下範囲を修正します。

<div class="onb-ai-system-prompt" data-onb-prompt-key="a">
{Aの回答ルール}に従って回答してください
</div>

各選択肢に対応するプロンプトを入力 ※各選択肢に共通する部分も、それぞれ記載してください
2-3のプルダウンメニューとプロンプトが有効に紐付いているかをチェックし、必要であれば修正（詳細は「プルダウンとプロンプトの紐付け仕様について」をご覧ください）

プルダウンとプロンプトの紐付け仕様について

2-3の<option>…</option>タグのvalue="a"と、2-4のdata-onb-prompt-key="a"の値（ここではaのテキスト）が一致しているかで判別しています。

UIのカスタマイズについて

プルダウンメニューの数を増やす場合は、2-3の<option>…</option>タグを複製してください。対応するプロンプトを作成するには2-4の<div class="onb-ai-system…</div> を複製してください。
プルダウンを入力欄の下側に表示するなど、UIの並び順を変更したい場合は、HTMLブロックの中で並び替えを行うことで可能です。

プルダウンメニューの選択肢ごとにプロンプトを個別設定したい