Chatbot

A chatbot is a component that responds to questions sent by users in chat format with answers in chat format.
By using the pre-built generative AI model and RAG environment provided by WebPerformer-NX, you can use chatbot functions and chatbot functions that utilize RAG without complex configuration.
You can also use chatbot functions and chatbot functions that utilize RAG by integrating with resources built using external services.

Note

• To use the pre-built generative AI model and RAG environment provided by WebPerformer-NX, you need to subscribe to the Internal Generative AI Option.
• Regarding integration with external services, we assume that the user has basic knowledge of or experience with the following technologies.
  • Generative AI and RAG
  • AWS Bedrock
  • Amazon Bedrock Knowledge Bases
  • Azure OpenAI
  • Azure AI Search
  • GCP Vertex AI
  • Vertex AI Vector Search
  • Pinecone

Properties

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-generated	id	string	Auto-generated	The [id] property cannot be set by action.
2	Width	Number String	640	width	number/string	640	Component width
3	Height	Number String	480	height	number/string	480	Component height
4	X	Number String		x	number/string		X coordinate position
5	Y	Number String		y	number/string		Y coordinate position
6	Lock	Boolean	OFF	lock	boolean	false	When ON, the component stays fixed even when the screen is scrolled. When OFF, the component moves along with the screen scroll. Added in v4.1.0.
7	Background Color	String Color Picker		backgroundColor	string		Component background color
8	Border	Boolean	ON	border	boolean	true	Border display setting
9	Border Width	Number	1	borderWidth	number	1	Border width
10	Rounded Size	Number	0	roundedSize	number	0	Corner rounding
11	Border Color	String Color Picker	#DDDDDD	borderColor	string	#DDDDDD	Border color
12	Agent Name Color	String Color Picker		agentNameColor	string		Agent name text color
13	Agent Message Color	String Color Picker		agentMessageColor	string		Agent message text color
14	Agent Message Background Color	String Color Picker		agentMessageBackgroundColor	string		Agent message background color
15	User Name Color	String Color Picker		userNameColor	string		User name text color
16	User Message Color	String Color Picker		userMessageColor	string		User message text color
17	User Message Background Color	String Color Picker	#BAD6F2	userMessageBackgroundColor	string	#BAD6F2	User message background color
18	Submit Button Color	String Color Picker		submitButtonColor	string		Submit button color
19	Message Form Input Color	String Color Picker		messageFormInputColor	string		Input form text color
20	Message Form Background Color	String Color Picker		messageFormBackgroundColor	string		Input form background color
21	Disclaimer Color	String Color Picker		disclaimerColor	string		Disclaimer text color
22	Read Only	Boolean	OFF	readOnly	boolean	false	Read-only mode
23	Visibility	Boolean	ON	visibility	boolean	true	Visibility state
24	Agent Name L	String	Agent	agentName	string	Agent	Agent name
25	User Name L	String	You	userName	string	You	User name
26	Agent Avatar	String	https://template-ui-image.webperformer.jp/image/Chatbot-Agent_alpha.svg	agentAvatar	string	https://template-ui-image.webperformer.jp/image/Chatbot-Agent_alpha.svg	Agent avatar image URL
27	User Avatar	String	https://template-ui-image.webperformer.jp/image/Chatbot-User_alpha.svg	userAvatar	string	https://template-ui-image.webperformer.jp/image/Chatbot-User_alpha.svg	User avatar image URL
28	AI Service	Selection 1. Internal 2. External	External				When set to Internal, the pre-built generative AI model can be used. When set to External, resources built with external services can be connected and used. Added in v4.1.0.
29	RAG	Boolean	ON				RAG feature enablement
30	Service Name	Selection 1. AWS Bedrock 2. Azure Open AI 3. GCP Vertex AI	AWS Bedrock				External service to integrate. Disabled when AI Service is set to Internal.
31	AI Settings	JSON					AI settings JSON for external services. Disabled when AI Service is set to Internal.
32	AI Credentials	String Selection Dialog					Credential file path. Disabled when AI Service is set to Internal.
33	Internal AI Settings	JSON					AI settings JSON for the pre-built AI. Only enabled when AI Service is set to Internal. Added in v4.1.0.
34	System Prompt	String					System prompt
35	Cache Disabled	Boolean	OFF	cacheDisabled	boolean	false	Cache usage state for avatar image. Added in v4.1.0.
36	Message Form Value L	String		messageFormValue	string		Input form initial value
37	Message Form Placeholder L	String	Type your message…	messageFormPlaceholder	string	Type your message…	Input form placeholder
38	Message Form Rows	Number	1	messageFormRows	number	1	Input form row count
39	Messages L	Table	[{“role”:“agent”,“content”:“Hello! How can I help you today?”}]	messages	array of object	[{“role”:“agent”,“content”:“Hello! How can I help you today?”}]	Chat messages
40	Disclaimer L	String	AI-generated. May contain errors.	disclaimer	string	AI-generated. May contain errors.	Disclaimer text

