Magento 2 Frontend Ai Chatbot
- for Magento 2.4.x (CE, EE)
Magento 2 Frontend AI Chatbot Extension delivers a smart, conversational shopping assistant on your store’s frontend, enabling customers to discover products, ask questions, and track orders effortlessly. Built using advanced LLMs, RAG, and a powerful Vector Database, the chatbot und...
Magento 2 Frontend AI Chatbot Extension delivers a smart, conversational shopping assistant on your store’s frontend, enabling customers to discover products, ask questions, and track orders effortlessly. Built using advanced LLMs, RAG, and a powerful Vector Database, the chatbot understands real user intent and retrieves accurate, context-aware responses directly from your Magento catalog and knowledge base. This ensures highly relevant product recommendations, precise answers, and an AI-driven shopping experience that boosts engagement, reduces support dependency, and drives higher conversions.
User Guide
Empower your Magento 2 store with the Frontend AI Chatbot Extension to deliver intelligent, AI-driven customer interactions. This extension leverages advanced Large Language Models (LLMs), Retrieval-Augmented Generation (RAG), and a Vector Database to understand user intent, maintain conversation context, and provide accurate, real-time responses. From product discovery and recommendations to order tracking and support redirection, the chatbot enhances customer experience while reducing support effort. Designed for seamless integration and ease of use, the Frontend AI Chatbot Extension helps your store stay ahead in the era of AI-powered commerce.
Features
- AI-Powered Conversational Chatbot: Enable an intelligent frontend chatbot powered by LLMs to handle customer queries naturally.
- RAG & Vector Database Integration: Uses Retrieval-Augmented Generation with a Vector DB to deliver accurate, context-aware answers and product results.
- Smart Product Discovery: Automatically detects shopping intent and displays relevant products from your Magento catalog.
- Chat Context & History Management: Maintains conversation history to ensure consistent, human-like interactions.
- Order Tracking Support: Allows both guest and logged-in customers to track orders directly through the chatbot.
- WhatsApp & Email Redirection: Seamlessly redirect users to WhatsApp or email support for quick assistance.
- Fully Managed Chatbot UI: Ready-to-use frontend interface with no additional frontend development required.
Steps:
Extension Installation
- Download the zip file
- Extract and put it into /app/code/
- Open Cli in the Magento directory and follow the below commands:
- php bin/magento s:up
- php bin/magento s:d:c
- php bin/magento s:s:d -f
- php bin/magento i:rei
- php bin/magento c:f
- Navigate to Magento Admin > System > Integrations. If an integration already exists, edit it; otherwise, create a new integration. While configuring the integration, make sure to grant API access permissions for Products, Categories, and Product Attributes.
- Next, go to Stores > Configuration > Services > OAuth and set “Allow OAuth Access Tokens to be used as standalone Bearer tokens” to Yes. Save the configuration to apply the changes.
- Verify that Python 3 is installed on the server before proceeding.
- Open the file located at app/code/Vdcstore/AiChatbot/python/.env and update the following environment variables with your store details and credentials: STORE_URL, MAGENTO_TOKEN, and OPENAI_API_KEY
- After that, navigate to app/code/Vdcstore/AiChatbot/python/ and execute the following commands to install the required dependencies and start the synchronization and server processes:
- pip install -r requirements.txt
- python3 sync_products.py
- python3 server.py
-
Configuration:
- Now let’s proceed with AI Chatbot general settings.Stores > Configuration > VDCStore > AI Chatbot

-
General Settings
- Enable the module by setting Enable Module to Yes.
- Enter your OpenAI API Key to allow the chatbot to communicate with the AI service.
- Upload a logo using the Choose Logo option if you want to display branding in the chatbot.
- Set a display name for the chatbot using the Bot Name field.
- Configure the chatbot’s welcome messages using Chatbot Greeting Text and Chatbot Greeting Text After.
-
Manage Actions
- Enable or disable chatbot actions such as Email, WhatsApp, Order Tracking, and Order Info based on your store requirements.

