チャットボット

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

ノート

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

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

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	[id]プロパティはアクションで設定はできません。
2	幅	数値 文字列	640	width	number/string	640	コンポーネントの幅
3	高さ	数値 文字列	480	height	number/string	480	コンポーネントの高さ
4	X	数値 文字列		x	number/string		X座標の位置
5	Y	数値 文字列		y	number/string		Y座標の位置
6	背景色	文字列 カラーピッカー		backgroundColor	string		コンポーネントの背景色
7	線	真偽	ON	border	boolean	true	枠線の表示設定
8	幅	数値	1	borderWidth	number	1	枠線の幅
9	丸みサイズ	数値	0	roundedSize	number	0	角の丸み
10	色	文字列 カラーピッカー	#DDDDDD	borderColor	string	#DDDDDD	枠線の色
11	エージェント名色	文字列 カラーピッカー		agentNameColor	string		エージェント名の文字色
12	エージェントメッセージ色	文字列 カラーピッカー		agentMessageColor	string		エージェントメッセージの文字色
13	エージェントメッセージ背景色	文字列 カラーピッカー		agentMessageBackgroundColor	string		エージェントメッセージの背景色
14	ユーザ名色	文字列 カラーピッカー		userNameColor	string		ユーザ名の文字色
15	ユーザメッセージ色	文字列 カラーピッカー		userMessageColor	string		ユーザメッセージの文字色
16	ユーザメッセージ背景色	文字列 カラーピッカー	#BAD6F2	userMessageBackgroundColor	string	#BAD6F2	ユーザメッセージの背景色
17	サブミットボタン色	文字列 カラーピッカー		submitButtonColor	string		送信ボタンの色
18	メッセージフォーム入力文字色	文字列 カラーピッカー		messageFormInputColor	string		入力フォームの文字色
19	メッセージフォーム背景色	文字列 カラーピッカー		messageFormBackgroundColor	string		入力フォームの背景色
20	注意テキスト色	文字列 カラーピッカー		disclaimerColor	string		注意テキストの文字色
21	読み取り専用	真偽	OFF	readOnly	boolean	false	読み取り専用モード
22	表示	真偽	ON	visibility	boolean	true	表示状態
23	エージェント名	文字列	Agent	agentName	string	Agent	エージェントの名前
24	ユーザ名	文字列	You	userName	string	You	ユーザの名前
25	エージェントアバター	文字列	https://template-ui-image.webperformer.jp/image/Chatbot-Agent_alpha.svg	agentAvatar	string	https://template-ui-image.webperformer.jp/image/Chatbot-Agent_alpha.svg	エージェントのアバター画像URL
26	ユーザアバター	文字列	https://template-ui-image.webperformer.jp/image/Chatbot-User_alpha.svg	userAvatar	string	https://template-ui-image.webperformer.jp/image/Chatbot-User_alpha.svg	ユーザのアバター画像URL
27	RAG	真偽	ON				RAG機能の有効化（アクションプロパティなし）
28	サービス名	選択 1. AWS Bedrock 2. Azure Open AI 3. GCP Vertex AI	AWS Bedrock				連携する外部サービス（アクションプロパティなし）
29	AI 設定	JSON					AI設定のJSON（アクションプロパティなし）
30	AI クレデンシャル	文字列選択ダイアログ					クレデンシャルファイルパス（アクションプロパティなし）
31	システムプロンプト	文字列					システムプロンプト（アクションプロパティなし）
32	メッセージフォーム値	文字列		messageFormValue	string		入力フォームの初期値
33	メッセージフォームプレースホルダー	文字列	Type your message…	messageFormPlaceholder	string	Type your message…	入力フォームのプレースホルダー
34	メッセージフォーム行数	数値	1	messageFormRows	number	1	入力フォームの行数
35	メッセージ	表形式	[{“role”:“agent”,“content”:“Hello! How can I help you today?”}]	messages	array of object	[{“role”:“agent”,“content”:“Hello! How can I help you today?”}]	チャットメッセージ
36	注意テキスト	文字列	AI-generated. May contain errors.	disclaimer	string	AI-generated. May contain errors.	注意事項テキスト

ノート

• [エージェントアバター]および[ユーザアバター]プロパティに以下のパスを設定することで、背景が非透過のデフォルトアイコンを利用することが出来ます。
  • エージェントアバター：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（文字列）＊> } } } }