Note

• ^L: This is a Multilingual Property.
• Default icons with opaque backgrounds can be used by setting the following paths for the [Agent Avatar] and [User Avatar] properties.
  • Agent Avatar: https://template-ui-image.webperformer.jp/image/Chatbot-Agent_opaque.svg
  • User Avatar: https://template-ui-image.webperformer.jp/image/Chatbot-User_opaque.svg
• For the value of the [AI Settings] property, refer to the ‘AI Settings Specifications’ listed below and configure the connection information according to the service you are using and whether or not RAG is available.
• For the value of the [AI Credentials] property, prepare a JSON file containing your credentials with any file name in File Manager, and set the file path according to the service you are using and whether or not you are using RAG.
• If there is a difference between the value of the [System Prompt] property and the language of the question, there may be a difference in the language of the response.
• The [System Prompt] property allows up to four lines of text.
• The [Message Form Value] property allows you to set the initial value of the message input field.
• The [Message Form Rows] property can be set to a value between 1 and 10.
• The following multi-language properties are executed with the default values without language specification when obtaining and setting values in actions.
  • [Agent Name]
  • [User Name]
  • [Message Form Value]
  • [Message Form Placeholder]
  • [Messages]
  • [Disclaimer]
• When setting a value for the [Messages] property from an action, the value must have the following structure.

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

• If “user” is specified for “role”, the value of “content” will be drawn in the transmission message area, and if “agent” is specified, it will be drawn in the response message area.

Using the Pre-built Generative AI Model

When the AI Service property is set to Internal, you can use the generative AI model and RAG environment provided by WebPerformer-NX.
The available model is as follows:

• Claude Sonnet 4.5

Note

With Claude Sonnet 4.5, only one of top-P or temperature can be specified.

Internal AI Settings Specifications

Internal AI Settings describe settings for using the generative AI model and RAG environment provided by WebPerformer-NX.
Additionally, settings to control response content can be described as desired.

Service	Pattern	Setting items (* indicates required fields)
Internal	chat	{ "chat": { "temperature": <Random value of generation (numerical value)>, "level": <Maximum token count level for response output (numerical value)> } }
	chat + rag	{ "chat": { "temperature": <Random value of generation (numerical value)>, "level": <Maximum token count level for response output (numerical value)> }, "rag": { "param": { "topK": <Maximum number of documents to retrieve (numerical value) *> "knowledgeBaseId": <Knowledge Base ID (string) *>, } } }

Note

• [temperature] can be set to a value in the range of 0.0 to 1.0.
• [topK] can be set to a value in the range of 1 to 10.
• [level] can be set to a value from the following: 10, 20, 30, 40, 50, 100, 200.
• If [level] is not set or an unsupported value is set, it will be treated as 10.

Using External Services

When the AI Service property is set to External, you can use generative AI models and RAG environments prepared with external services.
The following external services can be integrated:

• AWS Bedrock
• Azure OpenAI
• GCP VertexAI

The combinations of retrievers and embedding models supported for each service are shown in the table below.