-
Product Settings
- In the Index in AI Chatbot field, select the product attributes that the AI chatbot should read to understand and suggest products from your catalog.
- Set the Number of Products to Display in Suggestion to control how many products are shown in chatbot responses.
-
Chatbox Design
- Choose a Background Color for the chatbot interface.
- Set a Background Color Gradient to enhance the chatbox appearance.
- Configure the Text Color for chatbot messages.
- Define the Action Button Background Color and Action Button Hover Background Color to match your store theme.
- Set the Greeting Text Color used for welcome messages.
- Choose the Open Chat Button Color displayed on the storefront.
- Use the AI Chatbot Custom CSS field to add custom styling for advanced design customization.
- Click on Save Config to apply and store all product and design settings.

-
AI Chatbot on Storefront
- On the storefront home page, the AI Chatbot appears as a floating chat widget on the bottom-right corner of the screen.
-
Chat Widget Interface
- When opened, the chatbot displays a greeting message along with quick action buttons such as Track Order, WhatsApp, Email, and Order Info.
-
Start a Conversation
- Click on the Chat Now button to start a conversation with the AI chatbot and ask questions related to products, orders, or general store queries.
-
AI Chatbot on Storefront
- On the storefront home page, the AI Chatbot appears as a floating chat widget on the bottom-right corner of the screen.
-
Chat Widget Interface
- When opened, the chatbot displays a greeting message along with quick action buttons such as Track Order, WhatsApp, Email, and Order Info.
-
Start a Conversation
- Click on the Chat Now button to start a conversation with the AI chatbot and ask questions related to products, orders, or general store queries.
-
Product Search via AI Chatbot
- Customers can ask the AI chatbot for products directly from the storefront, such as requesting specific items or categories.
-
Product Suggestions in Chat
- When a customer enters a query like “show me some backpacks”, the chatbot displays relevant product suggestions directly within the chat window.
-
Interactive Product Cards
- The chatbot shows product images, names and prices, allowing customers to quickly review available options.
-
Quick Product Navigation
- Customers can click on any suggested product in the chatbot to open the product detail page and proceed with their purchase.
-
Enhanced Shopping Experience
- This interactive product discovery helps customers find relevant products faster without manually browsing the catalog.

-
Order Tracking
- Enter the order number and the correct email address associated with the order to view the order details.

-
WhatsApp Redirection
- When a customer clicks on the WhatsApp option in the chatbot, they are redirected to WhatsApp using the WhatsApp number configured in the admin settings.

-
Email Redirection
- When a customer clicks on the Email option in the chatbot, their default email client opens with the recipient email address configured in the admin settings.
What you'll obtain with our Magento Technical Audit
With VDC Store's Magento eCommerce technical audit you'll gain expert separate in-depth analysis with an exhaustive summary of the state of your store's code grade and overall usability.
-
An organizational summary of discoveries with preferences and a brief overview
-
3rd party extensions initial review
-
An exact description of results and suggested solutions
-
Database innocence review (to secure that data is recorded precisely as planned)
-
Top preferences for your architects
-
Code quality examination (periodic reflection of your store source code)
-
Examination of possible Magento core design changes
-
Speed and execution analysis (HTTP requests, optimizations, exhale headers…)
By a technical appraisal, the client not only obtains information about the issues the store is facing but also this examination by VDC Store allows them to acquire beneficial information and concepts for setting up programs to enhance sales and conversion drivers.
Our analysis appreciates the essence of your business. We are not utilizing an automatic procedure that is used in every case. We want to make sure you end up with suggestions based on the exact condition of your store. Start the discussion about the Magento technical audit you're curious in by filling out the Contact Us form.
Why Choose VDC’s Frontend AI Chatbot?
VDC’s Frontend AI Chatbot Extension is built to transform customer interactions on your Magento store using next-generation AI. Powered by LLMs, Retrieval-Augmented Generation (RAG), and a robust Vector Database, it delivers accurate, context-aware responses and intelligent product recommendations directly from your catalog. The chatbot maintains conversation context and history to ensure natural, human-like interactions while supporting essential features like order tracking, WhatsApp redirection, and email communication. Easy to integrate and fully aligned with Magento’s ecosystem, VDC’s AI Chatbot helps reduce support load, enhance user engagement, and drive higher conversions through a seamless AI-driven shopping experience.
Explore Our Customer Reviews
Comparison
Explore Our Hyvä Theme Demos
Need More Help?
Save time by starting your support request online and we'll connect you to an expert. Save time by starting your support request.
