コンテンツにスキップ
ドキュメント

チャットボット

チャットボットは、ユーザがチャット形式で質問を送信すると、チャット形式で回答が戻るコンポーネントです。
WebPerformer-NXが提供する構築済みの生成AIモデルおよびRAG環境を利用することで、複雑な設定を行わずにチャットボット機能およびRAGを利用したチャットボット機能を利用することが出来ます。
また、外部サービスで構築したリソースと連携させることで、チャットボット機能およびRAGを利用したチャットボット機能を利用することも出来ます。

プロパティ

No項目入力値デフォルト値アクションプロパティタイプアクションデフォルト値説明
1ID文字列自動設定idstring自動設定[id]プロパティはアクションで設定はできません。
2幅数値
文字列		640widthnumber/string640コンポーネントの幅
3高さ数値
文字列		480heightnumber/string480コンポーネントの高さ
4X数値
文字列		xnumber/stringX座標の位置
5Y数値
文字列		ynumber/stringY座標の位置
6位置固定真偽OFFlockbooleanfalseONの場合は画面をスクロールしてもコンポーネントが固定されて表示されます。
OFFの場合は画面をスクロールするとそれに合わせてコンポーネントも動きます。
v4.1.0で追加されたプロパティ
7背景色文字列
カラーピッカー		backgroundColorstringコンポーネントの背景色
8線真偽ONborderbooleantrue枠線の表示設定
9幅数値1borderWidthnumber1枠線の幅
10丸みサイズ数値0roundedSizenumber0角の丸み
11色文字列
カラーピッカー		#DDDDDDborderColorstring#DDDDDD枠線の色
12エージェント名色文字列
カラーピッカー		agentNameColorstringエージェント名の文字色
13エージェントメッセージ色文字列
カラーピッカー		agentMessageColorstringエージェントメッセージの文字色
14エージェントメッセージ背景色文字列
カラーピッカー		agentMessageBackgroundColorstringエージェントメッセージの背景色
15ユーザ名色文字列
カラーピッカー		userNameColorstringユーザ名の文字色
16ユーザメッセージ色文字列
カラーピッカー		userMessageColorstringユーザメッセージの文字色
17ユーザメッセージ背景色文字列
カラーピッカー		#BAD6F2userMessageBackgroundColorstring#BAD6F2ユーザメッセージの背景色
18サブミットボタン色文字列
カラーピッカー		submitButtonColorstring送信ボタンの色
19メッセージフォーム入力文字色文字列
カラーピッカー		messageFormInputColorstring入力フォームの文字色
20メッセージフォーム背景色文字列
カラーピッカー		messageFormBackgroundColorstring入力フォームの背景色
21注意テキスト色文字列
カラーピッカー		disclaimerColorstring注意テキストの文字色
22読み取り専用真偽OFFreadOnlybooleanfalse読み取り専用モード
23表示真偽ONvisibilitybooleantrue表示状態
24エージェント名 L文字列AgentagentNamestringAgentエージェントの名前
25ユーザ名 L文字列YouuserNamestringYouユーザの名前
26エージェントアバター文字列https://template-ui-image.webperformer.jp/image/Chatbot-Agent_alpha.svgagentAvatarstringhttps://template-ui-image.webperformer.jp/image/Chatbot-Agent_alpha.svgエージェントのアバター画像URL
27ユーザアバター文字列https://template-ui-image.webperformer.jp/image/Chatbot-User_alpha.svguserAvatarstringhttps://template-ui-image.webperformer.jp/image/Chatbot-User_alpha.svgユーザのアバター画像URL
28AI サービス選択
1. Internal
2. External		ExternalInternalの場合は構築済み生成AIモデルを利用することが出来ます。
Externalの場合は外部サービスで構築していただいたリソースを接続して利用することが出来ます。
v4.1.0で追加されました。
29RAG真偽ONRAG機能の有効化
30サービス名選択
1. AWS Bedrock
2. Azure Open AI
3. GCP Vertex AI		AWS Bedrock連携する外部サービス
AIサービスがInternalの場合は無効になります。
31AI 設定JSON外部サービスのAI用設定のJSON
AIサービスがInternalの場合は無効になります。
32AI クレデンシャル文字列選択ダイアログクレデンシャルファイルパス
AIサービスがInternalの場合は無効になります。
33内部 AI 設定JSON構築済みAI用設定のJSON
AIサービスがInternalの場合のみ有効になります。
v4.1.0で追加されました。
34システムプロンプト文字列システムプロンプト
35キャッシュ無効真偽OFFcacheDisabledbooleanfalseアバターのイメージに対してのキャッシュ利用状態
v4.1.0で追加されました。
36メッセージフォーム値 L文字列messageFormValuestring入力フォームの初期値
37メッセージフォームプレースホルダー L文字列Type your message…messageFormPlaceholderstringType your message…入力フォームのプレースホルダー
38メッセージフォーム行数数値1messageFormRowsnumber1入力フォームの行数
39メッセージ L表形式[{“role”:“agent”,“content”:“Hello! How can I help you today?”}]messagesarray of object[{“role”:“agent”,“content”:“Hello! How can I help you today?”}]チャットメッセージ
40注意テキスト L文字列AI-generated. May contain errors.disclaimerstringAI-generated. May contain errors.注意事項テキスト

