Guide for Adobe Commerce AI ChatBot using Open Source LLM

Magento 2 AI Chatbot using Open Source LLM(Adobe Commerce) extension integrates a chatbot in the Adobe Commerce storefront with the help of LLMs like Mistral & Llama 3.

The chatbot acts as a virtual assistant for the customers on the store. It answers the queries posted by the customers.

The AI powered chatbot answers the queries based on the products listed on the store. The customers ask product related queries and it replies accordingly.

Customers use text such as sentences, phrases and prompts to ask queries from the eCommerce chatbot.

Note: In order to run this extension, you will need to have a GPU(Graphics Processing Unit).

If you would also like to produce content for the products on your store using AI tools, then you can have a look at Magento 2 ChatGPT Extension.

Check a small demo on how the AI Chatbot works in real-time –

Order Tracking and Memory Feature –

• The AI Chatbot provides answers to all of the inquiries customers have about the products.
• Customers can ask whatever they want regarding the features and specifics of the items.
• They can communicate with the AI Assistant through a straightforward login and registration process.
• Receive immediate information about product links, prices and reviews directly from the chatbot.
• The Chatbot obtains details via product names, searchable attributes along with storefront visible properties and super attributes.
• It will also provide answers based on product configurable options, swatches and attributes.
• The admin has the control to enable or disable the extension.
• A unique name and profile photo can be provided to the chatbot by admin.
• The plugin makes use of ChromaDB as vector database and open source LLMs like Llama & Mistral to analyze queries and deliver search results.
• Search for CMS and FAQs through the Chatbbot.
• Ask order related queries to the Chatbot.
• Track and check summary and details of placed orders.
• Manage FAQ and chat history in admin backend.
• Chatbot supports for Multi Store views.
• Chat on history using pin chat option.

The following minimum system requirements are needed for this extension,

1. Python Version – 3.10

For Hosted API (OpenAI, Gemini etc.)

• RAM (4 GB)
• Space (4 GB)
• Server key and cert files (for Flask API)
• Docker
• Two ports (5000 and 8000)
• API Key (Gemini, OpenAI etc. for Embedding and Text Generation)

For Self-hosted API

• RAM (4 GB)
• Space (16 GB)
• Server key and cert files (for Flask API)
• Docker
• Two ports (5000 and 8000)
• API Key (Gemini, OpenAI etc. for Text Generation)

Note: The minimum system requirements may vary based on the data.

The installation is simple just like other standard Magento 2 extensions.

#1 Download Module

Firstly, you need to log in to the Webkul Store, go to My Account>My Purchased Products section. Verify, and then download and extract the contents of this zip folder on the system.

#2 Upload Folder

Once the module zip extracts, follow path src>app and then copy the app folder into the Adobe Commerce root directory on the server.

#3 Run Commands

After uploading the module folder, you need to run the following commands in the Adobe Commerce root directory,

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

php bin/magento indexer:reindex

php bin/magento cache:flush

php bin/magento generate:embeddings

php bin/magento generate:embeddings -p 1,2,3 -c 1,2,3 -f 1,2,3 -s 1,2,3

Multilingual Configuration

For Multilingual support, please navigate to Store>Configuration>General>Locale. Then, select your desired language from the Locale option.

Thus, in this way, a multilingual configuration can be done.

For Adobe Commerce AI Chatbot extension translation, navigate to the following path in your system src/app/code/Webkul/AIChatBot/i18n.

Open the file named en_US.csv for editing as shown in the below screenshot,

Now, upload it to the path src/app/code/Webkul/AIChatBot/i18n where the installation of Magento 2 is on the server. The module gets translated into the desired language.

The user can edit the CSV like the image below,

After editing and translating the CSV file, you need to save the translated file name according to your regional language and country code such as de_DE.CSV.

Followed by uploading the translated file to the same folder from where you have obtained it, Now your module translation is complete.

