チャットボット

チャットボットは、ユーザがチャット形式で質問を送信すると、チャット形式で回答が戻るコンポーネントです。
外部サービスで構築したリソースと連携させることで、チャットボット機能およびRAGを利用したチャットボット機能を利用することが出来ます。

ノート

外部サービスとの連携機能に関しては、以下の技術に関する基本的な知識、またはご利用経験をお持ちであることを想定しております。

• 生成AIおよびRAG
• AWS Bedrock
• Amazon Bedrock Knowledge Bases
• Azure OpenAI
• Azure AI Search
• GCP Vertex AI
• Vertex AI Vector Search
• Pinecone

ダイアログプロパティ

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
幅	数値 文字列		640
高さ	数値 文字列		480
X	数値 文字列
Y	数値 文字列
背景色	文字列 カラーピッカー
線	真偽	・オン ・オフ	オン
幅	数値		1
丸みサイズ	数値		0
色	文字列 カラーピッカー		#DDDDDD
エージェント名色	文字列 カラーピッカー
エージェントメッセージ色	文字列 カラーピッカー
エージェントメッセージ背景色	文字列 カラーピッカー
ユーザ名色	文字列 カラーピッカー
ユーザメッセージ色	文字列 カラーピッカー
ユーザメッセージ背景色	文字列 カラーピッカー		#BAD6F2
サブミットボタン色	文字列 カラーピッカー
メッセージフォーム入力文字色	文字列 カラーピッカー
メッセージフォーム背景色	文字列 カラーピッカー
注意テキスト色	文字列 カラーピッカー
読み取り専用	真偽	・オン ・オフ	オフ
表示	真偽	・オン ・オフ	オン
エージェント名	文字列		Agent
ユーザ名	文字列		You
エージェントアバター	文字列		https://template-ui-image.webperformer.jp/image/Chatbot-Agent_alpha.svg
ユーザアバター	文字列		https://template-ui-image.webperformer.jp/image/Chatbot-User_alpha.svg
RAG	真偽	・オン ・オフ	オン
サービス名	選択	・AWS Bedrock ・Azure Open AI ・GCP Vertex AI	AWS Bedrock
AI 設定	JSON
AI クレデンシャル	文字列選択ダイアログ
システムプロンプト	文字列
メッセージフォーム値	文字列
メッセージフォームプレースホルダー	文字列		・Type your message… (デフォルト) ・Type your message… (英語) ・メッセージを入力してください… (日本語)
メッセージフォーム行数	数値		1
メッセージ	表形式		・[{"role":"agent","content":"Hello! How can I help you today?"}]（デフォルト） ・[{"role":"agent","content":"Hello! How can I help you today?"}]（英語） ・[{"role":"agent","content":"こんにちは！今日はどんなことをお手伝いしましょうか？"}]（日本語）
注意テキスト	文字列		• AI-generated. May contain errors. (デフォルト) • AI-generated. May contain errors. (英語) • AI 応答のため、誤りを含む可能性があります。 (日本語)

アクションプロパティ

項目	プロパティ	データ型	オプション	デフォルト値
ID	id	string		自動設定
幅	width	number string		640
高さ	height	number string		480
X	x	number string
Y	y	number string
背景色	backgroundColor	string
線	border	boolean	・true ・false	true
幅	borderWidth	number		1
丸みサイズ	roundedSize	number		0
色	borderColor	string		#DDDDDD
エージェント名色	agentNameColor	string
エージェントメッセージ色	agentMessageColor	string
エージェントメッセージ背景色	agentMessageBackgroundColor	string
ユーザ名色	userNameColor	string
ユーザメッセージ色	userMessageColor	string
ユーザメッセージ背景色	userMessageBackgroundColor	string		#BAD6F2
サブミットボタン色	submitButtonColor	string
メッセージフォーム入力文字色	messageFormInputColor	string
メッセージフォーム背景色	messageFormBackgroundColor	string
注意テキスト色	disclaimerColor	string
読み取り専用	readOnly	boolean	・true ・false	false
表示	visibility	boolean	・true ・false	true
エージェント名	agentName	string		Agent
ユーザ名	userName	string		You
エージェントアバター	agentAvatar	string		https://template-ui-image.webperformer.jp/image/Chatbot-Agent_alpha.svg
ユーザアバター	userAvatar	string		https://template-ui-image.webperformer.jp/image/Chatbot-User_alpha.svg
メッセージフォーム値	messageFormValue	string
メッセージフォームプレースホルダー	messageFormPlaceholder	string		・Type your message… (デフォルト) ・Type your message… (英語) ・メッセージを入力してください… (日本語)
メッセージフォーム行数	messageFormRows	number		1
メッセージ	messages	array of object		・[{"role":"agent","content":"Hello! How can I help you today?"}]（デフォルト） ・[{"role":"agent","content":"Hello! How can I help you today?"}]（英語） ・[{"role":"agent","content":"こんにちは！今日はどんなことをお手伝いしましょうか？"}]（日本語）
注意テキスト	disclaimer	string		• AI-generated. May contain errors. (デフォルト) • AI-generated. May contain errors. (英語) • AI 応答のため、誤りを含む可能性があります。 (日本語)