構築済み生成AIモデルの利用

AIサービスプロパティにInternalを設定した場合は、WebPerformer-NXが提供する生成AIモデル及びRAG環境を利用することが出来ます。
利用可能なモデルは以下になります。

  • Claude Sonnet 4.5

内部 AI 設定の仕様

内部 AI 設定には、WebPerformer-NXが提供する生成AIモデル及びRAG環境を利用するための設定を記述します。
また、任意で応答内容を制御するための設定を記述することが出来ます。

サービス パターン 設定項目（＊は必須項目です）
Internal chat 

{
    "chat": {
        "temperature": ＜生成のランダム値（数値）＞,
        "level": ＜応答で出力する最大トークン数レベル（数値）＞
    }
}
chat + rag 

{
    "chat": {
        "temperature": ＜生成のランダム値（数値）＞,
        "level": ＜応答で出力する最大トークン数レベル（数値）＞
    },
    "rag": {
        "param": {
            "topK": ＜取得ドキュメント最大件数（数値）＊＞,
            "knowledgeBaseId": ＜Knowledge Base（文字列）＊＞
        }
    }
}

外部サービスの利用

AIサービスプロパティにExternalを設定した場合は、外部サービスで用意した生成AIモデルおよびRAG環境を利用することが出来ます。
連係することができる外部サービスは下記の通りです。

  • AWS Bedrock
  • Azure OpenAI
  • GCP VertexAI

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

サービスリトリーバエンベディングモデル
AWS BedrockAmazon Bedrock Knowledge Bases設定不要
PineconeAmazon Bedrock
Azure Open AIAzure AI SearchAzure Open AI
PineconeAzure Open AI
GCP Vertex AIVertex AI Vector SearchVertex AI
PineconeVertex 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

サービス パターン 設定項目（＊は必須項目です）
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 Bedrock chat 
{ 
     "chat": { 
         "credentials": { 
             "accessKeyId": <アクセスキーID（文字列）＊>, 
             "secretAccessKey": <シークレットアクセスキー（文字列）＊> 
         } 
     } 
}
chat + rag
リトリーバ：Amazon Bedrock Knowledge Bases		 
{ 
    "chat": {          
        "credentials": { 
            "accessKeyId": <アクセスキーID（文字列）＊>, 
            "secretAccessKey": <シークレットアクセスキー（文字列）＊> 
        } 
    }, 
    "rag": { 
        "param": { 
            "clientOptions": { 
                "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（文字列）＊> 
            } 
        } 
    } 
}