This is a default UI for AI DIAL. AI DIAL can be used as headless system, but UI is recommended to learn the capability.
Originally forked from chatbot-ui and then completely reworked and published under apache 2.0 license, while code taken from original repository is still subject to original MIT license. Due to rework we introduced lots of new features such as various IDP support, model side-by-side compare, DIAL extensions support, conversation replays, branding and many more.
- AI DIAL Overlay documentation is placed here.
- Theming and branding documentation is placed here.
- In AI DIAL repository, you can find a User Guide for the AI DIAL Chat.
This project is a web application built using Next.js, a React framework with server-rendering capabilities. It can be easily customized and adapted to your needs by following the steps mentioned below.
You have the option to deploy the chat application on the Kubernetes cluster by utilizing an umbrella dial Helm chart, which also deploys other AI DIAL components. Alternatively, you can establish a dedicated Helm chart exclusively for the chat application using the dial-extension Helm chart.
Refer to Examples for guidelines.
In any case, in your Helm chart values.yaml file, it is necessary to provide application's configurations described in the Environment Variables section.
This project is managed by NX.
Before diving into the development environment, install Node.js (version >=18.18.2) and npm (version >=9.8.1) on your system. If you don't already have them, follow the instruction.
Once you have Node.js and npm installed, follow these steps to set up your developer environment:
- Clone the AI DIAL Chat repository:
git clone https://github.com/epam/ai-dial-chat.git
- Install project dependencies:
npm install- Create
.env.localfile in the\apps\chatproject directory and add the required variables with appropriate values. These three are the only required environment variables. Refer to Environment Variables to learn more.
DIAL_API_HOST="ADD_VALUE_HERE"
DIAL_API_KEY="ADD_VALUE_HERE"
NEXTAUTH_SECRET="ADD_VALUE_HERE"
- To start the development server, run:
npm run nx serve chatOnce the server is up and running, open http://localhost:3000 in your browser to view the AI DIAL Chat application.
To run the optimized production build, execute this command:
npm run nx serve chat --configuration=productionThis will start a production server on the default port 3000.
To create an optimized build of your application, run the following command:
npm run nx build chat --configuration=productionAfter running the command, you will see a .next folder created in your project directory with the optimized output.
To run the unit tests suite for your application, execute the following command:
npm run nx test chatTo run e2e tests, run the following command:
npm run nx e2e chat-e2eFor more information refer to E2E tests documentation.
AI DIAL Chat uses environment variables for configuration. All environment variables that can be used to configure settings and behavior of the application are included in the .env file.
Selected variables were predefined for the development purposes in the
.env.developmentfile.
| Variable | Required | Description | Available Values | Default values |
|---|---|---|---|---|
DIAL_API_HOST |
Yes | AI DIAL Core API Host. Refer to AI DIAL Core. |
Any string | |
DIAL_API_KEY |
Yes | AI DIAL Core API Key. Refer to AI DIAL Core to learn how to set up AI DIAL Core and define API keys. |
Any string | |
DIAL_API_VERSION |
No | AI DIAL API Version | Any string | 2024-02-01 |
APP_BASE_PATH |
No | The root directory in the file system where the application is located | Any string | |
APP_BASE_ORIGIN |
Optional | A base URL or origin of the application. Required if APP_BASE_PATH is set. |
Any string | |
ALLOWED_IFRAME_ORIGINS |
No | Specifies all URLs that are allowed to embed AI DIAl Chat within an iframe. Necessary for DIAL Overlay. |
Any origin valid format. List of space separated URLs. | none |
ALLOWED_IFRAME_SOURCES |
No | iFrame sources (e.g. visualizers) that are allowed to load content into an iframe in the AI DIAL Chat application | Any valid source format. List of space separated sources. | none |
IS_IFRAME |
No | Is iFrame flag enables/disables the DIAL Overlay | true, false |
false |
ENABLED_FEATURES |
No | Features enabled in the AI DIAL Chat application | Refer to Features to view all the available features. | |
PUBLICATION_FILTERS |
No | Defines types of publications that can be retrieved from the database | Any string. Values must be separated by a comma. | title,role |
NEXT_PUBLIC_APP_NAME |
No | Application name | Any string | AI Dial |
NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT |
No | Default system prompt | Any string | |
NEXT_PUBLIC_DEFAULT_TEMPERATURE |
No | Default temperature | 0 to 1 | |
DEFAULT_MODEL |
No | A model that is pre-selected for a new conversation. If not defined, the recently-used model or (if not available) a model from the local storage will be used. If none of the above is available - the first model from the AI DIAL Core config will be used as a pre-selected conversation model. |
Any string | First available model from AI DIAL Core config listing |
NEXT_PUBLIC_DEFAULT_ASSISTANT_SUB_MODEL |
No | A default pre-selected model for any assistant | Any string | gpt-4 |
RECENT_MODELS_IDS |
No | A list of IDs for recently-used models | Any string | |
RECENT_ADDONS_IDS |
No | A list of IDs for recently-used addons | Any string | |
THEMES_CONFIG_HOST |
No | The host URL for a custom themes configuration. Can lead to public and private resource. Refer to Theme Customization to learn more. |
Any string | Dark |
FOOTER_HTML_MESSAGE |
No | A message that will be displayed in the application's footer. Specify in HTML format. |
Any string | |
ANNOUNCEMENT_HTML_MESSAGE |
No | A message of the announcement banner. Specify in HTML format. |
Any string | |
AZURE_FUNCTIONS_API_HOST |
No | Azure Functions API Host | Any string | |
REPORT_ISSUE_CODE |
No | Report Issue Code used when sending report issue info to Azure Functions API Host | Any string | |
REQUEST_API_KEY_CODE |
No | Request API Key Code used when sending request api key info to Azure Functions API Host | Any string | |
CODE_GENERATION_WARNING |
No | Warning text regarding code generation | Any string | |
SHOW_TOKEN_SUB |
No | Show token sub in refresh login error logs | true, false |
false |
STORAGE_TYPE |
No | Type of storage used for getting and saving information generated by a user. Note: currently, api is the only supported value. |
browserStorage, api |
api |
KEEP_ALIVE_TIMEOUT |
No | Determines the maximum time in milliseconds for an idle connection before it is closed by the server. This is needed because infrastructures usually have a default keep alive timeout 60 seconds and the Next server should have a larger value. Note: this variable is used only when running a dockerfile. |
Any number string | 61000 |
MAX_PROMPT_TOKENS_DEFAULT_PERCENT |
No | A share in percent of MAX_PROMPT_TOKENS_DEFAULT_VALUE.If not set, the value of MAX_PROMPT_TOKENS_DEFAULT_VALUE applies. |
Any string | 75 |
MAX_PROMPT_TOKENS_DEFAULT_VALUE |
No | The default maximum limit of tokens permissible for any model. Applies if a limit is not defined in the AI DIAL Core configuration. |
Any string | 2000 |
CUSTOM_VISUALIZERS |
No | A list of configurations of custom visualizers. Refer to Chat Visualizer to learn more. |
[{ title, description, icon, contentType, url }] | |
ALLOW_VISUALIZER_SEND_MESSAGES |
No | Allow the addition of custom buttons or input fields to enable a custom visualizer to send SEND_MESSAGE events on behalf of a user, in the form of messages within a conversation. |
true, false |
false |
Environment Variables for the Configuration of Opentelemetry
All standard env variables you could find in the official opentelemetry documentation. If no value set for the OTEL_METRICS_EXPORTER then OpenTelemetry Prometheus Metric Exporter will be used. If value set to "otlp" the OpenTelemetry Collector Metrics Exporter for web and node will be used.
Refer to IDP Configuration to view configuration examples for supported IDP providers.
The table below presents a list of environment variables you can use to configure a specific IDP provider.
NOTE: to test the AI DIAL Chat application in an unauthenticated mode, do not provide any of these variables. The only required variable to launch the application is
NEXTAUTH_SECRET.
| Variable | Required | Description | Available Values | Default values |
|---|---|---|---|---|
NEXTAUTH_URL |
Optional. Required for production deployments. |
NextAuth URL | Any string | |
NEXTAUTH_SECRET |
Yes | NextAuth Secret (generate by openssl rand -base64 32 for example) |
Any string | |
ADMIN_ROLE_NAMES |
No | Defines default administrator role names | Any string. Values must be separated by a comma. | admin |
DIAL_ROLES_FIELD |
No | Defines the path of the roles field in JWT token | Any string. Value can be dot-separated. E.g. path realm_access.roles if there is a claim realm_access: { roles: ['admin'] } |
dial_roles |
AUTH_AUTH0_AUDIENCE |
No | Auth0 Audience | Any string | |
AUTH_AUTH0_CLIENT_ID |
No | Auth0 Client ID | Any string | |
AUTH_AUTH0_HOST |
No | Auth0 Host | Any string | |
AUTH_AUTH0_NAME |
No | Auth0 Name | Any string | |
AUTH_AUTH0_SECRET |
No | Auth0 Secret | Any string | |
AUTH_AUTH0_SCOPE |
No | Auth0 Scope | Any string | openid email profile offline_access |
AUTH_AUTH0_ADMIN_ROLE_NAMES |
No | Defines the administrator names | Any string. Values must be separated by a comma. | |
AUTH_AUTH0_DIAL_ROLES_FIELD |
No | Defines the path of the roles field in JWT token | refer to DIAL_ROLES_FIELD for details |
|
AUTH_AZURE_AD_CLIENT_ID |
No | A unique identifier for the client application registered in Azure Active Directory (AD). It is used to authenticate the client application when accessing Azure AD resources. | Any string | |
AUTH_AZURE_AD_NAME |
No | A name of the Azure AD tenant. It is used to specify the specific Azure AD instance to authenticate against. | Any string | |
AUTH_AZURE_AD_SECRET |
No | Also known as the client secret or application secret, this parameter is a confidential string that authenticates and authorizes the client application to access Azure AD resources. It serves as a password for the client application. | Any string | |
AUTH_AZURE_AD_TENANT_ID |
No | Tenant ID refers to a globally unique identifier (GUID) that represents a specific Azure AD tenant. It is used to identify and authenticate the Azure AD tenant that the client application belongs to. | Any string | |
AUTH_AZURE_AD_SCOPE |
No | This parameter specifies the level of access and permissions that the client application requests when making a request to Azure AD resources. It defines the resources and actions that the application can access on behalf of a user or itself. | Any string | openid profile user.Read email offline_access |
AUTH_AZURE_ADMIN_ROLE_NAMES |
No | Defines the administrator names | Any string. Values must be separated by a comma. | |
AUTH_AZURE_DIAL_ROLES_FIELD |
No | Defines the path of the roles field in JWT token | refer to DIAL_ROLES_FIELD for details |
|
AUTH_GITLAB_CLIENT_ID |
No | GitLab Client ID | Any string | |
AUTH_GITLAB_HOST |
No | GitLab Host | Any string | |
AUTH_GITLAB_NAME |
No | GitLab Name | Any string | |
AUTH_GITLAB_SECRET |
No | GitLab Secret | Any string | |
AUTH_GITLAB_SCOPE |
No | GitLab Scope | Any string | read_user |
AUTH_GITLAB_ADMIN_ROLE_NAMES |
No | Defines the administrator names | Any string. Values must be separated by a comma. | |
AUTH_GITLAB_DIAL_ROLES_FIELD |
No | Defines the path of the roles field in JWT token | refer to DIAL_ROLES_FIELD for details |
|
AUTH_GOOGLE_CLIENT_ID |
No | Google Client ID | Any string | |
AUTH_GOOGLE_NAME |
No | Google Name | Any string | |
AUTH_GOOGLE_SECRET |
No | Google Secret | Any string | |
AUTH_GOOGLE_SCOPE |
No | Google Scope | Any string | openid email profile offline_access |
AUTH_KEYCLOAK_CLIENT_ID |
No | Keycloak Client ID | Any string | |
AUTH_KEYCLOAK_HOST |
No | Keycloak Host | Any string | |
AUTH_KEYCLOAK_NAME |
No | Keycloak Name | Any string | |
AUTH_KEYCLOAK_SECRET |
No | Keycloak Secret | Any string | |
AUTH_KEYCLOAK_SCOPE |
No | Keycloak Scope | Any string | openid email profile offline_access |
AUTH_KEYCLOAK_ADMIN_ROLE_NAMES |
No | Defines the administrator names | Any string. Values must be separated by a comma. | |
AUTH_KEYCLOAK_DIAL_ROLES_FIELD |
No | Defines the path of the roles field in JWT token | refer to DIAL_ROLES_FIELD for details |
|
AUTH_PING_ID_CLIENT_ID |
No | PingID Client ID | Any string | |
AUTH_PING_ID_HOST |
No | PingID Host | Any string | |
AUTH_PING_ID_NAME |
No | PingID Name | Any string | |
AUTH_PING_ID_SECRET |
No | PingID Secret | Any string | |
AUTH_PING_ID_SCOPE |
No | PingID Scope | Any string | offline_access |
AUTH_PING_ID_ADMIN_ROLE_NAMES |
No | Defines the administrator names | Any string. Values must be separated by a comma. | |
AUTH_PING_ID_DIAL_ROLES_FIELD |
No | Defines the path of the roles field in JWT token | refer to DIAL_ROLES_FIELD for details |
|
AUTH_COGNITO_CLIENT_ID |
No | Cognito Client ID | Any string | |
AUTH_COGNITO_HOST |
No | Cognito Host | Any string | |
AUTH_COGNITO_NAME |
No | Cognito Name | Any string | |
AUTH_COGNITO_SECRET |
No | Cognito Secret | Any string | |
AUTH_COGNITO_SCOPE |
No | Cognito Scope | Any string | openid email profile |
AUTH_COGNITO_ADMIN_ROLE_NAMES |
No | Defines the administrator names | Any string. Values must be separated by a comma. | |
AUTH_COGNITO_DIAL_ROLES_FIELD |
No | Defines the path of the roles field in JWT token | refer to DIAL_ROLES_FIELD for details |
|
AUTH_OKTA_CLIENT_ID |
No | Okta Client ID | Any string | |
AUTH_OKTA_CLIENT_SECRET |
No | Okta Client Secret | Any string | |
AUTH_OKTA_ISSUER |
No | Okta domain issuer | Any string | |
AUTH_OKTA_SCOPE |
No | Okta Scope | Any string | openid email profile |
AUTH_OKTA_ADMIN_ROLE_NAMES |
No | Defines the administrator names | Any string. Values must be separated by a comma. | |
AUTH_OKTA_DIAL_ROLES_FIELD |
No | Defines the path of the roles field in JWT token | refer to DIAL_ROLES_FIELD for details |