ノート

• [エージェントアバター]および[ユーザアバター]プロパティに以下のパスを設定することで、背景が非透過のデフォルトアイコンを利用することが出来ます。
  • エージェントアバター：https://template-ui-image.webperformer.jp/image/Chatbot-Agent_opaque.svg
  • ユーザアバター：https://template-ui-image.webperformer.jp/image/Chatbot-User_opaque.svg
• [AI 設定]プロパティの値には、利用するサービスとRAGの有無に合わせて、下に記載した「AI 設定の仕様」を参考に接続情報を設定してください。
• [AI クレデンシャル]プロパティの値には、利用するサービスとRAGの有無に合わせて、ファイルマネージャに任意のファイル名でクレデンシャル情報を記述したJSONファイルを用意し、そのファイルパスを設定してください。
• チャットした内容について、リセットなどを実施することはできません。
• [システムプロンプト]プロパティの値と質問内容の言語に差異がある場合、応答の言語にも差異が発生する場合がございます。
• [システムプロンプト]プロパティは、4行まで改行をすることが出来ます。
• [メッセージフォーム値]プロパティでは、メッセージ入力フィールドの初期値を設定することが出来ます。
• [メッセージフォーム行数]プロパティには、1～10までの値を設定することが出来ます。
• 以下の複数言語対応プロパティは、アクションでの値の取得および設定は言語指定なしのデフォルト値を対象に実行されます。
  • [エージェント名]
  • [ユーザ名]
  • [メッセージフォーム値]
  • [メッセージフォームプレースホルダー]
  • [メッセージ]
  • [注意テキスト]
• [メッセージ]プロパティにアクションから値を設定する場合、設定する値は以下のような構造にする必要があります。

[
　{ "role": "user", "content": "How?"},
　{ "role": "agent", "content": "Just try"}
]

• “role”に”user”を指定した場合は送信メッセージの領域に、“agent”を指定した場合は応答メッセージの領域に”content”の値が描画されます。

外部サービス

連係することができる外部サービスは下記の通りです。

• AWS Bedrock
• Azure OpenAI
• GCP VertexAI

また、サービス毎にサポートされるリトリーバとエンベディングモデルの組み合わせは以下の表の通りとなります。

サービス	リトリーバ	エンベディングモデル
AWS Bedrock	Amazon Bedrock Knowledge Bases	設定不要
	Pinecone	Amazon Bedrock
Azure Open AI	Azure AI Search	Azure Open AI
	Pinecone	Azure Open AI
GCP Vertex AI	Vertex AI Vector Search	Vertex AI
	Pinecone	Vertex AI

AI 設定の仕様

AI 設定には、外部サービスで構築したリソースを利用するための設定を記述します。
また、任意で応答内容を制御するための設定を記述することが出来ます。
利用する外部サービスの仕様に合わせて記述してください。

AWS Bedrock：
https://docs.aws.amazon.com/ja_jp/bedrock/latest/userguide/model-parameters.html

Azure OpenAI：
https://learn.microsoft.com/ja-jp/azure/ai-foundry/openai/reference

GCP Vertex AI：
https://cloud.google.com/vertex-ai/generative-ai/docs/model-reference/inference?hl=ja#request
https://ai.google.dev/gemini-api/docs/safety-settings?hl=ja#javascript
https://cloud.google.com/vertex-ai/docs/general/googleapi-access-methods?hl=ja

ノート

• 出力を停止するトークンや文字列のリスト(stop, stopSequences)には、指定する文字列が1つの場合でも、文字列配列形式で記述してください
• Azure OpenAIの検索タイプ(search)に指定できる値は以下の通りです
  • similarity（デフォルト）：ベクトル検索のみ
  • similarity_hybrid：ベクトル検索とキーワード検索のハイブリッド
  • semantic_hybrid：similarity_hybrid ＋ セマンティックランク処理
