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:

1. Clone the AI DIAL Chat repository:

git clone https://github.com/epam/ai-dial-chat.git

2. Install project dependencies:

npm install

3. Create .env.local file in the \apps\chat project 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"

4. To start the development server, run:

npm run nx serve chat

Once 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=production

This 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=production

After 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 chat

To run e2e tests, run the following command:

npm run nx e2e chat-e2e

For 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.development file.

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.