After the successful installation of the extension, the admin can view the configuration by navigating to Dashboard>Store>Configuration>AI General Configuration.

Navigation to the configuration can also be done through the side panel in the admin dashboard as shown below.

This brings up the configuration section for the chatbot.

The following configuration options are available for the admin:

General Settings

• Enable Module: Dropdown to enable or disable the extension.
• ChromaDB Endpoint: Field to input the ChromaDB server address.
• LLM Server Endpoint: Field to input the LLM server address.
• API Key: Enter the API key.
• Delete ChromaDB Collections: This button deletes the product information saved in ChromaDB.

Chatbot Configuration

• Admin Chat Profile Image: Button to upload image for the profile.
• ChatBot Name: Field to set the chatbot name which will be displayed to users on frontend.

Frontend Chat Window Option

• Chat Window Position: Dropdown to select the position of chat window.
• Chat Window Background Type: Select a background type (Solid Color or Image) for the chat window.
• Chat Window Background Image: This option is available if the background type is selected as Image.
• Choose Background Color: This option is available if the background type is selected as Solid Color.
• Chat Window Icon Background Color: Select chat window header color
• Chat Window Icon color: Select chat window text color.
• Customer Text Color: Select customer chat text color.
• Customer Reply Text Background Color: Select chatbot chat dialogue background color.
• ChatBot Reply Text Color: Select ChatBot text color.

Once the AI Chatbot has been installed and configured, it’ll be available for customer use on the storefront.

An icon to open the chatbot chat window will be available either on left or right hand bottom of the store page. The positioning of chatbot window can be set from the configurations.

After clicking on the icon, the chat window will open up and before the option to Login and Register the below section is displayed to choose a category.

Now, choose any category and the login or register as required to proceed further.

Customers who have an account on the store can directly login to use the eCommerce AI chatbot and new users can Register to use it.

Further, the customers can ask various types of queries to the chatbot related to:

• General queries to resolve general problems.
• Track and check summary and details of placed orders.
• Search Products within the store.

Some query demonstrations:

• Query by customer regarding rating of a product.

• Customer query regarding product price range.

• Order Related Queries

The customers can ask queries related to their orders by tapping the option – Check your orders.

Click and the same brings up the section where we can get the order related details.

The customers can check more details of the orders, print invoices and track orders.

Tapping the orders option displays the list of items purchased.

Tapping the item brings up more details for the same.

You can ask regarding the shipping and get the details for the same.

You can also ask about the tax applied on the respective order.

The customers can also pin any of the asked queries to the chatbot by tapping the ping icon.

This allows the customers to make use of the memory feature of the chatbot.

So, after enabling the same they can ask multiple questions to the chatbot regarding the already asked question.

Also, tapping on the ? information icon in the title of the chatbox the customers can report to the admin.

After submit report a success message is displayed and the admin can see the message in the backend.

The chatbot also replies store view wise:

Here, the admin will get three options –

• Chat Reports
• Chat History
• Manage FAQ

The customers have the functionality to also ask queries directly to the admin through the AI Chatbot window.

They will input the subject and message query and then press on Submit report.

The queries are visible to the admin in the backend as per the image below.

Here, the admin can view the complete details of the chat history of customers with the chatbot.

Admin can easily add the FAQs from the backend for the chatbot and when a customer asks a relevant faq the result is portrayed to the customers.

To add a faq tap the Add Faq button.

Here, the admin has to –

• Enable the FAQ
• Setup the FAQ
• Enter the rich content for the FAQ using the page builder option

• Choose the store view for which the FAQ will be applicable for

Lastly, save the FAQ.

Apart from that, the admin can sync CMS pages to the chatbot as required.

For a respective CMS page, edit it and enable the option sync to chatbot.

So, that’s all for the Adobe Commerce AI Chatbot Using Open Source LLM extension.

If you have any more queries or suggestions regarding AI Chatbot using Open Source, kindly reach out to us through [email protected] or raise a ticket through webkul.uvdesk.com.