• リトリーバ名(source)には、利用するサービスによって以下の値を記述してください
  • Amazon Bedrock Knowledge Bases：“amazon-bedrock-knowledge-bases”
  • Azure AI Search：“azure-ai-search”
  • Vertex AI Vector Search：“vertex-ai-vector-search”
  • Pinecone：“pinecone”

サービス	パターン	設定項目（＊は必須項目です）
AWS Bedrock	chat	{ "chat": { "region": <リージョン（文字列）＊>, "model": <AIモデルの識別子（文字列）＊>, "topP": <生成の多様性を制御する確率値（数値）>, "temperature": <生成のランダム値（数値）>, "maxTokens": <応答で出力する最大トークン数（数値）>, "stop": <出力を停止するトークンや文字列のリスト（文字列配列）> } }
	chat + rag リトリーバ：Amazon Bedrock Knowledge Bases	{ "chat": { "region": <リージョン（文字列）＊>, "model": <AIモデルの識別子（文字列）＊>, "topP": <生成の多様性を制御する確率値（数値）>, "temperature": <生成のランダム値（数値）>, "maxTokens": <応答で出力する最大トークン数（数値）>, "stop": <出力を停止するトークンや文字列のリスト（文字列配列）> }, "rag": { "source": <リトリーバ名（文字列）＊>, "param": { "topK": <取得ドキュメント最大件数（数値）＊>, "knowledgeBaseId": <Knowledge Base ID（文字列）＊>, "region": <リージョン（文字列）＊> } } }
	chat + rag リトリーバー：Pinecone	{ "chat": { "region": <リージョン（文字列）＊>, "model": <AIモデルの識別子（文字列）＊>, "topP": <生成の多様性を制御する確率値（数値）>, "temperature": <生成のランダム値（数値）>, "maxTokens": <応答で出力する最大トークン数（数値）>, "stop": <出力を停止するトークンや文字列のリスト（文字列配列）> }, "rag": { "source": <リトリーバ名（文字列）＊>, "param": { "indexName": <インデックス名（文字列）＊>, "namespace": <名前空間（文字列）>, }, "embedding": { "region": <リージョン（文字列）＊>, "model": <エンベディングモデルの識別子（文字列）＊> }, "retriever": { "k": <取得ドキュメント最大件数（数値）＊> } } }