Service	Retriever	Embedding model
AWS Bedrock	Amazon Bedrock Knowledge Bases	No setup required
	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 Settings Specifications

AI settings describe settings for using resources built with external services.
In addition, settings for controlling response content can be described as desired.
Please describe settings according to the specifications of the external services you use.

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

Note

• Even if there is only one string to specify, please describe it in string array format in the list of tokens or strings that stop output (stop, stopSequences).
• The following values can be specified for the Azure OpenAI search type (search):
  • similarity (default): vector search only
  • similarity_hybrid: hybrid of vector search and keyword search
  • semantic_hybrid: similarity_hybrid + semantic ranking processing
• For the retriever name (source), specify the following values depending on the service you are using:
  • Amazon Bedrock Knowledge Bases: ‘amazon-bedrock-knowledge-bases’
  • Azure AI Search: ‘azure-ai-search’
  • Vertex AI Vector Search: ‘vertex-ai-vector-search’
  • Pinecone: ‘pinecone’

Service	Pattern	Setting items (* indicates required fields)
AWS Bedrock	chat	{ "chat": { "region": <Region (string) *>, "model": <AI model identifier (string) *>, "topP": <Probability value (numerical value) that controls the diversity of generation>, "temperature": <Random value (numerical value) of generation>, "maxTokens": <Maximum number of tokens to output in response (numerical value)>, "stop": <List of tokens or strings that stop output (string array)> } }
	chat + rag Retriever：Amazon Bedrock Knowledge Bases	{ "chat": { "region": <Region（string）*>, "model": <AI model identifier（string）* >, "topP": <Probability value (numerical value) that controls the diversity of generation>, "temperature": <Random values (numbers) generated>, "maxTokens": <Maximum number of tokens to output in response (numerical value)>, "stop": <List of tokens or strings (string array) to stop outputting> }, "rag": { "source": <Retriever name (string) *>, "param": { "topK": <Maximum number of documents to be retrieved (numerical value) * >, "knowledgeBaseId": <Knowledge Base ID（string）*>, "region": <Region（string）*> } } }
	chat + rag Retriever：Pinecone	{ "chat": { "region": <Region（string）*>, "model": <AI model identifier（string）*>, "topP": <Probability value (numerical value) that controls the diversity of generation>, "temperature": <Random values (numbers) generated>, "maxTokens": <Maximum number of tokens to output in response (numerical value)>, "stop": <List of tokens or strings (string array) to stop outputting> }, "rag": { "source": <Retriever Name（string）*>, "param": { "indexName": <Index name (string) *>, "namespace": <Namespace (string)>, }, "embedding": { "region": <Region（string）*>, "model": <Embedding model identifier (string) *> }, "retriever": { "k": <Maximum number of documents to be retrieved (numerical value) *> } } }
Azure OpenAI	chat	{ "chat":{ "azureOpenAIApiDeploymentName": <Deployment name (string) *>, "azureOpenAIApiInstanceName": <Resource name (string) *>, "azureOpenAIApiVersion": <API version (string) *>, "topP": <Probability value (number) that controls the diversity of generation>, "temperature": <Random value (numerical value) for generation>, "maxTokens": <Maximum number of tokens to output in response (number)>, "stop": <List of tokens or strings to stop outputting (string array)>, "frequencyPenalty": <Penalty value (number) to suppress repetition of the same word>, "presencePenalty": <Penalty value (number) to encourage the introduction of new topics> } }
	chat+rag Retriever：Azure AI Search [Notes] The index structure should be designed as follows ・ id (String) => Retrievable, searchable ・ content (String) => Retrievable, searchable ・ content_vector (SingleCollection) => Searchable ・ metadata (ComplexType)   〇 source (String) => Retrievable, searchable   〇 chunk (String) => Searchable   〇 attributes (ComplexTypeCollection)     ・ key (String) => Filterable     ・ value (String) => Searchable	{ "chat": { "azureOpenAIApiDeploymentName": <Deployment name (string) *>, "azureOpenAIApiInstanceName": <Resource name (string) *>, "azureOpenAIApiVersion": <API version (string) *>, "topP": <Probability value (numerical value) that controls the diversity of generation>, "temperature": <Random values (numbers) generated>, "maxTokens": <Maximum number of tokens to output in response (numerical value)>, "stop": <List of tokens or strings (string array) to stop outputting>, "frequencyPenalty": <Penalty value (numerical value) for suppressing repetition of the same word>, "presencePenalty": <Penalty value (numerical value) to encourage the introduction of new topics> }, "rag": { "source": <Retriever Name(string)*>, "param": { "endpoint": <End point（string）*>, "indexName": <Index name (string)*>, "search": { "type": <Search type（string）> } }, "embedding": { "azureOpenAIApiDeploymentName": <Deployment Name（string）*>, "azureOpenAIApiInstanceName": <Resource name（string）*>, "azureOpenAIApiVersion": <API Version（string）*>, "dimensions": <Vectorisation dimension (numerical value)> }, "retriever": { "k": <Maximum number of documents to be retrieved (numerical value) *> } } }
	chat+rag Retriever：Pinecone	{ "chat": { "azureOpenAIApiDeploymentName": <Deployment name (string) *>, "azureOpenAIApiInstanceName": <Resource Name（string）*>, "azureOpenAIApiVersion": <API version（string）*>, "topP": <Probability value (numerical value) that controls the diversity of generation>, "temperature": <Random value (numerical value) of generation>, "maxTokens": <Maximum number of tokens to output in response (numerical value)>, "stop": <List of tokens or strings that stop output (string array)>, "frequencyPenalty": <Penalty value (numerical value) to suppress repetition of the same word>, "presencePenalty": <Penalty value (numerical value) to encourage the introduction of new topics> }, "rag": { "source": <Retriever Name（string）*>, "param": { "indexName": <Index Name（string）*>, "namespace": <Namespace (string)> }, "embedding": { "azureOpenAIApiDeploymentName": <Deployment Name（string）*>, "azureOpenAIApiInstanceName": <Resource Name（string）*>, "azureOpenAIApiVersion": <API Version（string）*>, "dimensions": <Vectorisation dimension (numerical value)> }, "retriever": { "k": <Maximum number of documents to be retrieved (numerical value) *> } } } [Supplement] Instead of azureOpenAIApiInstanceName, it is also possible to specify azureOpenAIEndpoint. { "azureOpenAIEndpoint": <Endpoint　URL（string）*>, }
GCP Vertex AI	chat	{ "chat": { "model": <AI model identifier (string) *>, "topP": <Parameters for controlling output diversity (numerical values)>, "topK": <Select from the top K tokens in terms of probability (numerical value)>, "temperature": <Random value of output (the lower the value, the more deterministic) (numerical value)>, "maxOutputTokens": <Maximum number of tokens output in response (numerical value)>, "safetySettings": <Safety settings (array)>, "stopSequences": <List of strings that stop response output (string array)> } }
	chat+rag Retriever：Vertex AI Vector Search	{ "chat": { "model": <AI Model Identifier (string) *>, "topP": <Parameters for controlling output diversity (numerical values)>, "topK": <Select from the top K tokens in terms of probability (numerical value)>, "temperature": <Random value of output (the lower the value, the more deterministic) (numerical value)>, "maxOutputTokens": <Maximum number of tokens output in response (numerical value)>, "safetySettings": <Safety settings (array)>, "stopSequences": <List of strings that stop response output (string array)> }, "rag": { "source": <Retriever Name（String）*>, "param": { "index": <Index ID (string) *>, "indexEndpoint": <Index endpoint ID (string) *>, "location": <Region (string) *>, "endpoint": <API endpoint (string) *>, "deployedIndexId": <Deployed index ID (string) *> }, "docstore": { "bucket": <Cloud storage bucket name (string) *>, "prefix": <Cloud storage prefix name (string) *> }, "embedding": { "model": <Embedding model identifier (string) *> }, "retriever": { "k": <Maximum number of documents to retrieve (numeric) *> } } }
	chat+rag Retriever：Pinecone	{ "chat": { "model": <AI model identifier (string) *>, "topP": <Parameter to control the diversity of output (numerical value)>, "topK": <Select from the top K tokens in terms of probability (numerical value)>, "temperature": <Random value of output (the lower the value, the more deterministic) (numerical value)>, "maxOutputTokens": <Maximum number of tokens to output in response (numeric value)>, "safetySettings": <Safety settings (array)>, "stopSequences": <List of strings to stop response output (string array)> }, "rag": { "source": <Retriever name (string) *>, "param": { "indexName": <Index name (string) *>, "namespace": <Namespace (string)> }, "embedding": { "model": <Embedding model identifier (string) *> }, "retriever": { "k": <Maximum number of documents to be retrieved (numerical value) *> } } }