Azure OpenAI	chat	{ "chat":{ "azureOpenAIApiDeploymentName": <デプロイメント名（文字列）＊>, "azureOpenAIApiInstanceName": <リソース名（文字列）＊>, "azureOpenAIApiVersion": <API のバージョン（文字列）＊>, "topP": <生成の多様性を制御する確率値（数値）>, "temperature": <生成のランダム値（数値）>, "maxTokens": <応答で出力する最大トークン数（数値）>, "stop": <出力を停止するトークンや文字列のリスト（文字列配列）>, "frequencyPenalty": <同じ語の繰り返しを抑制するためのペナルティ値（数値）>, "presencePenalty": <新しい話題の導入を促すためのペナルティ値（数値）> } }
	chat+rag リトリーバ：Azure AI Search [補足] インデックス構造は以下の設計にすること ・ id (String) => 取得可能、検索可能 ・ content (String) => 取得可能、検索可能 ・ content_vector (SingleCollection) => 検索可能 ・ metadata (ComplexType)   〇 source (String) => 取得可能、検索可能   〇 chunk (String) => 検索可能   〇 attributes (ComplexTypeCollection)     ・ key (String) => フィルター可能     ・ value (String) => 検索可能	{ "chat": { "azureOpenAIApiDeploymentName": <デプロイメント名（文字列）＊>, "azureOpenAIApiInstanceName": <リソース名（文字列）＊>, "azureOpenAIApiVersion": <API のバージョン（文字列）＊>, "topP": <生成の多様性を制御する確率値（数値）>, "temperature": <生成のランダム値（数値）>, "maxTokens": <応答で出力する最大トークン数（数値）>, "stop": <出力を停止するトークンや文字列のリスト（文字列配列）>, "frequencyPenalty": <同じ語の繰り返しを抑制するためのペナルティ値（数値）>, "presencePenalty": <新しい話題の導入を促すためのペナルティ値（数値）> }, "rag": { "source": <リトリーバ名（文字列）＊>, "param": { "endpoint": <エンドポイント（文字列）＊>, "indexName": <インデックス名（文字列）＊>, "search": { "type": <検索タイプ（文字列）> } }, "embedding": { "azureOpenAIApiDeploymentName": <デプロイメント名（文字列）＊>, "azureOpenAIApiInstanceName": <リソース名（文字列）＊>, "azureOpenAIApiVersion": <API のバージョン（文字列）＊>, "dimensions": <ベクトル化次元数（数値）> }, "retriever": { "k": <取得ドキュメント最大件数（数値）＊> } } }
	chat+rag リトリーバ：Pinecone	{ "chat": { "azureOpenAIApiDeploymentName": <デプロイメント名（文字列）＊>, "azureOpenAIApiInstanceName": <リソース名（文字列）＊>, "azureOpenAIApiVersion": <API のバージョン（文字列）＊>, "topP": <生成の多様性を制御する確率値（数値）>, "temperature": <生成のランダム値（数値）>, "maxTokens": <応答で出力する最大トークン数（数値）>, "stop": <出力を停止するトークンや文字列のリスト（文字列配列）>, "frequencyPenalty": <同じ語の繰り返しを抑制するためのペナルティ値（数値）>, "presencePenalty": <新しい話題の導入を促すためのペナルティ値（数値）> }, "rag": { "source": <リトリーバ名（文字列）＊>, "param": { "indexName": <インデックス名（文字列）＊>, "namespace": <名前空間（文字列）> }, "embedding": { "azureOpenAIApiDeploymentName": <デプロイメント名（文字列）＊>, "azureOpenAIApiInstanceName": <リソース名（文字列）＊>, "azureOpenAIApiVersion": <API のバージョン（文字列）＊>, "dimensions": <ベクトル化次元数（数値）> }, "retriever": { "k": <取得ドキュメント最大件数（数値）＊> } } } [補足] azureOpenAIApiInstanceName の代わりに、azureOpenAIEndpoint を指定することも可能 { "azureOpenAIEndpoint": <エンドポイントURL（文字列）＊>, }
GCP Vertex AI	chat	{ "chat": { "model": <AIモデルの識別子（文字列）＊>, "topP": <出力の多様性を制御するパラメータ（数値）>, "topK": <確率上位K個のトークンから選択（数値）>, "temperature": <出力のランダム値（低いほど確定的）（数値）>, "maxOutputTokens": <応答で出力される最大トークン数（数値）>, "safetySettings": <安全性設定（配列）>, "stopSequences": <応答出力を停止する文字列のリスト（文字列配列）> } }
	chat+rag リトリーバ：Vertex AI Vector Search	{ "chat": { "model": <AIモデルの識別子（文字列）＊>, "topP": <出力の多様性を制御するパラメータ（数値）>, "topK": <確率上位K個のトークンから選択（数値）>, "temperature": <出力のランダム値（低いほど確定的）（数値）>, "maxOutputTokens": <応答で出力される最大トークン数（数値）>, "safetySettings": <安全性設定（配列）>, "stopSequences": <応答出力を停止する文字列のリスト（文字列配列）> }, "rag": { "source": <リトリーバ名（文字列）＊>, "param": { "index": <インデックスID（文字列）＊>, "indexEndpoint": <インデックスエンドポイントID（文字列）＊>, "location": <リージョン（文字列）＊>, "endpoint": <APIエンドポイント（文字列）＊>, "deployedIndexId": <デプロイ済インデックスID（文字列）＊> }, "docstore": { "bucket": <クラウドストレージ バケット名（文字列）＊>, "prefix": <クラウドストレージ プリフィクス名（文字列）＊> }, "embedding": { "model": <エンベディングモデルの識別子（文字列）＊> }, "retriever": { "k": <取得ドキュメント最大件数（数値）＊> } } }
	chat+rag リトリーバ：Pinecone	{ "chat": { "model": <AIモデルの識別子（文字列）＊>, "topP": <出力の多様性を制御するパラメータ（数値）>, "topK": <確率上位K個のトークンから選択（数値）>, "temperature": <出力のランダム値（低いほど確定的）（数値）>, "maxOutputTokens": <応答で出力される最大トークン数（数値）>, "safetySettings": <安全性設定（配列）>, "stopSequences": <応答出力を停止する文字列のリスト（文字列配列）> }, "rag": { "source": <リトリーバ名（文字列）＊>, "param": { "indexName": <インデックス名（文字列）＊>, "namespace": <名前空間（文字列）> }, "embedding": { "model": <エンベディングモデルの識別子（文字列）＊> }, "retriever": { "k": <取得ドキュメント最大件数（数値）＊> } } }