AI Credential File Specification

AI Credential files contain authentication information for using resources built by external services.

Note

• For AWS, refer to the access key information of the IAM user who has permission to use the built resources.
• For Azure, refer to the API key information of the built resources.
• For GCP, refer to the project ID where the constructed resources are located and the key information for the service account with permissions to use the constructed resources. For scope, refer to the following.
  https://cloud.google.com/docs/authentication?hl=ja#authorization-gcp

Service	Pattern	Setting items (* indicates required fields)
AWS Bedrock	chat	{ "chat": { "credentials": { "accessKeyId": <Access Key ID (string) *>, "secretAccessKey": <Secret Access Key (string) *> } } }
	chat + rag Retriever：Amazon Bedrock Knowledge Bases	{ "chat": { "credentials": { "accessKeyId": <Access Key ID (string) *>, "secretAccessKey": <Secret access key (string) *> } }, "rag": { "param": { "clientOptions": { "credentials": { "accessKeyId": <Access Key ID (string) *>, "secretAccessKey": <Secret access key (string) *> } } } } }
	chat + rag Retriever：Pinecone	{ "chat": { "credentials": { "accessKeyId": <Access Key ID（string）*>, "secretAccessKey": <Secret Access Key（string）*> } }, "rag": { "param": { "config": { "apiKey": <API Key（string）*> } }, "embedding": { "credentials": { "accessKeyId": <Access Key ID（string）*>, "secretAccessKey": <Secret Access Key（string）*> } } } }
Azure OpenAI	chat	{ "chat":{ "azureOpenAIApiKey": <API Key（string）*> } }
	chat+rag Retriever：Azure AI Search	{ "chat": { "azureOpenAIApiKey": <API Key（string）*> }, "rag": { "param": { "key": <API Key（string）*> }, "embedding": { "azureOpenAIApiKey": <API Key（string）*> } } }
	chat+rag Retriever：Pinecone	{ "chat": { "azureOpenAIApiKey": <API Key（string）*> }, "rag": { "param": { "config": { "apiKey": <API Key（string）*> } }, "embedding": { "azureOpenAIApiKey": <API Key（string）*> } } }
GCP Vertex AI	chat	{ "chat": { "authOptions": { "credentials": <Service account key file json (object) *>, "projectId": <Project ID (string) *> } } }
	chat+rag Retriever：Vertex AI Vector Search	{ "chat": { "authOptions": { "credentials": <Service account key file json (object) *>, "projectId": <Project ID（string）*> } }, "rag": { "param": { "authOptions": { "credentials": <Service account key file json (object) *>, "projectId": <Project ID（string）*>, "scopes": <Scope (string array) *> } }, "docstore": { "authOptions": { "credentials": <Service account key file json (object) *>, "projectId": <Project ID（string）*> } }, "embedding": { "authOptions": { "credentials": <Service account key file json (object) *>, "projectId": <Project ID（string）*> } } } }
	chat+rag Retriever：Pinecone	{ "chat": { "authOptions": { "credentials": <Service account key file json (object) *>, "projectId": <Project ID (string) *> } }, "rag": { "param": { "config": { "apiKey": <API Key（string）*> } }, "embedding": { "authOptions": { "credentials": <Service account key file json (object) *>, "projectId": <Project ID (string) *> } } } }