AI クレデンシャルファイルの仕様

AI クレデンシャルファイルには、外部サービスで構築したリソースを利用するための認証情報を記述します。

ノート

• AWSの場合は、構築したリソースを利用する権限を持ったIAMユーザのアクセスキー情報を参照してください。
• Azureの場合は、構築したリソースのAPIキー情報を参照してください。
• GCPの場合は、構築したリソースがあるプロジェクトのID、構築したリソースを利用する権限を持ったサービスアカウントのキー情報を参照してください。
  スコープについては以下を参照してください。
  https://cloud.google.com/docs/authentication?hl=ja#authorization-gcp

サービス	パターン	設定項目（＊は必須項目です）
AWS Bedrock	chat	{ "chat": { "credentials": { "accessKeyId": <アクセスキーID（文字列）＊>, "secretAccessKey": <シークレットアクセスキー（文字列）＊> } } }
	chat + rag リトリーバ：Amazon Bedrock Knowledge Bases	{ "chat": { "credentials": { "accessKeyId": <アクセスキーID（文字列）＊>, "secretAccessKey": <シークレットアクセスキー（文字列）＊> } }, "rag": { "param": { "credentials": { "accessKeyId": <アクセスキーID（文字列）＊>, "secretAccessKey": <シークレットアクセスキー（文字列）＊> } } } }
	chat + rag リトリーバー：Pinecone	{ "chat": { "credentials": { "accessKeyId": <アクセスキーID（文字列）＊>, "secretAccessKey": <シークレットアクセスキー（文字列）＊> } }, "rag": { "param": { "config": { "apiKey": <APIキー（文字列）＊> } }, "embedding": { "credentials": { "accessKeyId": <アクセスキーID（文字列）＊>, "secretAccessKey": <シークレットアクセスキー（文字列）＊> } } } }
Azure OpenAI	chat	{ "chat":{ "azureOpenAIApiKey": <API キー（文字列）＊> } }
	chat+rag リトリーバ：Azure AI Search	{ "chat": { "azureOpenAIApiKey": <API キー（文字列）＊> }, "rag": { "param": { "key": <API キー（文字列）＊> }, "embedding": { "azureOpenAIApiKey": <API キー（文字列）＊> } } }
	chat+rag リトリーバ：Pinecone	{ "chat": { "azureOpenAIApiKey": <API キー（文字列）＊> }, "rag": { "param": { "config": { "apiKey": <APIキー（文字列）＊> } }, "embedding": { "azureOpenAIApiKey": <API キー（文字列）＊> } } }
GCP Vertex AI	chat	{ "chat": { "authOptions": { "credentials": <サービスアカウントのキーファイルjson（オブジェクト）＊>, "projectId": <プロジェクトID（文字列）＊> } } }
	chat+rag リトリーバ：Vertex AI Vector Search	{ "chat": { "authOptions": { "credentials": <サービスアカウントのキーファイルjson（オブジェクト）＊>, "projectId": <プロジェクトID（文字列）＊> } }, "rag": { "param": { "authOptions": { "credentials": <サービスアカウントのキーファイルjson（オブジェクト）＊>, "projectId": <プロジェクトID（文字列）＊>, "scopes": <スコープ（文字列配列）＊> } }, "docstore": { "authOptions": { "credentials": <サービスアカウントのキーファイルjson（オブジェクト）＊>, "projectId": <プロジェクトID（文字列）＊> } }, "embedding": { "authOptions": { "credentials": <サービスアカウントのキーファイルjson（オブジェクト）＊>, "projectId": <プロジェクトID（文字列）＊> } } } }
	chat+rag リトリーバ：Pinecone	{ "chat": { "authOptions": { "credentials": <サービスアカウントのキーファイルjson（オブジェクト）＊>, "projectId": <プロジェクトID（文字列）＊> } }, "rag": { "param": { "config": { "apiKey": <APIキー（文字列）＊> } }, "embedding": { "authOptions": { "credentials": <サービスアカウントのキーファイルjson（オブジェクト）＊>, "projectId": <プロジェクトID（文字列）＊> } } } }